*{
    padding: 0px;
    margin: 0px;
    font-family:'Jost';
}


/*body {
    background-image: url('../img/background.png'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 100vh;
    margin: 0; 
  }

  body.menue{
      background-image: url('../img/b1.png');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 100vh; 
    margin: 0; 
  }
  */

body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: 'Jost';
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: scaleX(-1);
}

.aspect-4-3-wrapper {
  width: 1440px;
  height: 1080px;
  background-image: url('../img/background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
}

  body.menue .aspect-4-3-wrapper {
  width: 1440px;
  height: 1080px;
 background-image: url('../img/b1.png'); /* Pfad zum Bild */
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
}

  body.menue.bereit .aspect-4-3-wrapper {
  width: 1440px;
  height: 1080px;
 background-image: none; /* Pfad zum Bild */
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
}



.header {
    position: fixed;
    top: 100px;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
}
.header.indexheader{
    top: 50px;
}
.b1 {
    top: 200px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.content {
    max-width: 60%;
}
.menue .content{
    margin-top: 300px;
}
.bereit#b1 {
    font-size: 36px;
    display: flex
;
    justify-content: center;
    position: fixed;
    top: 334px;
    left: 50%;
    transform: translateX(-50%);
    /* width: max-content; */
}
.s {
    text-align: center;
    margin-top: 50px;
    font-size: 36px;
}
.footer {
    /* text-align: center; */
    /* margin-top: 50px; */
    /* font-size: 36px; */
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}
.qr {
    width: 600px;
    height: 600px;
    background-color: gray;
}
.qrcode {
    /* display: flex
; */
    /* justify-content: center; */
    /* position: fixed; */
    /* top: 200px; */
        top: 250px;
            position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
.header img{
    height: 130px;
}
.qrcode img {
    width: 100%;
}

.H1 {
    font-size: 36px;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}
.ue2{
    font-size: 48px;
    display: flex;
    justify-content: center;
        position: fixed;

    top: 205px;
    left: 50%;
    transform: translateX(-50%);
    
}
.H2 {
    font-size: 48px;
    display: flex
;
    justify-content: center;
}

.mt100{
    margin-top: 100px;
}
.boxbox {
    position: fixed;
    top: 318px;
    left: 50%;
    transform: translateX(-50%);
}

.discreption .H2 {
    width: max-content;
}
.H1 p{
    text-align: center;
}
.H2 {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.H2 img {
    padding: 20px;
    height: 50px;
}
.H3 {
    font-size: 45px;
    font-style: italic;
}
.H4 {
    font-size: 45px;
}
.discreption {
    margin-left: 50px;
    margin-top: 30px;
    /* text-align: -webkit-center; */
}
.box{
    margin-bottom: 27px;
}
.box .image {
    height: 100%;
    width: 240px;
    display: flex
;
    justify-content: center;
    background-color: #EBB972;
    border: 7px solid;
    box-sizing: border-box;
    border-radius: 30px;
    align-items: center;
}


#b1, #b2, #b3{
    display:flex;
    border-radius: 32px;
}

.baktive{
    display:none;
}

.box.aktive .baktive{
    display:block;
}
.box.aktive .bnoaktive{
    display:none;
}

.aw{
    width: 100vw;
}

#webcam {
 
    /*aspect-ratio: 4 / 3;*/
}


#webcam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:fill;
    z-index: -1;
    filter: brightness(0.4);
    border-radius: 35px; /* optional */
}

.H1.img {
    font-size: 36px;
    display: flex
;
    justify-content: center;
    position: fixed;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}






.orange{
    background-color: #EBB972 !important;
}
.red{
    background-color: #E67B6F !important;
}
.lila{
    background-color: #DF7B9D !important;
}

.box.b1.aktive {
    background-color: #EBB972 !important;
    border-radius: 40px;
    border: 8px solid;
}
.box.b2.aktive {
    background-color: #E67B6F !important;
    border-radius: 40px;
    border: 8px solid;
}
.box.b3.aktive {
    background-color: #DF7B9D !important;
    border-radius: 40px;
    border: 8px solid;
}
.aktive .image{
    border: none;
}
.btnBox {
    /* position: absolute; */
    /* top: 815px; */
    /* display: flex
; */
    /* justify-content: space-between; */
    /* width: 60%; */
    font-size: 36px;
    display: flex
;
    justify-content: space-between;
    position: fixed;
    top: 815px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
}


.H2.mk1.mt100 {
    font-size: 36px;
    display: flex
;
    justify-content: center;
    position: fixed;
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
}
.H2.mk2.mt100 {
    font-size: 36px;
    display: flex
;
    justify-content: center;
    position: fixed;
    top: 500px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
}
.progressbar {
    font-size: 36px;
    display: flex
;
    justify-content: center;
    position: fixed;
    top: 890px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    display: block;
}

.btnBoxG {
    /* position: absolute; */
    /* top: 815px; */
    /* display: flex
; */
    /* justify-content: space-between; */
    /* width: 60%; */
    font-size: 36px;
    display: flex
;
    justify-content: space-between;
    position: fixed;
    top: 586px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
}
.btnBox div {
   
}

.progressbar {
    margin-top: 10px;
    height: 10px;
    background-color: #ddd;
  }

  .progressbar-fill {
    height: 100%;
    background-color: darkred;
    width: 0%;
    transition: width 1s linear;
  }


  .glow {
  animation: glowPulse 1.2s ease-in-out infinite;

    border-radius: 30px;
  padding: 0px;
  margin: 0px;
  height: 145px;
}


@keyframes glowPulse {
  0% {
    box-shadow: 0 0 5px 2px rgba(0, 255, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(0, 255, 0, 1);
  }
  100% {
    box-shadow: 0 0 5px 2px rgba(0, 255, 0, 0.5);
  }
}