:root {
    --accent: #2FE71A;
    --lightest: #fff;
    --darkest: #000;
    --copy: #333;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('aktivgrotesk_rg.woff2') format('woff2'), url('aktivgrotesk_rg.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('aktivgrotesk_it.woff2') format('woff2'), url('aktivgrotesk_it.woff') format('woff');
    font-weight: normal;
    font-style: italic
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('aktivgrotesk_md.woff2') format('woff2'), url('aktivgrotesk_md.woff') format('woff');
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: "Acta";
    src: url("155a9dcd-71f2-4d44-aa88-ca08b2e29c32.woff2") format("woff2"), url("6a3e2ce1-8888-4506-b20e-daf665f08294.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Acta";
    src: url("98ced06b-3502-406b-9ce1-ac4a4dc5f0c8.woff2") format("woff2"), url("ecae9823-aeba-4c41-ab8f-820f56d87cbe.woff") format("woff");
    font-weight: normal;
    font-style: italic
}


body {
    font-family: 'AktivGrotesk', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 0;
    transition: background-color .5s, color .5s;
}

main {
    overflow-x: hidden;
}

.vp-center {
    display: block;
}

@media (min-width: 1000px) {
    .start-listing {
        display: flex;

        .start-list {
            width: 20%;
            flex:0 0 20%;
        }

        .start-list.extended {
            width: 40%;
            flex:0 0 40%;
        }
    }
}

.start-listing {

    .start-list {
        padding: 2em 2rem 1em 2rem;
        box-sizing: border-box;
    }

    h2 {
        font-size: 1em;
        margin-bottom:2em;
        font-weight: normal;
    }

    ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    a {
        text-decoration: none;
        color: rgba(0, 0, 0, .5);
        font-family: 'Acta', sans-serif;
        padding-bottom: .4em;
        line-height: 1.2em;
        display: block;

        &:hover,
        &:focus {
            color: var(--darkest);
        }
    }

    .counter {
        margin-right: 1.25em;
        flex:0 0 3em;
    }

    .content {
        display: none;
        overflow: hidden;
        width:100%;

        img {
            width: 100%;
        }
    }


    li {
        transition: padding .8s;
        padding-bottom: 0;

        &.active {
            a {
                color: var(--darkest);
            }
            .dynamic-link {
                font-family: 'AktivGrotesk', sans-serif;
                padding-top:4px;
            }
        }

        > a {
            display: flex;
        }
    }

    .feature-title {
        padding: .5em 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: var(--lightest);

        span {
            font-family: 'AktivGrotesk', sans-serif;
            margin-bottom: .5em;
        }
    }
}

@media(min-width:600px) {
    .start-listing {
        .content-inner {
            display: flex;
            flex-wrap:wrap;
            width(calc(100vw - 4rem));
            margin-left: -1rem;
        }
        .image-container {
            flex: 0 0 calc(50% - 2rem);
            width: calc(50% - 2rem);
            margin:1rem;
        }
    }
}

@media(min-width:1000px) {
    .start-listing {
        .content {
            position: absolute;
            z-index: 5;
            padding-left: 2em;
            left: 0;
            width: calc(80.15vw - 2rem);
        }
        li.active {
            transition: padding .4s;
            padding-bottom: 14vw;
        }

        .image-container {
            flex: 0 0 calc(25% - 2rem);
            margin:1rem;
            margin-bottom:0;
            width: calc(25% - 2rem);;
        }
        ul {
            display: block !important;
        }
    }

}
@media(min-width:2200px) {
    .start-listing {
        .content {
            width: calc(79.9vw - 2rem);
        }
    }
}

.swiper {
    width: 100%;
    padding-bottom: 3em;
    height:calc(100vh - 7.5em);
}


.swiper-slide {
    height:calc(100vh - 7.5em);
    background-color: var(--darkest);

    .image-container {
        position: relative;
    }

    &.contain {
        height:auto;

        .padding-container {
            box-sizing: border-box;
            height:calc(100vh - 10em);
            width:100%;
            text-align: center;

            .image-container {
                position: relative;
                height:calc(100% - 4.5em);
            }
        }

        img,
        video {
            object-fit: contain;
            height:100%;
            width:auto;
        }
    }


    img,
    video {
        width: 100%;
        object-fit: cover;
        object-position: center;
        position: relative;
        height:calc(100vh - 10em);
    }



    .title {
        position: absolute;
        bottom: 0;
        background-color: var(--lightest);
        width: calc(100% + 2px);
        margin: 0;
        margin-left:-1px;
        padding: 1.7em 4em 1em 2rem;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color .5s, color .5s;
        height: 4.8em;
        font-size:1em;
        font-weight: normal;
    }
}


@media (max-width: 999px) {
    .swiper,
    .swiper-slide {
        height:calc(100vh - 13em);

        img,
        video {
            height:calc(100vh - 13em);
        }
    }
    .start-listing {
        position: relative;
        padding-bottom:.5em;

        .start-list {
            padding-top:.5em;
            padding-bottom:.5em;

            h2 {
                margin:0;
                opacity: .5;
                cursor:pointer;
                transition:padding-bottom .6s;
                padding-bottom:0;

                &:hover {
                    opacity: 1;
                }
            }
            &.open-in-mobile {
                h2 {
                    opacity: 1;
                    padding-bottom:2em;
                    transition:padding-bottom .2s;
                }
            }
            ul {
                display: none;
            }
            &.curated-by {
                position: absolute;
                right:0;
                bottom:.1em;

                h2 {
                    opacity: 1;
                }
            }
        }
    }
    .extended {
        &.open-in-mobile {
            padding-bottom:4em;
        }
    }


}

body {
    min-width: 320px;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
}

input,
textarea,
button {
    font-family: inherit;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


/* sticky footer */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.swiper-pagination-bullets.swiper-pagination {
    display: flex;
    justify-content: space-between;
    bottom: 5em;
}

.swiper {
    padding-bottom: 1em;
}

.swiper-wrapper {
    margin-bottom: 1em;
}

.swiper-pagination-bullet {
    flex: 1;
    border-radius: 0;
    height: 5px;

    @media (max-width:799px) {
        margin:0 1px !important;
    }
}
.swiper-pagination {
    padding:0 calc(2rem - 4px);
    width:calc(100% - 4rem + 8px) !important;

    @media (max-width:799px) {
        padding:0 calc(2rem - 1px);
        width:calc(100% - 4rem + 2px) !important;
    }
}

.swiper-pagination-bullet-active {
    background-color: var(--accent);
}

.overlay-text {
    position: absolute;
    display: flex;
    top: 3em;
    left: 0;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 1;
    transition: background-color .5s, color .5s;
    width: 100%;
    height: calc(100% - 3em);
    padding: 4%;
    box-sizing: border-box;

    strong {
        font-weight: normal;
        font-family: "Acta", serif;
    }

    p {
        margin: 0;
    }
}
.text-vertical-1 {
    .overlay-text {
        padding-top: calc(4% + 4rem);
    }
}
@media(max-width: 799px) {
    .overlay-text {
        padding-left:2rem;
        padding-right:2rem;
    }
}



.text-inner {
    width: 100%;
}

header.has-slider {
    background-color: transparent;
    position: absolute;
}

.text-horizontal-1 {
    .overlay-text {
        justify-content: flex-start;
        text-align: left;
    }
}

.text-horizontal-2 {
    .overlay-text {
        justify-content: center;
        text-align: center;
    }
}

.text-horizontal-3 {
    .overlay-text {
        justify-content: flex-end;
        text-align: right;
    }
}

.text-vertical-1 {
    .overlay-text {
        align-items: flex-start;
    }
}

.text-vertical-2 {
    .overlay-text {
        align-items: center;
    }
}

.text-vertical-3 {
    .overlay-text {
        align-items: flex-end;
    }
}

.textsize-,
.textsize-1 {
    .text-inner {
        font-size: 1.5em;
    }
}

@media (min-width: 800px) {
    .textsize-,
    .textsize-1 {
        .text-inner {
            font-size: 2em;
        }
    }
}

@media (min-width: 1200px) {
    .textsize-,
    .textsize-1 {
        .text-inner {
            font-size: 3em;
        }
    }
}


.textsize-2 {
    .text-inner {
        font-size: 3em;
        line-height: 1.3em;
    }
}


@media (min-width: 800px) {
    .textsize-2 {
        .text-inner {
            font-size: 4.5em;
            line-height: 1.15em;
        }
    }
}

@media (min-width: 1200px) {
    .textsize-2 {
        .text-inner {
            font-size: 6em;
            line-height:1.05em;
        }
    }
}

.textsize-3 {
    .text-inner {
        font-size: 4em;
        line-height: 1.3em;
    }
}
@media(min-width: 800px) {
    .textsize-3 {
        .text-inner {
            font-size: 6em;
            line-height: 1em;
        }
    }
}
@media(min-width: 1200px) {
    .textsize-3 {
        .text-inner {
            font-size: 9em;
        }
    }
}

.textsize-4 {
    .text-inner {
        line-height: 9.5vw;
    }
}

@media (max-width: 999px) {
    .overlay-text {
        font-size: .5em !important;
        padding-bottom: calc(5% + 5em);
    }
}

@media (max-width: 499px) {
    .overlay-text {
        font-size: .3em !important;
        padding-bottom: calc(6% + 9em);
    }
}

header {
    top: 0;
    z-index: 5;
    width: 100%;
    transition: background-color .5s, color .5s;
    color: var(--darkest);

    a, .nav-main-toggler {
        color: var(--darkest);
    }

    .logo {
        filter: invert(1);
    }

    .inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 2em;
    }

    .logo {
        width: 1.75em;
        flex:0 0 1.75em;
    }

}

header.has-slider {
    a, .nav-main-toggler {
        color: var(--lightest);
    }

    .logo {
        filter: invert(0);
    }
}
.has-slider {
    .nav-wrapper {
        @media (max-width:799px) {
            height: calc(100vh - 17.8rem);
        }
    }
}
.nav-wrapper {
    height: 100%;
    text-align: right;
    min-width: 10em;
    align-items: center;
    display: flex;
    flex-direction: row-reverse;

    @media (max-width:799px) {
        flex-direction: column;
        align-items: flex-end;
        padding: 2rem;
        min-width:30%;
        position: absolute;
        height:100vh;
        top: 0;
        right: 0;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 1s;

        &.active {
            background-color: rgba(0, 0, 0, .8);

            .nav-main-toggler span,
            a {
                color:var(--lightest);
            }

        }
    }

    a,
    .nav-main-toggler {
        text-decoration: none;
        padding: 0 1em;


        @media (min-width:800px) {
            padding:.5em .75em;
        }

        @media (max-width:799px) {
            padding: .4em 0;
            display: inline-block;
            height:auto;
        }
    }
}
header.dark-mode {
    .nav-main-toggler,
    a {
        color: var(--darkest);
    }

    &.active {
        a {
            @media (max-width:799px) {
                color: var(--lightest);
            }
        }
    }
    .logo {
        filter: invert(1);
    }
}
.has-slider {
    header.dark-mode {
        .logo {
            filter: invert(1);
        }
    }
}

.nav-main-toggler {
    background-color: transparent;
    border: none;
    height: 100%;
    color: #fff;
    font-size: 1em;
    padding-right: 0 !important;
    cursor: pointer;
    text-align: right;

    .when-active {
        display: none;
    }

    &.active {
        .when-active {
            display: block;
        }

        .standard {
            display: none;
        }
    }
}

.nav-main {
    display: none;
    white-space: nowrap;

    ul {
        display: flex;

        @media (max-width:799px) {
            flex-direction: column;
            align-items: flex-end;
        }
    }
}

nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    color: #fff;
}

