/* hero */
  .hero {
  position: relative;
  text-align: center;
  padding: 100px 0px;
}

.hero-content {
  max-width: 70vw;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  margin-bottom: 150px;
}

.hero-content-completed {
  max-width: 70vw;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  margin-bottom: 0px;
}

.shirt-left, .shirt-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}


.shirt-left {
  left: 0px;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.shirt-right {
  right: 30px;
  transform: translate(50%, -50%) rotate(9deg);
}


.shirt-right img {
  max-width: 25vw;
  opacity: 0.95;

}

.shirt-left img {
  max-width: 30vw;
  opacity: 0.95;
  margin-top: 200px;
}

@media (max-width: 1200px) {
  .shirt-right {
    right: 10px;
  }

  .shirt-right img {
    margin-top: 300px;
    max-width: 22vw;
  }
  .shirt-left img {
    margin-top: 400px;
  }

  .hero {
    padding: 100px 0px 0px 0px;
  }

}

@media (max-width: 980px) {
  .hero-content {
    margin-bottom: 100px;
    max-width: 90vw;
  }

  .shirt-right {
    right: 0px;  }

  .shirt-left {
    left: 0px;
  }
}

@media (max-width: 700px) {
  
   .hero {
    padding: 30px 0px 0px 0px;
  }
  .hero-content {
    max-width: 70vw;
  }

  .shirt-right {
    right: -10px; 
    top: 45%;
  }

  .shirt-right img{
    max-width: 26vw;
  }

  .shirt-left img {
  margin-top: 400px;  
}
}

@media (max-width: 580px) {
  
   .hero-content {
    max-width: 80vw;
  }

  .shirt-left img {
  max-width: 40vw;
}
.shirt-right {
    top: 40%;
  }

  .shirt-right img {
    max-width: 30vw;
  }
}

@media (max-width: 415px) {

  .shirt-right {
  right: -15px
  }

  .shirt-left {
    left: -20px;
  }
}



/* hero sub*/
.shirt-left-subpage, .shirt-right-subpage {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}


.shirt-left-subpage {
  left: -20px;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.shirt-right-subpage {
  right: -50px;
  transform: translate(50%, -50%) rotate(9deg);
}

.shirt-right-subpage img {
  max-width: 18vw;
  opacity: 0.95;

}

.shirt-left-subpage img {
  max-width: 25vw;
  opacity: 0.95;
  margin-top: 200px;
}

@media (max-width: 1200px) {
  .shirt-right-subpage {
    right: 10px;
  }

  .shirt-right-subpage img {
    margin-top: 300px;
  }
  .shirt-left-subpage img {
    margin-top: 300px;
  }
}

@media (max-width: 800px) {
  .shirt-right-subpage {
    right: 0px;
  }
  .shirt-right-subpage img {
  max-width: 20vw;}

  .shirt-left-subpage img {
    margin-top: 350px;
    max-width: 30vw;
  }
}

@media (max-width: 600px) {
  .shirt-right-subpage img {
  max-width: 25vw;}

  .shirt-left-subpage img {
    margin-top: 320px;
    max-width: 35vw;
  }

  .shirt-right-subpage {
    top: 45%;
    right: -20px;
  }
}


/* steps */
.steps {
  padding: 100px 0;
  margin: 0 auto;
  max-width: 50vw;  }

  .step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .step-icon {
    width: 12px;
    height: auto;
    flex-shrink: 0;
  }

  .step-text {
    flex: 1;
  }

  @media (max-width: 900px) {
    .steps {
      max-width: 65vw;
    }
  }

  @media (max-width: 800px) {
    .steps {
      max-width: 70vw;
      padding: 80px 0 0px 0;
    }
    .step-icon {
    width: 10px;}
  }

  @media (max-width: 580px) {
    .steps {
      padding: 120px 0 0px 0;
    }
  }

  @media (max-width: 500px) {
    .steps {
      max-width: 85vw;
    }
  }


/* about */
.about {
  padding: 100px 0;
  max-width: 1200px;
  margin: 0 250px;
}

.about-content {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: wrap; /* für Mobile Fallback */
}

.about-text {
  flex: 1 1 50%;
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
}

.about-text p {
  margin-bottom: 20px;
}

.about-image {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
}

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

@media (max-width: 1150px) {
    .about {
    margin: 0 100px;
    }
  }

@media (max-width: 840px) {

  .about-content {
    gap: 20px;
  }
}

@media (max-width: 750px) {
  .about {
    padding: 100px 0 50px 0;
  }
  .about-content {
    flex-direction: column;
    align-items: center;
  }
  .about-image img {
    max-width: 70%;
  }
}

@media (max-width: 580px) {
  .about {
    margin: 0 60px;
  }
}

@media (max-width: 500px) {
  .about {
    margin: 0 20px;
  }
}




.impressum {
  padding: 20px 0px 100px 0px;
  max-width: 70vw;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .impressum {
    max-width: 90vw;
    padding: 50px 0px 50px 0px;
  }
}

.datenschutz {
  padding: 20px 0px 100px 0px;
  max-width: 70vw;
  margin: 0 auto;
}
.datenschutz .lead {
  padding-bottom: 50px;
}

@media (max-width: 700px) {
  .datenschutz {
    max-width: 90vw;
    padding: 50px 0px 50px 0px;
  }
}

.agb {
  padding: 20px 0px 100px 0px;
  max-width: 70vw;
  margin: 0 auto;
}
.agb .lead {
  padding-bottom: 50px;
}
@media (max-width: 700px) {
  .agb {
    max-width: 90vw;
    padding: 50px 0px 50px 0px;
  }
}