.grid-display {
  display: grid;
  grid-template-columns: 60% 1fr;
  width: 100vw;
  background-color: var(--color-background);
}

.first-block {
  display: inline-block;
  width: 50;
  background-color: var(--color-background);
  padding: 10% 0 2% 25%;
  overflow: visible;

}

.brand-name {
  padding-bottom: 1rem;
}

.hero-title {
  padding-bottom: 1rem;
  width: min(95%, 55rem);
  line-height: min(2.5rem, 6vw);
}


h1 {
  color: var(--color-accent-dark);
  font-size: min(6rem, 15vw);
  padding: 0;
  margin: 0;
  line-height: min(5.5rem, 13vw);
  font-weight: bold;
  opacity: 0.9;
}

.hero-subtitle p {
  color: var(--color-primary);
  font-size: min(2.2rem, 6vw);
  line-height: min(0.5rem, 1vw);
  padding: min(0.5rem, 2vw);
  margin: 0;
 
}

.hero-description {
  padding: min(2%, 4rem) 0rem;
  width: min(95%, 55rem);
  line-height: clamp(1rem, 1.5rem, 2rem);
  opacity: 0.8;
}

.hero-description p {
  font-size: clamp(1rem, 1.3rem, 3rem);
  
}

.linkAnfragen {
  padding: clamp(2%, 4rem, 10%) 0;
}

a {
  background-color: var(--color-accent-terra);
  padding: 0.5rem;
  text-decoration: none;
  color: var(--color-background);
  border-radius: 5%;
  display: inline-block; /* Wichtig für transform: scale() */
  transition: transform 0.3s ease; /* Optional für Animation */
  gap:30%;
}

a:hover {
  background-color: yellow;
  color: pink;
  transform: scale(1.1); /* 10% größer */
}


a:hover {
  background-color: yellow;
  color: brown;
  transform: scale(1.5); /* 10% größer (1.1 = 110% der ursprünglichen Größe) */
}

.image-section {
  position: relative;
  background-image: url(../images/pseudoherotestimage.jpg);
  background-size: cover;
  /* Bild passt vollständig in den Container */
  background-repeat: no-repeat;
  /* Verhindert, dass das Bild wiederholt wird */
  background-position: right;
  width: 100%;
  height: 100%;
  /* border-radius: 22rem 0.3rem 5rem 28rem / 25rem 0.3rem 2rem 32rem; */
  border-radius: 25% 85% 0% 50% / 30% 0% 20% 37%;
}



.round-element p {
  display: flex;
  flex-direction: column;
  /* Stellt die <p>-Elemente untereinander dar */
  justify-content: center;
  /* Zentriert den Inhalt vertikal */
  align-items: center;
  /* Zentriert den Inhalt horizontal */
  width: clamp(80px, 15vw, 250px);
  height: clamp(80px, 15vw, 250px);
  background-color: var(--color-primary);
  border-radius: 180px;
  text-align: center;
  /* Zentriert den Text innerhalb der <p>-Elemente */
  color: white;
  /* Optional: Textfarbe für bessere Lesbarkeit */
  font-size: clamp(0.7rem, 1.2vw, 1.2rem);
  box-sizing: border-box;
  /* Damits Padding nicht die Größe beeinflusst */
  position: absolute;
  /* Absolut positionieren */
  bottom: min(80%, 5.5rem);
  /* Unten ausrichten */
  right: min(20vw, 5.5rem);
  /* Rechts ausrichten */
  font-weight: 800;
}


/* Große Desktops */
@media (max-width: 1400px) {}

/* Laptops und kleine Desktops */
@media (max-width: 1200px) {}

/* Tablets */
@media (max-width: 992px) {}

/* Smartphones */
@media (max-width: 768px) {

  .grid-display {
    grid-template-columns: 1fr;
    /* Eine Spalte für Smartphones */
  }

  .first-block {
    width: 100%;
    /* Volle Breite für Smartphones */
    padding: 10% 0 2% 5%;
    /* Anpassung des Paddings */
  }

  .image-section {
    display: none;
    /* Bildbereich ausblenden */

  }

}