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

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: linear-gradient(-3deg, rgb(22, 21, 37), rgba(1, 1, 15, 1));
  background-size: 400% 400%;
  color: rgb(255, 255, 255);

  animation: gradient 30s ease infinite;
  overflow: hidden;

}

@keyframes gradient {
  0% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 100% 0%;
  }

  html {
    scroll-behavior: smooth;
  }

}

.body-main {
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.body-main.cookieshow {
  opacity: 0.1;
  pointer-events: none;
}

/* Welcome Section*/

#welcome,
#pricing,
#contact,
#informationen,
#instal {
  position: absolute;
  top: 80px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  height: 90%;
  width: 80vw;
  transform: translateY(-200%);
  opacity: 0;
  transition: 1s ease;
  transition-delay: 0.5s;
  overflow-y: auto;
  scrollbar-color: white transparent;
  scrollbar-width: thin;
  padding-bottom: 75px;
  overflow-x: hidden;


}

#impressum,
#datenschutz,
#widerruf {
  position: absolute;
  top: 80px;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  height: 80vh;
  width: 80vw;
  transform: translateY(+200%);
  opacity: 0;
  transition: 1s ease;
  transition-delay: 0.5s;
  overflow-y: auto;
  scrollbar-color: white transparent;
  scrollbar-width: thin;

}


#welcome p {
  padding: 0px;
  margin: 0px;
}


#welcome h4 {
  font-size: 3rem;
  font-weight: 700;


}

#welcome h5 {
  font-size: 5rem;
  font-weight: 1000;
  line-height: 4rem;

}

#welcome .h4-first {
  animation: lefttoright 1s ease;
}

@keyframes lefttoright {
  0% {
    transform: translateX(-500%);
  }

  100% {
    transform: translateX(0%);
  }

}

#welcome .h4-second {
  margin-top: 5px;
  transform: translateX(+500%);
  animation: righttoleft 1s ease;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

@keyframes righttoleft {
  0% {
    transform: translateX(+500%);
  }

  70% {
    transform: translateX(-20%);
  }

  100% {
    transform: translateX(0%);
  }

}

#welcome .h5-main {
  opacity: 0;
  animation: fadein 2s ease;
  animation-delay: 1s;
  animation-fill-mode: both;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}

#welcome.active,
#pricing.active,
#contact.active,
#informationen.active,
#instal.active {

  transform: translateY(0);
  opacity: 1;
  transition-delay: 1.5s;
  transition: 2s ease;
}

#impressum.active,
#datenschutz.active,
#widerruf.active {

  transform: translateY(0);
  opacity: 1;
  transition-delay: 1.5s;
  transition: 2s ease;
}


#welcome .title {

  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  margin: 0px;
  padding-bottom: 50px;
  line-height: 70px;





}

#welcome .login-div {

  position: relative;
  display: flex;
  justify-items: center;
  align-items: center;



}

