/*CSS Reset */
 /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  /* Set core root defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }

  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: geometricPrecision;
    line-height: 1.5;
  }

  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
    scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }



/*  css reset till this point */

/* FONTS */

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

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

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

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

/* VARIABLES */

:root{
  --text-font: "propora_regular";
  --heading-font-regular: "maziusreview_regular";
  --heading-font-extraitalic: "maziusreview_extraitalic";
  --blue-color: #CAD5FF;
  --green-color: #888512;
  --nav-menu-width-mobil: 85vw;
  --nav-menu-width-desktop: 681px;
  --nav-menu-width-tablet: 532px;
  --nav-menu-margin: 50px;
  --nav-menu-content-height-mobil: 1000px;
  --nav-menu-content-height-tablet: 367px;
  --nav-menu-content-height-desktop: 460px;
  --word-left-mobil: 72px;
  --word-left-tablet: 108px;
  --word-left-desktop: 137px;
  --navbar-height-mobil: 41px;
  --navbar-height-tablet: 61px;
  --navbar-height-desktop: 78px;
}

/* CONTAINER */


.container {
    width: 100vw;
    min-height: 100vh;

    background-color: white;
    overflow: hidden;
}


/* NAV-MENU */

.nav-menu {
  overflow: hidden;
  transition: height 0.8s;
  z-index: 1;
}

.nav-menu.folded {
  background-color: var(--blue-color);  
}

.nav-menu.unfolded {
  height: auto;
  background-color: var(--blue-color);
  transition: height 0.8s;
}

/* mobile */
@media screen and (max-width: 767px){
  .nav-menu {
    position: relative;
    width: var(--nav-menu-width-mobil);
    border-radius: 14px;
    margin: 0 auto;
    margin-bottom: 33px;
  }

  .nav-menu.folded {
    height: var(--navbar-height-mobil);
  }

}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1260px){
  .nav-menu {
    position: absolute;
    top: var(--nav-menu-margin);
    right: var(--nav-menu-margin);
    width: var(--nav-menu-width-tablet);
    border-radius: 30px;

  }

  .nav-menu.folded {
    height: var(--navbar-height-tablet);
  }
}

/* desktop */
@media screen and (min-width: 1261px){
  .nav-menu {
    position: absolute;
    top: var(--nav-menu-margin);
    right: var(--nav-menu-margin);
    width: var(--nav-menu-width-desktop);
    border-radius: 30px;

  }

  .nav-menu.folded {
    height: var(--navbar-height-desktop);
  }
}



/* NAV-BAR */

