/* || ----------------------------- WEBGL */
.holder_ThreeJS {
  position: fixed;
  z-index: 99998;
  top: 0px;
  width: 100%;
  left: 0px;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: white;
}

.mainCanvas {
  position: absolute;
  z-index: 999999;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--colBg_App);
  outline: none;
  border: none;

}

/* || ----------------------------- Footer */

footer {
  position: relative;
  width: 100%;
  height: 100%;
}
.iconFooterTextSpacer {
  position: relative;
  width: 92px;
  height: auto;
  left: 50%;
  padding-top: 50px;
  padding-bottom: 150px;
  transform: translateX(-50%);
  filter: invert(50%);
}

.footerNavigation {
  display: flex;
  width: 100%;
  min-width: 320px;
  height: 360px;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: var(--colBG-Footer);
}

.footerNavigationMenue {
  position: relative;
  width: auto;
  min-width: 150px;
  height: 70%;
  top: 15%;
}

.footerNavigationHeadline {
  position: relative;
  top: 20px;
  width: 100%;
  height: 20%;
}

.footerNavigationLinks{
  position: relative;
  width: 100%;
  height: auto;
  top: 30px;
}
.iconSocial {
  position: relative;
  float: left;
  padding-right: 20px;
  width: 25px;
}
@media (min-width: 768px) {
  .iconSocial {
    width: 40px;
  }
}
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
footer p {
  color: var(--colFont-White);
  font-size: var(--fontSize_footerNavigation-Mobile);

}
footer li {
  height: 40px;
  opacity: 1 !important;
}

footer ul a:link {
  text-decoration: none;

}

@media (min-width: 305px) {
  .footerNavigation  {
    justify-content: flex-start;
    padding-bottom: 40px;
  }
  .footerNavigationMenue {
    width: 42%;
    left: 10%;
    padding-top: 25px;
    padding-bottom: 50px;
  }
  .footerNavigation {
    height: 100%;
  }
  .footerNavigationLinks {
    top: 50px;
  }
  .iconFooterTextSpacer {
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) {
  .footerNavigation  {
    justify-content: center;
    padding-bottom: 40px;
  }
  .footerNavigationMenue {
    width: 30%;
    left: 5%;
    padding-top: 25px;
    padding-bottom: 50px;

  }
}
@media (min-width: 1024px) {
  .footerNavigation  {
    justify-content: space-evenly;
  }
  .footerNavigationMenue {
    width: auto;
    left: 0px;
  }
  .iconFooterTextSpacer {
    padding-bottom: 150px;
  }
}

/*

/* || ----------------------------- Main Holder */
main {
  position: relative;
  width: 90%;
  height: 100%;
  left: 5%;
}


/* || ----------------------------- Main Content */
.mainContent {
  position: relative;
  height: 100%;
  top: 0px;
  margin: 0px;
  padding: 0px;
  /* display: inline-grid; */

}
@media (min-width: 305px) {
  .mainContent {
    width: 90%;
  }
  .mainContent > div  {
    /* padding-bottom: 5%; */
  }
}
@media (min-width: 1025px) {
  .mainContent {
    width: 90%;
  }
  .mainContent > div {
    /* padding-bottom: 5%; */
  }
}

/* || ----------------------------- Interface Icons */
/* || Text Spacer Wave */
.iconTextSpacer  {
  position: relative;
  left: -30px;
}
@media (min-width: 305px) {
  .iconTextSpacer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media (min-width: 768px) {
  .iconTextSpacer {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.iconTextSpacer-long {
  position: relative;
  left: -10px;
  padding-top: 30px;
}
@media (min-width: 305px) {
  .iconTextSpacer-long {
    transform: scale(0.7);
  }
}
@media (min-width: 768px) {
  .iconTextSpacer-long {
    transform: scale(1);
  }

}


#icon-SectionList {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



#icon-SectionListClose {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}


#icon-Filter {
  position: absolute;
  top: 25px;
  left: 20px;
  pointer-events: none;
}

/* || Arrow Read More HOME */
.iconArrowReadMore-HeaderHome  {
  position: absolute;
  bottom: 0px;
  left: 5%;
  z-index: 3;
  padding: 15px;
  padding-top: 26px;
  padding-bottom: 26px;
  transform-origin: bottom center;
  border-radius: 50px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}


/* || Arrow Read More SITE-PAGES */
.iconArrowReadMore-HeaderSite  {
  position: absolute;
  bottom: 0px;
  left: 5%;
  z-index: 999;
  padding: 15px;
  padding-top: 26px;
  padding-bottom: 26px;
  transform-origin: bottom center;
  border-radius: 50px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}


/* || Arrow Read More SECTION-SITE */
.iconArrowReadMore-SectionSite  {
  position: absolute;
  bottom: 25%;
  z-index: 3;
  left: 5%;
  transform: translateY(50%);
  background-color: inherit !important;
}
/* || Overlay Wave on Image */
.overlayWave {
  position: relative;
  width: 100vw;
  height: 72px;
  left: -7px;
  bottom: 75px;
  transform-origin: left bottom;
  text-align: left;
}
.overlayWave svg{
  width: 105vw;
  height: 72px;
}

/* || ----------------------------- UI Elements */

/* ||  BUTTON Close X */
.btn-CloseX {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: #FFFFFF;
  border-radius: 30px;
  -webkit-box-shadow: 0px 0px 30px -12px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 30px -12px rgba(0, 0, 0, 0.2);
}

.holder_BtnIconClose {
  position: relative;
  width: 51px;
  height: 51px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  cursor: pointer;
}
.holder_BtnIconClose svg{
  pointer-events: none;

}
/* ||  BUTTON FullScreen */
.btn-Fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-color: #FFFFFF;
  border-radius: 30px;
  -webkit-box-shadow: 0px 0px 30px -12px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 30px -12px rgba(0, 0, 0, 0.2);
  z-index: 9999999;
  visibility: hidden;
}
.holder_BtnFullscreen {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  cursor: pointer;
}

#iconShrink {
  display: none;

}

/* ||  BUTTON Download */
.btn_Download {
  position: relative;
  width: auto;
  height: 50px;
  padding-left: 10px;
  padding-right: 11px;
  background-color: var(--btn_ContentStandard-Blue-Static);
  border-radius: var(--ui_BorderRadiusButton);
  display: inline-block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  cursor: pointer;
}
.btn_Download svg{
 pointer-events: none;
}

/* ||  BUTTON reserve shopItem */
.holder-ReserveTeaser {
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-top-left-radius: var(--ui_BorderRadiusTeaser);
  background-color: var(--colBG-SectionNavigationShop);
  z-index: 998;
  -webkit-box-shadow: 0px 0px 20px -12px #000000;
  box-shadow: 0px 0px 20px -12px #000000;
  display: none;
  cursor: pointer;
}
@media (min-width: 305px) {
  .holder-ReserveTeaser {
    height: 80px;
    width: 200px;
  }
}
@media (min-width: 768px) {
  .holder-ReserveTeaser {
    width: 500px;
    height: 120px;
  }
}

.reserveTeaserHeadline {
  position: relative;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}


.reserveTeaserHeadline p {
  display: inline-block;

}

.holder_BtnIconReserve {
  position: relative;
  width: auto;
  left: 10px;
  top: 15px;
  margin-top: -20px;
  display: inline-block;
  pointer-events: none;
}

.btn_Reserve svg{
 pointer-events: none;
}


/* ||  BUTTON GoTo */
.btn_ContentGoTo, .btn-CloseCookie {
  position: absolute;
  width: auto;
  height: 50px;
  padding-left: 10px;
  padding-right: 11px;
  background-color: var(--btn_ContentStandard-Blue-Static);
  border-radius: var(--ui_BorderRadiusButton);
  display: inline-block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 100;
}
.btn_ContentGoTo svg, .btn-CloseCookie svg {
  pointer-events: none;
}
.bgButtonGoTo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  z-index: -1;
  background-color: var(--btn_ContentStandard-Blue-Over);

}
.center {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
 }
 .middle {
   bottom: 15%;
   left: 50%;
   transform: translate(-50%, -50%);
  }
.teaser {
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}
.download {
  top: 0px;
  left: 0px;
  margin-bottom: 20px;
}
.reserve {
  top: 20px;
  left: 0px;
  margin-bottom: 20px;
}


.holder_BtnIconLeft {
  position: relative;
  width: auto;
  left: -10px;
  top: -5px;
  display: inline-block;
  pointer-events: none;
}
.holder_BtnTitle {
  position: relative;
  width: auto;
  height: auto;
  padding: 0px;
  margin: 0px;
  top: -2px;
  display: inline-block;
  pointer-events: none;
}
@media (min-width: 305px) {
  .holder_BtnTitle {
    top: -2px;
  }
}
@media (min-width: 768px) {
  .holder_BtnTitle {
    top: 0px;
  }
}

.holder_BtnIconRight {
  position: relative;
  width: 31px;
  height: 31px;
  top: 9px;
  padding-left: 10px;
  display: inline-block;
  pointer-events: none;
}

/* ||  BUTTON Back */
.btn_Back {
  position: absolute;
  width: auto;
  height: 50px;
  top: 110px;
  padding-left: 10px;
  padding-right: 21px;
  background-color: var(--btn_ContentBack-Static);
  border-radius: var(--ui_BorderRadiusButton);
  display: inline-block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  z-index: 998;
  cursor: pointer;
  opacity: 0;
  /* outline: 1px solid var(--colOutline-Grey); */
}
.btn_BackBottom {
  position: relative;
  width: auto;
  height: 50px;
  bottom: 0px;
  left: 50%;
  margin-top: 80px;
  transform: translateX(-50%);
  padding-left: 10px;
  padding-right: 21px;
  background-color: var(--btn_ContentBack-Static);
  border-radius: var(--ui_BorderRadiusButton);
  display: inline-block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  z-index: 997;
  cursor: pointer;
  /* outline: 1px solid var(--colOutline-Grey); */
}

