/* Variables
 */
:root {
    /* from 1px to 0.9px */
    --clamp-scale-1: clamp(0.05625rem, 0.05178571428571429rem + 0.014285714285714282vw, 0.0625rem);
    /* from 1px to 0.8px */
    --clamp-scale-2: clamp(0.05rem, 0.04107142857142858rem + 0.028571428571428564vw, 0.0625rem);
    /* from 1px to 0.7px */
    --clamp-scale-3: clamp(0.04375rem, 0.030357142857142853rem + 0.042857142857142864vw, 0.0625rem);
    /* from 1px to 0.6px */
    --clamp-scale-4: clamp(0.0375rem, 0.01964285714285714rem + 0.05714285714285715vw, 0.0625rem);
    /* from 1px to 0.5px */
    --clamp-scale-5: clamp(0.03125rem, 0.008928571428571428rem + 0.07142857142857142vw, 0.0625rem);
    /* from 1px to 0.4px */
    --clamp-scale-6: clamp(0.025rem, -0.0017857142857142828rem + 0.08571428571428572vw, 0.0625rem);
    /* from 1px to 0.3px */
    --clamp-scale-7: clamp(0.01875rem, -0.0125rem + 0.1vw, 0.0625rem);
    /* from 1px to 0.2px */
    --clamp-scale-8: clamp(0.0125rem, -0.02321428571428572rem + 0.1142857142857143vw, 0.0625rem);
    /* from 1px to 0.1px */
    --clamp-scale-9: clamp(0.00625rem, -0.033928571428571426rem + 0.12857142857142856vw, 0.0625rem);
  }

  ::-webkit-scrollbar {
    width: 08px;               /* width of the entire scrollbar */
  }
  
 ::-webkit-scrollbar-track {
    background: #3e271a;        /* color of the tracking area */
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgb(255, 192, 77);
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(45%, rgba(255, 192, 77, 1)),
      to(rgba(220, 189, 132, 1))
    );
    background: -o-linear-gradient(
      left,
      rgba(255, 192, 77, 1) 45%,
      rgba(220, 189, 132, 1) 100%
    );
    background: linear-gradient(90deg, rgba(255, 192, 77, 1) 45%, rgba(220, 189, 132, 1) 100%);
  }

html {
    font-size: 16px;
}

body {
    background: #151515;
    color: #3e271a;
    font-size: 18px;   
    font-size: calc(var(--clamp-scale-1) * 18);
     background-image: url('./bg-image.jpg');

 

    /* font-size: calc(var(--clamp-scale-1) * 18)  !important; */
    background-size: 245px;
    background-repeat: repeat;

    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    max-height: 100vh;
    overflow: hidden;

    font-family: 'Open Sans', sans-serif;

    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;   
    max-width: 100%;


    overflow-y: auto;
    max-height: unset;
    height :auto;
  }

  @supports (background-image: url('./bg-image.webp')) {
    body {
      background-image: url('./bg-image.webp');
    }
  }

  .button {
    border-radius: 70px;
    color: inherit;
    border-radius: 30px;
    background: rgb(255, 192, 77);
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(45%, rgba(255, 192, 77, 1)),
      to(rgba(220, 189, 132, 1))
    );
    background: -o-linear-gradient(
      left,
      rgba(255, 192, 77, 1) 45%,
      rgba(220, 189, 132, 1) 100%
    );
    background: linear-gradient(90deg, rgba(255, 192, 77, 1) 45%, rgba(220, 189, 132, 1) 100%);

    text-transform: uppercase;
font-weight: 500;
    padding: 10px 20px;
    /* padding: calc(var(--clamp-scale-4) * 10) calc(var(--clamp-scale-2) * 30); */
    display: inline-block;
    border-radius: 31px;
    text-decoration: none;
    display: flex;
    align-items: center;

justify-content: center;
color: #3e271a;
  }

  button.button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    cursor: pointer; font-family: 'Open Sans', sans-serif;
    font-size: calc(var(--clamp-scale-2) * 18) !important;
    line-height: normal;
    font-weight: 500;
  }

  .button.button-startgame{
    animation: zoom-in-zoom-out 3s ease infinite;   box-shadow: 0 -1px 10px 0 #0000004d !important;
    margin-top: 20px;
  }

  .button.button-startgame:hover{
    animation: unset;
  }


