@font-face {
        font-family: 'Amiri';
        src: url('../fonts/Amiri-Regular.ttf');
}

@font-face {
        font-family: 'Amiri';
        src: url('../fonts/Amiri-Italic.ttf');
        font-style: italic;
}

@font-face {
        font-family: 'Amiri';
        src: url('../fonts/Amiri-Bold.ttf');
        font-weight: 600;
}

@font-face {
        font-family: 'Amiri';
        src: url('../fonts/Amiri-BoldItalic.ttf');
        font-weight: 600;
        font-style: italic;
}

@font-face {
        font-family: 'Suavity';
        src: url('../fonts/the-suavity.regular.ttf');
}

:root {
        --primary-1: 11, 21, 144;
        --secondary-1: 249, 225, 101;
        --mint: 228, 241, 227;
        --rose: 247, 222, 220;
        --red: 202, 25, 25;
        --marine: 51, 83, 135;
        --yellow: 245, 234, 119;
        --white: 255, 255, 255;
        --light-gray: 200, 200, 200;
        --black: 0, 0, 0;
}

* {
        font-family: 'Amiri', 'Times New Roman', Times, serif;
}

html {
        height: 100%;
}

body {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: rgb(var(--rose));
        margin: 0px;
}

.content_wrapper {
        width: 100%;
        max-width: 1280px;
        margin: 0px auto;
}

/* HEADER */
header {
        background-color: transparent;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        z-index: 10;
        transition: 0.5s;
}

header .backdrop {
        background-image: linear-gradient(rgba(var(--black), 0.75), transparent);
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        transition: 0.5s;
}

header .mobile_header {
        display: none;
        justify-content: space-between;
        height: 40px;
        background-color: rgb(var(--marine));
        box-shadow: 0px 0px 10px 10px rgb(var(--marine));
        position: relative;
        z-index: 1;
}

header .mobile_header .mobile_logo {
        height: 40px;
        padding: 5px 0px;
        box-sizing: border-box;
}

header .mobile_header .mobile_logo img {
        height: 30px;
        width: auto;
}

header.mobile_menu_open .mobile_logo {
        display: none;
}

header .mobile_header .mobile_button,
header .mobile_header .mobile_settings {
        height: 40px;
        padding: 10px;
        font-size: 18px;
        line-height: 20px;
        color: white;
        box-sizing: border-box;
        cursor: pointer;
}

header .mobile_header .mobile_button img,
header .mobile_header .mobile_settings img {
        height: 20px;
        width: auto;
}

header .mobile_header .mobile_button img[src*="close"],
header.mobile_menu_open .mobile_header .mobile_button img[src*="menu"] {
        display: none;
}

header.mobile_menu_open .mobile_header .mobile_button img[src*="close"] {
        display: block;
}

header .content_wrapper {
        position: relative;
        z-index: 1;
}

header.opaque {
        background-color: rgba(var(--marine), 0.75);
        box-shadow: 0px 10px 10px rgba(var(--black), 0.25);
}

header.opaque .backdrop {
        opacity: 0;
}

header:not(.opaque) .link {
        color: rgb(var(--white));
}

header:not(.opaque) .link:hover
header:not(.opaque) .link:active,
header:not(.opaque) .link:focus,
header:not(.opaque) .link:focus-within {
        border-bottom-color: rgb(var(--white));
}

header:not(.opaque) .logo img:not([src*="yellow"]) {
        opacity: 1;
}

header:not(.opaque) .logo img[src*="yellow"] {
        opacity: 0;
}

header .logo {
        width: auto;
        height: 120px;
        padding: 20px 40px;
        position: relative;
        aspect-ratio: 160/182;
}

header .logo img {
        position: absolute;
        height: 120px;
        width: auto;
        transition: 0.5s;
}

header .logo img:not([src*="yellow"]) {
        opacity: 0;
}

header .logo img[src*="yellow"] {
        opacity: 1;
}