.holder_BtnIconBack {
  position: relative;
  width: 32px;
  height: 32px;
  top: 9px;
  padding-right: 5px;
  display: inline-block;
  pointer-events: none;
}

.btn_InteractiveBack {
  position: absolute;
  width: auto;
  height: 50px;
  top: 15px;
  left: -5vw;
  padding-left: 10px;
  padding-right: 21px;
  background-color: var(--btn_ContentBack-Static);
  border-top-right-radius: var(--ui_BorderRadiusButton);
  border-bottom-right-radius: var(--ui_BorderRadiusButton);

  display: inline-block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  z-index: 999998;
  opacity: 0;
  cursor: pointer;
}

/* ||  LOGOS */
.imagePatch-Award {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);

}

/* ||  BUTTON PLAIN eg.Filter */
.btn_Plain {
  position: relative;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  padding-right: 21px;
  margin-bottom: 6px;
  background-color: var(--btn_ContentBack-Static);
  border-radius: var(--ui_BorderRadiusButton);
  display: inline-block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  z-index: 998;
  /* cursor: pointer; */
  pointer-events: auto;
  /* outline: 1px solid var(--colOutline-Grey); */
}


.holder_BtnTitlePlain {
  position: relative;
  width: auto;
  height: auto;
  margin: 0px;
  top: 0px;
  display: inline-block;
}
@media (min-width: 305px) {
  .holder_BtnTitlePlain {
    padding: 17px;
  }
}
@media (min-width: 768px) {
  .holder_BtnTitlePlain {
    padding: 13px;
  }
}

/* || ----------------------------- Content Headline - Centered */
.contentHeadline-centered {
  position: relative;
  width: auto;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 40px;
}

@media (min-width: 305px) {
  .contentHeadline-centered + .holder-360Image {
    padding-top: 0px !important;
  }
}
@media (min-width: 1024px) {
  .contentHeadline-centered + .holder-360Image {
    padding-top: 0px !important;
  }
}

.holder_contentHeadline-centered {
  position: relative;
}

/* || ----------------------------- Content Headline - Numeric */
.headlineNumeric {
  position: relative;
  display: flex;
  padding-bottom: 30px;
  padding-top: 0px;
  height: auto;
  overflow: hidden;
}
@media (min-width: 305px) {
  .headlineNumeric {
    width: 100%;
    left: 0px;
  }
}
@media (min-width: 1024px) {
  .headlineNumeric {
    width: 90%;
    left: 5%;
  }
}
.holder-HeadlineNumeric {
  position: relative;
  width: auto;
  height: auto;

}


/* || ----------------------------- Header Site */
.headerSite {
  position: relative;
  width: 111%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0px;
  left: -6%;
  margin: 0px;
  padding-bottom: 10vh;

}


.holder-HeaderSiteContent {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0px;
}

.headerSiteHeadline  {
  position: absolute;
  left: 5%;
  opacity: 0;
}
@media (min-width: 305px) {
  .headerSiteHeadline {
    top: 15%;
    width: 320px;
  }
}
@media (min-width: 768px) {
  .headerSiteHeadline {
    width: 90%;
    top: 17%;
  }
}
@media (min-width: 1024px) {
  .headerSiteHeadline {
    width: 900px;
    top: 17%;
  }
}


.headerSiteImage  {
  position: absolute;
  width: 80%;
  height: 60%;
  bottom: 0px;
  overflow: hidden;
  border-top-right-radius: var(--ui_BorderRadiusButton);
  clip-path: inset(0% 100% 0% 0%);
}
@media (min-width: 305px) {
  .headerSiteImage {
    width: 90%;
  }
}
@media (min-width: 768px) {
  .headerSiteImage {
    width: 90%;
  }
}
.headerSiteImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

/* || ----------------------------- Header Boat */
.headerSubline {
  position: relative;
  padding-top: 0;
}

#headerBoatContentElements{
  opacity: 0;

}

.videoHeaderBoatGradient {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 200px;
  z-index: 1;
}

.colorGradientEffect {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(170deg, rgba(255,213,229,0.3) 0%, rgba(255,255,255,0.1) 27%, rgba(37,174,255,0.1) 100%);
  z-index: 99;
  pointer-events: none;
  border-radius: var(--ui_BorderRadiusTeaser);
}

.headerBoat {
  position: relative;
  width: 112%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0px;
  left: -6%;
  margin: 0px;
  padding-bottom: 10vh;

}
.headerBoat + .headlineText-row {
  padding-top: 0px !important;

}

.holder-HeaderBoatContent {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0px;
  overflow: hidden;
  opacity: 0;
}

.headerBoatContent {
  position: absolute;
  left: 5%;
  z-index: 100;
}
@media (min-width: 305px) {
  .headerBoatContent  {
    top: 120px;
    width: 90%;
  }
}
@media (min-width: 1024px) {
  .headerBoatContent  {
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
  }
}

.headerBoatHeadline  {
  position: relative;
  left: 0%;
  opacity: 1;
  margin-bottom: -50px;
}
@media (min-width: 305px) {
  .headerBoatHeadline {
    margin-bottom: -10px;
    width: 320px;
  }
}
@media (min-width: 768px) {
  .headerBoatHeadline {
    margin-bottom: -20px;
    width: 90%;

  }
}
@media (min-width: 1024px) {
  .headerBoatHeadline {
    width: 700px;
    margin-bottom: -60px;
  }
}


.headerBoatVideo  {
  position: absolute;
  right: 0px;
  overflow: hidden;
  opacity: 1;
  z-index: -1;
}

@media (min-width: 305px) {
  .headerBoatVideo {
    bottom: 50px;
    transform: none;
  }
}
@media (min-width: 768px) {
  .headerBoatVideo {
    bottom: 0px;
    width: 100%;
    height: auto;
  }
}
@media (min-width: 890px) {
  .headerBoatVideo {
    bottom: 0px;
    width: 70%;
    height: auto;
    transform: translateX(-50%);
    left: 50%;
  }
}
@media (min-width: 1024px) {
  .headerBoatVideo {
    transform: unset;
    left: unset;
    width: 50%;
    height: auto;
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
  }
}
@media (min-width: 1280px) {
  .headerBoatVideo {
    width: 990px;
    height: auto;
    top: 50%;
    right: -5%;
  }
}
@media (min-width: 1680px) {
  .headerBoatVideo {
    right: 0px;
  }
}
@media (min-width: 1720px) {
  .headerBoatVideo {
    right: 5%;
  }
}

.bgProductHeader {
  position: absolute;
  width: 112%;
  left: -6%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index: -10;
}

.holder-BgColorVideo {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  overflow: hidden;
  transform: scale(1000);
  z-index: -5;
}
#bgHeaderVideo {
  position: absolute;
  width: 100%;
  height: auto;
}

/* || ----------------------------- Header Articles */
.headerArticles {
  position: relative;
  width: 111%;
  height: 100%;
  top: 0px;
  left: -6%;
  margin: 0px;
  z-index: 10;
}
@media (min-width: 305px) {
  .headerArticles  {
    padding-bottom: 120px;
  }
}
@media (min-width: 768px) {
  .headerArticles  {
    padding-bottom: 10vh;
  }
}
@media (min-width: 1024px) {
  .headerArticles  {
    padding-bottom: 10vh;
  }
}

#articleTeaser {
  opacity: 0;
}

