@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: url('img/gamesgrid.jpg') top no-repeat fixed;
      background-size: cover;
    }
	  



.checkbox-group label {
  display: inline-flex;  /* nicht flex sondern inline-flex */
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  max-width: 100%; /* damit nicht zu breit */
  white-space: normal; /* Zeilenumbruch erlauben */
}

.container {
	

  overflow-y: auto;
  animation: fade 1s ease;
  background: linear-gradient(to bottom, #061625, #095a6b); /* Gradient von oben nach unten */
  border: 4px solid #095a6b; /* Kontur in gewünschter Farbe */
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  border-radius: 30px;
  font-size: 1rem;
  z-index: 2;
  max-width: 800px;
  width: 100%;
  padding: 0 1.5rem 2rem 1.5rem;
  margin: 1rem auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
 
	  }

	  .container_app {
		  
  display:none;
  animation: fade 1s ease;
  background: linear-gradient(to bottom, #061625, #095a6b); /* Gradient von oben nach unten */
  border: 4px solid #095a6b; /* Kontur in gewünschter Farbe */
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  border-radius: 30px;
  font-size: 1rem;
  z-index: 2;
  max-width: 70%;
  width: 100%;
  padding: 3rem;
  margin: 2rem auto 0 auto;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
	  }
	  
	  
	  .store-badge {
  width: 60%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 1rem auto;
}
	
	  
	  .promo-text {
  margin: 1rem auto;
  max-width: 800px;
  width: 90%;
  text-align: center;
  line-height: 1.4em;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

    .logo {
      width: 40%;
      margin: 0 auto;
    }
	  
	 .logo img {
     display: block;
     margin: 0; 
     padding: 0;
}
	  
.herobanner {
  max-width: 100%;
  width: 100%;
  text-align:center;
  margin: 0 auto;
}

.herobanner img {
  display: block;
  margin: 0 auto;
  max-width: 540px;
  height: auto;
}
	  
.herobanner_mobile {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.herobanner_mobile img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

    h1 {
      font-weight: 600;
      color: #da0e17;
      font-size: 8.3rem;
      line-height: 0.6;
      margin: 0;
    }

    h2 {
      font-weight: 600;
      font-size: 1.3rem;
      line-height: 1.3em;
      margin: 1rem 0;
      color:#fff;
	  text-align:center;
    }
	  
	 .footer-links {
  	  display: flex;
  	  justify-content: center;
  	  gap: 2rem; /* gleicher Abstand zwischen den Links */
 	  margin: 3rem 0 1rem;
      font-family: 'Catamaran', sans-serif;
  	  font-weight: 700; /* bold */
	  
}


    .bottom-section {
      display: flex;
      justify-content: center;
      gap: 1rem;
      max-width: 900px;
      margin: 0.5rem auto; /* <-- ZENTRIERT horizontal */
    }

    .bottom-left, .bottom-right {
      flex: 1;
    }

    .bottom-image {
      width: 100%;
      border-radius: 10px;
    }

    .bottom-right form {
      text-align: center;
      font-size: 1rem;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="password"] {
      width: 100%;
      padding: 0.5rem;
      margin-bottom: 0.6rem;
      border-radius: 100px;
      border: none;
      box-sizing: border-box;
      background-color:#22637b;
	  color:#fff;
    }

    form input:focus {
      outline: 2px solid #4ee5ff;
    }
	  
form input::-webkit-input-placeholder {
  color: #8cc3d0;
  text-indent: 5px;
  opacity: 1;
}

form input:-moz-placeholder {
  color: #8cc3d0;
  text-indent: 5px;
  opacity: 1;
}

form input:-ms-input-placeholder {
  color: #8cc3d0;
  text-indent: 5px;
  opacity: 1;
}

    .checkbox-group {
      margin-top: 1.2rem;
	  margin-left:0;
      text-align: left;
      color: white;
      font-size:0.8rem;
    }

    .checkbox-group label {
      display: flex;
      align-items: center;
      margin-bottom: 0.1rem;
      cursor: pointer;
    }

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  border-radius: 20%; /* macht die Checkbox rund */
  border: 2px solid #fff; /* optional: weißer Rand */
  appearance: none; /* entfernt das Standard-Checkbox-Design */
  -webkit-appearance: none;
  background-color: #22637b;
  position: relative;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"]:checked {
  background-color: #4ee5ff;
}

.checkbox-group input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}
	  
	 .checkbox-group label span {
     display: inline;
     white-space: nowrap;
}

     button.cta {
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
    }

     button.cta img {
     display: block;
     margin: 1rem auto;
    }

    .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
    }
	  

	  
	  .footer-links a {
 	   color: #4ee5ff;
   	   text-decoration: none;
       font-size: 1rem;}

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

    @media (max-width: 1024px) {
      .container {
        display: none;
      }
      .container_app {
        display: block;
      }
      .logo {
        width: 80%;
      }
      h1 {
        font-size: 5rem;
      }
      h2 {
        font-size: 1.5rem;
      }
    }