:root {
}

/*.....................Elemente.....................*/
iframe {

    border: none;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
/*..................................................*/


/*.....................Klassen......................*/
.welcomeText {
    height: 19em;
    padding-top: 6em;
    padding-left: 2.5em;
    padding-right: 2.5em;
    background-color: rgba(56, 80, 89, 1) !important;
}

.card {
    position: relative;
    top: -4em;
}

.flex-container {
    display: flex;
    align-items: center;
}

    .flex-container p {
        margin: 0;
        padding-right: 10px; /* Platz zwischen Text und Button */
    }

.embeddedIframe {
    height: calc(100vh - 36em);
}
/**/
.button {
    --background: #385059;
    --text: #fff;
    --icon: #fff;
    --icon-success: #16BF78;
    display: flex;
    outline: none;
    border: 0;
    min-width: 147px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0.375rem;
    background: var(--background);
    transition: transform 0.2s;
}

    .button:active {
        transform: scale(0.95);
    }

    .button ul {
        margin: 0;
        list-style: none;
        text-align: center;
        position: relative;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        font-weight: 500;
        color: var(--text);
    }

        .button ul li:not(:first-child) {
            top: var(--t, 13px);
            left: 0;
            position: absolute;
        }

        .button ul li:nth-child(2) {
            --t: 64px;
        }

        .button ul li:nth-child(3) {
            --t: 150px;
        }

    .button .icon {
        width: 24px;
        height: 24px;
        position: relative;
        display: inline-block;
        vertical-align: top;
        transform: translateY(calc(var(--y, 0) * 1px));
    }

        .button .icon svg {
            width: var(--w, 14px);
            height: var(--h, 15px);
            display: block;
            fill: none;
            stroke: var(--s, var(--icon));
            stroke-width: var(--sw, 2);
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        .button .icon > svg,
        .button .icon div {
            left: var(--l, 7px);
            top: var(--t, 2px);
            position: absolute;
        }

        .button .icon > svg {
            transform: translateY(calc(var(--y, 0) * 1px));
        }

            .button .icon > svg polyline,
            .button .icon > svg line {
                stroke-dasharray: var(--a, 12px);
                stroke-dashoffset: var(--o, 0);
                stroke: var(--s, var(--icon));
                transition: stroke-dashoffset var(--d, 0.15s), stroke 0.4s;
            }

            .button .icon > svg polyline {
                --d: .25s;
                --a: 17px;
                --o: 5.5px;
            }

        .button .icon div {
            --w: 24px;
            --h: 24px;
            --l: 0;
            --t: 8px;
            --sw: 1.5;
        }

    .button.loading ul {
        -webkit-animation: text 1750ms linear forwards 100ms;
        animation: text 1750ms linear forwards 100ms;
    }

    .button.loading.complete .icon svg line {
        --o: 12px;
    }

    .button.loading.complete .icon svg polyline {
        --o: 0;
        --s: var(--icon-success);
    }

@-webkit-keyframes text {
    18%, 82% {
        transform: translateY(-190%);
    }

    100% {
        transform: translateY(-457%);
    }
}

@keyframes text {
    18%, 82% {
        transform: translateY(-190%);
    }

    100% {
        transform: translateY(-457%);
    }
}
/**/

/*..................................................*/


/*.....................Id's.........................*/

/*..................................................*/


/*.....................Scrollbar....................*/

/*..................................................*/


/*...................Media Querrys..................*/

/*..................................................*/