.holder-HeaderArticlesContent {
  position: relative;
  height: 100%;
  left: 0px;
  opacity: 0;
}
@media (min-width: 305px) {
  .holder-HeaderArticlesContent  {
    padding-top: 20vh;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .holder-HeaderArticlesContent  {
    padding-top: 20vh;
    width: 60%
  }
}

.headerArticlesHeadline {
  position: relative;
  left: 5%;
  opacity: 1;
  width: 90%;
  height: auto;
  bottom: 0px;
}


/* || ----------------------------- Header Article */
.headerArticle {
  position: relative;
  width: 112%;
  height: 60%;
  top: 0px;
  left: -6%;
  margin: 0px;
  padding-bottom: 10vh;
}
/* @media (min-width: 305px) {
  .headerArticles  {
    padding-bottom: 25%;
  }
}
@media (min-width: 768px) {
  .headerArticles  {
    padding-bottom: 25%;
  }
}
@media (min-width: 1024px) {
  .headerArticles  {
    padding-bottom: 15%;
  }
} */

.holder-headerArticle {
  position: relative;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  left: 0px;
}


.headerArticleHeadline {
  position: relative;
  left: 5%;
  opacity: 1;
  width: 100%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
@media (min-width: 305px) {
  .headerArticleHeadline  {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  .headerArticleHeadline  {
    width: 60%
  }
}

.headerArticleImage  {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  overflow: hidden;
  clip-path: inset(0% 100% 0% 0%);
}
.headerArticleImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.articleImageOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* || ----------------------------- Article Thumbnail */
.articleFlexBox {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
/* .articleFlexBox::after {
  content: '';
  flex: auto;
} */

.articleThumbnail {
  position: relative;
  overflow: hidden;
  margin: 0px;
  padding-bottom: 4%;
  height: 400px;
  cursor: pointer;
}



@media (min-width: 305px) {
  .articleThumbnail {
    width: 100%;

  }
}
@media (min-width: 1024px) {
  .articleThumbnail {
    width: 48%;
    max-width: 850px;
    max-height: 660px;
  }
}

.articleThumbnailImage {
  position: relative;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.articleThumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holder-articleThumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--ui_BorderRadiusTeaser);
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
}

.articleThumbnailHeadline {
  position: absolute;
  top: 20px;
  left: 5%;
  width: 90%;
  z-index: 2;
}

.articleThumbnailDate {
  position: absolute;
  left: 5%;
  bottom: 20px;
  width: 90%;
  z-index: 3;
}


.articleThumbnailImageOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  background-color: var(--colBG-Menue);
  padding: 0px;
  margin: 0px;
  opacity: 0.9;
  z-index: 1;
}

.articleThumbnailContent {
  position: absolute;
  width: 100%;
  height: 130px;
  bottom: 0px;
  pointer-events: none;
  z-index: 2;
}

.iconMoreArticle {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 5;
}

/* || ----------------------------- ShopItem Thumbnail */
/* || ----------------------------- Header ShopItems */

.reservedShopItemMessage {
  position: absolute;
  top: 25%;
  width: 100%;
  transform: translateY(-25%);
}


.headerShopitems {
  position: relative;
  width: 111%;
  height: 100%;
  top: 0px;
  left: -6%;
  margin: 0px;
  z-index: 10;
}
@media (min-width: 305px) {
  .headerShopitems  {
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) {
  .headerShopitems  {
    padding-bottom: 5vh;
  }
}
@media (min-width: 1024px) {
  .headerShopitems  {
    padding-bottom: 10vh;
  }
}

.shopitemThumbnail {
  position: relative;
  overflow: hidden;
  margin: 0px;
  padding-bottom: 4%;
  height: 400px;
  cursor: pointer;
}
@media (min-width: 305px) {
  .shopitemThumbnail {
    width: 100%;

  }
}
@media (min-width: 1024px) {
  .shopitemThumbnail {
    width: 48%;
    max-width: 850px;
    max-height: 660px;
  }
}

.shopitemThumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopitemThumbnailInfo {

  background-color: var(--colShopItem-Info);
  padding: 10px;
  padding-bottom: 5px;
  width: auto;
  height: auto;
  z-index: 5;
}

.shopitemThumbnailReserved {
  background-color: var(--colBgFormModal-Yellow);
  padding: 20px;
  padding-bottom: 10px;
  width: auto;
  height: auto;
  z-index: 5;
}

.shopitemLeft {
  position: absolute;
  width: auto;
  top: -30px;
  left: 0px;
}

.shopitemRight {
  position: absolute;
  top: -21px;
  right: 26px;
}

.shopitemTop {
  position: relative;
  top: -270px;
  right: 0px;
}

.shopitemThumbnailHeadline {
  position: absolute;
  top: 50%;
  transform: translateY( -50%);
  left: 5%;
  width: 90%;
  height: auto;
  z-index: 2;
}



/* || ----------------------------- Header Home */
.headerHome {
  position: relative;
  width: 110%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0px;
  left: -5%;
  margin: 0px;
  padding: 0px;
  opacity: 0;
  /* background-color: #dedede; */
}


/* ||  TEXT Video Home */
.holder-HeaderContent {
  position: absolute;
  z-index: 2;
}

.headerHeadline  {
  position: relative;
}
.headerSubline {
  position: relative;
  padding-top: 0;
}

@media (min-width: 305px) {
  .holder-HeaderContent {
    width: 90%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
  .headerHome h1, .headerHome p {
    color: var(--colFont-White);
  }

  .iconTextSpacer {
    left: -30px;
    width: 110%;
  }

  .headerHome .iconTextSpacer #icon  {
    fill: var(--colFont-White) !important;
    left: 0px;
  }

  .headerHeadline {
    position: relative;
    top: 130px;
  }
  .headerSubline {
    position: absolute;
    bottom: 25%;
    padding-top: 0;
  }

}
@media (min-width: 768px) {
  .holder-HeaderContent {
    width: 90%;
    /* text-align: left; */
  }
}
@media (min-width: 1024px) {
  .holder-HeaderContent {
    width: 700px;
    height: auto;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    text-align: left;
  }
  .headerHome h1, .headerHome p {
    color: var(--colFont-Black);
  }
  .iconTextSpacer {
    left: -30px;
  }
  .headerHome .iconTextSpacer #icon  {
    fill: var(--colFont-Black)  !important;
  }
  .headerHeadline {
    position: relative;
    top: 0px;
  }
  .headerSubline {
    position: relative;
    padding-top: 0;
    top: 0px;
  }
}

/* ||  BG VIDEO Home */
.fullscreenBgVideo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 1;
  margin: 0px;
  padding: 0px;
}

.fullscreenBgVideo video{
  height:auto;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

@media (min-width: 305px) {
  .fullscreenBgVideo {
    width: 100%;
    /* top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%); */
  }
  .fullscreenBgVideo video {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    left: -50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 768px) {
  .fullscreenBgVideo {
    width: 100%;
  }

}
@media (min-width: 1024px) {
  .fullscreenBgVideo {
    width: 50%;
    right: 4.5%;
  }
  .fullscreenBgVideo video {
    width: 101%;
    left: 0px;
    transform: translateX(-1px);

  }
}
@media (min-width: 1690px) {
  .fullscreenBgVideo {
    width: 50%;
  }
}

/* || ----------------------------- Quotes */

/* ||  Video */
.videoQuote {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 80px;
  padding-top: 80px;
}
.videoQuote h3, .videoQuote p {
  /* color: var(--colFont-Black); */
}

.holder-VideoQuote {
  position: relative;
  height: auto;
  z-index: 2;
}

@media (min-width: 305px) {
  .imageQuote .holder-VideoQuote {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 7%;
  }
}


@media (min-width: 1024px) {
  .imageQuote .holder-VideoQuote {
    width: 60%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
  }
}


@media (min-width: 305px) {
  .holder-VideoQuote {
    width: 100%;
    padding-top: 7%;
  }
}

@media (min-width: 1024px) {
  .holder-VideoQuote {
    width: 60%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;

  }
}

.contentQuote-Quote {
  position: relative;
}

.contentQuote-Author {
  position: relative;
  width: auto;
  padding-top: 30px;
  padding-bottom: 50px;
}

.holder-contentQuoteVideo{
  position: relative;
  width: 100%;
  overflow: hidden;

}
.contentQuote-Video {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--ui_BorderRadiusTeaser);
}
@media (min-width: 305px) {
  .contentQuote-Video {
    height: var(--height_Teaser360-Mobile);
    max-height: var(--minHeight_Teaser360-Mobile);
  }
}
@media (min-width: 1024px) {
  .contentQuote-Video {
    height: var(--height_Teaser360-Desktop);
    max-height: var(--minHeight_Teaser360-Desktop);
  }
}

.contentQuote-Video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ||  Image */
.imageQuote {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: var(--padding_AllBottom);

}
@media (min-width: 305px) {

}
@media (min-width: 1024px) {
  .imageQuote {
    /* padding-bottom: 10%; */
  }
}

.holder-ImageQuote {
  position: relative;
  height: auto;
  overflow: hidden;
  background-color: var(--colTeaser-Black);
  border-radius: var(--ui_BorderRadiusTeaser);
}
@media (min-width: 305px) {
  .holder-ImageQuote {
    height: var(--height_TeaserProductBoatLarge-Mobile);
    min-height: var(--minHeight_TeaserProductBoatLarge-Mobile);
  }
}
@media (min-width: 1024px) {
  .holder-ImageQuote {
    height: var(--height_TeaserProductBoatLarge-Desktop);
    min-height: var(--minHeight_TeaserProductBoatLarge-Desktop);
  }
}
.holder-imageQuoteFullscreenImage {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--ui_BorderRadiusTeaser);
}
.imageQuote-FullscreenImage {
  position: relative;
  max-height: 700px;
  overflow: hidden;
  border-radius: var(--ui_BorderRadiusTeaser);
}
.imageQuote-FullscreenImage img {
  max-width: 1920px;
  object-fit: cover;
}
@media (min-width: 305px) {
  .imageQuote-FullscreenImage img {
    width: auto;
    height: 350px;
    left: -50%;
    transform: translateX(-25%);
  }
}
@media (min-width: 768px) {
  .imageQuote-FullscreenImage img {
    left: 0px;
    width: 100%;
    height: auto;
    transform: none;
  }
}
@media (min-width: 1024px) {
  .imageQuote-FullscreenImage img {
    width: 100%;
    height: auto;
    transform: none;
  }
}



.quoteImage {
  position: relative;
  text-align: center;
}
@media (min-width: 305px) {
  .quoteImage {
    position: absolute;
    top: 70%;
    transform: translateY(-45%);
    left: -700px;
  }
}
@media (min-width: 768px) {
  .quoteImage {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    text-align: center;
  }
}
.quoteImage img {
  max-width: 1500px;
}
@media (min-width: 305px) {
  .quoteImage img {
    width: auto;
    height: 300px;

  }
}
@media (min-width: 768px) {
  .quoteImage img {
    width: 100%;
    height: auto;
  }
}

/* ||  Single */
.holder-SingleQuoteSmall {
  position: relative;
  height: auto;
  z-index: 2;
  text-align: left;

}
@media (min-width: 305px) {
  .holder-SingleQuoteSmall {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (min-width: 1024px) {
  .holder-SingleQuoteSmall {
    width: 60%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5%;
  }
}

.holder-SingleQuote {
  position: relative;
  height: auto;
  z-index: 2;
  text-align: center;
  border-radius: var(--ui_BorderRadiusTeaser);
}
.holder-SingleQuote + .holder-SingleQuote{
  padding-top: 0px !important;
}

.holder-SingleQuote .contentQuote-Quote  {
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 305px) {
  .holder-SingleQuote {
    width: 100%;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  .holder-SingleQuote .contentQuote-Quote  {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .holder-SingleQuote {
    width: 100%;
    left: 50%;
    padding-top: 15%;
    padding-bottom: 15%;
    transform: translateX(-50%);
  }
  .holder-SingleQuote .contentQuote-Quote  {
    width: 70%;
  }
}


/* || ----------------------------- ShopNow teaser */
/* || ----------------------------- Button PayPal */
.holder-paypal {
  position: relative;
  top: 50px;
}

/* || ----------------------------- Large */
.shopNowTeaser-large {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: var(--padding_AllBottom);
  border-radius: var(--ui_BorderRadiusTeaser);
}

.shopNowTeaserGreen {
  background-color: var(--colBG-SectionNavigationShop);
}
.shopNowTeaserRed {
  background-color: var(--colBG-ShopTeaserReserved);
}

.holder-shopNowTeaserContent {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 305px) {
  .holder-shopNowTeaserContent {
    height: var(--height_TeaserProductBoatLarge-Mobile);
    min-height: var(--minHeight_TeaserProductBoatLarge-Mobile);
  }
}
@media (min-width: 1024px) {
  .holder-shopNowTeaserContent {
    height: var(--height_TeaserShopNow-Desktop);
    min-height: var(--minHeight_TeaserProductBoatLarge-Desktop);
  }
}

.shopNowTeaserInfo {
  position: absolute;
  width: 90%;
  max-width: 630px;
  height: auto;
  max-height: 660px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
}

/* || ----------------------------- Service Teaser */
/* || ----------------------------- Large */
.serviceTeaser-large {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: var(--padding_AllBottom);
}

.serviceTeaser-large h1 {
  color: var(--colFont-White);
}

.holder-serviceTeaserContent {
  position: relative;
  width: 100%;
  border-radius: var(--ui_BorderRadiusTeaser);
  overflow: hidden;
}
@media (min-width: 305px) {
  .holder-serviceTeaserContent {
    height: var(--height_TeaserProductBoatLarge-Mobile);
    min-height: var(--minHeight_TeaserProductBoatLarge-Mobile);
  }
}
@media (min-width: 1024px) {
  .holder-serviceTeaserContent {
    height: var(--height_TeaserProductBoatLarge-Desktop);
    min-height: var(--minHeight_TeaserProductBoatLarge-Desktop);
  }
}

.serviceTeaserImage {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.serviceTeaserImage img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serviceTeaserHeadline {
  position: absolute;
  width: auto;
  max-width: 660px;
  height: auto;
  max-height: 660px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
}

/* || Small */

.smallTeaserFlexBox {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

}


.subServiceTeaser-small {
  position: relative;
  overflow: hidden;
  margin: 0px;
  padding-bottom: 5%;
  float: left;
  opacity:  0;

}

@media (min-width: 305px) {
  .subServiceTeaser-small {
    width: 100%;
  }
  .subServiceTeaser-small:last-of-type {
    /* margin-bottom: 20px; */
  }
}
@media (min-width: 1024px) {
  .subServiceTeaser-small {
    width: 45%;
    max-width: 760px;
    height: auto;
  }
  .subServiceTeaser-small:last-of-type {
    /* margin-bottom: 5%; */
  }
}

.subServiceTeaserImage {
  position: relative;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}
@media (min-width: 305px) {
  .subServiceTeaserImage {
    height: 200px;
  }
}
@media (min-width: 768px) {
  .subServiceTeaserImage {
    height: 340px;
  }
}

.subServiceTeaserImage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.3);
}

.holder_subServiceTeaserContent {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: var(--ui_BorderRadiusTeaser);
  overflow: hidden;
  z-index: 2;
}
@media (min-width: 305px) {

  .holder_subServiceTeaserContent:last-of-type {
    margin-bottom: 20px;
  }
}
@media (min-width: 1024px) {

  .holder_subServiceTeaserContent:last-of-type {
    margin-bottom: 5%;
  }
}

.smallServiceTeaserHeadline {
  position: relative;
  top: 30px;
  width: 100%;
  text-align: center;
  z-index: 6;
}

.subServiceImageOverlay {
  position: absolute;
  width: 100%;
  height: 190px;
  bottom: 0px;
  padding: 0px;
  margin: 0px;
  z-index: 5;
}

.subServiceContent {
  position: relative;
  width: 100%;
  height: 190px;
  bottom: 0px;
  z-index: 3;
}


/* || ----------------------------- Product Teaser Boat Large */
.teaserProductBoat-large {
  position: relative;
  width: 100%;
  padding-bottom: var(--padding_AllBottom);
}
@media (min-width: 305px) {
  .teaserProductBoat-large {
    height: var(--height_TeaserProductBoatLarge-Mobile);
    min-height: var(--minHeight_TeaserProductBoatLarge-Mobile);
  }
}
@media (min-width: 1024px) {
  .teaserProductBoat-large {
    height: var(--height_TeaserProductBoatLarge-Desktop);
    min-height: var(--minHeight_TeaserProductBoatLarge-Desktop);
  }
}

.holder_teaserProductBoatContent-large {
  position: absolute;
  width: 100%;
  z-index: 2;
  overflow: hidden;
}
@media (min-width: 305px) {
  .holder_teaserProductBoatContent-large {
    height: var(--height_TeaserProductBoatLarge-Mobile);
    min-height: var(--minHeight_TeaserProductBoatLarge-Mobile);
  }
}
@media (min-width: 1024px) {
  .holder_teaserProductBoatContent-large {
    height: var(--height_TeaserProductBoatLarge-Desktop);
    min-height: var(--minHeight_TeaserProductBoatLarge-Desktop);
  }
}

.productHeadline {
  position: relative;
  text-align: center;
  z-index: 100;
}

@media (min-width: 305px) {
  .productHeadline {
    top: 7%
  }
}
@media (min-width: 768px) {
  .productHeadline {
    top: 6%
  }
}
@media (min-width: 1024px) {
  .productHeadline {
    top: 5%
  }
}

.teaserProductBoatImage {
  position: absolute;
  text-align: center;
  width: 1200px;
  height: 500px;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: -1;
}
@media (min-width: 305px) {
  .teaserProductBoatImage {
    transform: translate(-50%, -50%) scale(0.3);
  }
}
@media (min-width: 321px) {
  .teaserProductBoatImage {
    transform: translate(-50%, -50%) scale(0.3);
  }
}
@media (min-width: 768px) {
  .teaserProductBoatImage {
    transform: translate(-50%, -50%) scale(0.6);
  }
}
@media (min-width: 1024px) {
  .teaserProductBoatImage {
    transform: translate(-50%, -50%) scale(0.9);
  }
}
@media (min-width: 1280px) {
  .teaserProductBoatImage {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (min-width: 1681px) {
  .teaserProductBoatImage {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.holder_teaserProductBoatImage {
  position: relative;

}

@media (min-width: 305px) {
  .teaserProductBoatImage img {
    position: relative;
    width: 100%;
    height: auto;
  }

}
@media (min-width: 1100px) {
  .teaserProductBoatImage img {
    position: relative;
    width: 1200px;
    height: auto;
  }
}

/* || ----------------------------- Headline Text LEFT*/
/* || IMG Square */
.headlineTextLeft-IMGSquare {
  position: relative;
  display: inline-grid;
  height: auto;
}

@media (min-width: 305px) {
  .headlineTextLeft-IMGSquare {
    grid-template-columns: 100%;
    width: 100%;
    left: 0%;
    grid-template-rows: auto auto;
    padding-bottom: 25%;
  }

}
@media (min-width: 768px) {
  .headlineTextLeft-IMGSquare {
    width: 100%;
    grid-template-rows: auto;
  }
}
 @media (min-width: 1024px) {
  .headlineTextLeft-IMGSquare {
    grid-template-columns: 45% 55%;
    grid-template-rows: auto 520px;
    width: 90%;
    left: 5%;
    padding-bottom: 120px;
  }
}

.headlineTextLeft-Headline  {
  position: relative;
  padding-top: 80px;
  padding-bottom: 0px;
  grid-column: 1;
}
@media (min-width: 305px) {
  .headlineTextLeft-Headline {
    padding-top: 0px;
  }
}
@media (min-width: 768px) {
  .headlineTextLeft-Headline {
    padding-top: 0px;
  }
}

.headlineTextLeft-Text {
  position: relative;
  grid-column: 1;
}
@media (min-width: 305px) {
  .headlineTextLeft-Text {
    padding-top: 40px;
  }
}
@media (min-width: 1024px) {
  .headlineTextLeft-Text {
    padding-top: 0px;
    top: 0px;
  }
}

.IMGSquareRight-Image {
  position: relative;
  text-align: right;

}
@media (min-width: 305px) {
  .IMGSquareRight-Image {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (min-width: 1024px) {
  .IMGSquareRight-Image {
    top: -40%;
    grid-column: 2;
    grid-row: 2/2;
    padding-left: 40px;
  }
}
@media (min-width: 1280px) {
  .IMGSquareRight-Image {
    top: -25%;
  }
}

.IMGSquareRight-Image img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--ui_BorderRadiusImage);
}
@media (min-width: 305px) {
  .IMGSquareRight-Image img {
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .IMGSquareRight-Image img {
    max-width: 650px;
  }
}


/* || VIDEO Square */
.videoSquare-Content {
  position: relative;

}
@media (min-width: 305px) {
  .videoSquare-Content {
    left: 0px;
    transform: unset;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .videoSquare-Content {
    width: 80%;
  }
}
@media (min-width: 1280px) {
  .videoSquare-Content {
    left: 45%;
    transform: translateX(-50%);
  }
}

/* || VIDEO Square RIGHT */
.headlineTextRight-VIDEOSquare {
  position: relative;
  display: grid;
  width: 100%;

}
@media (min-width: 305px) {
  .headlineTextRight-VIDEOSquare {
    grid-template-rows: auto auto;
    margin-bottom: 0px;
  }
}
@media (min-width: 768px) {
  .headlineTextRight-VIDEOSquare {
    grid-template-rows: auto auto;
    margin-bottom: 0px;
  }
}
@media (min-width: 1024px) {
  .headlineTextRight-VIDEOSquare {
    grid-template-columns: 50% 50%;
    grid-template-rows: unset;
    margin-bottom: 80px;
  }
}

.holder-videoSquareContentRight {
  position: relative;
  align-self: left;
  justify-self: left;

}

@media (min-width: 305px) {
  .holder-videoSquareContentRight{
    left: 0px;
    top: 0px;
    transform: unset;
    order: 1;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .holder-videoSquareContentRight {
    left: 55%;
    top: 0px;
    transform: translateX(-50%);
    order: 2;
    text-align: left;
  }
}


/* || VIDEO Square LEFT */
.holder-videoSquareContentLeft {
  position: relative;
  align-self: left;
  justify-self: left;

}
@media (min-width: 305px) {
  .holder-videoSquareContentLeft {
    left: 0px;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .holder-videoSquareContentLeft {
    left: 5%;
    text-align: left;
  }
}

.headlineTextLeft-VIDEOSquare {
  position: relative;
  display: grid;
  width: 100%;
}
@media (min-width: 305px) {
  .headlineTextLeft-VIDEOSquare {
    grid-template-rows: auto auto;
    margin-bottom: 0px;
  }
}
@media (min-width: 768px) {
  .headlineTextLeft-VIDEOSquare {
    margin-bottom: 0px;
  }
}
@media (min-width: 1024px) {
  .headlineTextLeft-VIDEOSquare {
    grid-template-columns: 50% 50%;
    grid-template-rows: unset;
    margin-bottom: 80px;
  }
}

.infoVideoLine {
  position: relative;
  height: 1px;
  background-color: var(--colOutline-mainNavigation);
  margin-top: 20px;
  margin-bottom: 20px;
  transform-origin: center center;

}

@media (min-width: 305px) {
  .floatVideoLineRight {
    left: 0px;
  }
}
@media (min-width: 1024px) {
  .floatVideoLineRight {
    width: 600px;
    left: -100px;
  }
}

@media (min-width: 305px) {
  .floatVideoLineLeft {
    left: 0px;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .floatVideoLineLeft {
    width: 600px;
    left: 250px;
  }
}

.squareContentVideo {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 9;
  background-color: var(--colBg-ImagePlaceHolder);
}
.squareContentVideo video {
  width: 100%;
  height: auto;


}
@media (min-width: 305px) {
  .squareContentVideo {
    margin-top: 0px;
    width: 100%;
    height: auto;
  }
  .squareContentVideo video {
    /* width: 100%;
    height: 100%; */

  }
}

@media (min-width: 768px) {
  .squareContentVideo {
    margin-top: 0px;

  }
  .squareContentVideo video {
    /* width: 100%;
    height: 100%; */

  }
}
@media (min-width: 1024px) {
  .squareContentVideo {
    width: 80%;
    height: auto;
    margin-top: 300px;
  }

}
@media (min-width: 1280px) {
  .squareContentVideo {
    width: 650px;
    height: 650px;
    margin-top: 300px;
  }

}


@media (min-width: 305px) {
  .squareContentVideoRight {
    align-self: left;
    justify-self: left;
    order: 2;
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .squareContentVideoRight {
    align-self: left;
    justify-self: left;
  }
}
@media (min-width: 1024px) {
  .squareContentVideoRight {
    margin-top: 380px;
  }
}
@media (min-width: 1280px) {
  .squareContentVideoRight {
    width: auto;
    align-self: center;
    justify-self: center;
    order: 1;
    margin-top: 300px;
  }
}


@media (min-width: 305px) {
  .squareContentVideoLeft {
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .squareContentVideoLeft {

    align-self: right;
    justify-self: right;
  }
}
@media (min-width: 1024px) {
  .squareContentVideoLeft {
    margin-top: 380px;
  }
}

@media (min-width: 1280px) {
  .squareContentVideoLeft {
    align-self: center;
    justify-self: center;
      margin-top: 300px;
  }
}


/* || ----------------------------- Headline Text RIGHT*/
/* || IMG Square */
.headlineTextRight-IMGSquare {
  position: relative;
  display: inline-grid;
  height: auto;
}

@media (min-width: 305px) {
  .headlineTextRight-IMGSquare {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    width: 100%;
    left: 0%;
    grid-template-rows: auto auto;
    padding-bottom: 25%;
  }

}
@media (min-width: 768px) {
  .headlineTextRight-IMGSquare {
    width: 100%;
    grid-template-rows: auto;
  }
}
 @media (min-width: 1024px) {
  .headlineTextRight-IMGSquare {
    grid-template-columns: 55% 45%;
    grid-template-rows: auto 520px;
    width: 90%;
    left: 5%;
    padding-bottom: 120px ;
  }
}

.headlineTextRight-Headline  {
  position: relative;
  padding-top: 80px;
  padding-bottom: 0px;
  grid-column: 2;
  z-index: 1;
}
@media (min-width: 305px) {
  .headlineTextRight-Headline {
    padding-top: 0px;
  }
}
@media (min-width: 768px) {
  .headlineTextRight-Headline {
    padding-top: 0px;
  }
}

.headlineTextRight-Text {
  position: relative;
  grid-column: 2;
}
@media (min-width: 305px) {
  .headlineTextRight-Text {
    padding-top: 40px;
  }
}
@media (min-width: 1024px) {
  .headlineTextRight-Text {
    padding-top: 0px;
    top: 0px;
  }
}

.IMGSquareLeft-Image {
  position: relative;
  text-align: left;
}
@media (min-width: 305px) {
  .IMGSquareLeft-Image {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (min-width: 1024px) {
  .IMGSquareLeft-Image {
    top: -40%;
    grid-column: 1;
    grid-row: 2/2;
    padding-right: 40px;
  }
}
@media (min-width: 1280px) {
  .IMGSquareLeft-Image {
    top: -25%;
  }
}

.IMGSquareLeft-Image img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--ui_BorderRadiusImage);
}
@media (min-width: 305px) {
  .IMGSquareLeft-Image img {
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .IMGSquareLeft-Image img {
    max-width: 650px;
  }
}



/* || ----------------------------- Headline Text RIGHT*/
/* || IMG Illustration */
.headlineTextRight-IMGIllustration {
  position: relative;
  display: inline-grid;
  height: auto;
  padding-bottom: 80px;

}

@media (min-width: 305px) {
  .headlineTextRight-IMGIllustration {
    grid-template-columns: 100%;
    width: 100%;
    left: 0%;
    grid-template-rows: auto auto;
    padding-bottom: 25%;
    padding-top: 20%;
  }

}
@media (min-width: 768px) {
  .headlineTextRight-IMGIllustration {
    width: 100%;
  }
}
 @media (min-width: 1024px) {
  .headlineTextRight-IMGIllustration {
    grid-template-columns: 55% 42%;
    width: 90%;
    left: 5%;
    padding-bottom: 80px;
    padding-top: 5%;

  }
}

.headlineTextRight-Headline  {
  position: relative;
  padding-bottom: 0px;
  grid-column: 2;
  align-self: end;
}
@media (min-width: 305px) {
  .headlineTextRight-Headline {
    grid-column: 1;
  }
}
@media (min-width: 1024px) {
  .headlineTextRight-Headline {
    grid-column: 2;
  }
}

.headlineTextRight-Text {
  position: relative;
}
@media (min-width: 305px) {
  .headlineTextRight-Text {
    grid-column: 1;
    padding-top: 40px;
  }
  .headlineTextRight-IMGIllustration .headlineTextRight-Text {
    padding-top: 0px;
  }
}
@media (min-width: 1024px) {
  .headlineTextRight-Text {
    padding-top: 0px;
    top: 0px;
    grid-column: 2;
  }
}

.IMGIllustrationLeft-Illustration {
  position: relative;
  text-align: left;
  z-index: 0;
}
@media (min-width: 305px) {
  .IMGIllustrationLeft-Illustration {
    grid-column: 1;
    grid-row: 2;
    margin-top: -50px;
  }
  #IMGIllustrationLeft-Illustration {
    left: 0px;
  }
}
@media (min-width: 1024px) {
  .IMGIllustrationLeft-Illustration {
    grid-column: 1;
    grid-row: 1/-1;
    margin-top: 0px;
  }
  #IMGIllustrationLeft-Illustration {
    left: -140px;
  }
}

.IMGIllustrationLeft-Illustration img {
  object-fit: cover;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
@media (min-width: 305px) {
  .IMGIllustrationLeft-Illustration img {
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .IMGIllustrationLeft-Illustration img {
    max-width: 800px;
  }
}


/* || ----------------------------- Headline Text LEFT*/
/* || IMG Illustration */
.headlineTextLeft-IMGIllustration {
  position: relative;
  display: inline-grid;
  height: auto;
  padding-top: 80px;
}

@media (min-width: 305px) {
  .headlineTextLeft-IMGIllustration {
    grid-template-columns: 100%;
    width: 100%;
    left: 0%;
    grid-template-rows: auto auto;
    padding-bottom: 25%;
    padding-top: 0px;
  }

}
@media (min-width: 768px) {
  .headlineTextLeft-IMGIllustration {
    width: 100%;
  }
}
 @media (min-width: 1024px) {
  .headlineTextLeft-IMGIllustration {
    grid-template-columns: 40% 60%;
    width: 90%;
    left: 5%;
    padding-bottom: 10%;
  }
}

.headlineTextLeft-Headline  {
  position: relative;
  padding-bottom: 0px;
  grid-column: 1;
  align-self: end;
}
@media (min-width: 305px) {
  .headlineTextLeft-Headline {
    grid-column: 1;
  }
}
@media (min-width: 1024px) {
  .headlineTextLeft-Headline {
    grid-column: 1;
  }
}

.headlineTextLeft-Text {
  position: relative;
}
@media (min-width: 305px) {
  .headlineTextLeft-Text {
    grid-column: 1;
  }
  .headlineTextLeft-IMGIllustration .headlineTextLeft-Text {
    padding-top: 0px;
  }
}
@media (min-width: 1024px) {
  .headlineTextLeft-Text {
    padding-top: 0px;
    top: 0px;
    grid-column: 1;
  }
}

.parallaxElement {
  position: absolute;


}

#parallaxElementBack {
  bottom: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  z-index: -1;
}
#parallaxElementFront {
  bottom: 0px;
  right: 5%;
  width: 350px;
  height: 350px;
}

.IMGIllustrationRight-Illustration {
  position: relative;
  text-align: right;
}
@media (min-width: 305px) {
  .IMGIllustrationRight-Illustration {
    grid-column: 1;
    grid-row: 2;
    margin-top: -50px;
  }
  #IMGIllustrationRight-Illustration {
    right: 0px;
  }
}
@media (min-width: 1024px) {
  .IMGIllustrationRight-Illustration {
    grid-column: 2;
    grid-row: 1/-1;
    margin-top: 0px;

  }
  #IMGIllustrationRight-Illustration {
    right: -50px;
  }
}

.IMGIllustrationRight-Illustration img {
  object-fit: cover;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
@media (min-width: 305px) {
  .IMGIllustrationRight-Illustration img {
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .IMGIllustrationRight-Illustration img {
    max-width: 800px;
  }
}

/* || ----------------------------- Headline Text ROW*/
.headlineText-row {
  position: relative;
  display: inline-grid;
  height: auto;
  align-items: center;
}

@media (min-width: 305px) {
  .headlineText-row {
    grid-template-columns: 100%;
    width: 100%;
    left: 0%;
    grid-template-rows: auto auto;
    padding-bottom: 60px;
    padding-top: 80px;
  }

}
@media (min-width: 768px) {
  .headlineText-row {
    width: 100%;
    grid-template-rows: auto;
  }
}
 @media (min-width: 1024px) {
  .headlineText-row {
    grid-template-columns: 55% 45%;
    width: 90%;
    left: 5%;
    padding-bottom: 0px;
    padding-top: 80px;
  }
}

.headlineText-Headline  {
  position: relative;
  padding-top: 80px;
  padding-bottom: 0px;
  grid-column: 1;
  width: 90%;
}
@media (min-width: 305px) {
  .headlineText-Headline {
    padding-top: 0px;
  }
}
@media (min-width: 768px) {
  .headlineText-Headline {
    padding-top: 0px;
  }
}

.headlineText-Text {
  position: relative;
  grid-column: 2;
}
@media (min-width: 305px) {
  .headlineText-Text {
    padding: 0px;
    grid-column: 1;
  }
}
@media (min-width: 1024px) {
  .headlineText-Text {
    grid-column: 2;
    top: 0px;
    padding: 60px;
    padding-left: 0px;
    padding-top: 0px;
  }
}

/* || ----------------------------- SECTION Site */
.sectionSite {
  position: relative;
  width: 100vw;
  left: -5vw;
  overflow: hidden;
}
.sectionSite + .headlineText-row {
  padding-top: 0px !important;

}
@media (min-width: 305px) {
  .sectionSite  {
    height: 560px;
    padding-bottom: 45%;
  }
}
@media (min-width: 768px) {
  .sectionSite  {
    height: 860px;
    padding-bottom: 25%;
  }
}
@media (min-width: 1024px) {
  .sectionSite  {
    height: 860px;
    padding-bottom: 15%;
  }
}

.sectionSiteImage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--colBg-ImagePlaceHolder);
}

.sectionSiteImage img {
  width: 100%;
  height: 99.90%;
  object-fit: cover;
  image-rendering: auto;
}
.sectionSiteInfo {
  position: absolute;
  width: 85%;
  top: 5%;
  left: 5%;
  word-wrap: break-word;

}
.sectionSiteHeadline {
  position: absolute;
  width: 85%;
  top: 12%;
  left: 5%;
  word-wrap: break-word;
  /* transform: translateY(); */
}

@media (min-width: 305px) {
  .sectionSiteHeadline {

  }
}

.holder-SectionSiteContent {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
}

.bg-sectionSiteBG {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  left: 0px;
  opacity: 0.9;
  border-top-right-radius: var(--ui_BorderRadiusButton);
}

.bg-sectionSite {
  position: relative;

}
@media (min-width: 305px) {
  .bg-sectionSite {
    top: 360px;
    width: 90%;
    height: 280px;
    left: 5%;
  }
}
@media (min-width: 768px) {
  .bg-sectionSite {
    width: 90%;
    height: 500px;
    top: 440px;
  }
}
@media (min-width: 1024px) {
  .bg-sectionSite {
    width: 900px;
    height: 500px;
    top: 440px;
  }
}

/* || ----------------------------- Info Card */
.infoCard {
  position: relative;
  border-radius: var(--ui_BorderRadiusTeaser);
}
@media (min-width: 305px) {
  .infoCard {
    padding: 5%;
    width: 100%;
    margin-bottom: 5%;
  }
}
@media (min-width: 1024px) {
  .infoCard {
    padding: 3%;
    margin-bottom: 1.5%;
    width: 42%;
  }
}

.infoCardLine {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--colOutline-mainNavigation);
  margin-top: 20px;
  margin-bottom: 20px;
  transform-origin: center center;
}

.headlineCards {
  position: relative;
  width: 100%;
  padding-bottom: 40px !important;
  padding-top: 40px !important;
  margin: 0px;
}
.holder_headlineCards {
  position: relative;

}

/* || ----------------------------- Fullscreen ContentImage */
.fullscreen-contentImage {
  position: relative;
  width: 100%;
  height: auto;
}

.fullscreen-contentImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holder-animationScrollImage {
  position: relative;
  width: 90vw;
  height: 80vh;
  height: calc(var(--vh, 1vh) * 80);
  overflow: hidden;
  aspect-ratio: 16 / 8;
}



.holder-contentAnimationScrollImage {
  position: relative;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.content-animationScrollImage {
  position: absolute;
  text-align: center;
  width: 1867px;
  height: 920px;
  top: 50%;
  left: 50%;
  overflow: hidden;
}


.animationScrollImage {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (min-width: 305px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.2);
  }
  .holder-animationScrollImage {
    height: 30vh;
    height: calc(var(--vh, 1vh) * 30);
  }
}
@media (min-width: 321px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.2);
  }
  .holder-animationScrollImage {
    height: 30vh;
    height: calc(var(--vh, 1vh) * 30);
  }
}
@media (min-width: 768px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.4);
  }
  .holder-animationScrollImage {
    height: 50vh;
    height: calc(var(--vh, 1vh) * 50);
  }
}
@media (min-width: 1024px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.5);
  }
  .holder-animationScrollImage {
    height: 50vh;
    height: calc(var(--vh, 1vh) * 50);
  }
}
@media (min-width: 1280px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.6);
  }
  .holder-animationScrollImage {
    height: 60vh;
    height: calc(var(--vh, 1vh) * 60);
  }
}

@media (min-width: 1400px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.7);
  }
  .holder-animationScrollImage {
    height: 70vh;
    height: calc(var(--vh, 1vh) * 70);
  }
}

@media (min-width: 1500px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(0.8);
  }
  .holder-animationScrollImage {
    height: 80vh;
    height: calc(var(--vh, 1vh) * 80);
  }
}

