/* ---------------------------
   mindtrade studios | HAMBURG | 04/2025
   --------------------------- */
   
   
   /* ---------------------------
   CSS Reset + Best Practices
   --------------------------- */

/* 1. Box-Sizing: border-box für alle Elemente */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Margin/Padding auf Null setzen */
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd, ul, ol, li,
fieldset, legend, textarea, pre,
iframe, hr {
  margin: 0;
  padding: 0;
}

/* 3. HTML5-Elemente als Block darstellen */
article, aside, footer, header,
nav, section, main, figure {
  display: block;
}

/* 4. Scrollverhalten */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* 5. Body-Grundeinstellungen */
body {
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background-color: #fff;
  color: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 6. Bilder/Videos skalieren automatisch */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. Formulare: einheitlicher Look */
input, button, textarea, select {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  outline: none;
}

/* 8. Interaktion optimieren */
a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background-color: transparent;
}

/* 9. Touch-Optimierung */
body {
  touch-action: manipulation;
}

/* 10. Disable Tap Highlight on Mobile */
* {
  -webkit-tap-highlight-color: transparent;
}




/* -------------------
   Lokale Gotham Fonts
---------------------- */

@font-face {
    font-family: "Gotham";
    src: url("../fonts/Gotham-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Gotham";
    src: url("../fonts/Gotham-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Gotham";
    src: url("../fonts/Gotham-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
  }
  



/* ---------------------------
   App Layout Styles
   --------------------------- */


body {
    font-family: "Gotham", sans-serif;
    font-weight: 500;
    color: #2d3032;
  }

#viewportControl{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#resetOverlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  opacity: 1;
  pointer-events: none; /* verhindert Klicks */
}
  

/* Schriftformate */

h1{
    font-family: "Gotham", sans-serif;
    font-weight: 700;
    font-size: 58px;
    line-height: 1.15;
}

h2{
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  margin-bottom:14px;
}

p{
  font-family: "Gotham", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
}

.infotext{
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 7%;
  width: 100%;
  text-shadow: 0px 0px 15px #000;
  font-size: 16px;
}

/* Buttons */

button{
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 16px;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  align-self: flex-start;
  border: none;
  width: auto;          /* wichtig */
  display: inline-block; /* verhindert 100%-Breite */
  margin-top: 25px;
}

button.dark {
  background: #2d3032;
  color: #fff;
}

button.bright {
  background: transparent;
  color: #2d3032;
  border:1px solid #2d3032
}



/* General Layout */
#startscreen, #introscreen{
  position: absolute;
  width: 100%;
  height: 100%;
  left:0px;
  top:0px;
  display: flex;
  justify-content: left;
  align-items: center;
  overflow-x: hidden;
}

.intro-head, .intro-button{
  opacity: 0;
  visibility: hidden;
}

.centerBlock{
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Abstand zwischen den Elementen */
  width: 700px;
  padding-left: 40px;
}

.white-overlay{
  position: absolute;
  height:100%;
  width: 60%;
  background: #fff;
  left:-13%;
  transform: skewX(10deg);
}

.grey-bg{
  position: absolute;
  height:100%;
  width: 100%;
  background: #fff;
  left:-100%;
  top:52px;
}

.logoBG{
  position: absolute;
  width: 100%;
  height:52px;
  background: #fff;
  top:0px;
  left:0px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.logo{
  position: absolute;
  left:40px;
  top:20px;
  width:100px;
}

.logoElement{
  position: absolute;
  right: 73px;
  width: 50px;
  top: 25px;
  opacity: 0;
  visibility: hidden;
}

.colorBalkenWrapper{
  position: absolute;
  bottom:0px;
  left:0px;
  height:20px;
  width:85%;
  overflow: visible;
}

.colorBalken{
  position: absolute;
  width:25%;
  height: 100%;
  bottom: -20px;
}

.balken1{
  left:0%;
  background:#efcc45;
}

.balken2{
  left:25%;
  background:#cfd966;
}

.balken3{
  left:50%;
  background:#779c52;
}

.balken4{
  left:75%;
  background:#4b6463;
}

.contactButtons{
  position: absolute;
  bottom:-150px;
  left:43%;
  transform: translateX(-50%);
  display: flex;
  gap: 25px;
}

.contact{
  background:rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.navigation{
  position: absolute;
  width:200px;
  height:calc(100% - 52px);
  right: 0px;
  bottom:0px;
}

.navbox{
  position: absolute;
  width: 100%;
  height:25%;
  opacity: 0;
  visibility: hidden;
}

.navbox1{
  top:0%;
}

.navbox2{
  top:25%;
}

.navbox3{
  top:50%;
}

.navbox4{
  top:75%;
}

.circle{
  position: absolute;
  height: 55%;
  aspect-ratio: 1 / 1;
  background: #c6c6c6;
  border-radius: 100%;
  left:50%;
  top:40%;
  transform: translate(-50%, -50%);
}

.buttonCopy{
  position: absolute;
  width: 100%;
  bottom:18%;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
}

.buttonImg{
  position: absolute;
  height: 50%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 100%;
  left:50%;
  top:40%;
  transform: translate(-50%, -50%);
}

#qrcode{
  position: absolute;
  width: auto;
  height: 70%;
  top: 50%;
  left: 50%;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.iFrameBGOverlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0px;
  left: 0px;
  opacity: 0;
  visibility: hidden;
}

#iFrameClosingButton{
  position: absolute;
  top: 9%;
  right: 17%;
  width: 50px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(239, 204, 69, .6);
  animation: glowPulse 2s ease-in-out infinite;
}


/* Language Toogle Switch */
.lang-switch2{
  opacity: 0;
  visibility: hidden;
  transform: scale(0.75);
  position: absolute;
  top: 12px;
  left: 150px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2d3032;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0px;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  box-sizing: border-box;
}

.slider::before {
  content: "";
  position: absolute;
  height: 28px;
  width: 28px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: transform 0.3s ease;
  border-radius: 50%;
  z-index: 0;
}

.label-left,
.label-right {
  z-index: 0;
  width: 50%;
  text-align: center;
  pointer-events: none;
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  color: #2d3032;
  transition: color 0.3s;
}

/* Standardfarben */
.label-left, .label-right {
  transition: color 0.3s;
  color: #2d3032;
}

/* EN aktiv */
.switch.lang-en-active .label-left {
  color: #fff;
}

.switch.lang-en-active .label-right {
  color: #2d3032;
}

/* DE aktiv */
.switch.lang-de-active .label-left {
  color: #2d3032;
}

.switch.lang-de-active .label-right {
  color: #fff;
}


/* Aktivierter Zustand */
.switch input:checked + .slider {
  background-color: #ccc;
}

.switch input:checked + .slider::before {
  transform: translateX(31px); /* 65 - 28 - 6 */
}



/* Video auf dem Startscreen */
.video-container-start {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-end; /* rechtsbündig */
  align-items: center;
  background-color: black;
  right:-300px;
}

.video-container-start video {
  height: 100vh;
  object-fit: cover;
}


/* Video auf dem Introscreen */
.video-container-intro {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-end; /* rechtsbündig */
  align-items: center;
  background-color: #fff;
  right:50px;
  bottom:-100px;
  opacity: 0;
  visibility: hidden;
}

.video-container-intro video {
  height: 80vh;
  object-fit: cover;
}




/* Interior Slideshow */
.slideWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 400vh;
  overflow: hidden; /* wichtig: keine native Scrollbar */
  opacity: 0;
  visibility: hidden;
}