header .link {
        display: block;
        flex: 0 0 auto;
        border-bottom: 1px dashed transparent;
        padding: 10px 20px;
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 42px;
        line-height: 54px;
        color: rgb(var(--secondary-1));
        text-decoration: none;
        text-shadow: 0px 0px 3px rgb(var(--black));
        transition: 0.2s;
}

header .link:hover,
header .link:active,
header .link:focus,
header .link:focus-within {
        border-bottom-color: rgb(var(--secondary-1));
}

header .link:last-of-type {
        padding-right: 40px;
}

header .link.current {
        color: rgb(var(--white));
}

header:not(.opaque) .link.current {
        color: rgb(var(--secondary-1));
}

/* MAIN CONTENT */
#main-wrapper {
        flex: 1 1 auto;
}

#main-wrapper .content_wrapper {
        height: 100%;
        background-color: rgb(var(--mint));
        box-shadow: 0px 0px 10px rgba(var(--black), 0.25);
        padding: 50px 20px;
        box-sizing: border-box;
}

/* FOOTER */
footer {
        background-color: rgb(var(--yellow));
        padding: 20px 0px;
}

footer .content_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
}

footer .copyright {
        flex: 0 0 200px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        line-height: 18px;
        font-weight: 600;
        color: rgb(var(--primary-1));
}

footer .copyright:first-letter {
        font-size: 32px;
        vertical-align: middle;
}

footer .socials {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
}

footer .socials a {
        display: block;
        width: 40px;
        height: 40px;
        text-decoration: none;
}

footer .socials a:not(:first-of-type) {
        margin-left: 30px;
}

footer .socials a img {
        position: absolute;
        height: 40px;
        width: auto;
        transition: 0.25s;
}

footer .socials a img[src*="black"] {
        opacity: 0;
}

footer .socials a:hover img[src*="black"],
footer .socials a:active img[src*="black"],
footer .socials a:focus img[src*="black"],
footer .socials a:focus-within img[src*="black"] {
        opacity: 1;
}

footer .imprint {
        flex: 0 0 200px;
        text-align: right;
}

footer .link {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        line-height: 18px;
        font-weight: 600;
        text-decoration: none;
        color: rgb(var(--primary-1));
        transition: 0.25s;
}

footer .link:hover,
footer .link:active,
footer .link:focus,
footer .link:focus-within {
        color: rgb(var(--black));
}

/* SCROLL DOWN ARROW */
#scroll-down {
        position: fixed;
        right: calc(((100% - 1280px) / 2 - 124px) / 2);
        bottom: 50px;
        z-index: 1;
        transition: 0.5s;
}

#scroll-down.hidden {
        opacity: 0;
}

#scroll-down img {
        height: 200px;
        width: auto;
}

/* GENERAL */
img {
        display: block;
        -webkit-user-select:none;
        -webkit-touch-callout:none;
}

.button_link {
        display: inline-block;
        background-color: rgba(var(--marine), 0.75);
        padding: 10px 20px;
        font-size: 24px;
        line-height: 32px;
        color: rgb(var(--white));
        text-decoration: none;
        cursor: pointer;
        transition: 0.25s;
}

.button_link.subtle {
        background-color: rgba(var(--marine), 0.25);
        color: rgb(var(--marine));
}

.button_link:hover,
.button_link.subtle:hover,
.button_link:active,
.button_link.subtle:active,
.button_link:focus,
.button_link.subtle:focus,
.button_link:focus-within,
.button_link.subtle:focus-within {
        background-color: rgba(var(--white), 0.5);
        color: rgb(var(--black));
}

.row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0px 20px;
        margin: 0px -20px;
}

.row_center {
        justify-content: space-between;
        align-items: center;
}

.row_tiles {
        justify-content: center;
        margin: 0px -10px;
}

#banner {
        position: relative;
}

#banner:empty {
        display: none;
}

#banner img {
        display: block;
        width: 100%;
        height: auto;
        padding: 0px;
}

