/*
 * Copyright (c) 2025 microdat GmbH. Alle Rechte vorbehalten.
 *
 * Dieser Code ist Eigentum von microdat GmbH und darf in keiner Weise
 * verwendet, kopiert, modifiziert, verteilt, lizenziert, vermarktet oder anderweitig
 * genutzt werden. Jegliche unbefugte Nutzung ist strengstens untersagt und wird
 * rechtlich verfolgt.
 *
 * Keine Garantie oder Haftung für Fehler, Schäden oder Verluste, die durch diesen Code entstehen.
 */

.main.main-raised {
    & article.section.section-text {
        padding-top: 0 !important;
    }
}

#baubat-hero {
    position: absolute;
    transform: translate(-50%, calc(-100% - 1em)) scale(0.8);
    background: #fff;
    border-radius: 1em;
    padding: 0.1em 1em;
    display: block;
    margin: auto;
    left: 50%;

    p {
        margin: 0;
    }
}

#top-group {
    @media (min-width: 768px) {
        font-size: max(12px, 0.96dvw);
    }

    #top-info {
        position: relative;
        padding: 1em;
        z-index: 0;

        border-radius: var(--glass-border-radius);
        background: var(--glass-background);
        backdrop-filter: var(--glass-backdrop-filter);

        &::before {
            inset: 0;
            z-index: -1;
            content: "";
            position: absolute;
            border-radius: inherit;
            mask: var(--glass-before-mask);
            opacity: var(--glass-before-opacity);
            background: var(--glass-before-background);
            border: var(--glass-border-width) solid transparent;
        }

        & > div {
            & > p {
                font-size: 200%;
            }

            & > div.is-content-justification-space-between {
                justify-content: space-evenly !important;

                & > p {
                    margin-bottom: 1em;

                    & > i {
                        margin-right: 1em;
                        font-size: 140%;
                        color: var(--color-microdat);
                    }
                }
            }
        }
    }

    #top-slider {
        --paragraph-0-max-height: auto;
        --paragraph-1-max-height: auto;
        --paragraph-2-max-height: auto;
        --paragraph-3-max-height: auto;

        margin-top: 2em;

        & > .swiper-button-next,
        & > .swiper-button-prev {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            transform-origin: center center;

            box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

            &.swiper-button-next {
                transform: scale(1) translateX(-50%);
            }

            &.swiper-button-prev {
                transform: scale(1) translateX(50%);
            }

            background-color: var(--glass-background);
            backdrop-filter: blur(2px);
            padding: var(--glass-border-radius);
            border-radius: var(--glass-border-radius);
            color: inherit !important;

            &.swiper-button-disabled {
                pointer-events: none;
                transform: scale(0);
                box-shadow: none;
            }

        }

        & > .swiper {
            overflow: visible;

            & .swiper-wrapper > .swiper-slide {
                /**
                    Hier innerhalb der gesamten Product-Card
                 */

                &:nth-child(3) > div, &:first-child:last-child > div {
                    max-width: 400px;
                    margin: auto;

                    &::before {
                        background: var(--color-microdat-opaque);
                        content: 'Unsere Empfehlung' !important;
                        color: white !important;
                    }

                    & > div::before {
                        opacity: 1 !important;
                    }
                }

                & > div {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    &::before {
                        content: '-';
                        margin-bottom: 1em;
                        border-radius: 1em;
                        padding: 0.25em 1em;
                        color: transparent;
                    }

                    & > div {
                        position: relative;
                        padding: 1em;
                        z-index: 0;

                        border-radius: var(--glass-border-radius);
                        background: var(--glass-background);
                        backdrop-filter: var(--glass-backdrop-filter);

                        &::before {
                            inset: 0;
                            z-index: -1;
                            content: "";
                            position: absolute;
                            border-radius: inherit;
                            mask: var(--glass-before-mask);
                            opacity: var(--glass-before-opacity);
                            background: var(--glass-before-background);
                            border: var(--glass-border-width) solid transparent;
                        }

                        & > div:nth-child(1) {
                            /**
                                Kopfteil
                             */
                            padding: 0 1em;
                            font-size: 90%;
                            font-weight: bold;

                            & > .target {

                                position: relative;
                                padding: 0.5em;

                                &::before {
                                    content: "";
                                    display: block;
                                    position: absolute;

                                    width: 100%;
                                    height: 100%;

                                    top: 0;
                                    left: 0;
                                    z-index: -1;

                                    transform-origin: 0% 30%;
                                    transform: skew(-5deg, 0deg);
                                }

                                &.betrieb {
                                    &::before {
                                        background-color: #00ABE6;
                                    }
                                }

                                &.kanzlei {
                                    &::before {
                                        background-color: #E6D700;
                                    }
                                }
                            }
                        }

                        & > p:nth-child(2) /* Title */
                        {
                            font-weight: bold;
                            font-size: 120%;
                        }

                        & > div:nth-child(3) /* Description */
                        {
                            margin-top: 0;

                            &.synchronized-height {
                                min-height: var(--paragraph-0-max-height);
                            }

                            & > .station-type {
                                display: none;

                                margin: auto auto 1em 0;
                                background-color: white;
                                border-radius: 1em;
                                padding: 0.5em 1em;
                                font-size: 90%;

                                & > p {
                                    margin-bottom: 0;
                                }

                                & > p > .fas {
                                    color: var(--color-microdat-opaque);
                                }
                            }

                            & > .pre-price {
                                width: 100%;
                                font-size: 70%;
                                gap: 1em;

                                & > p {
                                    display: inline-block;
                                    margin-bottom: 0;
                                    padding: 0.1em 0.7em;
                                    border-radius: 0.5em;
                                    background: var(--color-microdat-light);
                                }
                            }
                        }

                        & > div:nth-child(4) /* Price area */
                        {

                            margin-top: 0.5em;
                            margin-left: 1em;

                            &.synchronized-height {
                                min-height: var(--paragraph-1-max-height);
                            }

                            & > div {
                                & > p {
                                    margin-bottom: 0;
                                }

                                & > .full-price {
                                    --rotation: -20deg;
                                    position: relative;
                                    margin-right: 0.2em;
                                    font-size: 150%;
                                    font-weight: bold;
                                    opacity: 0.8;

                                    &::before {
                                        position: absolute;
                                        content: "";
                                        top: 50%;
                                        left: 0;
                                        right: 0;
                                        border-top: 2px solid;

                                        -webkit-transform: rotate(var(--rotation));
                                        -moz-transform: rotate(var(--rotation));
                                        -ms-transform: rotate(var(--rotation));
                                        -o-transform: rotate(var(--rotation));
                                        transform: rotate(var(--rotation));
                                    }
                                }

                                & > .price /* Price */
                                {
                                    font-size: 200%;
                                }
                            }

                            & > p:not(.price) {
                                font-size: 90%;
                                opacity: 0.9;
                            }
                        }

                        & > div:nth-child(5) /* Button und Feature Intro */
                        {
                            margin-block-start: 0;

                            &.synchronized-height {
                                min-height: var(--paragraph-2-max-height);
                            }

                            & > div {
                                margin-bottom: 1em;
                                width: 100%;

                                & > div {
                                    width: 100%;

                                    &.current > a {
                                        color: #3C4858;
                                        background-color: rgb(230, 254, 230);

                                        &:hover {
                                            background-color: rgba(230, 254, 230, 0.4);
                                        }
                                    }

                                    & > a {
                                        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
                                        opacity: 1 !important;

                                        color: white;
                                        width: 100%;
                                        border: 0px;
                                        padding: 0.5em;

                                        background-color: var(--color-microdat-opaque);
                                        border-radius: var(--button-border-radius);

                                        &:hover {
                                            background-color: var(--color-microdat);
                                        }
                                    }
                                }
                            }

                            & > p:not(.start) {
                                position: relative;
                                padding-left: 2rem;

                                &::before {
                                    position: absolute;

                                    height: 1rem;
                                    left: 0.5rem;
                                    right: 1.5rem;
                                    top: 0.5rem;
                                    content: '';

                                    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPCEtLSFGb250IEF3ZXNvbWUgRnJlZSB2Ny4xLjAgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNSBGb250aWNvbnMsIEluYy4tLT4KICA8cGF0aCBmaWxsPSIjZTUwMDNiIiBkPSJNOS40IDIzMy40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM2wxNjAgMTYwYzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwczEyLjUtMzIuOCAwLTQ1LjNMMTA5LjMgMjg4SDQ4MGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkgxMDkuM2wxMDUuNC0xMDUuNGMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTYwIDE2MHoiLz4KPC9zdmc+Cg==');
                                    background-repeat: no-repeat;
                                }
                            }
                        }

                        & > div:nth-child(6) /* Feature-List */
                        {
                            margin-top: 0;

                            &.synchronized-height {
                                min-height: var(--paragraph-3-max-height);
                            }

                            & > p {
                                margin-bottom: 0;
                                font-size: 80% !important;
                            }

                            & > ul {
                                margin-top: 0;
                                font-size: inherit;
                                padding-left: 2rem;
                                list-style: none;

                                & > li {
                                    position: relative;

                                    &::before {
                                        position: absolute;

                                        height: 1rem;
                                        left: -1.5rem;
                                        right: -0.5rem;
                                        top: 0.5rem;
                                        content: '';

                                        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGZpbGw9IiNlNTAwM2IiIGQ9Ik00MzQuOCA3MC4xYzE0LjMgMTAuNCAxNy41IDMwLjQgNy4xIDQ0LjdsLTI1NiAzNTJjLTUuNSA3LjYtMTQgMTIuMy0yMy40IDEzLjFzLTE4LjUtMi43LTI1LjEtOS4zbC0xMjgtMTI4Yy0xMi41LTEyLjUtMTIuNS0zMi44IDAtNDUuM3MzMi44LTEyLjUgNDUuMyAwbDEwMS41IDEwMS41IDIzNC0zMjEuN2MxMC40LTE0LjMgMzAuNC0xNy41IDQ0LjctNy4xeiIvPjwvc3ZnPg==');
                                        background-repeat: no-repeat;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.zert-img {
    float: left;
    max-width: 10%;
    margin-top: .5em;
    margin-right: .5em;
}