.slide {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

/* Jede Slide bekommt eigene Y-Position */
.slide1 { 
  background-image: url(../img/carrara.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60%;
}

.slide2 { 
  position: absolute;
  background-image: url(../img/cortona.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60%;
  top:100vh;
}

.slide3 { 
  position: absolute;
  background-image: url(../img/portofino.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60%;
  top:200vh;
}

.slide4 { 
  position: absolute;
  background-image: url(../img/monza.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60%; 
  top:300vh;
}

.nameTag{
  background: #2d3032;
  width:220px;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: skewX(10deg);
  top:52px;
  left:-310px;
}

.nameTag p{
  color:#fff;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 24px;
  transform: skewX(-10deg);
}

/* Hotspots */
.hotspotIcon{
  position: absolute;
  width:40px;
  height:40px;
  border-radius: 50%; /* macht das Bild rund, falls es nicht schon rund ist */
  box-shadow: 0 0 15px rgba(239, 204, 69, .6);
  animation: glowPulse 2s ease-in-out infinite;
  opacity: 0;
  visibility: hidden;
}

#hotspotIcon1-slide1, #hotspotIcon1-slide2, #hotspotIcon1-slide3, #hotspotIcon1-slide4, #hotspotCloseIcon1-slide1, #hotspotCloseIcon1-slide2, #hotspotCloseIcon1-slide3, #hotspotCloseIcon1-slide4{
  top: 74%;
  left: 75%;
}

#hotspotIcon2-slide1, #hotspotIcon2-slide2, #hotspotIcon2-slide3, #hotspotIcon2-slide4, #hotspotCloseIcon2-slide1, #hotspotCloseIcon2-slide2, #hotspotCloseIcon2-slide3, #hotspotCloseIcon2-slide4{
  top: 67%;
  left: 8%;
}

#hotspotIcon3-slide1, #hotspotIcon3-slide2, #hotspotIcon3-slide3, #hotspotIcon3-slide4, #hotspotCloseIcon3-slide1, #hotspotCloseIcon3-slide2, #hotspotCloseIcon3-slide3, #hotspotCloseIcon3-slide4{
  top: 23%;
  left: 18%;
}

#hotspotIcon4-slide1, #hotspotIcon4-slide2, #hotspotIcon4-slide3, #hotspotIcon4-slide4, #hotspotCloseIcon4-slide1, #hotspotCloseIcon4-slide2, #hotspotCloseIcon4-slide3, #hotspotCloseIcon4-slide4{
  top: 14%;
  left: 8%;
}

#hotspotIcon5-slide1, #hotspotIcon5-slide2, #hotspotIcon5-slide3, #hotspotIcon5-slide4, #hotspotCloseIcon5-slide1, #hotspotCloseIcon5-slide2, #hotspotCloseIcon5-slide3, #hotspotCloseIcon5-slide4{
  top: 17%;
  left: 45%;
}

