AMPERION_Webpage/assets/scss/templates/_about.scss

.about{
  .block{
    h1 {
  font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: #046e6e;
}

h1.page-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-top: 2rem;
  text-transform: capitalize;
}


h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #222;
}


h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: normal;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: inherit;
}

p {
  font-style: normal;
  font-size: clamp(1.3rem, 1.5vw, 1.4rem);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

    img {
      width: 100%;
    }
  }

  .about-img {
    position: relative;
    overflow: hidden;
  
    img {
      display: block;
      width: 100%;
      transition: opacity 0.5s ease-out;
    }
  
    .hover-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease-out;
    }
  
    &:hover .hover-img {
      opacity: 1;
    }
  
    &:hover img {
      opacity: 0;
    }
  }
  

  .section-title {
    margin-bottom: 0px;
  }
}