/* knipsmi 6B – Fotos: Hero, Über uns, Portfolio mit allen Bildern, Fotos auf den Angebotskarten */

/* ---------- Hero ---------- */
.hero__img:nth-child(1) { object-position: 60% 50%; }
.hero__img:nth-child(2) { object-position: 25% 50%; }
.hero__img:nth-child(3) { object-position: 48% 50%; }

/* ---------- Über uns ---------- */
.about__shot img { object-position: 38% 50%; }

/* ---------- Portfolio: alle Bilder (Runde 9a) ----------
   Ein ruhiges Raster aus drei Bausteinen, die sich immer lückenlos ergänzen:
   Querformat = 1 Feld, Hochformat (.shot--tall) = 1 breit × 2 hoch, grosses Bild (.shot--big) = 2 × 2.
   Handy: 2 Spalten mit 4:3-Feldern, Desktop: 3 Spalten mit 3:2-Feldern. Die Reihenfolge im HTML
   ist so gewählt, dass jede Portion (13 / 14 / 14 Bilder) auf beiden Breiten gerade abschliesst. */
.gallery .wrap { container-type: inline-size; }
.gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: calc((100cqi - var(--g)) / 2 * .75);
}
.shot--tall { grid-row: span 2; }
.shot--big { grid-column: span 2; grid-row: span 2; }

@media (min-width: 760px) {
  .gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: calc((100cqi - 2 * var(--g)) / 3 / 1.5);
  }
}

/* weitere Portionen warten, bis jemand mehr sehen möchte (ohne JavaScript: alles sichtbar) */
.js .shot[data-batch] { display: none; }

/* Bildausschnitt pro Bild: Gesichter bleiben im Bild */
[data-slug="kind_lacht_im_regen"] .shot__img { object-position: 62% 40%; }
[data-slug="babybauch_bett_morgen"] .shot__img { object-position: 58% 45%; }
[data-slug="grosseltern_enkelin_lachen"] .shot__img { object-position: 50% 40%; }
[data-slug="lachendes_baby_kleid"] .shot__img { object-position: 50% 30%; }
[data-slug="vater_sohn_herbstlaub"] .shot__img { object-position: 35% 60%; }
[data-slug="mutter_kinder_regenschirm"] .shot__img { object-position: 50% 40%; }
[data-slug="baby_korb_fensterlicht"] .shot__img { object-position: 55% 60%; }
[data-slug="herbstwald_mutter_kind"] .shot__img { object-position: 45% 50%; }
[data-slug="zelten_mit_hund"] .shot__img { object-position: 52% 40%; }
[data-slug="familie_bergwiese"] .shot__img { object-position: 30% 70%; }
[data-slug="paar_babybauch_abendlicht"] .shot__img { object-position: 50% 45%; }
[data-slug="haende_gegenlicht"] .shot__img { object-position: 55% 50%; }
[data-slug="vater_tochter_herbstblatt"] .shot__img { object-position: 50% 40%; }
[data-slug="grosi_tee_portrait"] .shot__img { object-position: 55% 35%; }
[data-slug="baby_entdeckt_saugroboter"] .shot__img { object-position: 55% 40%; }
[data-slug="maedchen_picknick_lavendel"] .shot__img { object-position: 75% 40%; }
[data-slug="bub_zugfenster"] .shot__img { object-position: 45% 50%; }
[data-slug="seniorin_portrait_muetze"] .shot__img { object-position: 70% 40%; }
[data-slug="kinder_rennen_wiese"] .shot__img { object-position: 50% 55%; }
[data-slug="lachendes_baby_spielbogen"] .shot__img { object-position: 35% 45%; }
[data-slug="dreigenerationen_familie"] .shot__img { object-position: 50% 55%; }
[data-slug="familienpyramide_am_see"] .shot__img { object-position: 45% 70%; }
[data-slug="familie_kueche_baby"] .shot__img { object-position: 30% 45%; }
[data-slug="maedchen_lacht_herbst"] .shot__img { object-position: 52% 40%; }
[data-slug="babyfuesse_decke"] .shot__img { object-position: 45% 35%; }
[data-slug="nachtzelt_mutter_kind"] .shot__img { object-position: 62% 50%; }
[data-slug="grosseltern_enkelin_garten"] .shot__img { object-position: 40% 40%; }
[data-slug="familie_spaziergang_wiese"] .shot__img { object-position: 50% 60%; }
[data-slug="baby_lichtblick"] .shot__img { object-position: 30% 50%; }
[data-slug="kleinkind_picknick_wiese"] .shot__img { object-position: 60% 55%; }
[data-slug="mutter_wirbelt_kind_feld"] .shot__img { object-position: 55% 45%; }
[data-slug="musik_fuer_babybauch"] .shot__img { object-position: 35% 50%; }
[data-slug="mutter_geburt_bonding"] .shot__img { object-position: 40% 50%; }
[data-slug="familie_sonnenwald"] .shot__img { object-position: 45% 55%; }
[data-slug="vater_wirft_kind_herbst"] .shot__img { object-position: 45% 35%; }
[data-slug="vater_tochter_spass_schulter"] .shot__img { object-position: 50% 45%; }
[data-slug="baby_schneekugel_blick"] .shot__img { object-position: 55% 50%; }
[data-slug="grosi_kueche"] .shot__img { object-position: 45% 50%; }
[data-slug="newborn_familie_sw"] .shot__img { object-position: 62% 45%; }
[data-slug="baby_haendchen_halten"] .shot__img { object-position: 40% 50%; }

/* «Mehr Bilder zeigen» */
.gallery__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(2.25rem, 5vw, 3.75rem);
  text-align: center;
}
.gallery__more[hidden] { display: none; }
.gallery__btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding-left: 1.5em;
}
.gallery__btn svg {
  flex: none;
  width: 1.45em;
  height: 1.25em;
  fill: none;
  stroke: var(--apricot);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: transform .7s var(--ease-out);
}
.gallery__btn svg rect:last-child { fill: rgba(242, 165, 109, .18); }
@media (hover: hover) {
  .gallery__btn:hover svg { transform: rotate(-6deg) translateY(-1px); }
}
.gallery__left {
  margin: 0;
  font: italic 400 .98rem/1.4 var(--body);
  color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .gallery__btn:hover svg { transform: none; }
}

/* ---------- Angebotskarten: ein eingeklebter Abzug ---------- */
.tcard__photo {
  --tilt: -1.8deg;
  position: relative;
  margin: .35rem 0 1.15rem;
  padding: 6px;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 12px 20px -14px rgba(96, 52, 26, .5), 0 1px 2px rgba(96, 52, 26, .12);
  rotate: var(--tilt);
}
.tcard__pic {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 9px;
  background: var(--apricot-soft);
}
.tcard__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ein Streifen Klebeband */
.tcard__photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 50%;
  width: 4.4rem;
  height: 1.2rem;
  margin-left: -2.2rem;
  rotate: calc(var(--tilt) * -1.6);
  background: rgba(251, 230, 210, .78);
  box-shadow: 0 1px 2px rgba(96, 52, 26, .1);
}
.tcard--b .tcard__photo { --tilt: 1.4deg; }
.tcard--c .tcard__photo { --tilt: -1.1deg; }
.tcard--b .tcard__photo::before { background: rgba(255, 250, 243, .7); }

.tcard--a .tcard__pic img { object-position: 50% 55%; }
.tcard--b .tcard__pic img { object-position: 55% 45%; }
/* die Familie ist klein im Bild: näher heran */
.tcard--c .tcard__pic img { object-position: 50% 100%; transform: scale(1.8); transform-origin: 28% 72%; }