:root {
   --font-xsmall: 0.8rem;
   --font-small: 1rem;
   --font-large: 2rem;
}
html {

   /*font-size: 1.5vw;*/
   font-size: calc((100vw - 40px) * 0.015);

   @media (max-width: 1540px) {
    /*   (26px / 1280px) * 100 = 1.765625*/
      /*font-size: calc((100vw - 40px) * 0.017);*/
      font-size: calc((100vw - 40px) * 0.015);
   }

   @media (max-width: 768px) {
    font-size: calc((100vw - 8px) * 0.01948051948);
   }



   @media (min-width: 1600px) {
         font-size: calc((100vw - 40px) * 0.0125);
   }

   letter-spacing: 0.04em;

   -webkit-font-smoothing: antialiased; /* macht Schrift dünner/feiner */
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
}




html,
body {
   margin: 0;
   padding: 0;
   overflow-x:hidden;
}
body {
   background-color: #000;

   color: #fff;
   font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
   font-size: var(--font-small);
   font-style: normal;
   font-weight: 400;
   line-height: 2.1em;
   text-align: center;

   display: flex;
   flex-direction: column;
   align-items: center;

}

.text_left {
   text-align: left;

}



.section {
   /*max-width: 1500px;*/
   /*background-color: #545454;*/

   box-sizing: border-box;

}

.fullwidth {
   max-width: none;;
   width: 100%;
   margin-left: 0;
   margin-right: 0;
   padding: 0;
}


p, .block  {
   margin-block-start: 1.3em;
   margin-block-end: 1.3em;
}

.block > *:first-child {
   margin-block-start: 0;
}
.block > *:last-child {
   margin-block-end: 0;
}

.block + .block  {
   margin-block-start: 0;
}

a {
   color: #fff;
   text-decoration: none;
}
a:hover {
   color: #fff;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}





#content_frame2,
#video_section  {
   position: relative;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;

/*   @media  (orientation: portrait) {
      min-height: auto;
   }*/
}

/*#video_section  {
    @media  (orientation: portrait) {
      aspect-ratio: 16/9;
      min-height: auto;
   }
}*/

#content_frame2 {
   justify-content: space-between;
   padding-top: 2em;
   /*padding-bottom: 1em;*/

   @media  (orientation: portrait) { /*and (max-width: 1024px) */
      min-height: auto;
      gap: 2em;

   }
}

#content_frame_text {
   padding: 20px;
   @media (max-width: 1540px) {
      max-width: 1200px;

   }
}


#video_frame {
   position: relative;
   /*margin-top: 9.2vw;*/
}

#video_frame video {
   width: 100%;
   height: auto;
   margin: 0;
}

#video_frame .video_frame_cont {
   position: absolute;
   width: 100%;
   height: 100%;

   top: 0;
   left: 0;
   right: 0;
   bottom: 0;

   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   pointer-events: none;
}

.video_frame_cont img {
   width: auto;
   height: 54%;
   object-fit: contain;
      pointer-events: none;
}




.large_text {
   font-size: var(--font-large);
   letter-spacing: 0.08rem;
}
.small_text {
   font-size: var(--font-small);
   letter-spacing: 0.04rem;
}
.xsmall_text {
   font-size: var(--font-xsmall);
   letter-spacing: 0.04rem;
   line-height: 1.5em;
}


.horiz_list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 5px 0.8rem ;
   flex-wrap: wrap;
}
.horiz_list li {
   white-space: nowrap;
}


footer {
   margin-top: 5.8rem;
       margin-top: 3.6rem;
   margin-bottom: 1.0rem;
   font-size: 0.92rem;
}
/* --- Scroll-Down Pfeil --- */
#scroll-down-arrow {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 40px;
   color: white;
   cursor: pointer;
   opacity: 1;
   transition: opacity 0.3s ease;
   z-index: 9999;
   user-select: none;

/*      @media  (orientation: portrait) {
         display: none;
      }*/
}


#scroll-down-arrow.hidden {
   opacity: 0;
   pointer-events: none;
}