.wrapper {
  display: flex;
  position: relative;
  width: 750px;
  height: 450px;
  background: transparent;
  border: 3px solid rgb(82, 82, 135)e;
  overflow: hidden;
  box-shadow: 0 0 25px rgb(82, 82, 135);
  opacity: 0;
  animation: fadein 2s ease;
  animation-delay: 3s;
  animation-fill-mode: both;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.wrapper .form-box {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.wrapper .form-box.login {
  left: 0;
  padding: 0 60px 0 40px;
}

.wrapper .form-box.login .animation {
  transform: translateX(0);
  opacity: 1;
  filter: blur(0);
  transition: 0.7s ease;
  transition-delay: calc(0.1s *var(--j));
}

.wrapper.active .form-box.login .animation {
  transform: translateX(-120%);
  opacity: 0;
  filter: blur(10px);
  transition-delay: calc(0.1s *var(--i));
}

.wrapper .form-box.register {
  right: 0;
  padding: 0 40px 0 60px;
  pointer-events: none;
}

.wrapper.active .form-box.register {
  pointer-events: auto;
}

.wrapper .form-box.register .animation {
  transform: translateX(120%);
  opacity: 0;
  filter: blur(10px);
  transition: 0.7s ease;
  transition-delay: calc(0.1s *var(--j));
}

.wrapper.active .form-box.register .animation {
  transform: translateX(0);
  opacity: 1;
  filter: blur(0);
  transition-delay: calc(0.1s *var(--i));
}

/* Wrapper mobile Login  */
.wrapper_mobile {
  display: none;
  position: relative;
  width: 90%;
  max-width: 600px;
  height: 420px;
  background: transparent;
  border: 3px solid rgb(82, 82, 135)e;
  overflow: hidden;
  box-shadow: 0 0 25px rgb(82, 82, 135);

  margin: auto;
  padding: 20px;
}

.wrapper_mobile .form-box {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.wrapper_mobile .form-box.login-mobile {
  transform: translateX(-200%);
  left: 0;
  padding: 0 60px 0 40px;
  transition: 1s;
  transition-delay: calc(0.1s *var(--j));
}


.wrapper_mobile .form-box.login-mobile.active {
  transition: 1s;
  transform: translateX(0);
  transition-delay: calc(0.1s *var(--i));
}





.wrapper_mobile .form-box.register-mobile {
  transform: translateX(+200%);
  left: 0;
  padding: 0 60px 0 40px;
  transition: 1s;
}

.wrapper_mobile .form-box.register-mobile.active {
  transform: translateX(0);
  transition: 1s;
}

/* Wrapper mobile Login Ende */
.form-box h2 {
  font-size: 2.2rem;
  text-align: center;
}

.form-box .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 25px 0;

}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-weight: 500;
  font-size: 1.3rem;
  transition: 0.5s;
  padding-right: 23px;
}

.input-box input:focus,
.input-box input:valid {
  border-bottom-color: #aac;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
  transition: 0.5s;
}

.input-box input:focus~label,
.input-box input:valid~label {
  top: -5px;
  color: #aac;
}


.input-box i {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1rem;
  transition: 0.5s;
}

.input-box input:focus~i,
.input-box input:valid~i {
  color: #aac;
}

.btn {
  position: relative;
  width: 100%;
  height: 45px;
  background: transparent;
  border: 2px solid rgb(41, 41, 70);
  outline: none;
  color: #fff;
  border-radius: 40px;
  cursor: pointer;
  font-size: 1rem;
  z-index: 1;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  background: linear-gradient(rgba(1, 1, 15, 1), rgb(41, 41, 70), rgba(1, 1, 15, 1), rgb(41, 41, 70));
  z-index: -1;
  transition: 0.5s;
}

.btn:hover::before {
  top: 0;
}

.form-box .logreg-link {
  font-size: 1rem;
  text-align: center;
  margin: 20px 0 10px;
}

.logreg-link p a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.logreg-link p a:hover {
  text-decoration: underline;
}

.form-box .login-link {
  font-size: 1rem;
  text-align: center;
  margin: 20px 0 10px;
}

.login-link p a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.login-link p a:hover {
  text-decoration: underline;
}

.wrapper .info-text {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrapper .info-text.login {
  right: 0;
  text-align: right;
  padding: 0 40px 160px 100px;
  line-height: 25px;


}

.wrapper .info-text.login .animation {
  transform: translateX(0);
  opacity: 1;
  filter: blur(0);
  transition: 0.7s ease;
  transition-delay: calc(0.1s *var(--j));
}

.wrapper.active .info-text.login .animation {
  transform: translateX(120%);
  opacity: 0;
  filter: blur(10px);
  transition-delay: calc(0.1s *var(--i));
}



.wrapper .info-text.register {
  left: 0;
  text-align: left;
  padding: 0 150px 60px 40px;
  line-height: 25px;
  pointer-events: none;
}

.wrapper.active .info-text.register {
  pointer-events: auto;
}

.wrapper .info-text.register .animation {
  transform: translateX(-120%);
  opacity: 0;
  filter: blur(10px);
  transition: 0.7s ease;
  transition-delay: calc(0.1s *var(--j));
}

.wrapper.active .info-text.register .animation {
  transform: translateX(0);
  opacity: 1;
  filter: blur(0);
  transition-delay: calc(0.1s *var(--i));
}

.info-text h2 {
  font-size: 2rem;
  text-transform: uppercase;
  line-height: 1.3;
}

.wrapper .bg-animate {
  position: absolute;
  top: -4px;
  right: 0;
  width: 850px;
  height: 600px;
  background: linear-gradient(-3deg, rgb(41, 41, 70), rgba(1, 1, 15, 1));
  border-bottom: 2px solid rgb(82, 82, 135);
  transform: rotate(10deg) skewY(40deg);
  transform-origin: bottom right;
  transition: 1.5s ease;
  transition-delay: 1.6s;
}

.wrapper.active .bg-animate {
  transform: rotate(0) skewY(0);
  transition-delay: 0.5s;
}

.wrapper .bg-animate2 {
  position: absolute;
  top: 100%;
  left: 250px;
  width: 850px;
  height: 700px;
  background: linear-gradient(-3deg, rgb(41, 41, 70), rgba(1, 1, 15, 1));
  border-top: 2px solid rgb(82, 82, 135);
  transform: rotate(0) skewY(0);
  transform-origin: bottom left;
  transition: 1.5s ease;
  transition-delay: 0.5s;
}

.wrapper.active .bg-animate2 {
  transform: rotate(-11deg) skewY(-41deg);
  transition-delay: 1.2s;
}

/* Section Pricing */


#pricing p {
  padding: 0px;
  margin: 0px;
}

#pricing h1 {
  font-size: 5rem;
  font-weight: 700;

  span {
    font-size: 6rem;
    font-weight: 1000;
  }
}




