/* Aquarelier: Zuhause. Raumbilder wie ein Fotoalbum: groß, paarweise versetzt, jedes mit seinem Anlass. */

.zh-kopf {
  max-width: 1320px; margin: 0 auto; padding: 160px var(--rand) clamp(56px, 7vw, 104px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); align-items: end;
}
.zh-kopf-text { display: grid; gap: 18px; padding-bottom: .6em; }
.zh-kopf-text .klein { max-width: 44ch; }

/* Das Album: Muster aus sechs Bildern, groß links, Paar, groß rechts, Paar */
.zh-album {
  max-width: 1320px; margin: 0 auto; padding: 0 var(--rand) var(--abschnitt);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); row-gap: clamp(72px, 9vw, 136px);
  align-items: start;
}
.zh-bild { margin: 0; display: grid; gap: 14px; justify-items: start; }
/* Die Fotos: deutlich gerundet, weicher Schatten. Beim Hereinscrollen blüht jedes Foto von einer Stelle aus auf,
   wie ein Tropfen Farbe auf nassem Papier; am Ende steht es ruhig da und der Schatten kommt dazu. */
@property --zh-bluete { syntax: '<percentage>'; inherits: false; initial-value: 128%; }
.zh-album { --r-zh: clamp(22px, 3.2vw, 44px); --zh-schatten: 0 1px 2px rgba(38, 43, 51, .05), 0 34px 64px -38px rgba(38, 43, 51, .45); }
.zh-foto { display: block; width: 100%; border-radius: var(--r-zh); box-shadow: var(--zh-schatten); }
.zh-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1073; object-fit: cover; border-radius: inherit; background: var(--papier-tief); }
/* Große Bilder nehmen die ganze Zeile; der Anlass steht daneben wie ein Schild an der Wand */
.zh-bild:nth-child(6n+1), .zh-bild:nth-child(6n+4) { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: normal; align-items: end; }
.zh-bild:nth-child(6n+1) .zh-foto { grid-column: 1 / span 9; }
.zh-bild:nth-child(6n+1) figcaption { grid-column: 10 / -1; padding-bottom: 6px; }
.zh-bild:nth-child(6n+4) .zh-foto { grid-column: 4 / -1; grid-row: 1; }
.zh-bild:nth-child(6n+4) figcaption { grid-column: 1 / span 3; grid-row: 1; justify-self: end; padding-bottom: 6px; }
.zh-bild:nth-child(6n+2) { grid-column: 1 / span 6; }
.zh-bild:nth-child(6n+3) { grid-column: 7 / span 6; margin-top: clamp(80px, 12vw, 200px); }
.zh-bild:nth-child(6n+5) { grid-column: 1 / span 6; }
.zh-bild:nth-child(6n) { grid-column: 7 / span 6; margin-top: clamp(80px, 12vw, 200px); }
/* Das Paar rückt unter das große Bild; der versetzte Partner füllt die Lücke */
.zh-bild:nth-child(6n+3) + .zh-bild, .zh-bild:nth-child(6n) + .zh-bild { margin-top: calc(-1 * clamp(24px, 4vw, 72px)); }

/* Fassung Kreise (Nico 01.10.): jedes Foto als Kreis, abwechselnd links und rechts, daneben groß der Anlass.
   Der Ausschnitt wird je Bild mit --zh-mitte auf Person und Rahmen gesetzt. */
.zh-album.kreise { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 7vw, 112px); max-width: 1120px; }
.zh-album.kreise .zh-bild:nth-child(n) {
  grid-column: 1; margin-top: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 88px); align-items: center; justify-items: stretch;
}
.zh-album.kreise .zh-bild:nth-child(n) > * { grid-row: 1; padding-bottom: 0; }
.zh-album.kreise .zh-bild:nth-child(odd) .zh-foto { grid-column: 1; }
.zh-album.kreise .zh-bild:nth-child(odd) figcaption { grid-column: 2; justify-self: start; }
.zh-album.kreise .zh-bild:nth-child(even) .zh-foto { grid-column: 2; }
.zh-album.kreise .zh-bild:nth-child(even) figcaption { grid-column: 1; justify-self: end; }
.zh-album.kreise .zh-foto { --r-zh: 50%; width: min(100%, 600px); justify-self: center; }
.zh-album.kreise .zh-foto img { aspect-ratio: 1; object-position: var(--zh-mitte, 50%) 50%; }
.zh-album.kreise .zh-bild { --zh-x: 50%; --zh-y: 50%; }
.zh-album.kreise .zh-anlass { font-size: clamp(26px, 2.6vw, 40px); }
.zh-album.kreise .zh-anlass svg { width: 20px; height: 20px; }

