/* ==========================================================================
   Pagina: Contact — 2026-08-16
   Geen backend/formulier-validatie op deze site (ook de nieuwsbriefinschrijving
   in de footer is decoratief) — dus bewust geen namaakformulier, wel duidelijke
   mailto/tel-links, gericht per onderwerp zodat een bezoeker niet zelf hoeft
   uit te zoeken waar een vraag het beste kan landen.
   Klassen met prefix "ct-".
   ========================================================================== */

/* ---------- Hero — beeld + tekst, geen gecentreerd tekstblok meer ---------- */
.ct-hero { padding: clamp(7rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 6rem); }
.ct-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ct-hero .kicker { margin-bottom: 1.6rem; }
.ct-hero h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); margin-bottom: 1.2rem; }
.ct-hero p { font-size: 1.05rem; color: var(--tekst-zacht); }
.ct-hero-beeld { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; }
.ct-hero-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
@media (max-width: 780px) {
  .ct-hero-grid { grid-template-columns: 1fr; }
  .ct-hero-beeld { max-width: 320px; margin: 0 auto; order: -1; }
}

/* ---------- Waar kan ik je mee helpen — routing-lijst, geen kaartjes ---------- */
.ct-routing { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(5rem, 10vw, 7.5rem); }
.ct-routing .wrap { max-width: 720px; }
.ct-routing-lijst { border-top: 1px solid var(--lijn); }
.ct-routing-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  border-bottom: 1px solid var(--lijn);
}
.ct-routing-item h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.ct-routing-item p { font-size: 0.92rem; color: var(--tekst-zacht); margin: 0; max-width: 30em; }
.ct-routing-item .tekstlink { white-space: nowrap; }
@media (max-width: 560px) {
  .ct-routing-item { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ---------- Contactgegevens ---------- */
.ct-gegevens { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.ct-gegevens-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.ct-gegevens h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 1.2rem; }
.ct-gegevens address { font-style: normal; font-size: 1.02rem; color: var(--tekst-zacht); line-height: 1.7; margin-bottom: 1.4rem; }
.ct-gegevens address a { color: var(--tekst); }
.ct-gegevens-klein { font-size: 0.85rem; color: var(--tekst-zacht); margin: 0 0 1.4rem; }
.ct-praktisch { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; color: var(--tekst-zacht); }
.ct-praktisch li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; }
.ct-praktisch li::before { content: "\2013"; position: absolute; left: 0; }
.ct-kaart { display: flex; flex-direction: column; gap: 0.9rem; }
.ct-kaart iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 16px; }
.ct-kaart .tekstlink { align-self: flex-start; }
@media (max-width: 700px) {
  .ct-gegevens-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Afsluiter ---------- */
.ct-afsluiter {
  text-align: center;
  padding: clamp(6rem, 12vw, 9rem) 0;
  background-color: var(--kleur-roestbruin);
}
.ct-afsluiter .wrap { max-width: 560px; }
.ct-afsluiter h2 { color: #fff; margin-bottom: 1rem; font-size: clamp(1.8rem, 4.2vw, 2.6rem); }
.ct-afsluiter p { color: rgba(255,255,255,0.9); margin-bottom: 2rem; }
.ct-afsluiter p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ct-afsluiter .knop { background: transparent; border-color: rgba(255,255,255,0.75); color: #fff; }
.ct-afsluiter .knop:hover { background: var(--achtergrond); border-color: var(--achtergrond); color: var(--kleur-roestbruin); }