#pricing .overview {
  position: relative;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 5rem;

}

#pricing .price-card {
  position: relative;
  display: flex;
  justify-content: start;
  justify-items: start;
  align-items: start;
  flex-direction: column;
  width: 400px;
  height: 600px;
  border-radius: 20px;
  box-shadow: 0 0 25px rgb(82, 82, 135);
  transform: translateY(-200%);
  transition: 2s;
}

#pricing.active .price-card {
  transform: translateY(0);
  transition-delay: calc(0.7s * var(--a));
}

.price-card .title {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  font-size: 2rem;
  width: 100%;
}

.price-card .paket-daten {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 100%;

  padding: 20px;
}

.price-card .paket-punkte {
  margin: 5px 0px;
  font-size: 1.3rem;

}

.price-card .paket-preis {
  display: flex;
  justify-content: center;
  justify-items: flex-start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;


}

.paket-preis .preis-title {
  font-size: 2rem;

}

.paket-preis .preis-info {
  font-size: 1rem;
}

/* Section Infos */


#informationen p {
  padding: 0px;
  margin: 0px;
}

#informationen h1 {
  font-size: 3rem;
  font-weight: 700;

  span {
    font-size: 5rem;
    font-weight: 1000;
  }
}




#informationen .title {
  position: relative;
  margin: 0 px;
  padding: 0px;
  line-height: 55px;

}


#informationen .main {
  position: relative;
  margin: 0 px;
  padding: 0px;

  font-size: 1.3rem;
}

/* Section Instal */


#instal p {
  padding: 0px;
  margin: 0px;
}

#instal h1 {
  font-size: 3rem;
  font-weight: 700;


  span {
    font-size: 5rem;
    font-weight: 1000;
  }
}






#instal .title {
  position: relative;
  margin: 0 px;
  padding: 0px;
  line-height: 55px;
}


#instal .main {
  position: relative;
  margin: 0 px;
  padding: 0px;
  font-size: 1.3rem;
}

#instal .main .install-schritt {
  margin-top: 30px;
  margin-bottom: 10px;

  font-size: 1.8rem;
  color: rgb(94, 100, 125);
}

#instal .main .install-schritt-text {
  margin-left: 30px;


}

/* Section Contact */


#contact p {
  padding: 0px;
  margin: 0px;
}

#contact h1 {
  font-size: 3rem;
  font-weight: 700;

  span {
    font-size: 5rem;
    font-weight: 1000;
  }
}



#contact .title {
  position: relative;
  margin: 0px;
  padding: 0px;
  line-height: 55px;
}


#contact .main {
  position: relative;
  margin: 0 px;
  padding: 0px;
  font-size: 1.5rem;

}

