@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local('Montserrat Regular'), local('Montserrat-Regular'),
      url('./fonts/montserrat/Montserrat-Light.ttf') format('truetype');
}

/*
:root {
    --black: black;
    --white: #fff;
    --white-gray: #e2e2e2;
    --transparent: #0000;
}
*/

/* BEGIN CSS*/

html {
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth; /* Aktiviert sanftes Scrollen */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #164e63;
  font-family: "Montserrat", sans-serif;
  color: white;
  font-weight: 100;
  font-size: 1rem;
  min-height: 100%;
  margin: 0;
  text-align: left;
}

/* govie iframe */
#govie {
  transition: left 2s;
  position: fixed;
  top: 0;
  left: 0vw;
  width: 130%;
  height: 100vh;
  z-index: 0;
  /* Hintergrundebene */
  border: none;
}

#goviecontainer{
  position: fixed;
  top: 0;
  left: 0vw;
  height: 100vh;  
  width: 100vw;
  z-index: 0;
  /* Hintergrundebene */
  border: none;
}

/* overlay vignette */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
  box-shadow: inset 0 0 1000.8000000000001px #000;
  pointer-events: none; /* Div not clickable */
  z-index: 990; /* div over everything */
}

/* Style for the text sections */
.section {
    background-color: rgba(0, 0, 0, 0.0);
    font-size: 0.5 rem;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    pointer-events: none;
}

.content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.0);
    /* nicht selektierbare Texte */
    -webkit-user-select: none;
    /* Chrome, Safari, Edge */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Standard */
    pointer-events: none;
    
}

.content.left {
    text-align: left;
    pointer-events: auto;
}

.content.right {
    text-align: right;
    align-items: flex-end; /* Right-align the content properly */
    pointer-events: auto;
}

.content h1 {
    font-size: 4rem;
    margin-bottom: 10px;
}

.content p {
    font-size: 1.2rem;
    text-align: left;
}

p.left {
  text-align: left;
}

p.right {
  text-align: right;
  align-items: flex-end; /* Right-align the content properly */
}

/* section background is a cricle */
.circle {
  width: 620px;
  aspect-ratio: 1 / 1; /* Ensures height matches the width */
  margin: -50px;
  background: #ffff;
  border-radius: 0;
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
  border-radius: 50%; /* Makes it round */
  position: absolute;
  animation: scaleUp 1s ease-in-out;
  animation-timeline: view(); /* Optional, if needed */
  animation-range: entry 0% cover 100%; /* Optional, if needed */
  mix-blend-mode: difference; /* Inverts colors beneath it */
  z-index: 2;
  pointer-events: none; /* Ensures the circle doesn't block clicks */
}
/*
.circle.left {
  left:-0.5px;
}

.circle.right {
  right: -0.5px;
}
*/

/* animation keyframes fpr circle in bg */
@keyframes scaleUp {
  0% {
    transform: scale(0); /* Start small */
  }
  30% {
    transform: scale(0); /* Start small */
  }
  50% {
    transform: scale(1); /* End at full size */
  }
  60% {
    transform: scale(1); /* End at full size */
  }
  70% {
    transform: scale(0); /* Start small */
  }
  100% {
    transform: scale(0); /* Start small */
  }
}

/* spaceholder for govie iframe */
.empty-space {
  order: 1;
    flex: 1;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.empty-space.left {
  order: 1;
  pointer-events: none;

}

.empty-space.right {
  order: 0;
  pointer-events: none;

}

/* Variants-Design - color selectors */
.variants {
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  border-radius: 12px;
  display: flex;
  flex-direction: row; /* Align children horizontally */
  justify-content: flex-start; /* Align items to the left (you can change to 'center' or 'space-between') */
  align-items: center; /* Center vertically */
  gap: 10px; /* Optional: Adds spacing between each variant */
  margin: 5px;
  pointer-events: auto;
  cursor: pointer;
  isolation: isolate; /* Prevent blend mode effects */
}

.variants:hover {
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 0px 5px rgba(255, 255, 255, .5);
}


/* vartiant open seat */
.variants.openBtn {
  width: 120px;
  background-color: #000;
  border: 2px solid #fff;
  display: flex;             /* Use flexbox */
  justify-content: center;   /* Center horizontally */
  align-items: center;       /* Center vertically */
  text-align: center;        /* Center-align text inside the div */
  cursor: pointer;
  isolation: isolate; /* Prevent blend mode effects */
}

.variants > div {  /* child has right size */
  width: 40px;
  height: 40px;
  border: 2px solid #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.variantsContainer {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
  z-index: 4; /* Higher z-index to stay above the circle */
  isolation: isolate; /* Prevent blend mode effects */
}

/* Mobile responsive layout */
@media (max-width: 768px) {
    .section {
        flex-direction: column;
    }

    .content {
        text-align: center;
        align-items: center;
    }

    .content.left,
    .content.right {
        text-align: left;
        align-items: flex-start;
    }

    .empty-space.left
    .empty-space.left
    .empty-space {
        order: 2;
        /* Always place the empty space after the content */
        height: 100%;
        /* Ensure it takes up remaining space */
    }

    p.right {
      text-align: left;
    }
        
}
/* END CSS*/

/* BEGIN INDICATORS  */
/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 1; /* visible at the beginning */
    transition: opacity 0.5s ease; /* soft outfading */
}