#__bs_notify__ {

    font-size: .4em !important;
    padding: 0 !important;
}

footer {

    .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2em;

        @media(max-width:799px) {
            align-items: flex-end;
        }
    }


    a {
        text-decoration: none;

        @media(max-width:799px) {
            padding: .5em 0;
        }
    }

    .social {
        display: flex;
        flex-direction: column;

        > a {
            margin-right: 2em;
            display: flex;
            align-items: center;
        }

        .icon {
            filter: invert(1);
            margin-right: .5em;
        }

        .brandword {
            line-height: 1em;
            margin: 0;
            padding: 0;
            position: relative;
            top: .1em;
        }
    }

    .legal-and-newsletter {
        display: flex;
        flex-direction: column;
        text-align: right;

        > a:last-child {
            margin-right: 0;
        }
    }
}
@media (min-width:800px) {
    footer .social,
    footer .legal-and-newsletter {
        flex-direction: row;

        > a {
            margin-right: 2em;
        }
    }
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    a {
        width: 22%;
        height: auto;
        margin: 3%;

        img {
            width: 100%;
        }
    }
}

@media (min-width: 1000px) {
    .component-columns {
        display: flex;
    }
}

.component-columns > * {
    flex: 1;
    padding: 2rem;
}

.component {
    padding: 2rem;
}