@media (min-width: 1681px) {
  .content-animationScrollImage {
    transform: translate(-50%, -50%) scale(1);
  }
  .holder-animationScrollImage {
    height: 90vh;
    height: calc(var(--vh, 1vh) * 90);
  }
}

.animationScrollImage img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* || ----------------------------- Single Text - Centered */
.singleText-centered {
  position: relative;
  width: 100%;
  text-align: justify;
	text-align-last: none;
}
@media (min-width: 305px) {
  .singleText-centered {
    padding-top: 0px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1024px) {
  .singleText-centered {
    padding-top: 0px;
    padding-bottom: 80px;
  }
}

.singleText-Text {
  position: relative;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 305px) {
  .singleText-Text {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .singleText-Text {
    width: 60%;
    text-align: center;
  	text-align-last: none;
  }
}

/* || ----------------------------- Article Image Gallery */

.article-IMGGallery {
  line-height: 0;
   -webkit-column-gap: 0px;
   -moz-column-gap: 0px;
   column-gap: 0px;
}
@media (min-width: 305px) {
  .article-IMGGallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .article-IMGGallery {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 1024px) {
  .article-IMGGallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

.article-GalleryImage {
  padding: 5px;


}
.article-GalleryImage img {
  width: 100% !important;
 height: auto !important;
}

/* || ----------------------------- Article Filter */
.holder-ArticleFilter {
  z-index: 995;

}
@media (min-width: 305px) {
  .holder-ArticleFilter {
    position: relative;
    left: 5%;
    bottom: -20px;
  }
}
@media (min-width: 768px) {
  .holder-ArticleFilter {
    position: absolute;
    left: 230px;
    bottom: 52px;
  }
}

.articleFilter {
  border-radius: var(--ui_BorderRadiusFilter);
  background-color: white;
  width: 350px;
  height: 60px;
  padding-top: 10px;
  padding-bottom: 0px;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 30px -12px #000000;
  box-shadow: 0px 0px 30px -12px #000000;

}


@media (min-width: 305px) {
  .articleFilter {
    position: absolute;
    width: 85%;
    padding-left: 0;
    padding-right: 0px;
  }
}
@media (min-width: 768px) {
  .articleFilter {
    position: absolute;
    width: 350px;
    padding-left: 10px;
    padding-right: 105px;
  }
}

.btnFilterNavigation {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 5px;
  top: 5px;
  background-color: var(--colBg-SectionNavigation);
  border-radius: 50px;
  z-index: 998;
  -webkit-box-shadow: 0px 0px 30px -12px #000000;
  box-shadow: 0px 0px 20px -12px #000000;
  cursor: pointer;
  pointer-events: auto;
}

/* || ----------------------------- FORM TestDrive */
.btnCloseModal {
  position: absolute;
  right: 10px;
  top: 10px;
  pointer-events: auto;
  cursor: default;
}

.formModal {
  position: absolute;
  bottom: 29px;
  left: 50%;
  height: auto;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 0;
  display: none;
  transform-origin: center bottom;
}

@media (min-width: 305px) {
  .formModal {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .formModal {
    width: 600px;
  }
}

.bgModal {
  position: relative;
  width: 600px;
  height: 100%;
  width: 100%;
  padding-top: 10%;
  padding-bottom: 10%;
  border-radius: var(--ui_BorderRadiusTeaser);
  background-color: var(--colBgFormModal-Yellow);
  -webkit-box-shadow: 0px 0px 60px -12px var(--colBgFormModal-Yellow);;
  box-shadow: 0px 0px 60px -12px var(--colBgFormModal-Yellow);;

}


.contentModal {
  position: relative;
  top: 15%;
  left: 10%;
  width: 80%;
  height: auto;

}

.hiddenInput {
  visibility: hidden;
  display: none;
}
.honey {
  position: absolute;
  left: -9999px;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
  margin: 0px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}


/* || Modell */
.form-testDrive {
  position: relative;
  width: 60%;
  height: auto ;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media (min-width: 305px) {
  .form-testDrive {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .form-testDrive {
    width: 60%;
  }
}


.formLine {
  position: relative;
  height: 2px;
  background-color: var(--colOutline-Grey);
  margin-top: 40px;
  margin-bottom: 40px;
}
@media (min-width: 305px) {
  .formLine {
    width: 100vw;
    left: -5%;
  }
}
@media (min-width: 1024px) {
  .formLine {
    width: 110vw;
    left: -55%;
  }
}

.holder-ModelSelection {
  position: relative;
  width: auto;
  height: auto;
}

.infoLabelForm {
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;

}

.headlineForm {
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}

.holder-boatModelForm {
  position: relative;
  display: flex;
  justify-content: space-around
}

.boatModelForm {
  position: relative;

}
@media (min-width: 305px) {
  .boatModelForm {
    padding: 2%;
  }
}
@media (min-width: 1280px) {
  .boatModelForm {
    padding: 0px;
  }
}

.boatModelForm-Image {
  position: relative;
  margin-bottom: 15px;
  border-radius: var(--ui_BorderRadiusTeaser);
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

@media (min-width: 305px) {
  .boatModelForm-Image {
    max-width: 160px;
    max-height: 155px;
  }
}
@media (min-width: 768px) {
  .boatModelForm-Image {
    max-width: 300px;
    max-height: 300px;
  }
}


.boatModelForm-Image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkBox {
  position: relative;
  width: 60px;
  height: 60px;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--colOutline-Grey);
  border-radius: 50px;
  cursor: pointer;
}

.hotelQuestion .checkBox {
  left: 0px;
}

.personGender .checkBox {
  left: 0px;
}


.checkBoxAnswer {
  position: relative;
  float: left;
  text-align: left;
  width: auto;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
}

.iconCheckBoxArrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
}
.iconCheckBoxArrowDisabled {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  background-color: var(--colCheckBox-Grey);
  border-radius: 50px;
  transform: translate(-50%, -50%);
}

/* || Date */
.holder-DateSelection {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
}

.datePicker {
  position: relative;
  text-align: center;
}

/* || Hotel */
.hotelQuestion {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  left: 0px;
  height: auto;
}

.personGender {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  left: 0px;
  height: auto;
  padding-bottom: 25px;
}

/* || Address */
.addressQuestion {
  display: flex;
  width: 100%;
  height: 300px;
  flex-direction: column;
  align-items: center;
  /* margin: 10px; */
  justify-content: space-around
}

.signup-text-input  {
  width: 500px;
  height: 40px;
  border-radius: var(--ui_BorderRadiusTeaser)
}
@media (min-width: 305px) {
  .signup-text-input {
    width: 90%;
  }
}
@media (min-width: 768px) {
  .signup-text-input {
    width: 500px;
  }
}
.signup-text-input:focus {
  outline: none !important;
  border-left: 10px solid var(--colCheckBox-Green);

}

input[type=text] {
  padding: 10px;
  padding-top: 17px;
  padding-left: 25px;
  border: none;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

input[type=email] {
  padding: 10px;
  padding-top: 17px;
  padding-left: 25px;
  border: none;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

/* || Datenschutz */
.dateschutz {
  transform: translateX(-230px);
}
@media (min-width: 305px) {
  .dateschutz {
    transform: translateX(-40%);
  }
}
@media (min-width: 768px) {
  .dateschutz {
    transform: translateX(-230px);
  }
}

@media (min-width: 305px) {
  .dateschutz .checkBoxAnswer {
    width: 250px;
  }
}
@media (min-width: 768px) {
  .dateschutz .checkBoxAnswer {
    width: 450px;
  }
}

/* || Button SendForm */
.holder-FormButtonGo {
  position: relative;
  width: auto;
  height: 150px;
}

/* || Download Info */
.holder-FormDownload {
  position: relative;
  top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  bottom: 0px;
  left: 0px;
}

/* || ----------------------------- BOAT QuickFacts */
.holder-boatQuickFacts {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 40px;
}
@media (min-width: 305px) {
  .holder-boatQuickFacts img {
    width: 150px;
    height: auto;
  }
}
@media (min-width: 768px) {
  .holder-boatQuickFacts img {
    width: auto;
  }
}

.boatFacts-left {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
}
@media (min-width: 305px) {
  .boatFacts-left {
    align-items: flex-start;
  }
}
@media (min-width: 1280px) {
  .boatFacts-left {
    align-items: center;
  }
}

.boatFacts-right {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 100%;
}

@media (min-width: 305px) {
  .boatFacts-right {
    align-items: flex-end;
  }
}
@media (min-width: 1280px) {
  .boatFacts-right {
    align-items: center;
  }
}

.holder-BoatInfoIcon {
  position: relative;
  border-radius: 50%;
  outline-color: var(--colCheckBox-Grey);
}
@media (min-width: 305px) {
  .holder-BoatInfoIcon {
    width: 90px;
    height: 90px;
  }
}
@media (min-width: 768px) {
  .holder-BoatInfoIcon {
    width: 190px;
    height: 190px;
  }
}

.textBoatInfoIcon {
  position: relative;
  width: 100%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  display: block;
  overflow: hidden;
}

@media (min-width: 305px) {
  .textBoatInfoIcon p {
    font-size: var(--fontSize_InfoContent-Mobile);
  }
}
@media (min-width: 768px) {
  .textBoatInfoIcon p {
    font-size: var(--fontSize_MainContent-Desktop);
  }
}

/* || ----------------------------- BOAT 360 Image */
.holder-360Image {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow: hidden;
}
@media (min-width: 305px) {
  .holder-360Image {
    height: var(--height_Teaser360-Mobile);
    min-height: var(--minHeight_Teaser360-Mobile);
  }
}
@media (min-width: 1024px) {
  .holder-360Image {
    height: var(--height_Teaser360-Desktop);
    min-height: var(--minHeight_Teaser360-Desktop);
  }
}

.image-360 {
  position: relative;
  /* width: 100%; */
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--ui_BorderRadiusTeaser);
  overflow: hidden;
  z-index: -1;
}

.image-360 img {

  transform: scale(1.3);
}


.holder-360Image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  display: block;
}

/* || Toggle Buttons 360View LEX790 */
.holder-360ViewToggle {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 100%;
  bottom: 0px;
  background-color: var(--colBG-Menue);
  z-index: 9999999;
  opacity: 0;
}
@media (min-width: 305px) {
  .holder-360ViewToggle {
    height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (min-width: 1024px) and (max-height: 900px) {
  .holder-360ViewToggle {
    height: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media (min-width: 1024px) {
  .holder-360ViewToggle {
    height: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.btn360ViewToogle {
  position: relative;
  width: 45%;
  height: 100%;
  float:left;
  background-color: var(--colBg-AppWhite);
  border-radius: 15px;
}
.btn360ViewToggle-Label {
  position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--fontBlack);
  margin: 0;
  pointer-events: none;
}

.btn360ViewToggle-Label p {
  display: inline-block;
  height: .75em;
  line-height: .75em;
}


/* || ----------------------------- Feature Slider */

.featureSlide {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  opacity: 0;
}

.bgFeatureSlide {
  position: absolute;
  width: 112vw;
  left: -6vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 2;
}
.holder_FeatureSlide {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  left: -5%;
  z-index: 99;


}
@media (min-width: 305px) {
  .holder_FeatureSlide {
    flex-direction: column;

  }
}
@media (min-width: 1024px) {
  .holder_FeatureSlide {
    flex-direction: row;

  }
}

.featureSlide-Headline {
  position: relative;


}
@media (min-width: 305px) {
  .featureSlide-Headline {
    width: 100%;
    height: 50%;
    width: 90%;
    padding-top: 30px;
    left: 0px;
  }
}
@media (min-width: 1024px) {
  .featureSlide-Headline {
    width: 40%;
    height: auto;
    left: 5%;
  }
}

.featureSlideNumber {
  position: absolute;
  width: auto;

}
@media (min-width: 305px) {
  .featureSlideNumber {
    bottom: 10px;
    left: 0px;
  }
}
@media (min-width: 768px) {
  .featureSlideNumber {
    bottom: 40px;
    left: -5px;
  }
}
@media (min-width: 1024px) {
  .featureSlideNumber {
    top: 150px;
    bottom: unset;
    left: unset;
    right: -15px;
  }
}

.featureSlideInfo {
  position: absolute;
  width: auto;
  opacity: 0;
}
@media (min-width: 305px) {
  .featureSlideInfo {
    bottom: 15px;
    left: 100px;
  }
}
@media (min-width: 768px) {
  .featureSlideInfo {
    bottom: 165px;
    left: 0px;
  }
}
@media (min-width: 1024px) {
  .featureSlideInfo {
    top: 110px;
    bottom: unset;
    left: unset;
    right: -10px;
    /* transform: translateX(-50%); */
  }
}

.featureSlide-Image {
  position: relative;
  height: auto;
  overflow: hidden;
}
@media (min-width: 305px) {
  .featureSlide-Image {
    width: 110%;
    height: 50%;
  }
}
@media (min-width: 1024px) {
  .featureSlide-Image {
    width: 50%;
    height: 100%;
  }
}

.featureSlide-Image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holder-featureSliderController {
 position: absolute;
 width: 90vw;
 height: 100vh;
 height: calc(var(--vh, 1vh) * 100);
 z-index: 999;

}

.featureSliderController {
 position: absolute;
 width: auto;
 height: auto;
 transform: scale(1);
 z-index: 99999;
 cursor: pointer;
}

.featureSliderController svg {
  pointer-events: none;

}

@media (min-width: 305px) {
  .featureSliderController {
    transform: scale(1);
    bottom: 50px;
  }
  .controllerLeft {
    right: 100px;
  }
  .controllerRight {
    right: 0px;
    opacity: 0;
  }
}
@media (min-width: 1024px) {
  .featureSliderController {
    transform: scale(1.6);
    bottom: 100px;
  }
  .controllerLeft {
    right: 200px;

  }
  .controllerRight {
    right: 0px;
    opacity: 0;
  }
}

.controllerLeft {
  opacity: 0;

}

.bgFeatureSliderButtonRight {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 22px;
  top: 6px;
  border-radius: 50%;
  background-color: var(--col_MainNavigationLinks-Over);
  z-index: -1;
  opacity: 0;
}
.bgFeatureSliderButtonLeft {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 5px;
  top: 6px;
  border-radius: 50%;
  background-color: var(--col_MainNavigationLinks-Over);
  z-index: -1;
  opacity: 0;
}

/* || ----------------------------- ColorPicker */
#colorPicker {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  pointer-events: none;
  overflow: hidden;
}

#holder-Picker {
  position: absolute;
  top: 45%;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  pointer-events: auto;
  background-color: var(--colBg-AppWhite);
  border-radius: 200px;
  padding: 25px;
  -webkit-box-shadow: 0px 0px 30px -12px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 30px -12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  display: none;
}
@media (min-width: 305px) {
  #holder-Picker {
    right: 40px;
  }
}
@media (min-width: 1024px) and (max-height: 900px) {
  #holder-Picker {
    transform: unset;
    top: unset;
    bottom: 180px;
    right: 100px;
  }
}
@media (min-width: 1024px) {
  #holder-Picker {
    bottom: unset;
    top: 50%;
    transform: translateY(-50%);
    right: 80px;
  }
}


#picker {
  position: relative;
}

.pickerSelectedColor {
  position: relative;
  border-radius: 75px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
@media (min-width: 305px) {
  .pickerSelectedColor {
    width: 50px;
    height: 50px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}
@media (min-width: 1024px) and (max-height: 900px) {
  .pickerSelectedColor{
    width: 80px;
    height: 80px;
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 18px;
    margin-bottom: 17px;
  }
}
@media (min-width: 1024px) {
  .pickerSelectedColor{
    width: 80px;
    height: 80px;
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 18px;
    margin-bottom: 17px;
  }
}

#selectorCircle {
  position: absolute;
  top: 52%;
  left: 51%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

.pickerSelected {
  display: none;

}

#holder-ElementPicker {
  position: absolute;
  display: flex;
  justify-content: space-around;
  bottom: 0px;
  width: 100%;
  background-color: var(--colBG-Menue);
  pointer-events: auto;
  opacity: 0;
}
@media (min-width: 305px) {
  #holder-ElementPicker {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 30px;
  }
}
@media (min-width: 1024px) and (max-height: 900px) {
  #holder-ElementPicker {
    padding-top: 30px;
    padding-bottom: 30px;
    height: 60px;
  }
}
@media (min-width: 1024px)  {
  #holder-ElementPicker {
    padding-top: 30px;
    padding-bottom: 30px;
    height: 60px;
  }
}


.btn3DElement {
  position: relative;
  flex-grow: 1;
  background-color: var(--btn_Visualizer-Blue-Static);
  border-radius: 15px;
  cursor: pointer;
}
@media (min-width: 305px) {
  .btn3DElement {
    margin-left: 5px;
    margin-right: 5px;
  }
}
@media (min-width: 768px) {
  .btn3DElement {
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media (min-width: 1024px) {
  .btn3DElement {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.circleColor {
  position: relative;
  top: 50%;
  left: 5px;
  float: left;
  transform: translateY(-50%);
  border-radius: 10px;
  pointer-events: none;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
@media (min-width: 305px) {
  .circleColor {
    width: 20px;
    height: 20px;
  }
}
@media (min-width: 1024px) and (max-height: 900px) {
  .circleColor {
    width: 50px;
    height: 50px;
  }
}
@media (min-width: 1024px) {
  .circleColor {
    width: 50px;
    height: 50px;
  }
}

.elementText {
  position: relative;
  top: 50%;
  left: 15px;
  width: auto;
  display: inline-block;
  transform: translateY(-50%);
  pointer-events: none;

}
.elementText p {
  display: inline-block;
  height: .75em;
  line-height: .75em;
}

/* || ----------------------------- Engine Type Patch */
.engineTypePatch {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  text-align: center;
  margin-bottom: 250px;
  margin-top: 80px;
}
.engineTypePatch-Single {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 200px;
  text-align: center;
  margin-bottom: 250px;
  z-index: 99
}

@media (min-width: 305px) {
  .engineTypePatch-Single {
    margin-top: -60px;
  }
  .engineTypePatch:last-of-type {
    margin-bottom: 350px;
  }
}
@media (min-width: 768px) {
  .engineTypePatch-Single {
    margin-top: -170px;
  }
  .engineTypePatch:last-of-type {
    margin-bottom: 430px;
  }
}
@media (min-width: 1024px) {
  .engineTypePatch-Single {
    margin-top: 0px;

  }
}
@media (min-width: 350px) {
  .teaser-ElectricEngine {
    margin-top: 0px;
  }
}
@media (min-width: 1024px) {
  .teaser-ElectricEngine {
    margin-top: 0px;

  }
}

.engineTypePatch-Content {
  position: absolute;
  width: 100%;
  height: auto;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.engineTypePatch-Icon {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: var(--colBg-AppWhite);
}

.iconEnginePatch {
  position: relative;
  top: 5px;
}

.engineTypePatch-Image {
  position: absolute;
  top: 80%;
}

/* || ----------------------------- Teaser ElectricEngine Single */
.teaser-ElectricEngine {
  position: relative;
  justify-content: space-around;
  margin-bottom: 80px;
}
@media (min-width: 350px) {
  .teaser-ElectricEngine {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .teaser-ElectricEngine {
    display: flex;
    flex-direction: row;

  }
}
.engineBlock-Image {
  position: relative;

}
.engineBlock-Image img {
  width: 100%;
  height: auto;
  border-radius: var(--ui_BorderRadiusImage);
}
@media (min-width: 350px) {
  .engineBlock-Image {
    width: 100%;
    height: auto;
    padding-left: 0px;
  }
}
@media (min-width: 1024px) {
  .engineBlock-Image {
    width: auto;
    padding-left: 60px;
  }
}

/* || ----------------------------- Equipment/Lines Options */
.holder-EquipmentOptions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}
@media (min-width: 350px) {
  .holder-EquipmentOptions {
    width: 100%;
    left: 0px;
    margin-bottom: 0px;
  }
}
@media (min-width: 1024px) {
  .holder-EquipmentOptions {
    width: 90%;
    left: 5%;
    margin-bottom: 80px;
  }
}

.equipmentOption {
  position: relative;
  height: auto;

  padding: 20px;
}

.equipmentOption:first-child {
  width: 100%;
}

@media (min-width: 350px) {
  .equipmentOption:not(:first-child) {
    width: 100%;
    margin-top: 5%;
  }
}
@media (min-width: 1260px) {
  .equipmentOption:not(:first-child) {
    width: 46%;
    margin-top: 60px;
  }
}

.equipmentOption-Content {
  column-count: 2;
  column-width: 510px;

}
/* || ----------------------------- Teaser ElectricEngine Single */

.featureVideo {
  position: fixed;
  z-index: 99998;
  width: 100%;
  left: 0px;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: black;
}

.holder-FeatureVideo video {
  width: 100%;
  height: auto;

}

.holder-FeatureVideo {
  position: relative;
  top: 50%;
  transform: translateY(-50%);

}