/* Mouse-Design */
.mouse {
    width: 24px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scroll-Rad Animation */
.scroll-wheel {
    width: 4px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 2px;
    animation: scroll-wheel-animation 1.5s infinite ease-in-out;
}

/* Animation for Scroll-Wheel */
@keyframes scroll-wheel-animation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

/* Rotation-Indicator */
.rotate-indicator {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease; /* soft outfading */
    font-family: Arial, sans-serif;
    color: #fff;
}

/* Mouse-Design */
.mouse-icon {
    width: 40px;
    height: 60px;
    position: relative;
    margin: 0 auto;
    animation: mouse-move 4s infinite linear alternate;
}

/* Mouse-Body */
.mouse-body {
    width: 24px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    position: relative;
    margin: 0 auto;

}

/* Keyframes for Mouse Movement in a half circle */
@keyframes mouse-move {
  0% {
    transform: translate(-50px, 0);
  }
  3.125% {
    transform: translate(-47px, 3px);
  }
  6.25% {
    transform: translate(-44px, 6px);
  }
  9.375% {
    transform: translate(-41px, 9px);
  }
  12.5% {
    transform: translate(-38px, 12px);
  }
  15.625% {
    transform: translate(-35px, 14px);
  }
  18.75% {
    transform: translate(-32px, 16px);
  }
  21.875% {
    transform: translate(-29px, 18px);
  }
  25% {
    transform: translate(-25px, 20px);
  }
  28.125% {
    transform: translate(-22px, 22px);
  }
  31.25% {
    transform: translate(-19px, 23px);
  }
  34.375% {
    transform: translate(-16px, 24px);
  }
  37.5% {
    transform: translate(-13px, 25px);
  }
  40.625% {
    transform: translate(-9px, 25px);
  }
  43.75% {
    transform: translate(-6px, 25px);
  }
  46.875% {
    transform: translate(-3px, 25px);
  }
  50% {
    transform: translate(0, 25px);
  }
  53.125% {
    transform: translate(3px, 25px);
  }
  56.25% {
    transform: translate(6px, 25px);
  }
  59.375% {
    transform: translate(9px, 25px);
  }
  62.5% {
    transform: translate(13px, 24px);
  }
  65.625% {
    transform: translate(16px, 23px);
  }
  68.75% {
    transform: translate(19px, 22px);
  }
  71.875% {
    transform: translate(22px, 20px);
  }
  75% {
    transform: translate(25px, 18px);
  }
  78.125% {
    transform: translate(29px, 16px);
  }
  81.25% {
    transform: translate(32px, 14px);
  }
  84.375% {
    transform: translate(35px, 12px);
  }
  87.5% {
    transform: translate(38px, 9px);
  }
  90.625% {
    transform: translate(41px, 6px);
  }
  93.75% {
    transform: translate(44px, 3px);
  }
  96.875% {
    transform: translate(47px, 0);
  }
  100% {
    transform: translate(50px, 0);
  }
}

/* left mouse button */
.mouse-left {
    position: absolute;
    top: 6px;
    left: 12px;
    width: 8px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 4px;
    animation: click-animation 3s infinite ease-in-out alternate;
}

/* Indicator Text */
.rotate-indicator p {
    margin-top: 20px;
    font-size: 14px;
    color: #ffffff;
    animation: click-animation 1.5s infinite ease-in-out;
}

/* Click-Animation */
@keyframes click-animation {
    0%, 20%, 80%,100% {
        transform: scale(0.8);
    }
    10%,90% {
        transform: scale(1);
    }
}

/* END INDICATORS  */

/* BEGIN FOOTER */

/*
.footer {
  position: absolute;
  width: 100vw;
  z-index: 6;
  background-color: #222;
  color: #fff;
  padding: 20px 40px;
  text-align: center;
  overflow-y: auto;
  
}

.footer a {
  color: #00bcd4;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-heading {
  font-size: 24px;
  margin: 10px 0;
}

.footer-subheading {
  font-size: 20px;
  margin: 10px 0;
  font-weight: bold;
}

.footer-button {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #00bcd4;
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.footer-button:hover {
  background-color: #008c9e;
}

.footer-middle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
  padding: 20px;
}

.footer-contact, .footer-links {
  width: 45%;
  margin-bottom: 20px;
  text-align: left;
}

.footer-contact h4, .footer-links h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-social {
  margin-top: 15px;
}

.social-link {
  margin-right: 10px;
  font-size: 14px;
}

.footer-bottom {
  margin-top: 20px;
  font-size: 14px;
}

.footer-legal {
  margin-top: 10px;
}

.footer-legal a {
  margin-right: 15px;
}

.footer-button{
  color: #fff !important;
  text-decoration: none;
}
*/
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: #00bcd4;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: none;
}

.scroll-to-top:hover {
  background-color: #008c9e;
}
/* END FOOTER */

.govie-editor-logo-image {
  height: 60px;
  width: auto;
  opacity: .7;
  overflow: hidden;
  pointer-events: none;
  background-size: contain;
  background-position-y: bottom;
  background-repeat: no-repeat;
  z-index: 999;
  filter: invert(1);
  position: fixed; 
  bottom: 20px;       
  right: 20px;        
}

/* LOADER BEGIN */

/* Fullscreen Loader */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

/* Progress Bar */
.progress-bar {
  width: 80%;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress {
  width: 0%;
  height: 100%;
  background: #4caf50;
  transition: width 0.2s;
}

#loader p {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 16px;
}
/* LOADER END */