
/* Falls du noch keinen globalen Container hast */
.container{
  width: min(1100px, 100% - 2*clamp(16px, 4vw, 40px));
  margin: 0 auto;
}

/* 2-Spalten Layout */
.contact-layout{
  display: grid;
  grid-template-columns: minmax(320px, 720px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
}

/* Form-Card bleibt wie gehabt (Größe beibehalten) */
.contact-card{
  width: 100%;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Grafik rechts */
.contact-graphic img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: untereinander auf kleinen Screens */
@media (max-width: 900px){
  .contact-layout{
    grid-template-columns: 1fr;
  }
}
/* Card darf KEIN eigenes margin-left haben, sonst ist sie immer "versetzt" */
#kontakt .contact-card{
  margin: 0 !important;
}
/* Unnötigen Abstand unter dem Button entfernen */
#kontakt .field:last-of-type{
  margin-bottom: 0;
}
/* verhindert, dass Grid/Flex die Card in der Höhe streckt */
#kontakt .contact-layout{
  align-items: start;           /* wichtig bei grid */
}

#kontakt .contact-card{
  align-self: start;            /* wichtig bei flex/grid */
  height: fit-content;          /* Card nur so hoch wie Inhalt */
}
