/* contact.css — Contact-Us-Seite (Kontaktdaten + Maps-Facade + Enquiry).
   Referenz: scrape/screens/{en,ru}-contact-us-*.jpg (CN: EN-Layout mit CN-Text).
   Kein Foto-Hero im Original (anders als home/about-us/location/project-
   information) — die Seite startet mit einem schlichten Titel, das Hero-Bild
   taucht stattdessen als reguläre Abbildung im "contact-details"-Split auf.
   .split__inner/__figure/__text, .prose, .btn, .btn-row, .script kommen aus
   home.css/base.css — hier nur seitenspezifische Ergänzungen. */

.contact { background: #fffdfb; }

.contact-intro .section-title { margin-bottom: 1rem; }

/* ---- Kontaktdaten-Liste (Icon + Label + Wert) -------------------------- */
.contact-details__name { color: var(--color-text); margin-bottom: 0.2rem; }
.contact-details__note { font-size: 1.4rem; margin-bottom: 1.6rem; }

.contact-details__list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.contact-details__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.contact-details__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f9f1e9;
  color: var(--color-accent-strong);
}
.contact-details__icon .icon { width: 18px; height: 18px; }
.contact-details__text strong { color: var(--color-text); font-weight: 700; margin-right: 0.3em; }
.contact-details__text a { text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 3px; }
.contact-details__text a:hover { text-decoration-color: currentColor; }

/* WhatsApp-Zeile prominent hervorheben: eigener CTA-Kanal der Seite (s. Brief) */
.contact-details__item--whatsapp .contact-details__icon { background: var(--color-accent); color: #fff; }
.contact-details__item--whatsapp .contact-details__text a { color: var(--color-accent-strong); font-weight: 700; text-decoration: none; }

.contact-details__ctas { justify-content: flex-start; }

/* ---- Maps-Facade-Sektion (Klasse/Markup wie location.css) -------------- */
.map-section .prose { margin-bottom: 2rem; }
.map-section__cta { margin-top: 2rem; }

@media (max-width: 767px) {
  .contact-details__ctas { justify-content: center; }
}