#contact .form-box-contact {
  right: 0;


}

#contact .form-box-contact h2 {
  font-size: 2.2rem;
  text-align: center;
}

#contact .form-box-contact .input-box {
  position: relative;
  width: 50%;
  height: 50px;
  margin: 25px 0;
  pointer-events: auto;
}

#contact .form-box-contact .input-text {
  position: relative;
  width: 100%;
  height: 200px;
  margin: 25px 0;
  font-size: 1.2rem;
  resize: none;
  padding: 10px;
  background: transparent;
  color: #fff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #F1F1F1;

  transition: background-color 5000s ease-in-out 0s;
}

;

#contact .btn {
  position: relative;
  width: 30%;
  height: 45px;
  background: transparent;
  border: 2px solid rgb(41, 41, 70);
  outline: none;
  color: #fff;
  border-radius: 40px;
  cursor: pointer;
  font-size: 1rem;
  z-index: 1;
  overflow: hidden;

}

#contact .btn:hover {
  letter-spacing: 20;
}

#contact .btn::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  background: linear-gradient(rgba(1, 1, 15, 1), rgb(41, 41, 70), rgba(1, 1, 15, 1), rgb(41, 41, 70));
  z-index: -1;
  transition: 0.5s;
}

#contact .btn:hover::before {
  top: 0;
}


.login-error {
  color: red;
  margin-top: 15px;
  margin-bottom: 15px;
  opacity: 1;
  transition: 0.5s;
  text-align: center;
  transition-delay: 3s;
}

.wrapper.active .login-error {
  transition-delay: 0.1s;
  opacity: 0;
}


.reg-error {
  color: red;
  margin-top: 5px;
  margin-bottom: 15px;
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0.1s;
  text-align: center;

  z-index: 50;
}

.wrapper.active .reg-error {
  transition-delay: 3s;
  opacity: 1;
}

.login-verify {

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  width: 100%;
  height: 100%;
  margin: 25px 0;
  font-size: 5rem;
  resize: none;
  padding: 10px;
  background: transparent;
}

.login-verify p {
  margin-top: 200px;
  font-size: 2rem;
}


.login-verify form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-verify .input-box {
  size: 3rem;
  width: 50%;
}

.login-verify .btn {
  height: 50px;
  width: 50%;
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 30px;
}


/* Section NewPass */

#newpass {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  height: 100vh;
  width: 60vw;
  transform: translateY(-200%);
  opacity: 0;
  transition: 1s ease;

}

#newpass p {
  padding: 0px;
  margin: 0px;
}

#newpass h1 {
  font-size: 3rem;
  font-weight: 700;

  span {
    font-size: 5rem;
    font-weight: 1000;
  }
}


#newpass.active {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.5s;
  transition: 2s ease;
}

#newpass .title {
  position: relative;
  margin: 0 px;
  padding: 0px;
  line-height: 55px;
}


#newpass .main {
  position: relative;
  margin: 0 px;
  padding: 0px;
  font-size: 1.5rem;

}

#newpass .form-box-contact {
  right: 0;
  padding: 0 40px 0 60px;
  width: 600px;
}

#newpass .form-box-contact h2 {
  font-size: 2.2rem;
  text-align: center;
}

#newpass .form-box-contact .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 25px 0;
  pointer-events: auto;
}

#newpass .form-box-contact .input-text {
  position: relative;
  width: 100%;
  height: 200px;
  margin: 25px 0;
  font-size: 1.2rem;
  resize: none;
  padding: 10px;
  background: transparent;
  color: #fff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #F1F1F1;

  transition: background-color 5000s ease-in-out 0s;
}

;

#newpass .btn {
  position: relative;
  width: 30%;
  height: 45px;
  background: transparent;
  border: 2px solid rgb(41, 41, 70);
  outline: none;
  color: #fff;
  border-radius: 40px;
  cursor: pointer;
  font-size: 1rem;
  z-index: 1;
  overflow: hidden;

}

#newpass .btn:hover {
  letter-spacing: 20;
}

#newpass .btn::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  background: linear-gradient(rgba(1, 1, 15, 1), rgb(41, 41, 70), rgba(1, 1, 15, 1), rgb(41, 41, 70));
  z-index: -1;
  transition: 0.5s;
}

