/* Font Import */

@font-face {
    font-family: "meety";
    src: url("../fonts/meety.ttf") format("truetype");
    font-display: block;
}

@font-face {
    font-family: "CamptonBook";
    src: url("../fonts/CamptonBook.woff2") format("woff2"),
        url("../fonts/CamptonBook.woff") format("woff");
}

@font-face {
    font-family: "CamptonMedium";
    src: url("../fonts/CamptonMedium.woff2") format("woff2"),
        url("../fonts/CamptonMedium.woff") format("woff");
}

@font-face {
    font-family: "CamptonSemiBold";
    src: url("../fonts/CamptonSemiBold.woff2") format("woff2"),
        url("../fonts/CamptonSemiBold.woff") format("woff");
}

@font-face {
    font-family: "SchindlerRRBold";
    src: url("../fonts/SchindlerRRBold.woff2") format("woff2"),
        url("../fonts/SchindlerRRBold.woff") format("woff");
}

@font-face {
    font-family: "SchindlerRRBoldSymbols";
    src: url("../fonts/SchindlerRRBoldSymbols.ttf") format("truetype");
}


/* Presettings */

:root {
    --meety_midnightblue: rgb(0, 58, 75);
    --meety_lightgray: rgb(250, 250, 250);
    --meety_navigation: #FFFCE3;
    --meety_white: rgb(255, 255, 255);

    --meety_coral: rgb(255, 120, 110);
    --meety_lightcoral: #F9D6D2;
    --meety_superlightcoral: #FDF0EF;
    --meety_ultralightcoral: #FDF7F6;

    --meety_green: rgb(0, 210, 130);
    --meety_lightgreen: #C7EFD6;
    --meety_superlightgreen: #E9F8EE;
    --meety_ultralightgreen: #F4FBF7;

    --meety_skyblue: rgb(173, 228, 236);
    --meety_lightskyblue: #D2EFEF;
    --meety_superlightskyblue: #E8F7F7;
    --meety_ultralightskyblue: #F3FBFB;

    --meety_yellow: rgb(247, 203, 105);
    --meety_lightyellow: #FFF9C3;
    --meety_superlightyellow: #FFFCE3;
    --meety_ultralightyellow: #FFFDEF;
}

*,
h1 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    line-height: 135%;
    cursor: inherit;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
-webkit-tap-highlight-color: transparent;
}

br {
    line-height: inherit;
}

html,
body {
    width: 100%;
    min-height: calc(100% + 200px);
}

html {
    font-family: "CamptonBook", sans-serif;
    font-size: 0.8928571428571429vw;
    font-size: 1vw;
    letter-spacing: 0.025em;
    cursor: default;
    background-color: var(--meety_midnightblue);
    color: var(--meety_midnightblue);
    scroll-behavior: smooth;
    --scroll-behavior: smooth;
}

.otgs-development-site-front-end {
    display: none;
}

strong {
    font-family: "CamptonSemiBold", sans-serif;
}


/* Basic Styles */

.text_type_a {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

.text_type_b {
    font-size: 1rem;
}

.text_type_c {
    font-size: 1.5rem;
    line-height: 125%;

}

.description {
    font-size: 1rem;
}

.text_type_d {
    font-size: 1.5rem;
    line-height: 125%;
}

.text_type_e {
    font-family: "SchindlerRRBold", sans-serif;
    text-transform: lowercase;
    font-size: 3rem;
    line-height: 93%;
    letter-spacing: 0.05em;
}

.text_type_f {
    font-family: "SchindlerRRBold", sans-serif;
    text-transform: lowercase;
    font-size: 3rem;
    line-height: 93%;
    letter-spacing: 0.05em;
}

.text_type_g {
    font-size: 1.5rem;
    line-height: 120%;

}

b {
    font-family: "CamptonSemiBold", sans-serif;
}

img {
    display: flex;
    width: 100%;
}

p a {
    text-decoration: underline 1px var(--meety_coral);
    text-underline-offset: 0.3rem;
}

p a:hover {
    text-decoration: underline 1px var(--meety_coral);
    color: var(--meety_coral);
    cursor: pointer;
}

/* p a {
    font-family: "CamptonSemiBold", sans-serif;
}

p a:hover {
    cursor: pointer;
    color: var(--meety_coral);
} */

.arrow {
    user-select: none;
}


/* Background */

#background {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 150%;
    width: 100%;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#animation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20%;
}