#banner .description {
        position: absolute;
        left: 50%;
        bottom: 200px;
        transform: translateX(-50%);
        width: 50%;
        background-color: rgba(var(--black), 0.7);
        padding: 40px 20px;
        font-size: 20px;
        line-height: 28px;
        text-align: center;
        color: rgb(var(--white));
}

#banner .description p {
        margin: 0px;
}

#banner .description h2 {
        margin: 0px 0px 30px;
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 40px;
        line-height: 64px
}

.infos {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: rgba(var(--white), 0.75);
        min-height: 300px;
        padding: 30px 50px;
        margin: -30vh 40px 20px;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
}

.infos .title {
        margin-bottom: 30px;
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 56px;
        line-height: 64px;
        font-weight: 600;
        text-align: center;
}

.infos .description {
        font-size: 22px;
        line-height: 29px;
        text-align: center;
}

.infos .description p {
        margin: 0px;
}

.infos .description q {
        font-style: italic;
}

.infos .description .quote {
        border: 4px double rgba(var(--light-gray), 0.5);
        padding: 15px 30px;
}

.infos .description .quote b {
        display: block;
        margin-bottom: 10px;
}

.infos .description .disclaimer {
        font-size: 19px;
        line-height: 23px;
}

.infos .description .danger {
        color: rgb(var(--marine));
}

.tile {
        margin: 0px 10px 20px;
        overflow: hidden;
}

.tile.loading {
        background-color: rgb(var(--white));
        box-sizing: border-box;
        aspect-ratio: 1;
}

.tile:hover .title,
.tile:active .title,
.tile:focus .title,
.tile:focus-within .title {
        transform: scale(1);
        opacity: 1;
}

.tile a {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        position: relative;
        color: rgb(var(--black));
}

.tile .title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.75);
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        padding: 20px;
        position: absolute;
        left: 20px;
        top: 20px;
        z-index: 1;
        transform: scale(0.5);
        text-align: center;
        opacity: 0;
        box-sizing: border-box;
        transition: 0.5s;
}

.tile .title h3 {
        margin: 0px 0px 20px;
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 32px;
}

.tile .title p {
        margin: 0px;
        font-size: 18px;
        line-height: 24px;
}

.tile img {
        display: block;
        width: 100%;
        height: auto;
}

.tile img.cut_off {
        position: absolute;
}

.tile img.cut_off_center {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
}

.tile img.cut_off_bottom {
        position: absolute;
        bottom: 0px;
}


.tile_1 {
        flex: 0 0 calc(100% - 20px);
}

.tile_2 {
        flex: 0 0 calc(50% - 20px);
}

.tile_3 {
        flex: 0 0 calc(33.33% - 20px);
}

.p0 {
        padding: 0px;
}

.separator {
        margin: 0px 10px;
}

.loading {
        position: relative;
}

.loading::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border: 4px solid rgb(var(--marine));
        border-top-color: transparent;
        border-radius: 50%;
        animation-name: loading_spin;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
}

@keyframes loading_spin {
        from {
                transform: translate(-50%, -50%) rotate(0deg);
        }

        to {
                transform: translate(-50%, -50%) rotate(360deg);
        }
}

.swiper-title {
        position: absolute;
        left: 50%;
        top: 60%;
        z-index: 1;
        transform: translate(-50%, -50%);
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 72px;
        line-height: 90px;
        color: rgb(var(--white));
        text-shadow: 0px 0px 5px rgb(var(--black));
        text-align: center;
}

.swiper-button-prev,
.swiper-button-next {
        width: 64px !important;
        height: 64px !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
        content: '' !important;
        width: 64px;
        height: 64px;
        background-size: 64px 64px;
        background-repeat: no-repeat;
        background-position: center;
}

.swiper-button-prev::after {
        background-image: url('./../images/slide_left.png');
}

.swiper-button-next::after {
        background-image: url('./../images/slide_right.png');
}