#newpass .btn:hover::before {
  top: 0;
}

.copyrightText {
  position: fixed;
  width: 600px;
  bottom: 10px;
  padding: 8px 40px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0, 1);
  box-shadow: 0px 5px 10px rgb(14, 14, 14);
  color: #fff;


}

.copyrightText a {
  color: rgb(200, 200, 200);
  text-decoration: none;
  font-size: 1rem;
  margin: 0px 20px;
}

.copyrightText a:hover {
  color: rgb(255, 255, 255);
}

#impressum .title,
#datenschutz .title,
#widerruf .title {
  margin-bottom: 50px;

}

#impressum .main,
#datenschutz .main,
#widerruf .main {
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.5rem;
}

#impressum a,
#datenschutz a,
#widerruf a {
  color: rgb(200, 200, 200);
  text-decoration: none;


}

#impressum a:hover,
#datenschutz a:hover,
#widerruf a:hover {
  color: rgb(255, 255, 255);

}


.cookie-div {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  bottom: -200%;
  left: 0px;
  width: 100vw;
  height: auto;
  max-height: 100vh;
  padding: 20px;
  background: linear-gradient(30deg,
      rgb(22, 21, 37),
      rgb(2, 2, 18));
  border: 2px solid #fff;
  transition: 0.5s ease;
  overflow-y: auto;
  scrollbar-color: white transparent;
  scrollbar-width: thin;
}

.cookie-div.show {
  transition: 0.5s ease;
  bottom: 0px;
}

.cookie-div .cookie-title {
  position: relative;
  margin-top: 20px;
  font-size: 2rem;
}

.cookie-div .cookie-inhalt {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  font-size: 1rem;
  padding: 0px 40px;

}

.cookie-div .cookie-checkbox-div {
  position: relative;
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.cookie-div .cookie-checkbox-div input[type="checkbox"] {
  width: 13px;
  height: 13px;
}

.cookie-div .cookie-checkbox-div label {
  font-size: 1.3rem;
}

.cookie-div .cookie-buttons {
  display: flex;
  margin-top: 20px;
  gap: 20px;


}

.cookie-div .cookie-btn {

  padding: 15px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  box-shadow: 0px 2px 5px rgb(91, 91, 91);
  border: none;
}



.copyrightTextCookie {
  position: relative;
  width: auto;
  padding: 8px 40px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0, 1);
  box-shadow: 0px 5px 10px rgb(14, 14, 14);
  color: #fff;
  margin-top: 20px;

}

.copyrightTextCookie a {
  color: rgb(200, 200, 200);
  text-decoration: none;
  font-size: 1rem;
  margin: 0px 20px;
}