.button-inner {
    display: flex;
    flex-direction: column;
}

  .button small {
    font-size: 12px;
    text-transform: none;;
  }

  .button:hover {
    box-shadow: 0 -1px 10px 0 #0000004d !important;
transform: scale(1.035);
  }

  .button img {
    margin-right: 15px;
    height: auto;
  }

  #FixedInfo{
    padding: 20px;
    background: white;
    width: 250px;
    left: 250px;
    position: absolute;
  top: 40px;

    border-radius: 20px;
    box-shadow: 2px 2px 12px 4px #00000063;
    font-size: 13px;
    background: rgb(227, 212, 179);
    background: -webkit-gradient( linear, left top, right top, color-stop(45%, rgba(227, 212, 179, 1)), to(rgba(194, 177, 140, 1)) );
    background: -o-linear-gradient( left, rgba(227, 212, 179, 1) 45%, rgba(194, 177, 140, 1) 100% );
    background: linear-gradient(90deg, rgb(191 107 107) 45%, rgb(144 56 56) 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    color: white;
  }

  @media screen and (max-width: 1245px){
    #FixedInfo{
      top: auto; bottom: 40px;
      left: 100px;
      width: 200px;
      padding: 15px;
    }
  }

  @media screen and (max-width: 920px){
    #FixedInfo{
 left: 20px;
 bottom: 100px;
 width: 170px;
    }
  }

  
  @media screen and (max-width: 768px){
    #FixedInfo{
display: none;
    }
  }


    
  @media screen and (max-height: 560px)  and (max-width: 1245px){
    #FixedInfo{
display: none;
    }
  }
  #FixedInfo .pushpin {
    position: absolute;
    filter:invert(0);
    top: -5px;right: 0;
  }

  #FixedInfo .pushpin.pushpin-2{
    left: 0;
    right: auto;
    transform: scaleX(-1);
  }

  #FixedInfo img {
    filter:invert(1);
    margin-top: -3px;
  }

  #FixedButtons {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    z-index: 20;
    position: fixed;
  }

  #FixedButtons .button {
    margin-bottom: 20px;
  }

  /* TMP 

  #FixedButtons {

   z-index:15;
   background: #120d086e;
   backdrop-filter: blur(1px);

   flex-direction: row;
   top: 0;
   left: 0;
   padding: 15px 40px;
   box-sizing: border-box;
   gap: 20px;
   align-items: center;
   justify-content: center;
   justify-content: space-between;
   width: 100%;
  }

  #FixedButtons .button {
    font-size: 16px;
    padding: 8px 25px;
    margin-bottom: 0;
    line-height: 100%;
  }

  #FixedButtons .website-title{
    flex: 1;
    text-align: left;    margin-bottom: 0;;
  }

  #FixedButtons #ServiceLinks{
    flex: 1;
    justify-content: flex-end;margin-top: 24px;
  }*/


  #WebsiteButton2,
  #WebsiteButton {
    background: rgb(227, 212, 179);
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(45%, rgba(227, 212, 179, 1)),
      to(rgba(194, 177, 140, 1))
    );
    background: -o-linear-gradient(
      left,
      rgba(227, 212, 179, 1) 45%,
      rgba(194, 177, 140, 1) 100%
    );
    background: linear-gradient(90deg, rgba(227, 212, 179, 1) 45%, rgba(194, 177, 140, 1) 100%);
  }

 body #unity-logo {
    width: 154px;
    height: 154px;
    background: url(/assets/logo.png) no-repeat center;
    border-radius: 20px;
    background-color: white;
    background-size: contain;

  }

  body #unity-progress-bar-full {
    background: rgb(255, 192, 77);
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(45%, rgba(255, 192, 77, 1)),
      to(rgba(220, 189, 132, 1))
    );
    background: -o-linear-gradient(
      left,
      rgba(255, 192, 77, 1) 45%,
      rgba(220, 189, 132, 1) 100%
    );
    background: linear-gradient(90deg, rgba(255, 192, 77, 1) 45%, rgba(220, 189, 132, 1) 100%);
  }

  #unity-canvas {
    width: calc(100vh * 0.7) !important;
    height: 100vh !important;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  #unity-canvas{
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100%;
   
  }

  .ScrollDown,
.ScrollUp {

  background: rgb(255, 192, 77);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(45%, rgba(255, 192, 77, 1)),
    to(rgba(220, 189, 132, 1))
  );
  background: -o-linear-gradient(
    left,
    rgba(255, 192, 77, 1) 45%,
    rgba(220, 189, 132, 1) 100%
  );
  background: linear-gradient(90deg, rgba(255, 192, 77, 1) 45%, rgba(220, 189, 132, 1) 100%);

  cursor: pointer;
  position: fixed;
  bottom: 30px;
  right :30px;
  z-index: 50;
color: #3e271a;
  padding: 10px 20px !important;
  line-height: 1;
  font-size: inherit;
  border-radius: 30px;

  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;

  -webkit-user-select: none;
  user-select: none;
  width: auto !important;
  outline: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0px 0px 4px 5px #0000001f;
  text-decoration: none;
  font-weight: 500;
}

.ScrollDown:hover,
.ScrollUp:hover {
  transform: scale(1.05);
}


