/* p-kontakt.css — Kontaktseite. Nur Seiten-Layout, keine neuen Farben/Fonts. */

/* Anker aus /ankauf („Zum Formular“): unter dem klebrigen Header landen. */
#formular {
  scroll-margin-top: var(--nav-height);
}

/* 1. Funktions-Hero: kompakter als --section-pad, Kanäle sofort im Blick */

/* 1. Funktions-Hero: kompakter als --section-pad, Kanäle sofort im Blick */
.kontakt-hero {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.kontakt-channels {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

@media (min-width: 56.25em) {
  .kontakt-channels {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

/* Kanal-Kachel: schwarz mit weißer Kontur, Hover = volle Invertierung */
.kontakt-channel {
  --ch-muted: var(--ctx-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  height: 100%;
  padding: var(--space-md);
  background: var(--ctx-surface);
  color: var(--ctx-ink);
  border: 1px solid var(--ctx-ink);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.kontakt-channel:hover,
.kontakt-channel:focus-visible {
  --ch-muted: var(--ctx-invert-muted);
  background: var(--ctx-invert-surface);
  color: var(--ctx-invert-ink);
  border-color: var(--ctx-invert-surface);
}

.kontakt-channel__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--space-2xs);
}

.kontakt-channel__label {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ch-muted);
  transition: color 0.18s ease;
}

.kontakt-channel__value {
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  overflow-wrap: anywhere;
}

/* 2. Formular-Sektion: Kopf neben Formular, 2/3 statt 50/50 */
.kontakt-form-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56.25em) {
  .kontakt-form-grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  /* Der Kopf bleibt stehen, während das höhere Formular durchläuft. */
  .kontakt-form-grid > .section-head {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

/* 3. Anfahrt: NAP links (wie Startseiten-Aside, ohne Karte), Karte rechts */
.kontakt-anfahrt {
  display: grid;
  gap: var(--space-xl);
}

.kontakt-anfahrt__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.kontakt-anfahrt__meta {
  margin-top: 0;
}

/* Gleiche Kartenhoehe wie auf der Startseite (.contact-map): dort steht eine
   feste Mindesthoehe, kein Seitenverhaeltnis. 4/3 ergab auf dem Handy rund
   263 px statt 320 px — die Karte wirkte kleiner als die auf der Startseite.
   Ab 56.25em greift weiter unten ohnehin die gestreckte Variante. */
.kontakt-map iframe,
.kontakt-map .cc-embed-ph {
  width: 100%;
  min-height: 20rem;
  border: 0;
}

.kontakt-map iframe {
  display: block;
}

@media (min-width: 56.25em) {
  .kontakt-anfahrt {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2xl);
    align-items: stretch;
  }

  .kontakt-anfahrt__meta {
    margin-top: auto;
  }

  .kontakt-map {
    display: grid;
    min-height: 0;
  }

  .kontakt-map iframe,
  .kontakt-map .cc-embed-ph {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
  }
}