#hotspotIcon6-slide1, #hotspotIcon6-slide2, #hotspotIcon6-slide3, #hotspotIcon6-slide4, #hotspotCloseIcon6-slide1, #hotspotCloseIcon6-slide2, #hotspotCloseIcon6-slide3, #hotspotCloseIcon6-slide4{
  top: 89%;
  left: 4%;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 10px rgba(239, 204, 69, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(239, 204, 69, 1);
  }
  100% {
    box-shadow: 0 0 10px rgba(239, 204, 69, 0.4);
  }
}

.hotspotContentWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.hotspotContentOverlay{
  position: absolute;
  width: 100vw;
  height: 100%;
  background: #2d3032e0;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
}

.closeIcon{
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.imageholder{
  position: absolute;
  width: 600px;
  height:600px;
  top:50%;
  left:58%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  border:5px solid white;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.imageholderMatrix{
  position: absolute;
  width: 800px;
  top:50%;
  left:58%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

#hotspotContent1-slide1{
  background-image: url(../img/carrara.jpg);
  background-position:-1220px -715px;
  background-size: 500%;
}

#hotspotContent1-slide2{
  background-image: url(../img/cortona.jpg);
  background-position:-1220px -715px;
  background-size: 500%;
}

#hotspotContent1-slide3{
  background-image: url(../img/portofino.jpg);
  background-position:-1220px -715px;
  background-size: 500%;
}

#hotspotContent1-slide4{
  background-image: url(../img/monza.jpg);
  background-position:-1220px -715px;
  background-size: 500%;
}

#hotspotContent2-slide1{
  background-image: url(../img/carrara.jpg);
  background-position:-300px -900px;
  background-size: 500%;
}

#hotspotContent2-slide2{
  background-image: url(../img/cortona.jpg);
  background-position:-300px -900px;
  background-size: 500%;
}

#hotspotContent2-slide3{
  background-image: url(../img/portofino.jpg);
  background-position:-300px -900px;
  background-size: 500%;
}

#hotspotContent2-slide4{
  background-image: url(../img/monza.jpg);
  background-position:-300px -900px;
  background-size: 500%;
}

#hotspotContent3-slide1{
  background-image: url(../img/carrara.jpg);
  background-position:-700px -300px;
  background-size: 600%;
}

#hotspotContent3-slide2{
  background-image: url(../img/cortona.jpg);
  background-position:-700px -300px;
  background-size: 600%;
}

#hotspotContent3-slide3{
  background-image: url(../img/portofino.jpg);
  background-position:-700px -300px;
  background-size: 600%;
}

#hotspotContent3-slide4{
  background-image: url(../img/monza.jpg);
  background-position:-700px -300px;
  background-size: 600%;
}

#hotspotContent4-slide1{
  background-image: url(../img/carrara.jpg);
  background-position:0px 50px;
  background-size: 600%;
}

#hotspotContent4-slide2{
  background-image: url(../img/cortona.jpg);
  background-position:0px 50px;
  background-size: 600%;
}

#hotspotContent4-slide3{
  background-image: url(../img/portofino.jpg);
  background-position:0px 50px;
  background-size: 600%;
}

#hotspotContent4-slide4{
  background-image: url(../img/monza.jpg);
  background-position:0px 50px;
  background-size: 600%;
}

#hotspotContent5-slide1{
  background-image: url(../img/carrara.jpg);
  background-position:-1500px 0px;
  background-size: 600%;
}

#hotspotContent5-slide2{
  background-image: url(../img/cortona.jpg);
  background-position:-1500px 0px;
  background-size: 600%;
}

#hotspotContent5-slide3{
  background-image: url(../img/portofino.jpg);
  background-position:-1500px 0px;
  background-size: 600%;
}

#hotspotContent5-slide4{
  background-image: url(../img/monza.jpg);
  background-position:-1500px 0px;
  background-size: 600%;
}

.videoHotspotWrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 63%;
  top: 13%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.videoMask {
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  transition: clip-path 0.5s ease;
  position: relative;
}

.videoMask.expand {
  clip-path: circle(150% at 50% 50%);
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-fit: cover; /* lässt das Video die Maske füllen */
  object-position: 80% 50%; /* z. B. nach oben verschoben */
}

/* Button ist relativ zum Wrapper, nicht zur Maske */
.videoCloseButton {
  position: absolute;
  top: 39%;
  left: 39%;
  width: 40px;
  height: 40px;
  transform: rotate(0deg);
  transition: transform 0.4s ease;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0 0 15px rgba(239, 204, 69, .6);
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none;
}

.areaCopy{
  background: #ffffffd1;
  padding:20px;
  border-radius: 20px;
  position: absolute;
  width:250px;
  top:35%;
  left:6%;
  opacity: 0;
  visibility: hidden;
}





/* Loading */
.loader {
  position: absolute;
  opacity: 1;
  visibility: visible;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}