:root {
        --bg: #ffffff;
        --fg: #00204E;
        --muted: #7a8aa0;
        --share-bg: #F6FF00;
        --dl-bg: #0FCDF8;
        --header-height: 5%;
        --footer-height: 10%;
    }

    * {
        box-sizing: border-box
    }

    html,
    body {
        height: 100%
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: 'Open Sans', sans-serif;
        overflow: hidden;
    }

    header {
        display: block;
        position: relative;
        height: var(--header-height);
        width: 100%;
        padding-top: 2%;
        align-items: center;
        justify-content: center;
        background: #fff;
        z-index: 10;
        font-weight: bold;
        font-size: 50px;
    }

    .logo {
        display: block;
        position: relative;
        left: 0;
        transform: translate(var(--header-height), 0);
        height: var(--header-height);
        padding-left: 5%;
        width: 10%;
    }

    .logo img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        display: block;
        border-radius: 4px;
    }

    .headline {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        line-height: 1;
        text-align: center;
        width: 85%;
        padding-left: 15%;

        @media (min-width: 600px) {
            padding-left: unset;
            width: 100%;
        }

    }

    .controls {
        position: relative;
        bottom: 0;
        height: var(--footer-height);
        justify-content: center;
        padding: 1%;
        text-align: center;
    }

    .btn {
        border: none;
        border-radius: 6px;
        padding: 10px 18px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        color: var(--fg);
        transition: filter .2s ease;
    }

    #shareBtn {
        background: var(--share-bg)
    }

    .btn:hover {
        filter: brightness(.92)
    }

    /* Swiperjs */
    .swiper {
        height: calc(100% - var(--header-height) - var(--footer-height));
        width: 90%;
    }

    @font-face {
        font-family: FeneconHeadLineBold;
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src:
            url("https://docs.fenecon.de/_/font/fenecon-headline-bold.woff2") format("woff2"),
    }