#one {
    margin-top: -5%;
    width: 100vw;
    display: block;
    position: absolute;
    min-height: 100vh;

}

#one .path {
    stroke-linecap: round;
    stroke: rgb(26, 81, 96);
    stroke-width: 200;
}

#two {
    margin-top: -10%;
    width: 100vw;
    display: block;
    position: absolute;
    opacity: 0.9;
    min-height: 100vh;
}

#two .path {
    stroke-linecap: round;
    stroke: rgb(14, 70, 86);
    stroke-width: 200;
}


/* Header */

header {
    display: flex;
    height: 100vh;
    width: 100%;
    flex-direction: column;
}

canvas {
    width: 100%;
    min-height: 100%;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    opacity: 1;
}

#slogan {
    font-size: 1.5rem;
    position: absolute;
    top: 1rem;
    left: 1.4rem;
    color: var(--meety_white);
    text-transform: uppercase;
    letter-spacing: 0.305em;
    animation: slogan_animation 0.2s linear alternate forwards;
    animation-delay: 1s;
    opacity: 0;
    font-family: "CamptonMedium", sans-serif;
    pointer-events: none;
}

@keyframes slogan_animation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade_out {
    transition: opacity 0.2s linear;
    opacity: 0;
}

#logo {
    font-family: "meety", sans-serif;
    color: var(--meety_coral);
    font-variation-settings: 'wght'600;
    padding-left: 1.5rem;
    z-index: 3;
    pointer-events: none;
}

.logo_animation {
    font-variation-settings: 'wght'60;
    animation: logo_animation 1s linear alternate forwards;
}

@keyframes logo_animation {
    0% {
        font-variation-settings: 'wght'900;
    }

    50% {
        font-variation-settings: 'wght'300;
    }

    100% {
        font-variation-settings: 'wght'600;
    }
}

.standard_size {
    display: block;
    font-size: 16rem;
    margin-top: -4.65rem;
    pointer-events: all;
}

.scrolled_size {
    font-size: 2rem;
    margin-top: -0.35rem;
    cursor: pointer;
    pointer-events: all;
    position: fixed;
    top: 0;
}

#logo a {
    pointer-events: all;
    cursor: pointer;
}

#standard_navigation {
    display: flex;
    position: fixed;
    right: 0;
    top: 0;
    background-color: var(--meety_navigation);
    z-index: 2;
    justify-content: flex-end;
    height: 2.7rem;
}

.navigation_item {
    padding: 0.7rem 0.75rem 0.65rem 0.75rem;
}

.navigation_item:nth-child(1) {
    padding-left: 1.5rem;
}

.navigation_item:nth-last-child(1) {
    padding-right: 1.5rem;
}

#standard_navigation a:hover,
#standard_navigation a.active {
    color: var(--meety_coral);
    cursor: pointer;
}

.dropdown_content {
    display: none;
    position: absolute;
    background-color: var(--meety_navigation);
    z-index: 1;
}

.dropdown_content a {
    color: black;
    padding: 0.7rem 1.5rem 0.65rem 1.5rem;
    display: block;
    border-top: 1px solid var(--meety_coral);
    transition: background-color 0.4s;
}

.dropdown_content a br {
content: "";
}

.dropdown_content a br:after {
content: " ";
}

.dropdown_content a:hover {
    background-color: var(--meety_lightgray);
}

.dropdown:hover .dropdown_content {
    display: block;
}