@media (max-width: 1024px) {
  .copyrightText {

    width: 100%;
    height: auto;
    padding: 8px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    backdrop-filter: blur(10px);
  }


  #datenschutz,
  #impressum,
  #widerruf {
    width: 100%;
    font-size: 18rem;
    padding: 20px;
    align-items: center;
    top: 50px;
  }

  #datenschutz .main,
  #impressum .main,
  #widerruf .main {

    width: 100%;

    overflow-x: hidden;
    padding-right: 75px;
    padding-left: 75px;
    padding-bottom: 70px;

  }

  #datenschutz .main .title,
  #impressum .main .title,
  #widerruf .main .title {
    line-height: 2.5rem;
  }

  #contact {
    padding: 20px;
    margin-top: 25px;
    width: 80%;
    justify-content: start;
    gap: 5px;
  }

  #contact h1 {
    font-size: 3rem;
    font-weight: 700;

    span {
      font-size: 5rem;
      font-weight: 1000;
    }
  }



  #contact .form-box-contact {
    width: 100%;
    padding: 0 20px 0 20px;


  }

  #contact .form-box-contact .input-box {
    width: 100%;
    margin: 15px 0;
  }

  #contact .form-box-contact .input-text {
    width: 100%;
    margin: 15px 0;
  }

  #instal {

    margin-top: 25px;
    width: 100%;
    padding: 20px;

    justify-content: start;
    padding-bottom: 100px;
  }

  #instal .main {
    padding-right: 75px;
    padding-left: 75px;
  }


  #instal .title {
    position: relative;
    line-height: 3.3rem;

  }

  #instal h1 {
    font-size: 2.5rem;
    font-weight: 700;

    span {
      font-size: 5rem;
      font-weight: 1000;
    }
  }

  #informationen {

    margin-top: 25px;

    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 100px;
  }

  #informationen .main {
    font-size: 1.2rem;
    padding-right: 75px;
    padding-left: 75px;
  }

  #informationen .title {
    line-height: 3.3rem;
  }

  #informationen .title h1 {
    font-size: 2.5rem;
    font-weight: 700;

    span {
      font-size: 5rem;
      font-weight: 1000;
    }

  }

  #pricing {

    margin-top: 25px;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 200px;
  }



  #pricing .title {
    line-height: 5rem;
  }

  #pricing .title h1 {
    font-size: 5rem;
    font-weight: 700;

    span {
      font-size: 5rem;
      font-weight: 1000;
    }

  }

  #pricing .overview {

    flex-direction: column;

    width: 100%;

    max-width: 500px;
    padding-right: 75px;
    padding-left: 75px;
  }

  #pricing .price-card {
    transform: translateY(0);
    opacity: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 30px;
    font-size: 1.3rem;
  }

  .price-card .paket-daten .paket-punkte {
    font-size: 1.1rem;
  }

  #pricing.active .price-card {
    opacity: 1;
    transition-delay: calc(0.7s * var(--a));
  }

  #welcome {
    width: 100%;
    height: calc(100vh - 150px);
    justify-content: start;
    padding: 5px 20px 0 20px;
    padding-bottom: 100px;

    overflow-y: auto;
    scrollbar-color: white transparent;
    scrollbar-width: thin;
    gap: 0rem;

    .wrapper {
      display: none;
    }

    .wrapper_mobile {

      display: flex;
      opacity: 0;
      animation: fadein 2s ease;
      animation-delay: 2s;
      animation-fill-mode: both;
    }

    @keyframes fadein {
      0% {
        opacity: 0;
        transform: scale(0);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }

    }
  }

  #welcome .title {
    line-height: 3.3rem;
    text-align: center;
    align-self: start;
    width: 100%;

  }



  #welcome .login-div {
    width: 100%;


    margin: 0px;

  }







  #welcome .wrapper_mobile form {
    width: 100%;


    padding: 0px;
    margin: 0px;

  }

  #welcome .wrapper_mobile .form-box.login-mobile {

    padding: 0 10px;
    height: 100%;

  }

  #welcome .wrapper_mobile .form-box.register-mobile {

    padding: 0 10px;
    height: 100%;
  }

  #newpass,
  #newpass .main {

    width: 90%;


  }

  #newpass .title {
    line-height: 2rem;
  }

  #newpass p {
    padding: 0px;
    margin: 0px;
  }

  #newpass h1 {
    font-size: 2rem;
    font-weight: 700;

    span {
      font-size: 3rem;
      font-weight: 1000;
    }
  }

  #newpass .form-box-contact {
    padding: 0px;
    width: 100%;

  }


}