.nav-bar {
  position: relative;

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* mobile */
@media screen and (max-width: 767px){
  .nav-bar {
    height: var(--navbar-height-mobil);
    border-radius: 14px;
  }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1260px){
  .nav-bar {
    height: var(--navbar-height-tablet);
    border-radius: 30px;
  }
}

/* desktop */
@media screen and (min-width: 1261px){
  .nav-bar {
    height: var(--navbar-height-desktop);
    border-radius: 30px;
  }
}


/* NAV-ITEM */

.nav-item {
    width: calc(100% / 3);
    text-align: center;
    z-index: 1;
}


.nav-item h2 {
    font-family: "maziusreview_regular";
    color: white;
    z-index: 1;
    font-weight: 1;
    cursor: pointer;
    z-index: 1;
    display: inline;
}

h2 em {
  font-family: "maziusreview_extraitalic";
  font-style: normal;
  font-weight: 1;
  z-index: -1;
}

.nav-item p {
  font-family: "maziusreview_regular";
  color: white;
  z-index: 1;
  font-size: 20px;
  position: relative;
}

@media screen and (max-width: 767px){
  .nav-item h2 {
    font-size: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1260px){
  .nav-item h2 {
    font-size: 30px;
  }
}

@media screen and (min-width: 1261px){
  .nav-item h2 {
    font-size: 38px;
  }
}

/* NAV-ITEM BACKGROUND */

.nav-item-background{
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, 0);
  height:100%;
  width: calc(100% / 3);
  border-radius: 14px;
}

@media screen and (max-width: 767px){
  .nav-item-background{
    border-radius: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1260px){
  .nav-item-background{
    border-radius: 30px;
  }
}

@media screen and (min-width: 1261px){
  .nav-item-background{
    border-radius: 30px;
  }
}

.folded .nav-item-background {
    background-color: var(--blue-color);
}

.unfolded .nav-item-background {
    background-color: var(--green-color);
}

  /* NAV-ITEM BACKGROUND Animation  */

.left .nav-item-background{
  transform: translate(-150%, 0);
}

.center .nav-item-background{
    transform: translate(-50%, 0);
}

.right .nav-item-background{
    transform: translate(50%, 0);
}


.center-left .nav-item-background{
  animation: center-left;
  animation-duration: 0.8s;
  /* animation-timing-function: ease-out; */
  transform: translate(-150%, 0);
}

.right-center .nav-item-background{
  animation: right-center;
  animation-duration: 0.8s;
  /* animation-timing-function: ease-out; */
  transform: translate(-50%, 0);
}

.left-center .nav-item-background{
  animation: left-center;
  animation-duration: 0.8s;
  /* animation-timing-function: ease-out; */
  transform: translate(-50%, 0);
}

.center-right .nav-item-background{
  animation: center-right;
  animation-duration: 0.8s;
  /* animation-timing-function: ease-out; */
  transform: translate(50%, 0);
}

.right-left .nav-item-background{
  animation: right-left;
  animation-duration: 0.8s;
  /* animation-timing-function: ease-out; */
  transform: translate(-150%, 0);
}

.left-right .nav-item-background{
  animation: left-right;
  animation-duration: 0.8s;
  /* animation-timing-function: ease-out; */
  transform: translate(50%, 0);
}

  @keyframes center-left {
    from {
      transform: translate(-50%, 0);
      
    }

    to {
      transform: translate(-150%, 0);
      
    }
  }

  @keyframes left-center {
    from {
      transform: translate(-150%, 0);
      
    }

    to {
      transform: translate(-50%, 0);
      
    }
  }

  @keyframes center-right {
    from {
      transform: translate(-50%, 0);
      
    }

    to {
      transform: translate(50%, 0);
      
    }
  }

  @keyframes right-center {
    from {
      transform: translate(50%, 0);
      
    }

    to {
      transform: translate(-50%, 0);
      
    }
  }

  @keyframes right-left {
    from {
      transform: translate(50%, 0);
      
    }

    to {
      transform: translate(-150%, 0);
      
    }
  }

  @keyframes left-right {
    from {
      transform: translate(-150%, 0);
      
    }

    to {
      transform: translate(50%, 0);
      
    }
  }



/* NAV CONTENT */

.nav-content {
  position: relative;
  /* max-height: 40vh;
  overflow-x: scroll;
  overflow-y: hidden; */
}

.folded .nav-content {
  position: relative;
  opacity: 0;
  height: 0;
  
}

.unfolded .nav-content {
  position: relative;
  display: block;
  opacity: 1;
  z-index: 1;
}

@media screen and (max-width: 767px){
  .folded .nav-content {
    width: var(--nav-menu-width-mobil);
  }

  .nav-content {
    width: var(--nav-menu-width-mobil)
  }
}

@media screen and (min-width: 768px) and (max-width: 1260px){
  .folded .nav-content {
    width: var(--nav-menu-width-tablet);
  }

  .nav-content {
    width: var(--nav-menu-width-tablet)
  }
}

@media screen and (min-width: 1261px){
  .folded .nav-content {
    width: var(--nav-menu-width-desktop);
  }

  .nav-content {
    width: var(--nav-menu-width-desktop)
  }
}

.center .nav-content{
  transform: translate(-100% , 0);
}

.center-left .nav-content{
  animation: content-center-left;
  animation-duration: 0.8s;
  transform: translate(0% , 0);
}

@keyframes content-center-left {
  from {
    transform: translate(-100%, 0);
    
  }

  to {
    transform: translate(0 , 0);
    
  }
}

.center-right .nav-content{
  animation: content-center-right;
  animation-duration: 0.8s;
  transform: translate(-200% , 0);
}

@keyframes content-center-right {
  from {
    transform: translate(-100%, 0);
    
  }

  to {
    transform: translate(-200%, 0);
    
  }
}

.left .nav-content{
  transform: translate(0% , 0);
}

.left-center .nav-content{
  animation: content-left-center;
  animation-duration: 0.8s;
  transform: translate(-100% , 0);
}

@keyframes content-left-center {
  from {
    transform: translate(0%, 0);
    
  }

  to {
    transform: translate(-100%, 0);
    
  }
}

.left-right .nav-content{
  animation: content-left-right;
  animation-duration: 0.8s;
  transform: translate(-200% , 0);
}

@keyframes content-left-right {
  from {
    transform: translate(0%, 0);
    
  }

  to {
    transform: translate(-200%, 0);
    
  }
}

.right .nav-content{
  transform: translate(-200%, 0);
}

.right-left .nav-content{
  animation: content-right-left;
  animation-duration: 0.8s;
  transform: translate(0% , 0);
}

@keyframes content-right-left {
  from {
    transform: translate(-200%, 0);
    
  }

  to {
    transform: translate(0%, 0);
    
  }
}

.right-center .nav-content{
  animation: content-right-center;
  animation-duration: 0.8s;
  transform: translate(-100% , 0);
}

@keyframes content-right-center {
  from {
    transform: translate(-200%, 0);
    
  }

  to {
    transform: translate(-100%, 0);
    
  }
}


/* NAV-CONTENT-ITEM  */



.nav-content-item {
  position: absolute;
}

.nav-content-item.active {
  position: relative;
  /* max-height: var(--nav-menu-content-height);
  overflow: scroll; */
}

#content-method {
  top: 0px;
  left: 0%;
}

#content-elena {
  top: 0px;
  left: 100%;

}

