/************************************************
Layout Containers
************************************************/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
html {box-sizing: border-box;}

.hotoffer {
  padding: 25px 20px 10px 20px;
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: 100%;
  background-repeat: no-repeat;
  height: calc(33.33333vw - 20px);
}

.hotoffer.DE {background-image: url("../Images/Misc/HeissesAngebotDE.png");}
.hotoffer.EN {background-image: url("../Images/Misc/HeissesAngebotEN.png");}
.hotoffer.SP {background-image: url("../Images/Misc/HeissesAngebotSP.png");}


/* the asterisk * indicates that the style will be applied to all classes! */
*, *:before, *:after {box-sizing: border-box;}

.details-modal {
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  left: 50%; /* position of vertical axis */
  transform: translate(-50%, -40%);
  top: 50%;
  pointer-events: none;
  position: absolute;
  text-align: left;
  display: flex;
  flex-direction: column;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #000;
  z-index: 200;
}

/* unsuccessfull experiments
.details-modal {
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  left: 50%;
  transform: translate(-50%, -40%);
  top: 50%;
  pointer-events: none;
  position: fixed;
  text-align: left;
  display: flex;
  flex-direction: column;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #000;
  z-index: 200;
}
*/

.details-modal .details-modal-close {
  align-items: center;
  display: flex;
  justify-content: center;
  pointer-events: all;
  position: relative;
  width: 40px;
  height: 40px;
}
.details-modal .details-modal-close svg {display: block;}

.details-modal .details-modal-content {
  padding: 20px;
  pointer-events: all;
  overflow: auto;
}

.details-modal-overlay {
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  background: rgba(0, 0, 0, 1);
  position: fixed;
  opacity: 0;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

details[open] .details-modal-overlay {pointer-events: all; opacity: 0.5;}
details summary {list-style: none;}
details summary:focus {outline: none;}
details summary::-webkit-details-marker {display: none;}

.modaltriggerbutton {
  position: relative;
  right: -120%;
  bottom: 0px;
  width: 66%;
  border: 2px solid #fff;
  border-radius: 3em;
  display: inline-block;
  cursor: pointer;
  padding: 6px 1em 6px 1em;
  text-decoration: none;
  font: 1.6vw "Avenir Next", sans-serif;
  font-weight: bold;
  justify-content: center;
  color: #fff;
  text-align: center;
  background-color: var(--benebluemultiply);
}

.modaltriggerbutton:hover {
  cursor: pointer;
  transition: all .2s ease-in-out; border: 2px solid #000; color: #000;   background-color: var(--benebluelight);

}


.modalbutton {
  border: 2px solid #000;
  border-radius: 3em;
  display: inline-block;
  cursor: pointer;
  padding: 6px 1em 6px 1em;
  text-decoration: none;
  font: 1.6vw "Avenir Next", sans-serif;
  font-weight: bold;
  justify-content: center;
  color: #000;
  width: 100%;
  text-align: center;
  background-color: var(--beneorange);
}

.modalbutton:hover {transition: all .2s ease-in-out; border: 2px solid #000; color: #000;   background-color: var(--beneorangelight);
}




@media (max-aspect-ratio: 3/4) {
  .details-modal {width: 90vw; max-width: 90vw; height: 165vw;}
  .details-modal.DEmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026DEV.png");}
  .details-modal.ENmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026ENV.png");}
  .details-modal.SPmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026SPV.png");}

  .details-modal .details-modal-content {height: calc(165vw);}
  .FBmodalRC {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: column;}
  .details-modal-content .FB50 {width: 100%;}
  .details-modal-content .FBtext a {font-size: 3.6vw; line-height: 2.2;}

  .details-modal .details-modal-close {
    left: calc(90vw - 50px);
    top: 10px;
  }


}


@media (min-aspect-ratio: 3/4) {
  .details-modal {width: 88vw; max-width: 88vw; min-height: 88vw; max-height: 100vh;}
  .details-modal.DEmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026DEH.png");}
  .details-modal.ENmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026ENH.png");}
  .details-modal.SPmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026SPH.png");}



  .details-modal .details-modal-content {height: calc(88vw);}
  .FBmodalRC {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}
  .details-modal-content .FB50 {width: 50%;}
  .details-modal-content .FBtext a {font-size: 3.4vw; line-height: 2.2;}


  .details-modal .details-modal-close {left: calc(88vw - 50px); top: 10px;
  }

}

@media (min-aspect-ratio: 3/4) and (min-width: 851px) {
  .details-modal {
    width: 88vw;
    max-width: 88vw;
    min-height: 77vw;
    left: 50%; /* position of vertical axis */
    transform: translate(-50%, 0%);
    top: 0%;
}
  .details-modal.DEmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026DEH.png");}

  .details-modal .details-modal-content {height: calc(82vw);}
  .FBmodalRC {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}

  .details-modal .details-modal-close {left: calc(88vw - 50px); top: 10px;}
  .details-modal-content .FBtext a {font-size: 3vw; line-height: 2.2;}


}

@media (min-aspect-ratio: 3/4) and (min-width: 1200px) {.details-modal {width: 1056px; max-width: 1056px; min-height: 924px;}
  .details-modal.DEmodal {background-image: url("../Images/Misc/EarlyBookerDiscount2026DEH.png");}

  .details-modal .details-modal-content {height: calc(984px);}
  .FBmodalRC {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}

  .details-modal .details-modal-close {left: calc(1056px - 50px); top: 10px;}

  .details-modal-content .FBtext a {font-size: 36px; line-height: 2.2;}

}

@media (min-width: 1200px) {
.hotoffer {height: calc(380px);}
.modalbutton {font-size: 19.2px;}

}



@media (max-width: 667px) {
.hotoffer {height: calc(33.33333vw); padding: 25px 20px 0px 20px;}

}