/* ==========================================================================
   Kontakt — Unterseite der Hauptseite (danielotmar.com/kontakt)
   Baut auf otmar.css auf (Navy/Gold-CI); hier nur die Kontakt-Bausteine.
   ========================================================================== */

/* Die vier Anliegen: Symbol in Navy/Gold, Titel, ein Satz, Mail-Adresse.
   (Klasse bewusst nicht ".contact" – die ist in otmar.css für die Startseite belegt.) */
.contact-ways .split-body { text-align: left; }
/* erste Sektion direkt unter dem Header: etwas weniger Luft oben, Titel in H2-Größe */
.contact-ways { padding-top: clamp(48px, 6vw, 96px); }
.contact-ways h1 { font-size: clamp(34px, 4.2vw, 56px); margin-bottom: var(--s3); }
/* height:auto, damit das Seitenverhältnis aus otmar.css (4:5) greift –
   sonst gewinnt die Höhenangabe im HTML und das Foto wird doppelt so hoch */
.contact-ways .split-media img { height: auto; }
.contact-list { display: grid; gap: 14px; margin-top: var(--s4); }
.contact-item {
  display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start;
  padding: 24px 26px;
  background: var(--sand-50);
  border-left: 2px solid var(--gold);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact-item:hover { background: var(--white); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.contact-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: grid; place-items: center;
}
.contact-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-text { min-width: 0; }
.contact-item h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
  margin: 4px 0 8px;
}
.contact-item p { font-size: 15px; line-height: 1.65; color: var(--ink-muted); margin: 0 0 12px; }
.contact-mail {
  display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%;
  font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.25;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(184, 155, 94, 0.6); padding-bottom: 2px;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-mail span { font-family: var(--font-body); font-style: normal; font-size: 15px; color: var(--gold); transition: transform 0.35s var(--ease); }
.contact-mail:hover { color: var(--gold-text, #8F7134); border-bottom-color: var(--gold); }
.contact-mail:hover span { transform: translateX(4px); }

/* Kanäle: Pillen in einer Reihe */
.contact-social { background: var(--sand-100); }
.contact-social .section-headline { margin-bottom: var(--s5); }
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.social-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--white); color: var(--navy);
  border: 1px solid rgba(29, 46, 74, 0.14);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.social-link svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--gold); transition: color 0.35s var(--ease); }
.social-link:hover { background: var(--navy); color: var(--sand-50); border-color: var(--navy); transform: translateY(-2px); }

@media (max-width: 899px) {
  /* einspaltig: Foto quadratisch, damit die Kontaktwege schneller im Blick sind */
  .contact-ways .split-media img { aspect-ratio: 1 / 1; object-position: center 22%; }
}
@media (max-width: 599px) {
  .contact-item { grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 18px; }
  .contact-icon { width: 40px; height: 40px; }
  .contact-icon svg { width: 19px; height: 19px; }
  .contact-mail { font-size: 19px; position: relative; }
  .contact-mail::after { content: ""; position: absolute; inset: -10px -6px; }
  .social-link { padding: 12px 18px; }
}