/* Der Anlass unter dem Bild führt zur passenden Geschenkseite */
.zh-anlass {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; color: var(--tinte);
}
.zh-anlass svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }

/* ---------- Schluss ---------- */
.zh-schluss { padding: var(--abschnitt) var(--rand); }
.zh-schluss-innen { max-width: 1320px; margin: 0 auto; display: grid; gap: 22px; justify-items: start; }
.zh-schluss h2 { max-width: 12ch; }
.zh-schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

@media (hover: hover) and (pointer: fine) {
  .zh-anlass:hover svg { transform: translateX(3px); }
}

@media (max-width: 900px) {
  .zh-kopf { grid-template-columns: 1fr; row-gap: 22px; padding-top: 128px; }
  .zh-kopf-text { padding-bottom: 0; }
  .zh-album { row-gap: 56px; }
  .zh-album .zh-bild:nth-child(n) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .zh-album .zh-bild:nth-child(n) > * { grid-column: 1; grid-row: auto; justify-self: start; padding-bottom: 0; }
  .zh-bild { gap: 8px; }
  .zh-album.kreise .zh-bild:nth-child(n) { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .zh-album.kreise .zh-bild:nth-child(n) > .zh-foto, .zh-album.kreise .zh-bild:nth-child(n) > figcaption { grid-column: 1; grid-row: auto; justify-self: center; }
  .zh-album.kreise .zh-foto { width: min(100%, 460px); }
}

/* Aufblühen: nur mit Skript und ohne Wunsch nach weniger Bewegung; das erste Bild steht sofort da (kein Blitzen beim Laden).
   Die Maske sitzt am Foto, der Schatten an der Hülle darum, damit er nicht mit weggeschnitten wird. */
@media (prefers-reduced-motion: no-preference) {
  .js .zh-bild[data-ein] { opacity: 1; transform: none; transition: none; }
  .js .zh-bild[data-ein] .zh-foto { box-shadow: none; transition: box-shadow 700ms ease 800ms; }
  .js .zh-bild[data-ein] img {
    opacity: 0; --zh-bluete: 0%;
    -webkit-mask-image: radial-gradient(farthest-corner at var(--zh-x, 50%) var(--zh-y, 50%), #000 calc(var(--zh-bluete) - 26%), transparent var(--zh-bluete));
    mask-image: radial-gradient(farthest-corner at var(--zh-x, 50%) var(--zh-y, 50%), #000 calc(var(--zh-bluete) - 26%), transparent var(--zh-bluete));
  }
  .js .zh-bild[data-ein] figcaption { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out) 600ms, transform 600ms var(--ease-out) 600ms; }
  .js .zh-bild[data-ein].da .zh-foto { box-shadow: var(--zh-schatten); }
  .js .zh-bild[data-ein].da img { opacity: 1; --zh-bluete: 128%; animation: zh-bluete 1300ms cubic-bezier(.25, .6, .3, 1) both; }
  .js .zh-bild[data-ein].da figcaption { opacity: 1; transform: none; }
  .zh-bild:nth-child(odd) { --zh-x: 38%; --zh-y: 44%; }
  .zh-bild:nth-child(even) { --zh-x: 60%; --zh-y: 48%; }
}
@keyframes zh-bluete {
  from { opacity: 0; transform: scale(.985); --zh-bluete: 0%; }
  25% { opacity: 1; }
  to { opacity: 1; transform: none; --zh-bluete: 128%; }
}

@media (prefers-reduced-motion: reduce) {
  .zh-anlass svg { transition: none; }
}