/* ============================================================
   CONTACT.CSS
   Hintergrund fixiert (background-attachment:fixed): die Section
   scrollt über das feststehende Bild, statt es mitzubewegen.
   Links Box (Breite 4), rechts 6 Boxen (Breite 3, 2 Reihen).
   Mobil: alles stapelt sich untereinander.
============================================================ */

#contact {
  background-image: url('../img/contact-hg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#contact .container {
  position: relative;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-box);
  /*padding: 3rem 2rem;*/
  padding: 2rem 2rem 1rem 2rem;
}

.contact-main-box {
  background-color: rgba(255, 255, 255, 0.38);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-box);
  padding: 2rem;
  height: 103.3%;
}

.contact-main-box h3 {
  margin-bottom: 1rem;
}

.contact-main-box address {
  font-style: normal;
  line-height: 1.6;
}

.contact-item-box {
  background-color: rgba(255, 255, 255, 0.38);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-box);
  padding: 1.25rem 1rem;
  text-align: center;
  height: 100%;
  cursor: pointer;
  transition: border-color var(--trans), background-color var(--trans);
}

.contact-item-box:hover {
  border-color: var(--green);
  background-color: rgba(176, 203, 31, 0.38);
}

.contact-item-box .fa,
.contact-item-box .fas,
.contact-item-box .fab {
  font-size: 1.6rem;
  color: var(--green-dark);
  display: block;
  margin-bottom: 0.5rem;
}

.contact-item-box .contact-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-dark);
  margin-bottom: 0.25rem;
}

.contact-item-box .contact-value {
  display: block;
  font-size: 0.9rem;
  word-break: break-word;
}

@media (max-width: 767.98px) {
  .contact-item-box {
    margin-bottom: 1rem;
  }
}