.about_me {
        display: flex;
        flex-direction: row;
        align-items: center;
        max-width: 100vw;
}

.about_me img {
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
        height: auto;
}

.about_me .description {
        flex: 0 0 50%;
        align-self: center;
        padding: 50px 30px;
        text-align: right;
        box-sizing: border-box;
}

.about_me .description h3 {
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 36px;
        text-align: center;
}

.about_me .description p {
        margin: 0px;
        font-size: 20px;
        line-height: 24px;
}

#reviews {
        display: flex;
        flex-direction: column;
        margin-top: 150px;
        margin-bottom: -40px;
}

#reviews img {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 10px;
}

#reviews .button_link {
        align-self: center;
}

.review:not(:last-of-type) {
        margin-bottom: 50px;
}

.review img {
        width: 100%;
        height: auto;
}

.impressum * {
        margin: 0px;
}

.impressum p {
        font-size: 18px;
        line-height: 24px;
}

.impressum a {
        text-decoration: none;
        font-weight: 600;
        color: rgb(var(--marine));
}

.impressum h1 {
        margin-bottom: 40px;
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 52px;
        line-height: 64px;
}

.impressum h2 {
        margin-bottom: 20px;
        font-size: 28px;
        line-height: 32px;
}

.impressum h3 {
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 28px;
}

.dialogue_wrapper {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1000;
        width: 100vw;
        height: 100vh;
        background-color: rgba(var(--black), 0.75);
        padding: 15px;
        box-sizing: border-box;
}

.dialogue {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        background-color: rgb(var(--white));
        padding: 15px;
        box-sizing: border-box;
        text-align: center;
        overflow-y: scroll;
}

.dialogue h3 {
        margin: 20px 0px 30px;
        font-family: 'Suavity', Arial, Helvetica, sans-serif;
        font-size: 36px;
        line-height: 48px;
}

.dialogue p {
        margin: 0px;
        font-size: 16px;
        line-height: 20px;
}

.dialogue .button_link {
        align-self: center;
        margin-top: 30px;
}

/* small screens */
@media only screen and (max-width: 1280px) {
        header .content_wrapper {
                padding: 0px 20px;
                box-sizing: border-box;
        }

        .swiper-title {
                top: 70%;
        }

        #scroll-down {
                right: 20px;
        }

        footer {
                padding: 20px;
        }
}

/* tablets */
@media only screen and (max-width: 991px) {
        header .content_wrapper {
                padding: 0px 15px;
        }

        header .row {
                padding: 0px 15px;
        }

        header .link {
                font-size: 36px;
                line-height: 48px;
        }

        header .logo,
        header .logo img {
                height: 100px;
        }

        .swiper-title {
                font-size: 60px;
                line-height: 72px;
        }

        .swiper-button-prev,
        .swiper-button-next {
                width: 32px !important;
                height: 32px !important;
        }

        .swiper-button-prev::after,
        .swiper-button-next::after {
                content: '' !important;
                width: 32px;
                height: 32px;
                background-size: 32px 32px;
                background-repeat: no-repeat;
                background-position: center;
        }

        #main-wrapper .content_wrapper {
                padding: 30px 15px;
        }

        .about_me .description {
                padding: 30px 15px 30px 0px;
        }

        #reviews {
                margin-top: 30px;
                margin-bottom: -20px;
        }

        #scroll-down img {
                height: 175px;
        }

        footer {
                padding: 10px 15px;
        }

        .row {
                padding: 0px;
                margin: 0px -15px;
                overflow: hidden;
        }

        .tile {
                margin: 0px 7.5px 15px;
        }

        .tile .title {
                left: 0px;
                right: 0px;
                bottom: 0px;
                top: auto;
                width: 100%;
                padding: 15px;
                height: 50%;
                transform: none !important;
                opacity: 1 !important;
        }

        .tile_1 {
                flex: 0 0 calc(100% - 22.5px);
        }

        .tile_2,
        .tile_3 {
                flex: 0 0 calc(50% - 22.5px);
        }

        .infos {
                padding: 30px 15px 15px;
                margin: -25vh 30px 15px;
        }

        .infos .title {
                font-size: 42px;
                line-height: 54px;
        }

        .infos .description .quote {
                padding: 15px;
        }

        .review:not(:last-of-type) {
                margin-bottom: 15px;
        }
}