.component-slider,
.component-columns,
.component-image {
    padding-left: 0;
    padding-right: 0;
}

.component-slider {
    padding: 0;
}

.component-columns .component {
    flex-shrink: 0;
    max-width: 100%;
}

.component-image {
    position: relative;
}

.component-image {
    font-weight: bold;

    .overlay-text,
    .text-inner {
        width: 100%;
    }
}

.dark-mode-toggler {
    float: right;
    margin-right: 2rem;
    margin-top: -4em;
    z-index: 200;
    position: relative;
}

body.dark-mode {
    background-color: var(--darkest);
    color: var(--lightest);

    .swiper-slide {
        .title {
            background-color: var(--darkest);
            color: var(--lightest);
        }
    }

    .start-list {
        color: var(--lightest);

        a {
            color: rgba(255, 255, 255, .5);

            &:hover,
            &:focus {
                color: var(--lightest);
            }
        }
        .active {
            a {
                color: var(--lightest);
            }
        }
    }

    footer {
        .icon {
            filter: invert(0);
        }

    }

    header {
        .inner {
            color: var(--lightest);

            .logo {
                filter: invert(0);
            }

            a,
            .nav-main-toggler {
                color: var(--lightest);
            }

        }
        &.dark-mode {
            .inner {
                a,
                .nav-main-toggler {
                    color: var(--darkest);

                    @media(max-width:999px) {
                        color: var(--lightest);
                    }
                }
                .logo {
                    filter: invert(1);
                }
            }
        }
    }

    .swiper-pagination-bullet {
        background-color: var(--lightest);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--accent);
    }

    header {
        background-color: var(--darkest);
    }

    header.has-slider {
        background-color: transparent;
    }

    .feature-title {
        color: var(--lightest);
        background-color: var(--darkest);
    }
}

