/* Schriftarten */
@font-face {
    font-family: 'bodoni-mt';
    src: url('../fonts/bodoni-mt.tff'); /* IE9 */
    src: local('bodoni-mt'), url('../fonts/bodoni-mt.ttf') format('ttf'),
        url('../fonts/bodoni-mt.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    font-family: bodoni-mt;
}

h2 {text-transform: uppercase; font-weight: 300;}

h4 {text-transform: uppercase; font-size: 1.4em;}

h6 {text-transform: uppercase; font-weight: 300; font-size: 1.0em;}

a {color: #6c868c; text-decoration: none; transition: all 0.4s;}

a::hover {transform: scale(1.2);}

html {
    width: 100vw;
    height: 100vh;
}

body {
    background-color: #e6e6e6;
    color: #2e2e2e;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
    -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
}

.header-container {
    background-color: #e6e6e6;
    border-top: 1px solid #6c868c;
    border-bottom: 1px solid #6c868c;
    width: 100vw;
    height: 20vh;
    position: fixed;
    z-index: 1;
}

.nav-container ul {
    position: fixed;
    display: flex;
    right: 3em;
    top: 14vh;
}

.nav-container li {
    margin: 1em;
    font-size: 1.3em;
    list-style: none;
    text-transform: uppercase;
    transition: all 0.4s;
}

.nav-container a {
    text-decoration: none;
    color: black;
}

.insta {
    display: inline-block;
    margin-right: 10px; /* Abstand zwischen den Icons */
}

/* Falls die Bilder in einem Container sind, können Sie auch den Container zentrieren */
.insta:last-child {
    margin-right: 0; /* Kein Abstand nach dem letzten Element */
}

.nav-container li:hover {transform: scale(1.2);}

img.align-left {float: left; margin-right: 10px;}

img.align-right {float: right; margin-left: 10px;}

img.align-center {display: block; margin: 0 auto;}

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

img.medium {width: 30%; height: auto;}

img.small {width: 25%; height: auto;}

.row {width: 100%; margin-top: 20px; height: 33%;}

.swipe-up {width: 100%;}

.swipe-up img {width: 30vw;}

/* Desktop & Tablet Querformat*/
@media {

    .logo-container img {
        height: 15vh;
        width: auto;
        margin: 1em;
    }

    .main-container {
        width: 100vw;
        height: 80vh;
        position: fixed;
        top: 20vh;
        font-size: 1.5em; /* Globale Schriftgrösse */

        overflow: none;

        background-image: url(../images/background_logo.png);
        background-size: 100%;
        background-position: -40vw;
        background-repeat: no-repeat;
    }


    .second-container {
        width: 80vh;
        height: 100vw;
        transform: rotate(-90deg) translateX(-80vh);
        transform-origin: top left;
        overflow-x: hidden;
        overflow-y: scroll;

        overflow: auto;

        scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
        -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
        scroll-behavior: smooth;
    }

    .content-container {

        display: flex;
        flex-direction: row;
        transform: rotate(90deg) translateY(-80vh);
        transform-origin: top left;
        overflow: none;
        scrollbar-width: none;
        //width: 746vw;
        width: 80vh;
        height: 746vw;
    }

    .second-container::-webkit-scrollbar {display: none;}

    .page {
        height: 80vh;
        padding: 2em;
    }


    .first {
        scroll-snap-align: start;
        min-width: 95vw;
        text-align: center;
    }

    .first h2 {margin-bottom: 0.5em;}

    .first img {transition: all 0.4s; margin: 2em;}

    .first img:hover {transform: scale(1.1);}

    .swipe-up {visibility: hidden;}


    .first-photo {
        min-width: 70vw;
        background-image: url(../photos/1_desktop.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }


    .second {
        scroll-snap-align: start;
        min-width: 200vw;
    }

    .deals {
        height: 80vh;
        min-width: 200vw;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .deals-bg {
        width: 100%;
        height: 80vh;

        display: flex;
        flex-direction: row;

        font-size: 0.8em;
    }

    .women-deals {
        height: 80vh;
        width: 66vw;
        padding: 20px;
        scroll-snap-align: start;
    }

    .men-deals {
        height: 80vh;
        width: 66vw;
        scroll-snap-align: start;
    }

    .table {
        display: table;
        border-collapse:collapse;
        width: 96%;
    }

    .tr {display: table-row;}

    .td {display: table-cell; border-bottom: 1px solid grey; padding: 5px;}

    .different-deals {
        height: 80vh;
        width: 66vw;
        scroll-snap-align: start;
    }


    .second-photo {
        min-width: 70vw;
        background-image: url(../photos/2_desktop.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }


    .third {
        scroll-snap-align: start;
        min-width: 70vw;
    }

    .third-photo {
        min-width: 70vw;
        background-image: url(../photos/3_desktop.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .fourth {
        scroll-snap-align: start;
        min-width: 95vw;
    }

    .fourth p {margin: 25px 0px 25px 0px;}

    .column-first {
        float: left;
        width: 30%;
        margin: 10px;
    }

    .column-second {
        float: left;
        width: 50%;
        margin: 10px;
    }

    .column-second li {list-style: none;}

    .fourth-photo {
        min-width: 70vw;
        background-image: url(../photos/4_desktop.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .footer {width: 6vw;}

    .footer p {writing-mode: vertical-lr; font-size: 0.9em;}

    /* --------------- Popup Fenster ----------- */
    .popup {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 2;
      opacity: 0;  /* Startet als unsichtbar */
      visibility: hidden;  /* Nicht im Dokument sichtbar */
      transition: opacity 0.5s, visibility 0.5s;
    }

    .popup.show {
      opacity: 1;  /* Vollständig sichtbar */
      visibility: visible;  /* Im Dokument sichtbar */
    }

    .popup-content {
      position: absolute;
      font-size:1.4em;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 80px;
      width: 40vw;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      cursor: default;
    }

    .close-button {
      color: #a8b5b8;
      float: right;
      width: 20px;
      height: 20px;
      font-size: 40px;
      cursor: pointer;
      transition: 0.2s;
    }

    .close-button:hover {
      transform: scale(1.4);
    }

    #openPopup {
      font-size: 1em;
      background-color: #a8b5b8;
      color: white;
      border-radius: 20px;
      border: none;
      width: 200px;
      height: 40px;
      transition: 0.5s;
    }

    #openPopup:hover {
      transform: scale(1.1);
    }


}

@media (min-width: 2880px) and (min-height: 1440px){

    html {
        font-size: 2em;
    }

    .first img {width: 100px; margin-top: 50px;}

}

@media (max-height: 800px) {

    body {
        font-size: 0.6em;
    }

    .deals-bg {
        font-size: 0.6em;
    }
}

/* Halber Desktop */
@media (max-width: 1024px){

    body {
        font-size: 0.9em;
    }

    img.big {width: 65%; height: auto;}

    img.medium {width: 45%; height: auto;}

    img.small {width: 25%; height: auto;}

    .header-container {height: 30vh;}

    .logo-container img {
        height: 12vh;
        width: auto;
        margin-top: 8vh;
        margin-left: 5vw;
    }


    .nav-container ul {
        position: fixed;
        display: block;
        right: 0.5em;
        top: 0.1em;
    }


    .nav-container li {
        margin: 3vh 0.5em 0em 0em;
        font-size: 1.6em;
        list-style: none;
    }

    .nav-container a {
        text-decoration: none;
    }

    .main-container {
        top: 30vh;
        background-size: 120%;
    }

    .page {
        height: 70vh;
    }

    .first img {margin: 0.8em;}

    .content-container {width: 1086vw;}

    .first {width: 90vw;}
    .first-photo{width: 140vw; background-image: url(../photos/1_desktop_half.jpg);}
    .second {width: 250vw;}
    .second-photo{width: 140vw; background-image: url(../photos/2_desktop_half.jpg);}
    .third {width: 90vw;}
    .third-photo{width: 140vw; background-image: url(../photos/3_desktop_half.jpg);}
    .fourth {width: 90vw;}
    .fourth-photo{width: 140vw; background-image: url(../photos/4_desktop_half.jpg);}
    .footer {width: 6vw;}


    .deals {
        height: 70vh;
        width: 250vw;
    }

    .deals-bg {
        width: 100%;
        height: 70vh;
        font-size: 0.63em;
    }

    .column-first {width: 50%; margin: 0;}

    .column-second {width: 45%; margin: 0;}


    .popup-content {
      width: 70vw;
    }

}


/* Tablet im Hochformat */
@media (orientation: portrait){

    body {font-size: 0.85em; }



    .header-container {height: 30vh;}

    .logo-container img {
        height: 12vh;
        width: auto;
        margin: 8vh 0em 0em 5vw;
    }

    .nav-container ul {
        position: fixed;
        display: block;
        right: 0.5em;
    }

    .nav-container li {list-style: none;}

    .nav-container a {text-decoration: none;}

    .main-container {top: 30vh;}

    .page {height: 70vh;}

    .first-photo{width: 140vw;}
    .second-photo{width: 140vw;}
    .third-photo{width: 140vw;}
    .fourth-photo{width: 140vw;}
}


/* Mobile Device im Hochformat*/
@media (max-width: 425px){

    img.medium {width: 50%; height: auto;}

    .nav-list {visibility: hidden; display: none; font-size: 0em;}

    body {
        font-size: 0.65em;
    }

    .logo-container { margin:0; padding: 5vh 1em 0em 1em;}

    .logo-container img{display: block; margin: 0 auto; width: auto 100%; height: 10vh;}

    .header-container {
        height: 20vh;
    }

    .main-container {
        width: 100vw;
        height: 80vh;
        position: fixed;
        top: 20vh;
        background-position: -60vw;
        background-size: 140%;
        scroll-snap-type: y mandatory;
    }


    .second-container {
        width: 100vw;
        height: 80vh;
        transform: none;
        overflow-y: scroll;
        overflow-x: scroll;
        overflow: auto;
    }


    .content-container {
        width: 100vw;
        height: 558vh;
        display: block;
        transform: none;
        overflow: hidden;
    }


    .page {
        width: 90vw;
        padding: 1em;
    }


    .first {height: 70vh;}

    .swipe-up {visibility: visible;}

    .first-photo {
        background-image: url(../photos/1_mobile.jpg);
        height: 60vh;
        width: 100vw;
        padding: 0em;
    }

    .second {height: 75vh;}

    .deals {
        margin-top: 1vh;
        height: 78%;
        width: 100vw;

        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .deals-bg {
        height: 100%;
        width: 550vw;
        display: flex;
        flex-direction: row;
    }

    .second-photo {
        background-image: url(../photos/2_mobile.jpg);
        height: 60vh;
        width: 100vw;
        padding: 0em;
    }


    .third {height: 70vh;}

    .third-photo {
        background-image: url(../photos/3_mobile.jpg);
        height: 60vh;
        width: 100vw;
        padding: 0em;
    }


    .fourth {height: 70vh;}


    .column-first {
        float: left;
        width: 40%;
        margin-right: 20%;
    }

    .column-first img {
        width: 50vw;
    }

    .column-second {
        float: left;
        width: 20%;
    }

    .fourth-photo {
        background-image: url(../photos/4_mobile.jpg);
        height: 60vh;
        width: 100vw;
        padding: 0em;
    }

    .footer {height: 8vh;}

    .footer p {writing-mode: horizontal-tb;}

    .popup-content {
      font-size:1.2em;
      padding: 10px;
      width: 70vw;
    }


}


/* Mobile Device im Quervermat */
@media (max-height: 425px) and (orientation: landscape) {

    .header-container {
        width: 22vw;
        height: 100vh;
        border-top: none;
        border-bottom: none;
        border-right: 1px solid #6c868c;
    }

    .header-container img {
        transform: rotate(-90deg) translateX(-50vh);
        position: fixed;
        width: 80vh;
        height: auto;
        left: -20vw;
        top: -20vh;
    }

    .nav-list {visibility: hidden; display: none;}

    .main-container {
        width: 78vw;
        height: 100vh;
        position: fixed;
        top: 0vh;
        left:20vw;
    }

    .second-container {
        width: 78vw;
        height: 100vh;
        transform: none;
        overflow-y: scroll;
        overflow-x: scroll;
        overflow: auto;
    }

    .content-container {
        width: 78vw;
        height: 1230vh;
        display: block;
        transform: none;
        overflow: hidden;
    }

    .page {
        width: 75vw;
        padding: 1em;
    }

    .first {height: 140vh;}

    .first-photo {
        height: 150vh;
        width: 100%;
        padding: 0em;
    }

    .second {height: 160vh;}

    .deals {
        margin-top: 1vh;
        height: 140vh;
        width: 100%;

        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .deals-bg {
        height: 100%;
        width: 450vw;
        display: flex;
        flex-direction: row;
    }

    .second-photo {
        height: 140vh;
        width: 100%;
        padding: 0em;
    }

    .third {height: 140vh;}

    .third-photo {
        height: 140vh;
        width: 100%;
        padding: 0em;
    }

    .fourth {height: 140vh;}

    .fourth-photo {
        height: 140vh;
        width: 100%;
        padding: 0em;
    }

    .footer {height: 8vh;}

    .footer p {writing-mode: horizontal-tb;}
}