#content-booking {
  top: 0px;
  left:200%;
}

.nav-content-item p {
  font-family: "propora_regular";
  color: #FFFFFF;
  width: 100%;
}

.nav-content-item .image-container{
  width: 100%;
  overflow: hidden;
}

.nav-content-item::-webkit-scrollbar {
  display: none;
}

.nav-content-item{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.nav-content-item-text a {
  color: white;
}

@media screen and (max-width: 767px){
  .nav-content-item {
    width: calc(var(--nav-menu-width-mobil) - 2 * (calc((100% / 3 - var(--word-left-mobil)) / 2)));
    margin-right: calc((var(--nav-menu-width-mobil) / 3 - var(--word-left-mobil)) / 2);
    margin-left: calc((var(--nav-menu-width-mobil) / 3 - var(--word-left-mobil)) / 2);
  }

  .nav-content-item.active {
    max-height: var(--nav-menu-content-height-mobil);
    overflow: scroll;
  }

  .nav-content-item p {
    font-size: 12px;
    margin: calc(var(--navbar-height-mobil) / 2) 0;
  }

  .nav-content-item .image-container{
    border-radius: 14px;
    margin: calc(var(--navbar-height-mobil) / 2) 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1260px){
  .nav-content-item {
    width: calc(var(--nav-menu-width-tablet) - 2 * (calc((100% / 3 - var(--word-left-tablet)) / 2)));
    margin-right: calc((var(--nav-menu-width-tablet) / 3 - var(--word-left-tablet)) / 2);
    margin-left: calc((var(--nav-menu-width-tablet) / 3 - var(--word-left-tablet)) / 2);
  }

  .nav-content-item.active {
    max-height: var(--nav-menu-content-height-tablet);
    overflow: scroll;
  }

  .nav-content-item p {
    font-size: 14px;
    /* margin: calc((var(--nav-menu-width-tablet) / 3 - var(--word-left-tablet)) / 2) 0; */
    margin: 33px 0;
    
  }

  .nav-content-item .image-container{
    border-radius: 30px;
    /* margin: calc((var(--nav-menu-width-tablet) / 3 - var(--word-left-tablet)) / 2) 0; */
    margin: 33px 0;
    
  }
}

@media screen and (min-width: 1261px){
  .nav-content-item {
    width: calc(var(--nav-menu-width-desktop) - 2 * (calc((100% / 3 - var(--word-left-desktop)) / 2)));
    margin-right: calc((var(--nav-menu-width-desktop) / 3 - var(--word-left-desktop)) / 2);
    margin-left: calc((var(--nav-menu-width-desktop) / 3 - var(--word-left-desktop)) / 2);
  }

  .nav-content-item.active {
    max-height: var(--nav-menu-content-height-desktop);
    overflow: scroll;
  }

  .nav-content-item p {
    font-size: 18px;
    /* margin: calc((var(--nav-menu-width-desktop) / 3 - var(--word-left-desktop)) / 2) 0; */
    margin: 33px 0;
  }

  .nav-content-item .image-container{
    border-radius: 30px;
    /* margin: calc((var(--nav-menu-width-desktop) / 3 - var(--word-left-desktop)) / 2) 0; */
    margin: 33px 0;
  }
}



/* three js container */

@media screen and (max-width: 767px){
  #threejs-container {
    position: relative;
    top: 0px;
    left: 0px;
    
  }

}


/* tablet */
@media screen and (min-width: 768px) and (max-width: 1260px){
  #threejs-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
}

@media screen and (min-width: 1261px){
  #threejs-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
}

/* IMPRESSUM */

/* mobil */

footer {
  position: absolute;

}

footer a {
  font-family: "propora_regular";
  color: #ECEAEA;
  text-decoration: none;
}

@media screen and (max-width: 767px){
  footer {
    display: flex;
    width: 100vw;
    justify-content: flex-end;
  
  }

  footer a {
    font-size: 10px;
    margin: 0 5px 5px 0;
  }

}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1260px){
  footer {
    bottom: 10px;
    right: 10px;
  
  }
  
  footer a {
    font-size: 14px;
  }
}