#close_button {
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    background-color: var(--meety_navigation);
    z-index: 4;
    height: 2.7rem;
    transition: background-color 0.4s, color 0.2s;
}

#close_button:hover {
    background-color: var(--meety_coral);
    cursor: pointer;
}

#close_button:hover div {
    color: var(--meety_white);
}

#close_button div {
    line-height: 100%;
    padding: 0 1rem;
    font-family: "SchindlerRRBoldSymbols", sans-serif;
    font-size: 3rem;
    color: var(--meety_coral);
    margin-top: 0.05rem;
}


/* Angebote Teaser */

#header_text {
    display: flex;
    color: var(--meety_white);
    font-size: calc(1rem * 7);
    line-height: 70%;
    margin-top: auto;
    padding: 2rem;
}

#header_text div:nth-child(1) {
    transition: transform 0.1s linear;
}

#header_text div:nth-child(1):hover {
    cursor: pointer;
    transform: scale(1.05);
}

#header_text div {
    line-height: 100%;
}

#header_text div:nth-child(1) {
    align-self: flex-end;
}

#header_text div:nth-child(2) {
    margin-left: auto;
    text-align: right;
}


/* Angebote Teaser */

#angebote_teaser {
    display: flex;
    padding: 1.5rem;
    gap: 1.5rem;
    padding-bottom: 0;
}

.angebot_teaser {
    height: 10.5rem;
    width: calc(100% / 4);
    padding: 0.75rem 1rem 0.6rem 1rem;
    background-color: var(--meety_midnightblue);
    display: flex;
    flex-direction: column;
    transition: background-color 0.5s, color 0.25s, border 0.5s;
    position: relative;
}

.angebot_teaser:nth-child(1) {
    background-color: var(--meety_lightskyblue);
    border: 1px solid var(--meety_lightskyblue);
}

.angebot_teaser:nth-child(2) {
    background-color: var(--meety_lightgreen);
    border: 1px solid var(--meety_lightgreen);
}

.angebot_teaser:nth-child(3) {
    background-color: var(--meety_lightcoral);
    border: 1px solid var(--meety_lightcoral);
}

.angebot_teaser:nth-child(4) {
    background-color: var(--meety_lightyellow);
    border: 1px solid var(--meety_lightyellow);
}

.angebot_teaser:hover {
    border: 1px solid var(--meety_coral);
    color: var(--meety_white);
    background-color: var(--meety_midnightblue);
    cursor: pointer;
}

.angebot_teaser .text_type_d {
    margin-top: auto;
}

.angebot_teaser .arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}


/* Introduction Text */

#introduction_text {
    padding: 7.1rem 1.5rem 6.85rem 1.5rem;
    grid-column-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

#introduction_text h1 {
    grid-column-start: 2;
    grid-column-end: 3;
    color: var(--meety_coral);
    margin-top: 0.1rem;
}

#introduction_text div {
    color: var(--meety_white);
    grid-column-start: 3;
    grid-column-end: 6;
}

.highlighting {
    font-family: "CamptonSemiBold";
    color: var(--meety_coral);
}


/* Isotope Gallery */

#insights_isotope_gallery h3 {
    padding: 0 1.5rem;
    color: var(--meety_white);
}

#isotope_gallery_container {
    width: 100%;
    padding: 0.45rem 0.75rem 0.75rem 0.75rem;
}

.isotope_gallery_item,
.isotope_gallery_sizer {
    position: relative;
    width: calc(100% / 4);
    color: var(--meety_white);
}

.isotope_gallery_item {
    padding: 0.75rem;
}

.isotope_gallery_item_inner {
    padding: 1rem;
    border: 1px solid var(--meety_coral);
    transition: background-color 0.5s, color 0.25s, border 0.5s;
}

.isotope_gallery_item_inner:hover {
    background-color: var(--meety_superlightcoral);
    border: 1px solid var(--meety_superlightcoral);
    color: var(--meety_midnightblue);
    cursor: pointer;
}