.ScrollDown img,
.ScrollUp img {
  transform: rotate(-90deg);
  width: 10px;
  height: auto;
  margin: 0;
  margin-right: 5px;
}

.ScrollDown img {
  transform:rotate(90deg) translateX(-2px);
}

#unity-loading-bar {
  top: 50vh !important;
  z-index: 11;
  position: absolute;left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;;
}

  body #unity-container.unity-desktop{
    left: 0 !important;
    top: 0  !important;
    transform: none  !important;
    border: 0;

    max-width: calc(100% - 245px);
    margin-left: 245px;
    border-left: 5px solid white;
  }

   
 #Content,
  #InfoOverlay,
  #MobileOverlay,
 #GameOverlay {
    width: 100%;
    height: 100%;
    background-color: #141414;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-image: url(./bg-image.jpg);

    display: flex;
    flex-direction: column;
    padding: 40px;
    padding: calc(var(--clamp-scale-4) * 40);
    color: white;
    box-sizing: border-box;
    text-align: center;
justify-content: center;
align-items: center;

transition: opacity 0.6s;overflow-y: auto;

height: 100vh;
overflow: hidden;
 }

 #GameOverlay {
  z-index: 12;
      border-bottom: 1px solid white;
 }

 
 #Content {
  padding-top:100px;
position: relative;
top: auto;
left: auto;
bottom: auto;
transform: none;
right: auto;
height: auto;
background: transparent;
margin: 0 auto;
max-width: 1200px;
text-align: left;;
}


#Content h1 {

}

#Content section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #ffffff8f;
}

 @supports (background-image: url('./bg-image.webp')) {
  #InfoOverlay,
  #MobileOverlay,
 #GameOverlay{
    background-image: url('./bg-image.webp');
  }
}



 #MobileOverlay {
    z-index: 20;
 
    padding-bottom: 100px;
    justify-content: flex-start;
    position: relative;

   /* overflow-y: auto;*/
 }

 .info {
  background-color: #ef141491;
  border-radius: 20px;
  color: white;
  padding: 7px 20px;
  backdrop-filter: blur(7px);
  max-width: 40%;
  font-size: 13px;
 }

 #InfoOverlay{
  z-index: 30;  text-align: left;
  justify-content: flex-start;
  padding-top: 40px;align-items: flex-start;
padding: 40px 20px;

 }

#Content > :is(nav, section),
  #Content :is(ol, ul, dl),
 #Content button,
 #Content ul ,
 #Content :is(h1,h2,h3),
 #Content p,
#InfoOverlay button,
 #InfoOverlay ul ,
 #InfoOverlay h2,
 #InfoOverlay p {
  display: block;
 margin-left: auto;
 margin-right: auto;
 max-width: 768px;
width: 100%;
box-sizing: border-box;
 }

#Content ul  li::before {
  content: "•"; 
  display: inline-block;
  margin-right: 1.5ch;
}

#Content dl dd,
#Content :is(ol,ul){
  padding-left: 20px;
  margin-left: 20px;
}

#Content ol {
  margin-left: 20px;
}

 #Content h3 {
  margin-top: 20px;
 }

 #Content dl dt {
  font-weight: bold;;
 }

 #Content ul ,
 #InfoOverlay ul {
padding: 0;
list-style: none;;
 }


 #Content p ,
 #InfoOverlay p {
  margin-bottom: 15px;
 }

 #Content a ,
 #InfoOverlay a {
  color: white;
  text-decoration: underline;
 }

 #faq summary {
  cursor: pointer;

  &:hover {
    opacity: 0.7;
  }
 }

 #Content a:hover,
 #InfoOverlay a:hover{
  text-decoration: none;
 }

 .button-info-close {
  margin-top: 30px;
  width: auto !important;
 }

 .open,
 .close{
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-left-radius: 20px;
  background: rgb(255, 192, 77);
  background: -webkit-gradient( linear, left top, right top, color-stop(45%, rgba(255, 192, 77, 1)), to(rgba(220, 189, 132, 1)) );
  background: -o-linear-gradient( left, rgba(255, 192, 77, 1) 45%, rgba(220, 189, 132, 1) 100% );
  background: linear-gradient(90deg, rgba(255, 192, 77, 1) 45%, rgba(220, 189, 132, 1) 100%);
  padding: 4px 20px;    color: #3e271a;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;;
  gap: 4px;
 }

 .open {
  transform: rotate(90deg) translateY(-50%);
  right: -22px;
  top: 50%;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  cursor: pointer;
 }

body.mobile-version .open {
  z-index: 50;
  transform: rotate(90deg);
  top: 84px;
  right: -31px;

}

body:not(.mobile-version)  .open{
  transform: none;
  top: 0;
  right : 0;
  z-index: 20;
  border-bottom-right-radius: 0;
}

