/* Kontaktseite */

/* Kompakter Hero */
.contact-hero{
  padding-block:2.5rem;
}
.contact-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(360px,0.6fr);
  gap:3rem;
  align-items:center;
}

.contact-hero-portrait{
  margin:0;
  width:280px;
  justify-self:center;
}
}
.contact-hero-copy{
  max-width:760px;
}
.contact-hero-copy h1{
  max-width:none;
  margin-bottom:var(--space-3);
}
.contact-hero-copy .lead{
  margin-bottom:0;
}
.contact-hero-portrait{
  margin:0;
  width:280px;
  justify-self:center;
}
.contact-hero-portrait img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
}

/* Themenauswahl */
.contact-topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  margin-top:var(--space-5);
}
.contact-topic-button{
  width:100%;
  min-height:9rem;
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:14px;
  background:var(--color-surface);
  color:var(--color-text);
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease;
}
.contact-topic-button:hover,
.contact-topic-button:focus-visible{
  transform:translateY(-2px);
  border-color:var(--color-primary);
  outline:none;
}
.contact-topic-button.is-selected{
  border-color:var(--color-primary);
}
.contact-topic-button strong{
  display:block;
  margin-bottom:.35rem;
  font-size:1.05rem;
}
.contact-topic-button span{
  display:block;
  color:var(--color-text-muted);
  line-height:1.45;
}

/* Eingeblendetes Kontaktformular */
.contact-form-wrap[hidden]{
  display:none;
}
.contact-form-wrap{
  margin-top:var(--space-5);
}

/* Unsichtbarer Honeypot */
.contact-honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* Mobil */
@media(max-width:44rem){
  .contact-hero{
    padding-block:2rem;
  }
  .contact-hero-inner{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .contact-hero-portrait{
    width:180px;
    justify-self:center;
  }
  .contact-topic-grid{
    grid-template-columns:1fr;
  }
}