/* desktop */
@media screen and (min-width: 1261px){
  footer {
    bottom: 10px;
    right: 10px;
  
  }
  
  footer a {
    font-size: 20px;
  }
}

/* IMRESSUMS */

.imp-box {
  position: absolute;
  top: 10vh;
  right: 10vh;

  height: 70%;

  background-color: var(--blue-color);

  overflow: scroll;

}

.imp-box a,
.imp-box h1,
.imp-box h2,
.imp-box h3,
.imp-box li,
.imp-box #text {
  color: white;
  font-family: "propora_regular";
}

@media screen and (max-width: 767px){
  .imp-box{
    border-radius: 14px;
    width: var(--nav-menu-width-mobil);
    position: relative;
    margin: 0 auto;
    top: 33vh;
    right: auto;
    height: 100vh;
  }

  .imp-box h1 {
    margin-top: calc(var(--navbar-height-mobil) / 2);
    font-size: 26px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1260px){
  .imp-box{
    border-radius: 30px;
    width: var(--nav-menu-width-tablet);
  }
  .imp-box h1 {
    margin-top: calc(var(--navbar-height-tablet) / 2);
  }
}

@media screen and (min-width: 1261px){
  .imp-box{
    border-radius: 30px;
    width: var(--nav-menu-width-desktop);
  }

  .imp-box h1 {
    margin-top: calc(var(--navbar-height-desktop) / 2);
  }
}