body.mobile-version #InfoOverlay{
  padding-bottom: 100px;
}

 #MobileOverlay .button 
 {
    margin-top: 20px;
    justify-content: flex-start;;text-align: left;
    width: calc(100% - 40px);
    justify-content: center;
 }

 #MobileOverlay a.header-link {
    color: white;
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 20px;  font-family: 'Niconne',  serif;
    font-weight: 400;
 }

 #unity-container.unity-mobile{
    border: 0;
    top: 0;
    position: relative !important;
 }

 #unity-container.unity-mobile #unity-loading-bar,
 #unity-container.unity-mobile #GameOverlay {
  display: none;
 }

.info-box{
   
    gap: 5px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #e3d4b3;
    border-radius: 20px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    color: #141414;
    border: 2px solid #ffc04d;
    font-weight: bold;

}

#ServiceLinks{
    font-size: 12px;

  display: flex;
  align-items: center;
 justify-content: center;
}



#ServiceLinks a{
    display: flex;  color: white;
    text-decoration: none;
}

#ServiceLinks a:hover{
    text-decoration: underline;
}

#ServiceLinks a:not(:last-child)::after {
    content: "|";
    margin: 0 5px,
}

 img {
    -webkit-user-drag: none;
 }

 .logo{
width: 80px;
width: calc(var(--clamp-scale-2) * 120);
height: auto;
    border-radius: 10px;
    background: white;
       margin-bottom: 20px;
 }

 #GameOverlay .logo {
  margin-bottom: 0;
 }

 .logo-farben {
  width: 170px;
  height: auto;
  margin:0 auto;
  margin-bottom: 20px;
 }

 h1,h2,h3,h4{
    margin-top: 0;
 }

 #GameOverlay.hidden{
    opacity: 0;
    pointer-events: none;
 }

 .badge {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #e3d4b3;
    color: black;
    font-size: calc(var(--clamp-scale-4) * 14);
    padding: 5px 10px;
    border-radius: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
 }

 .website-title{
    color: white;
    text-align: center;
    margin-bottom: 10px;
    text-decoration: none;
 }

 .teaser-2,
.teaser-1 {
    font-family: 'Niconne',  serif;
    font-size: 40px;

    line-height: normal;
    font-weight: normal;
    line-height: 100%;
    
 }

  
 .teaser-2 {
  font-size: 34px;
 }

.teaser-3 {
    font-weight: 500;
    text-transform: uppercase;
        font-size: 20px;
  }


 .teaser-1 small {
    font-size: 1rem;
    font-family: 'Open Sans',sans-serif;
    text-transform: uppercase;
 }

  @media screen and (max-width: 900px) {
    
    #FixedButtons .button small {
      display: none;
    }
    #FixedButtons .button img {
       margin-right: 5px;
      }
  }

  @media screen and (max-width: 600px) {


.teaser-2 {
  font-size: 30px;
}

.teaser-3 {
  font-size: 18px;
}

.teaser-1{
  font-size: 35px;
}

    .info{
    max-width: 100%;
    }

    #FixedButtons {
      display: none;
    }

    body #unity-container.unity-desktop,
    #unity-container {
      margin-left: 0;
      border: 0;
      max-width: 100%;
    }

    body div.cky-box-bottom-left {
        left: 0 !important;
        bottom: 0 !important;
     
    }

    #Content dd{
      margin-left: 20px;
    }


     #Content  {
      padding-bottom: 70px;
      padding-top:40px;
     }

    body div.cky-consent-container .cky-consent-bar{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;    background-color: #131313eb !important;
    }

#Content section {
    margin-top: 20px;
    padding-top: 20px;
  
}

  }

  #unity-container {
    border-left: 5px solid #ffc04d;
    border-right: 5px solid #ffc04d; box-shadow: 2px 2px 12px 17px #00000063;

    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
  }
body   #unity-container.unity-desktop {
    left: 61%;
    top: 50%;
    transform: translate(-50%, -50%)
}
  #unity-mobile-warning {
    font-size: 30px;
    display: none;
  }


/* cookie banner */
  body .cky-consent-container .cky-consent-bar {
    border-color: #131313;
    background-color: #131313ba !important;
    backdrop-filter: blur(2px);
    border-radius: 20px;
    box-shadow: 0 -1px 10px 0 #0000004d !important;

  }

  body .cky-notice-btn-wrapper .cky-btn{
    border-radius: 70px;
    text-transform: uppercase;;
  }

  body .cky-notice-group,
  body .cky-notice-group *{
    font-size: 12px !important;
    /* font-size: calc(var(--clamp-scale-1) * 12)  !important; */
    line-height: normal;
  }

  body .cky-box-bottom-left{
    bottom: 20px !important;
    left: 20px !important;
  }


  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.04);
    }
    100% {
      transform: scale(1);
    }
  }