/* Main Styles */
body {
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
}

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 2rem;
}

header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  z-index: 10;
}

.title {
  flex: 1;
}

a {
  color: #fff;
  text-decoration: none;;
}

.contact-info {
  text-align: left;
  font-size: clamp(12px, calc(11px + 0.5vw), 15px);

  /*font-size: 11px;*/
  /*min-width: 300px;*/
}

main {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.grafik {
  width: 60%;
}
.grafik img {
  width: 100%;
  height: auto;
}

.shapes-container {
  position: relative;
  /*max-width: 50%;*/
  display: grid;
  height: auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2rem;
   /* max-height: 40vH;*/
  align-items: end;
}

.shape {
  position: relative;
  margin: auto;
  /*width: 150px;
  height: 150px;*/
  max-width: 200px;
  max-height: 200px;
  align-items: end;
}
.shape-w {
  position: relative;
  margin: auto;
  /*width: 160px;
  height: 150px;*/
  max-width: 220px;
  max-height: 220px;
}

.shape img, .shape-w img  {
  width: 100%;
  height: auto;
  align-self: end;
}
@supports (-moz-appearance: none) {
  .shape img, .shape-w img {
    height: 200px; /* nur Firefox */
  }
}


.circle {
  border-radius: 50%;
  overflow: hidden;
}

.triangle {
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%)
}

.rectangle {
  width: 40%;
  height: 100%;
}

/* Color definitions */
.half-yellow-coral {
  background: linear-gradient(90deg, #F9E45C 50%, #F0855C 50%);
}

.yellow-teal {
  background: linear-gradient(90deg, #F9E45C 50%, #5CC1C0 50%);
}

.half-yellow-purple {
  background: linear-gradient(90deg, #F9E45C 50%, #C669B0 50%);
}

.half-purple-yellow {
  background: linear-gradient(90deg, #C669B0 50%, #F9E45C 50%);
}

.half-coral-yellow {
  background: linear-gradient(90deg, #F0855C 50%, #F9E45C 50%);
}

.rectangle.yellow-teal {
  background: linear-gradient(180deg, #F9E45C 50%, #5CC1C0 50%);
}

footer {
  margin-top: 2rem;
  padding-bottom: 1rem;
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .shapes-container {
    max-width: 100%;
    grid-template-columns: repeat(3, 1fr);
    max-height: 50vh;
  }
   .shape {
    max-width: 150px;
    max-height: 150px;
  }
  .shape-w {
    max-width: 158px;
    max-height: 158px;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
  }
  
  .contact-info {
    text-align: left;
    min-width: auto;
    margin-top: 2rem;
  }
  
  .shapes-container {
    gap: 1rem;
  }
  
  .shape {
    max-width: 150px;
    max-height: 150px;
  }
  .shape-w {
    max-width: 158px;
    max-height: 158px;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 1rem;
  }
  
  .shapes-container {
grid-template-columns: repeat(2, 1fr);
max-height: 60vh;
  }
  
  .shape {
    max-width: 120px;
    max-height: 120px;
  }
  .shape-w {
    max-width: 125px;
    max-height: 125px;
  }
}