/* smartphones */
@media only screen and (max-width: 767px) {
        body {
                margin-top: 40px;
        }

        header,
        header.opaque {
                background-color: transparent;
        }

        header .backdrop {
                display: none;
        }

        header .content_wrapper {
                background-color: transparent;
                padding: 0px;
        }

        header .mobile_header {
                display: flex;
        }

        header:not(.mobile_menu_open) .content_wrapper .row {
                display: none;
        }

        header .content_wrapper .row {
                height: calc(100vh - 40px);
                background-color: rgba(var(--black), 0.75);
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: nowrap;
                overflow-y: scroll;
        }

        header .logo {
                order: 0;
                flex: 0 0 100px;
                padding: 15px 0px 50px;
                margin: 0px auto;
        }

        header .logo img:not([src*="yellow"]) {
                opacity: 1;
        }

        header .logo img[src*="yellow"] {
                display: none;
        }

        header .link,
        header.opaque .link {
                order: 1;
                display: block;
                width: 100%;
                border: none;
                padding: 15px !important;
                text-align: center;
                box-sizing: border-box;
                color: rgb(var(--white));
        }

        header .link:hover,
        header .link:active,
        header .link:focus,
        header .link:focus-within,
        header .link.current,
        header.opaque .link:hover,
        header.opaque .link:active,
        header.opaque .link:focus,
        header.opaque .link:focus-within,
        header.opaque .link.current {
                color: rgb(var(--secondary-1));
        }

        header .link:not(:last-of-type) {
                margin-bottom: 15px;
        }

        #scroll-down {
                display: none;
        }

        footer .content_wrapper {
                flex-direction: column;
                justify-content: flex-start;
        }

        footer .copyright,
        footer .socials,
        footer .imprint {
                flex: 0 0 auto;
                width: 100%;
                text-align: center;
        }

        footer {
                padding: 15px;
        }

        footer .link {
                font-size: 16px;
                line-height: 20px;
        }

        footer .socials {
                margin-bottom: 30px;
        }

        footer .copyright {
                order: 2;
                font-size: 18px;
                line-height: 24px;
        }

        footer .socials {
                order: 0;
                width: 100%;
                justify-content: space-between;
        }

        footer .socials a img {
                height: 50px;
        }

        footer .imprint {
                order: 1;
        }

        .row {
                flex-direction: column;
        }

        .tile {
                margin: 0px 15px 15px;
        }

        .tile_1,
        .tile_2,
        .tile_3 {
                flex: 0 0 auto;
                width: calc(100% - 30px);
        }

        .button_link {
                padding: 10px 15px;
                font-size: 20px;
                line-height: 24px;
        }

        .swiper-title {
                top: 80%;
                font-size: 50px;
                line-height: 60px;
        }

        .infos {
                margin: calc(-100vw * (9 / 16) / 2) 0px 30px;
        }

        .infos .title {
                font-size: 32px;
                line-height: 52px;
        }

        .infos .description {
                font-size: 16px;
                line-height: 20px;
        }

        .about_me {
                flex-direction: column;
        }

        .about_me .description {
                padding: 30px 0px 15px;
                text-align: center;
        }

        .about_me .description p {
                font-size: 18px;
                line-height: 22px;
        }

        .about_me .description h2 {
                font-size: 22px;
                line-height: 28px;
        }

        .about_me .description h3 {
                margin: 0px;
        }

        .about_me img {
                flex: 0 0 auto;
                max-width: 75%;
                height: auto;
        }

        #reviews {
                margin-top: 50px;
                margin-bottom: 0px;
        }
}