.switch { /* Das label-Element */
    position: relative; /* Um im nächsten Schritt den runden Button mit position:absolute festzusetzen */
    width: 3em;
    height: 1.5em;
    display: inline-block;
    font-size: 0.7em;
}

.switch span {
    position: absolute;
    border-radius: 1em;
    cursor: pointer;
    background-color: var(--darkest);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color .4s;
}

.dark-mode .switch span {
    background-color: #eee;
}

.switch span::before {
    background-color: var(--accent);
    border-radius: 50%;
    content: "";
    position: absolute;
    left: -1px;
    bottom: 0;
    height: 1.5em;
    width: 1.5em;
    transition: transform .25s;
}

.dark-mode .switch span::before {
    transform: translateX(1.6em);
}

.switch input {
    display: none;
}

.detail-page {
    h1,
    header a,
    .navigation-wrapper {
        font-size: 1em;
        margin:0;
        font-weight: normal;
        text-decoration: none;
    }
    h1 {
        max-width:calc(100% - 5em);
    }

    .navigation-wrapper {
        display: flex;
        justify-content: space-between;
        padding: 2rem;

        a {
            text-decoration: none;
        }
    }
}

.plyr__video-embed {
    position: relative;
}

.component-text {
    font-family: 'Acta', sans-serif;
    font-size: 1.25em;

    h2 {
        font-size: 1em;
        font-family: 'AktivGrotesk', sans-serif;
        font-weight: normal;

        strong {
            font-family: 'AktivGrotesk', sans-serif;
            font-weight: bold;
        }
    }

    strong {
        font-family: 'AktivGrotesk', sans-serif;
        font-weight: normal;
    }
}
.dynamic-link {
    .counter {
        display: inline-block;
        width:3em;
    }
}

.curated-by {
    @media (min-width:1000px) {
        width:15%;
        flex:0 0 15%;

        h2 {
            text-align: right;
        }
    }

    h2 {
        a {
            font-family:'AktivGrotesk', sans-serif;
            color:#333;
        }
    }
}
.special-headline {
    font-style:italic;
    padding-bottom:0 !important;

    h2 {
        margin-bottom:0;
    }
}
.curated-by {
    a {
        .when-active {
            display:none;
        }

        &:hover,
        &:focus {
            .when-active {
                display:block;
            }
            .standard {
                display: none;
            }
        }
        img {
            max-width:4.75em;
            position: relative;
            left:-.05em;
        }
    }
}
body.dark-mode {
    .curated-by a {
        img {
            filter:invert(1);
        }
    }
}