/* =========================================================
   knipsmi Version 7: nur für /kontakt/
   (Seitenkopf etwas niedriger, damit das Formular näher rückt,
   zwei Hinweise im Kontaktteil, Gutschein-Hinweis, «Noch Fragen?»,
   Instagram-Galerie mit vier quadratischen Bildern)
   ========================================================= */

/* ---------- Bildausschnitte ---------- */

.phero__frame img { object-position: 55% 50%; }
.story__shot img { object-position: 50% 32%; }
[data-slug="kinder_rennen_wiese"] .shot__img { object-position: 50% 60%; }
[data-slug="kleinkind_picknick_wiese"] .shot__img { object-position: 45% 50%; }
[data-slug="musik_fuer_babybauch"] .shot__img { object-position: 45% 50%; }

/* ---------- Seitenkopf ---------- */

.phero__title .h2__kicker { margin-bottom: .9rem; }
@media (min-width: 900px) {
  .phero { min-height: min(80svh, 780px); }
  .phero__frame { aspect-ratio: 1 / 1; }
}

/* ---------- Kontaktteil: Formular gleich nach der Einleitung, zwei Hinweise danach ----------
   Handy: Text, Formular, Hinweise. Breit: Text und Hinweise links, Formular rechts. */

.contact__after { display: flex; flex-direction: column; align-items: flex-start; }
.contact__after p { color: var(--on-dark-soft); max-width: 32em; }
.contact__after .region { margin-top: 0; }
.contact__after .region + .region { margin-top: 1.25rem; }
.contact__after .region__label { margin: 0 0 .6rem; font: italic 400 1.12rem/1.3 var(--body); color: var(--apricot); }
.contact__after .region__far { font: italic 400 1.2rem/1.45 var(--body); color: var(--on-dark); }
@media (min-width: 1000px) {
  .contact__grid { grid-template-rows: auto 1fr; row-gap: 0; }
  .contact__text { position: static; grid-column: 1; grid-row: 1; }
  .contact__formwrap { grid-column: 2; grid-row: 1 / span 2; }
  .contact__after { grid-column: 1; grid-row: 2; margin-top: 1.5rem; }
}

/* ---------- Gutschein-Hinweis ---------- */

.story__act { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- Noch Fragen? ---------- */

.kmore__grid { display: grid; gap: 2rem; }
.kmore .sec__head { margin-bottom: 0; }
.kmore .pagelinks { margin: 0; }
@media (min-width: 900px) {
  .kmore__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: end; }
  .kmore .pagelinks { grid-template-columns: 1fr; }
}

/* ---------- Instagram: vier quadratische Bilder ---------- */

.insta .gallery__head .sec__intro { margin: 0; }
.gallery__grid.insta__grid { grid-auto-rows: auto; }
.insta__grid .shot { aspect-ratio: 1 / 1 !important; }
@media (min-width: 760px) {
  .gallery__grid.insta__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
}
.insta__act { margin-top: clamp(1.75rem, 3vw, 2.5rem); }