.isotope_gallery_item_inner p:not(:last-child) {
    margin-bottom: 1.4rem;
}

.image {
    overflow: hidden;
}

.image img {
    transition: transform 0.2s linear;
    width: 100%;
}

.isotope_gallery_item_inner:hover .image img {
    transform: scale(1.05);
}

#insights_isotope_gallery .isotope_gallery_item .text_type_a {
    margin-top: 0.8rem;
}

.isotope_gallery_item h2 {
    margin-top: 0.5rem;
    margin-bottom: -0.35rem;
}

#insights_isotope_gallery .isotope_gallery_item h2 {
    margin-top: 0.75rem;
    margin-bottom: -0.4rem;
}

#insights_isotope_gallery .more_button {
    display: flex;
    justify-content: right;
    color: var(--meety_white);
    padding: 0 1.5rem 0 1.5rem;
    margin-top: -0.25rem;
}

.more_button a:hover {
    color: var(--meety_coral);
    cursor: pointer;
}


/* CTA Buttons */

#cta_buttons_container {
    margin: 7.25rem 0 5.8rem 0;
    display: flex;
    justify-content: center;
}

.cta_button {
    padding: 0.9rem 1.5rem 0.9rem 1.5rem;
    background-color: var(--meety_yellow);
    border-radius: 2rem;
    transition: transform 0.2s linear;
}

.cta_button:hover {
    transform: scale(1.05);
    cursor: pointer;
}


/* Footer */

footer {
    margin-top: auto;
    padding: 1.5rem;
    padding-bottom: 1.25rem;
    color: var(--meety_white);
}

footer a:hover {
    color: var(--meety_coral);
    cursor: pointer;
}


/* Mobile Navigation */

#mobile_navigation_button,
#mobile_close_button {
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    background-color: var(--meety_navigation);
    z-index: 4;
    height: 4.1rem;
    transition: background-color 0.4s, color 0.2s;
}

#mobile_navigation_button:hover,
#mobile_close_button:hover {
    cursor: pointer;
}

#mobile_navigation_button:hover div,
#mobile_close_button:hover div {
}

#mobile_navigation_button div,
#mobile_close_button div {
    line-height: 100%;
    padding: 0 1.5rem;
    font-family: "SchindlerRRBoldSymbols", sans-serif;
    font-size: 3.5rem;
    color: var(--meety_coral);
    margin-top: 0.45rem;
}

#mobile_navigation {
    display: flex;
    flex-direction: column;
    z-index: 3;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--meety_midnightblue);
    overflow-y: auto;
}

#mobile_navigation_logo {
    padding: 0 1.5rem 0 1.5rem;
    font-family: "meety", sans-serif;
    color: var(--meety_coral);
    font-variation-settings: 'wght'600;
    font-size: 6rem;
    margin-top: -0.8rem;
}

#mobile_navigation_main_area {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    font-size: 3rem;
    color: var(--meety_white);
}

#mobile_navigation_main_area a {
    border-bottom: 1px solid var(--meety_coral);
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}

#mobile_navigation_main_area a:hover {
    cursor: pointer;
    background-color: var(--meety_navigation);
    color: var(--meety_midnightblue);
}

#mobile_navigation_main_area a:nth-child(1) {
    border-top: 1px solid var(--meety_coral);
}

#mobile_navigation_footer {
    padding: 1.25rem 1.5rem 1.25rem 1.5rem;
    display: flex;
    margin-top: auto;
    color: var(--meety_white);
}

#mobile_navigation_footer div:nth-child(2) {
    margin-left: auto;
}

#mobile_navigation_footer a:hover {
    cursor: pointer;
    color: var(--meety_coral);
}

#mobile_navigation_button,
#mobile_navigation,
#mobile_close_button {
    display: none;
}


/* Window Size A Start */

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


    /* Presettings */

    html {
        font-size: 20px;
    }


    /* Window Size A End */

}