@media (max-width: 600px) {
  .copyrightText {

    width: 100%;
    height: auto;
    padding: 8px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    backdrop-filter: blur(10px);
  }


  #datenschutz,
  #impressum,
  #widerruf {
    width: 100%;
    font-size: 18rem;
    padding: 0px 20px;

    top: 90px;
  }

  #datenschutz .main,
  #impressum .main,
  #widerruf .main {

    width: 100%;
    height: 100%;
    overflow-x: hidden;
    margin-top: 0px;
    padding-bottom: 50px;
    padding-right: 0px;
    padding-left: 0px;

  }

  #contact {
    padding: 20px;
    margin-top: 25px;
    width: 100%;
    justify-content: start;
    gap: 5px;
  }

  #contact h1 {
    font-size: 2rem;
    font-weight: 700;

    span {
      font-size: 4rem;
      font-weight: 1000;
    }
  }



  #contact .form-box-contact {
    width: 100%;
    padding: 0 20px 0 20px;


  }

  #contact .form-box-contact .input-box {
    width: 100%;
    margin: 15px 0;
  }

  #contact .form-box-contact .input-text {
    width: 100%;
    margin: 15px 0;
  }

  #instal {

    margin-top: 25px;
    width: 100%;
    padding: 20px;

    justify-content: start;
    padding-top: 0px;
    padding-bottom: 100px;

  }


  #instal .main {
    font-size: 1.1rem;
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    height: auto;


    margin-bottom: 25px;

  }

  #instal .title {
    position: relative;
    line-height: 2.2rem;
    margin-top: 0px;
  }

  #instal h1 {
    font-size: 1.6rem;
    font-weight: 700;

    span {
      font-size: 3rem;
      font-weight: 1000;
    }
  }



  #instal .install-schritt:nth-child(1) {
    margin-top: 0px;
  }

  #informationen {

    margin-top: 25px;

    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 100px;
  }

  #informationen .main {
    font-size: 1.1rem;
    padding-right: 0px;
    padding-left: 0px;

    margin-bottom: 25px;
  }

  #informationen .title {
    line-height: 2rem;
  }

  #informationen .title h1 {
    font-size: 1.6rem;
    font-weight: 700;

    span {
      font-size: 3rem;
      font-weight: 1000;
    }

  }

  #pricing {

    margin-top: 25px;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 200px;
    margin-bottom: 100px;
  }

  #pricing .title {
    line-height: 2.2rem;
  }

  #pricing .title h1 {
    font-size: 2.5rem;
    font-weight: 700;

    span {
      font-size: 3rem;
      font-weight: 1000;
    }

  }

  #pricing .overview {

    flex-direction: column;

    width: 100%;

    padding-right: 10px;
    padding-left: 10px;

  }

  #pricing .price-card {
    transform: translateY(0);
    opacity: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 30px;
    font-size: 1.3rem;
  }

  .price-card .paket-daten .paket-punkte {
    font-size: 1.1rem;
  }

  #pricing.active .price-card {
    opacity: 1;
    transition-delay: calc(0.7s * var(--a));
  }

  #welcome {
    width: 100%;
    height: calc(100vh - 150px);
    justify-content: center;
    align-items: center;
    padding: 5px 20px 50px 20px;
    gap: 0px;

    .wrapper {
      display: none;
    }





  }

  #welcome .title {
    line-height: 2.3rem;
    text-align: center;
    align-self: center;
    width: 100%;
    justify-content: start;

    height: max-content;
    padding-bottom: 50px;


  }

  #welcome h4 {
    font-size: 2rem;
    font-weight: 700;


  }

  #welcome h5 {
    font-size: 3.3rem;
    font-weight: 1000;
    line-height: 3rem;

  }

  #welcome .login-div {
    height: auto;


  }






  #welcome .wrapper_mobile form {
    width: 100%;


    padding: 0px;
    margin: 0px;

  }

  #welcome .wrapper_mobile .form-box.login-mobile {

    padding: 0 10px;
    height: 100%;

  }

  #welcome .wrapper_mobile .form-box.register-mobile {

    padding: 0 10px;
    height: 100%;
  }

  #newpass,
  #newpass .main {

    width: 90%;


  }

  #newpass .title {
    line-height: 2rem;
  }

  #newpass p {
    padding: 0px;
    margin: 0px;
  }

  #newpass h1 {
    font-size: 2rem;
    font-weight: 700;

    span {
      font-size: 3rem;
      font-weight: 1000;
    }
  }

  #newpass .form-box-contact {
    padding: 0px;
    width: 100%;

  }

  .cookie-div .cookie-buttons {
    flex-direction: column;

  }

  .cookie-div .cookie-inhalt {

    padding: 0px 10px;

  }
}

@media (max-width: 1700px) {
  #pricing .overview {

    width: 100%;
    padding-right: 10px;
    padding-left: 10px;


  }
}


@media (max-width: 1400px) {
  #pricing .overview {

    flex-direction: column;


  }
}


@media (max-height: 900px) {

  #welcome,
  #pricing,
  #contact,
  #informationen,
  #instal {
    justify-content: start;
  }
}