@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(Assistant.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(Assistant.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(Assistant.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: "Assistant";
    src: local("Assistant"),
        url(Assistant.ttf) format("truetype");
}

:root {
    --font-headline: #50504F;
    --font-text: #3C3C3B;
    --font-ligh-text: #AAAAAA;
    --color-signal: #FA830B;
    --background-dark: #F7F8F3;
    --background-light: #FEFEFE;
    font-family: "Assistant", sans-serif;
    font-optical-sizing: auto;
}


html,
body {
    width: 100%;
    height: 100%;
    background-color: var(--background-dark);
    margin: 0;
}

.app {

    min-height: 800px;

}

@media only screen and (max-width: 1050px) {

    .index-nav {
        width: 100%;
        height: 100px;
        /* background-color: palevioletred; */
    }

    .index-nav-small {
        width: 25%;
        height: 100%;
        float: left;
        /* background-color: #e74c3c; */
    }

    .index-nav-right {
        float: right;
        width: 30px;
        height: 30px;
        margin-right: 22px;
        margin-top: 30px;
        cursor: pointer;
    }

    .index-nav-small .nav-opener {
        float: left;
        width: min(40px, 50%);
        height: 31px;
        margin-top: 30px;
        margin-left: 20px;
        cursor: pointer;
    }

    .index-nav-small .nav-opener .nav-line {
        float: right;
        width: 100%;
        height: 7px;
        margin-bottom: 5px;
        border-radius: 5px;
        background-color: var(--color-signal);
    }

    .index-nav-big {
        width: 50%;
        height: 100%;
        float: left;
        text-align: center;
        /* background-color: gray; */
        text-decoration: none;
    }

    .nav-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1001;
        background-color: var(--background-dark);
    }

    .nav-overlay a {
        display: block;
        width: 200px;
        height: 20px;
        line-height: 20px;
        color: var(--font-headline);
        font-weight: bolder;
        font-size: 20px;
        margin-top: 30px;
        margin-left: 30px;
        filter: drop-shadow(var(--color-signal) 0px 0px 6px);
        cursor: pointer;
        text-decoration: none;
    }

    .nav-overlay .footerNav {
        filter: none;
        font-size: 15px;
        height: 15px;
        line-height: 15px;
        margin-top: 15px;
    }

    h4 {
        font-weight: bolder;
        color: var(--font-headline);
        line-height: 20px;
        font-size: 20px;
    }

    .header {
        margin: 0 auto;
        margin-top: 0px;
        width: 100%;
        text-align: center;
    }

    .header span {
        color: var(--font-headline);
        font-weight: bolder;
        font-size: 20px;
    }

    .header .colored {
        color: var(--color-signal);
        text-decoration: underline;
    }

    .carousel {
        width: min(100%, 600px);
        height: 310px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .carousel .middle {
        width: min(100%, 600px);
        height: 300px;
        object-fit: cover;
        border-radius: 15px;
        filter: drop-shadow(0px 0px 4px);
        margin-top: 5px;
        /* position: absolute; */
        /* margin-left: 187.5px; */
    }

    .carousel .subtitle {
        font-weight: 700;
        font-size: 18px;
        color: var(--font-headline);
        margin: 0 auto;
    }

    .subheader {
        width: min(100%, 600px);
        margin: 0 auto;
        margin-top: 5px;
        color: var(--font-text);
        font-weight: 600;
        font-size: 17px;
        text-align: center;
    }

    .center-wrapper {
        width: min(100%, 600px);
        margin: 0 auto;
    }

    .index-content {
        width: 280px;
        margin: 0 auto;
        margin-top: 10px;
        font-weight: 600;
        font-size: 17px;
        color: var(--font-text);
    }

    .index-content span {
        color: var(--color-signal);
    }


    .element {
        width: 100%;
        height: 90px;
        font-weight: 600;
        font-size: 16px;
        color: var(--font-text);
        background-color: var(--background-light);
    }


    .variants {
        width: 95%;
        height: 50px;
        line-height: 50px;
        max-width: 900px;
        margin: 0 auto;
        margin-top: 10px;
        /* background-color: aquamarine; */
        text-align: center;
        display: flex;
        flex-wrap: wrap;
    }

    .variant {
        margin: 0 auto;
        flex: 1 0 18%;
        text-align: center;
        line-height: 20px;
        width: 150px;
        cursor: pointer;
    }

    .variantTitle {
        font-size: 18px;
        font-weight: 700;
        color: var(--font-text);
        text-decoration: underline;
    }

    .variantSubTitle {
        font-size: 16px;
        font-weight: 500;
        color: var(--font-headline);
    }

    .variantPuffer {
        height: 120px;
    }

    .selected {
        color: var(--color-signal);
        text-decoration: none;
    }


    .text {
        width: 95%;
        max-width: 1100px;
        margin: 0 auto;
        margin-top: 25px;
        padding-bottom: 20px;

    }

    .text h4 {
        text-align: center;
        font-weight: 700;
        font-size: 24px;
        color: var(--font-headline);
    }

    .text span {
        font-weight: 500;
        font-size: 18px;
        color: var(--font-text);
    }

    .text .reference {
        font-weight: 500;
        font-size: 16px;
        color: var(--font-text);
        word-break: break-word;
    }

    table,
    th,
    td {
        border: 1px solid black;
        font-weight: 500;
        font-size: 18px;
        color: var(--font-text);
    }

    .note {
        font-weight: 500;
        font-size: 15px;
        color: var(--font-text);
    }


    .team {
        width: 100%;
        text-align: center;
    }


    .team a {
        color: var(--font-text);
        font-size: 16px;
        font-weight: 500;
    }

    .team h4 {
        color: #0f0f0f;
    }

    .team h3 {
        color: var(--font-text);
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
        margin: 0 auto;
    }

    .member {
        width: 95%;
        /* background-color: #3498db; */
        margin: 0 auto;
        margin-top: 20px;
        text-align: center;
    }

    .member img {
        border-radius: 10px;
        filter: drop-shadow(#6d6d6dce 0px 0px 15px);
        width: min(65%, 280px);
        object-fit: cover;
    }


    .caution {
        width: min(90%, 400px);
        margin: 0 auto;
    }

    .caution p {
        color: var(--font-text);
        font-weight: 600;
    }

    .teaser {
        width: min(96%, 1200px);
        text-align: center;
        margin: 0 auto;
        margin-top: 15px;
    }

    .teaser h4 {
        margin: 0 auto;
        margin-top: 10px;
        color: #0f0f0f;
    }

    .teaser video, .teaser img {
        width: 100%;
        margin-top: 5px;
        border-radius: 5px;
        filter: drop-shadow(#6d6d6dce 0px 0px 5px);
    }

    .teaser p {
        color: var(--font-text);
        font-size: 16px;
        font-weight: 500;
        margin: 0 auto;
    }


    .zugang_block {
        width: 85%;
        margin: 0 auto;
        text-align: center;
        margin-top: 20px;
    }

    .zugang_block h4 {
        margin: 0 auto;
        margin-bottom: 15px;
        font-size: 22px;
        color: var(--color-signal);
    }

    .zugang_block span {
        color: var(--font-text);
        font-size: 16px;
        font-weight: 500;
    }

    .zugang_block a {
        color: black;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }


    .overlay {
        position: absolute;
        width: 95%;
        left: 0; 
        right: 0; 
        margin-inline: auto; 
        margin-top: 20px;
        text-align: center;
        background-color: var(--background-dark);
    }

    .overlay span {
        font-weight: 500;
        color: var(--font-text);
        margin: 0 auto;
    }

    .overlay h4 {
        margin: 0 auto;
        margin-bottom: 10px;
    }


    .overlay .login {
        background-color: transparent;
        border-style: solid;
        border-color: var(--color-signal);
        width: 170px;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        margin: 0 auto;

        color: var(--font-headline);
        font-weight: bold;
        font-size: 18px;

        cursor: pointer;
        text-decoration: none;
    }

    .overlay a {
        color: black;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }

    .overlay .consented { 
        border-color: #beeea2;
    }

    .overlay .notconsented { 
        border-color: #ff6464;
    }


    input,
    label {
        display: block;
        font-weight: 700;
        font-size: 18px;
        color: var(--font-headline);
    }

    input[type=text],
    input[type=number],
    input[type=password],
    select {
        width: 100%;
        padding: 5px 8px;
        margin: 4px 0;
        box-sizing: border-box;
        border: 2px solid var(--color-signal);
        border-radius: 4px;
    }

    input[type=file] {
        margin-top: 4px;
        padding: 6px 0px;
        width: 100%;
        height: 26px;
        border: 2px solid var(--color-signal);
        border-radius: 4px;
    }

    .videos {
        width: 95%;
        height: 490px;
        margin: 0 auto;
        overflow-y: scroll;
        margin-top: 10px;
    }

    .video {
        width: 330px;
        height: 410px;
        background-color: var(--background-dark);
        float: left;
        margin-left: 26.7px;
        margin-top: 0px;
        margin-bottom: 20px;
        border-radius: 5px;
        filter: drop-shadow(#fa820b4f 0px 0px 5px);
        position: relative;
    }

    .video h4 {
        font-size: 20px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 700;
        margin-top: 2px;
        margin-left: 10px;
        color: var(--font-headline);
    }

    .video h3 {
        font-size: 18px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-left: 10px;
        color: var(--font-ligh-text);
    }

    .video li {
        font-size: 16px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 6px;
        /* margin-left: 10px; */
        color: var(--font-text);
    }

    .thumbnail {
        width: 330px;
        height: 270px;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .thumbnail img {
        width: 330px;
        height: 260px;
        border-radius: 5px;
        object-fit: cover;
        filter: drop-shadow(0px 0px 2px);
    }

    .thumbnail-overlay {
        position: absolute;
        margin-top: -270px;
        height: 415px;
        width: 330px;
        opacity: 0;
        transition: .2s linear;
        background-color: #ffffffe5;
        border-radius: 5px;
    }

    .thumbnail:hover .thumbnail-overlay {
        opacity: 1;
    }

    .thumbnail:focus .thumbnail-overlay  {
        opacity: 1;
    }

    .thumbnail-text {
        color: black;
        font-size: 20px;
        font-weight: 500;
        position: absolute;
        margin-left: 20px;
        text-align: left;
        width: 300px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }



    .video-container {
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        background-color: var(--background-dark);
        border-radius: 5px;
        /* filter: drop-shadow(0px 0px 5px); */
        box-shadow: 1px 1px 5px 1px;
        overflow: hidden;
    }

    .video-container img {
        width: 100%;
        object-fit: cover;
        /* filter: drop-shadow(0px 0px 5px); */
        box-shadow: 1px 1px 5px 1px;
        overflow: hidden;
    }

    .video-container video {
        width: 750px;
        height: 440px;
        object-fit: cover;
        /* filter: drop-shadow(0px 0px 5px); */
    }

    .video-container li {
        font-size: 18px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 6px;
        margin-left: 30px;
        color: var(--font-text);
    }

    .video-container h3 {
        font-size: 19px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-left: 30px;
        color: var(--font-ligh-text);
    }


    summary {
        font-size: 20px;
        font-weight: 600;
        color: var(--font-headline);
    }

    details {
        /* margin-top: 40px; */
        margin-bottom: 20px;
        text-align: left;
    }

    .details {
        font-size: 16px;
        font-weight: 500;
        color: var(--font-text);
    }

}


@media only screen and (min-width: 1050px) {

    .teaser {
        width: 80%; height: 550px; margin: 0 auto; margin-top: 20px; text-align: center;
    }

    .teaser video {
        width: 900px;
        border-radius: 5px;
    }

    .teaser h4 {
        color: var(--font-text);
    }

    h4 {
        font-weight: bolder;
        color: var(--font-headline);
        line-height: 20px;
        font-size: 20px;
    }

    a {
        /* text-decoration-color: var(--color-signal); */
        color: var(--font-text);
    }

    .index-nav {
        width: 100%;
        height: 85px;
        /* background-color: rebeccapurple; */
        margin: 0 auto;
        text-align: center;
    }

    .index-nav-small {
        width: 25%;
        height: 80px;
        float: left;
        text-decoration: none;
        /* background-color: rgb(168, 137, 199); */
    }

    .index-nav-small .login {
        background-color: transparent;
        border-style: solid;
        border-color: var(--color-signal);
        width: 100px;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        margin-top: 40px;
        float: right;
        margin-right: 50px;

        color: var(--font-headline);
        font-weight: bold;
        font-size: 16px;

        /* cursor: pointer; */
        text-decoration: none;
    }

    .index-nav-small .nav-opener {
        float: right;
        width: 40px;
        height: 31px;
        margin-right: 40px;
        margin-top: 40px;
        cursor: pointer;
    }

    .index-nav-small .nav-opener .nav-line {
        float: right;
        width: 40px;
        height: 7px;
        margin-bottom: 5px;
        border-radius: 5px;
        background-color: var(--color-signal);
    }

    .nav-overlay {
        width: 100%;
        height: 95px;
        background-color: var(--background-dark);
        margin: 0 auto;
        text-align: center;
        position: absolute;
        filter: drop-shadow(#b9b9b9ce 0px 0px 20px);
    }

    .index-nav-big {
        width: 50%;
        height: 80px;
        line-height: 80px;
        float: left;
        /* background-color: rgb(201, 176, 226); */
    }

    .index-nav-big a {
        color: var(--font-headline);
        font-weight: bolder;
        font-size: 18px;
        margin-top: 0px;
        margin-left: 30px;
        line-height: 70px;
        filter: drop-shadow(var(--color-signal) 0px 0px 6px);
        cursor: pointer;
        text-decoration: none;
    }

    .nav-overlay .index-nav-big a {
        color: var(--font-headline);
        font-weight: bolder;
        font-size: 16px;
        margin-top: 0px;
        margin-left: 30px;
        line-height: 70px;
        filter: drop-shadow(var(--color-signal) 0px 0px 6px);
        cursor: pointer;
        text-decoration: none;
    }

    .nav-overlay .index-nav-big span {
        line-height: 95px;

    }

    .index-nav-big .subpage {
        color: var(--font-headline);
        font-weight: bolder;
        font-size: 26px;
        cursor: default;
        filter: none;
        margin-top: 15px;
    }


    .header {
        margin: 0 auto;
        margin-top: 30px;
        width: 450px;
        height: 75px;
        text-align: center;
    }

    .header span {
        color: var(--font-headline);
        font-weight: bolder;
        font-size: 30px;
    }

    .header .colored {
        color: var(--color-signal);
        text-decoration: underline;
    }


    .carousel {
        width: 850px;
        height: 330px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .carousel .middle {
        width: 475px;
        height: 330px;
        object-fit: cover;
        border-radius: 15px;
        filter: drop-shadow(0px 0px 10px);
        position: absolute;
        margin-left: 187.5px;
    }



    .carousel .left {
        width: 265px;
        height: 260px;
        object-fit: cover;
        border-radius: 15px;
        filter: drop-shadow(0px 0px 10px);
        position: absolute;
        margin-top: 35px;
    }

    .carousel .subtitle {
        font-weight: 700;
        font-size: 18px;
        color: var(--font-headline);
        margin: 0 auto;
    }

    .subheader {
        width: 850px;
        height: 30px;
        margin: 0 auto;
        margin-top: 30px;
        color: var(--font-text);
        font-weight: 600;
        font-size: 22px;
        text-align: center;
    }


    .index-content {
        width: 350px;
        margin: 0 auto;
        margin-top: 50px;
        font-weight: 600;
        font-size: 22px;
        color: var(--font-text);
    }

    .index-content span {
        color: var(--color-signal);
    }

    .sponsor {
        width: 100%;
        height: 100px;
        background-color: var(--background-light);
        /* margin-top: 40px; */
    }

    .sponsor .element {
        width: 50%;
        height: 100px;
        float: left;
    }

    .sponsor h3 {
        font-weight: 600;
        font-size: 16px;
        color: var(--font-text);

        width: 270px;
        float: left;
        margin-top: 20px;
        margin-left: 5px;
    }

    .sponsor .right {
        font-weight: 600;
        font-size: 16px;
        color: var(--font-text);

        width: 270px;
        float: right;
        margin-top: 20px;
        margin-right: 50px;
    }

    .footer {
        width: 100%;
        /* vertical-align: bottom; */
        /* margin-top: -40px; */
        height: 40px;
        line-height: 40px;
        color: var(--font-text);
        font-weight: 500;
        background-color: var(--background-dark);
    }

    .footer a {
        float: left;
        margin-left: 35px;
        cursor: pointer;
        text-decoration: none;
        color: var(--font-text);
    }

    .text {
        width: 90%;
        max-width: 1100px;
        margin: 0 auto;
        margin-top: 55px;
        padding-bottom: 20px;

    }

    .text h4 {
        text-align: center;
        font-weight: 700;
        font-size: 26px;
        color: var(--font-headline);
    }

    .text span {
        font-weight: 500;
        font-size: 20px;
        color: var(--font-text);
    }

    .text .reference {
        font-weight: 500;
        font-size: 18px;
        color: var(--font-text);
    }

    table,
    th,
    td {
        border: 1px solid black;
        font-weight: 500;
        font-size: 18px;
        color: var(--font-text);
    }

    .note {
        font-weight: 500;
        font-size: 15px;
        color: var(--font-text);
    }


    .team {
        width: 55%;
        height: 700px;
        float: left;
        margin-top: 30px;
    }

    .team a {
        color: var(--font-text);
        font-size: 16px;
        font-weight: 500;
    }

    .team h4 {
        color: #0f0f0f;
    }

    .team h3 {
        color: var(--font-text);
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
        margin: 0 auto;
        margin-left: 20px;
    }

    .halve {
        width: 45%;
        float: left;
        margin-top: 30px;
    }

    .halve img {
        border-radius: 5px;
        filter: drop-shadow(0px 0px 10px);
        width: 500px;
        padding-bottom: 5px;
        height: 380px;
        object-fit: cover;
    }

    .halve video {
        border-radius: 5px;
        filter: drop-shadow(0px 0px 10px);
        width: 600px;
        height: 400px;
        padding-bottom: 5px;
    }

    .halve p {
        color: var(--font-text);
        font-weight: 500;
    }

    .login-left {
        width: 55%;
        height: 200px;
        /* background-color: aqua; */
        margin-top: 50px;
        float: left;
    }

    .login-left h4 {
        margin: 0 auto;
        line-height: 20px;
        color: var(--color-signal);
    }

    .login-left span {
        color: var(--font-text);
        font-size: 16px;
        font-weight: 500;
    }

    .login-left a {
        color: black;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }

    .login-right {
        width: 40%;
        height: 450px;

        margin-top: -210px;
        float: right;
    }

    .vertical-line {
        margin-left: 50px;
        margin-top: 20px;
        width: 5px;
        height: 338px;
        background-color: var(--color-signal);
        border-radius: 2px;
    }

    .step {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: var(--color-signal);
        margin-left: -7.8px;
        border-radius: 8px;
    }

    .todo-step {
        position: absolute;
        width: 18px;
        height: 18px;
        background-color: var(--background-light);
        border: 2px solid var(--color-signal);
        margin-left: -9px;
        border-radius: 8px;
    }

    .underline {
        text-decoration: underline;
        cursor: pointer;
    }

    .step-text {
        width: 250px;
        text-align: left;
        margin-left: 30px;
        font-weight: 500;
        color: var(--font-headline);
    }

    .overlay {
        position: absolute;
        width: 55%;
        height: 500px;
        /* background-color: aqua; */
        margin-top: 50px;
        float: left;
        background-color: var(--background-dark);
        text-align: center;
    }

    .overlay span {
        font-weight: 500;
        color: var(--font-text);
    }


    .overlay .login {
        background-color: transparent;
        border-style: solid;
        border-color: var(--color-signal);
        width: 170px;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        margin: 0 auto;

        color: var(--font-headline);
        font-weight: bold;
        font-size: 16px;

        cursor: pointer;
        text-decoration: none;
    }

    .overlay a {
        color: black;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }

    input,
    label {
        display: block;
        font-weight: 700;
        color: var(--font-headline);
    }

    input[type=text],
    input[type=number],
    input[type=password],
    select {
        width: 200px;
        padding: 6px 10px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 2px solid var(--color-signal);
        border-radius: 4px;
    }

    input[type=file] {
        padding: 6px 0px;
        height: 50px;
    }

    .videos {
        width: 95%;
        max-width: 1100px;
        height: 600px;
        margin: 0 auto;
        overflow-y: scroll;
        margin-top: 10px;
    }

    .video {
        width: 330px;
        height: 410px;
        background-color: var(--background-dark);
        float: left;
        margin-left: 26.7px;
        margin-top: 0px;
        margin-bottom: 20px;
        border-radius: 5px;
        filter: drop-shadow(#fa820b4f 0px 0px 5px);
        position: relative;
    }

    .video h4 {
        font-size: 20px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 700;
        margin-top: 2px;
        margin-left: 10px;
        color: var(--font-headline);
    }

    .video h3 {
        font-size: 18px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-left: 10px;
        color: var(--font-ligh-text);
    }

    .video li {
        font-size: 16px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 6px;
        /* margin-left: 10px; */
        color: var(--font-text);
    }

    .thumbnail {
        width: 330px;
        height: 270px;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .thumbnail img {
        width: 330px;
        height: 260px;
        border-radius: 5px;
        object-fit: cover;
        filter: drop-shadow(0px 0px 2px);
    }

    .thumbnail-overlay {
        position: absolute;
        margin-top: -270px;
        height: 415px;
        width: 330px;
        opacity: 0;
        transition: .2s linear;
        background-color: #ffffffe5;
        border-radius: 5px;
    }

    .thumbnail:hover .thumbnail-overlay {
        opacity: 1;
    }

    .thumbnail-text {
        color: black;
        font-size: 20px;
        font-weight: 500;
        position: absolute;
        margin-left: 20px;
        text-align: left;
        width: 300px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }


    .variants {
        width: 95%;
        height: 50px;
        line-height: 50px;
        max-width: 900px;
        margin: 0 auto;
        margin-top: 10px;
        /* background-color: aquamarine; */
        text-align: center;
        display: flex;
        flex-wrap: wrap;
    }

    .variant {
        margin: 0 auto;
        flex: 1 0 18%;
        text-align: center;
        line-height: 20px;
        width: 150px;
        cursor: pointer;
    }

    .variantTitle {
        font-size: 18px;
        font-weight: 700;
        color: var(--font-text);
        text-decoration: underline;
    }

    .variantSubTitle {
        font-size: 16px;
        font-weight: 500;
        color: var(--font-headline);
    }

    .variantPuffer {
        height: 120px;
    }

    .selected {
        color: var(--color-signal);
        text-decoration: none;
    }

    .video-container {
        width: 750px;
        height: 790px;
        margin: 0 auto;
        margin-top: 10px;
        background-color: var(--background-dark);
        border-radius: 5px;
        /* filter: drop-shadow(0px 0px 5px); */
        box-shadow: 1px 1px 5px 1px;
        overflow: hidden;
    }

    .video-container img {
        width: 750px;
        height: 440px;
        object-fit: cover;
        /* filter: drop-shadow(0px 0px 5px); */
        box-shadow: 1px 1px 5px 1px;
        overflow: hidden;
    }

    .video-container video {
        width: 750px;
        height: 440px;
        object-fit: cover;
        /* filter: drop-shadow(0px 0px 5px); */
    }

    .video-container li {
        font-size: 18px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 6px;
        margin-left: 30px;
        color: var(--font-text);
    }

    .video-container h3 {
        font-size: 19px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-left: 30px;
        color: var(--font-ligh-text);
    }


    summary {
        font-size: 20px;
        font-weight: 600;
        color: var(--font-headline);
    }

    details {
        margin-top: 40px;
        text-align: left;
    }

    .details {
        font-size: 16px;
        font-weight: 500;
        color: var(--font-text);
    }



}


#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;

    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;

    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;

    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--background-dark);
    z-index: 1000;
}

#loading-msg {
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: wheat;
}

.loaded #loader {
    opacity: 0;

    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;

}

.loaded #loader-wrapper {
    visibility: hidden;

    opacity: 0;

    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}