/* Window Size B2 Start */

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


    /* Presettings */

    html {
        font-size: calc(1.07 * 1.0810810810810811vw);
    }


    /* Window Size B2 End */

}


/* Window Size C Start */

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


    /* Presettings */

    html {
        font-size: 20px;
    }




    /* Background */

    #background {
        height: 100%;
        width: 100%;

    }

    #animation {
        transform: scale(1.4);
    }


    /* Header */

    .scrolled_size {
        font-size: 3rem;
        background-color: var(--meety_navigation);
        width: 100%;
        margin-top: -0.5rem;
        padding-bottom: 0.55rem;
    }

    #standard_navigation {
        display: none;
    }

    #mobile_navigation_button,
    #mobile_close_button {
        display: block;
    }


    /* Angebote Teaser */

    #header_text {
        font-size: calc(1rem * 4.5);
    }

    #header_text div {
        line-height: 100%;
    }

    #header_text div:nth-child(1) {
        align-self: flex-end;
    }

    #header_text div:nth-child(2) {
        margin-left: auto;
        text-align: right;
    }

    #angebote_teaser {
        flex-wrap: wrap;
    }

    .angebot_teaser {
        width: calc(100% / 2 - 0.75rem);
    }


    /* Introduction Text */

    #introduction_text h1 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    #introduction_text div {
        color: var(--meety_white);
        grid-column-start: 3;
        grid-column-end: 7;
    }


    /* Isotope Gallery */

    .isotope_gallery_item,
    .isotope_gallery_sizer {
        width: calc(100% / 3);
    }


    /* Window Size C End */

}


/* Window Size D Start */

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


    /* Isotope Gallery */

    .isotope_gallery_item,
    .isotope_gallery_sizer {
        width: calc(100% / 2);
    }


    /* Window Size D End */

}


/* Window Size E Start */

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


    /* Presettings */

    html {
        font-size: 2vw;
    }


    /* Window Size E End */

}


/* Window Size F Start */

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


    /* Presettings */

    * {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    #header_text div:nth-child(2) {
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
}


    html {
        font-size: 3vw;
    }


    /* Background */

    #animation {
        transform: scale(3);
    }


    /* Header */

    header {
        height: auto;
        position: relative;

    }

    #slogan {
        top: 7.25rem;
        margin-left: 0.4rem;
        font-size: 0.795rem;
        display: none;
    }

    .standard_size {
        font-size: 6rem;
        margin-top: -0.8rem;
        margin-bottom: 1.25rem;
    }

    .scrolled_size {
        font-size: 3rem;
        margin-top: -0.55rem;
        padding-bottom: 0.6rem;
    }

    #header_text {
        margin-top: 13rem;
        font-size: calc(1rem * 3);
    }

    #header_text div:nth-child(1) {
        display: none;
    }


    /* Angebote Teaser */

    #angebote_teaser {
        margin-top: -0.9rem;
    }

    .angebot_teaser {
        width: 100%;
    }

    #introduction_text h1 {
        grid-column-start: 1;
        grid-column-end: 7;
        margin-bottom: 1.7rem;
    }

    #introduction_text div {
        grid-column-start: 1;
        grid-column-end: 7;
    }


    /* Isotope Gallery */

    .isotope_gallery_item,
    .isotope_gallery_sizer {
        width: 100%;
    }


    /* Window Size F End */

}


/* Window Size H Start */

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


    /* Presettings */

    html {
        font-size: 4.5vw;
    }


    /* Header */

    header {
    }

    #header_text {
        margin-top: 13rem;
        font-size: calc(1rem * 2.1);
    }

       #header_text div {
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }


    /* Angebote Teaser */

    #angebote_teaser {
    }


    /* Window Size H End */

}


/* Window Size I Start */

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


    /* Presettings */

    html {
        font-size: 4.63vw;
    }

    /* Window Size I End */

}