/* =============================================================
   BILDERWERKSTATT NADINE · Hochzeit
   Nutzt Tokens & Bausteine aus index.css.
   Design nach Ralph-„Hochzeitsalbum"-Seite.
   ============================================================= */

/* ---------- HERO (Vollbild, großes Wort unten links) ---------- */
.hz-hero {
  position: relative;
  height: calc(100svh - var(--header-height, 7rem));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hz-hero-media { position: absolute; inset: 0; z-index: 0; }
.hz-hero-media img {
  object-position: 50% 42%;
  transform: scale(1.02);
  animation: heroZoom 22s var(--ease-soft) forwards;
}
.hz-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,18,15,0.55) 0%, rgba(20,18,15,0.05) 46%);
}
.hz-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--pad) clamp(2rem, 6vh, 4.5rem);
}
.hz-hero-word {
  font-family: var(--serif);
  font-weight: 400;                 /* wie Portfolio-Überschrift */
  font-size: clamp(3rem, 9vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- INTRO (Collage + weißes Panel mit Gold-Kursiv) ---------- */
.hz-intro { background: var(--panel); padding: clamp(4rem, 9vh, 8rem) var(--pad); }
.hz-intro-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hz-intro-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.4vw, 1.2rem); }
.hz-intro-media figure { overflow: hidden; }
.hz-intro-media .im-wide { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
.hz-intro-media .im-tall { aspect-ratio: 3 / 4; }
.hz-intro-media img { transition: transform 1.4s var(--ease); }
.hz-intro-media figure:hover img { transform: scale(1.05); }

.hz-intro-panel {
  background: #fcfaf6;
  padding: clamp(2rem, 4vw, 4rem);
}
.hz-intro-title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 2.9vw, 3rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin-bottom: 2rem;
}
.hz-body p {
  font-size: 1.04rem;
  line-height: 1.9;
  color: #4a4339;
  margin-bottom: 1.35rem;
}
.hz-body p:last-child { margin-bottom: 0; }

/* ---------- ZICKZACK-FAQ / PROZESS ---------- */
.hz-faq { max-width: var(--wrap); margin: 0 auto; padding: clamp(5rem, 11vh, 9rem) var(--pad); }
.hz-faq-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin-bottom: clamp(3rem, 7vh, 5.5rem);
}
.hz-faq-head em { font-style: italic; color: var(--gold); }

.hz-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 6vw, 7rem);
}
.hz-steps::before {
  content: "";
  position: absolute;
  left: 50%; top: 0.6rem; bottom: 2rem;
  width: 1px;
  background: var(--gold);
  opacity: 0.5;
  transform: translateX(-0.5px);
}
.hz-step { position: relative; padding-bottom: clamp(3rem, 6vh, 5rem); }
.hz-step:nth-child(odd)  { grid-column: 1; padding-right: clamp(1.6rem, 3vw, 3rem); }
.hz-step:nth-child(even) {
  grid-column: 2;
  grid-row: 1 / span 2;          /* über beide Zeilen der linken Spalte */
  align-self: center;            /* vertikal mittig → gleichmäßigeres Bild */
  padding-left: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: 0;
}
/* Verbindungslinie zur Mittelachse */
.hz-step::after {
  content: "";
  position: absolute;
  top: 0.85em;
  width: clamp(1.4rem, 3vw, 3rem);
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.hz-step:nth-child(odd)::after  { right: 0; }
.hz-step:nth-child(even)::after { left: 0; }

.hz-step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.3rem;
}
.hz-step p {
  font-size: 1rem;
  line-height: 1.85;
  color: #4a4339;
  max-width: 42ch;
}

/* ---------- WARUM BUCHEN (Abschluss) ---------- */
.hz-why {
  background: var(--panel);
  padding: clamp(5rem, 11vh, 9rem) var(--pad);
}
.hz-why-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.hz-why-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.hz-why-media img { object-position: 50% 30%; transition: transform 1.5s var(--ease); }
.hz-why-media:hover img { transform: scale(1.05); }
.hz-why-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.2rem;
}
.hz-why-title em { font-style: italic; }
.hz-why-btn { margin-top: 2.6rem; }

/* ---------- PORTFOLIO-BUTTON-BLOCK ---------- */
.hz-portfolio-cta { text-align: center; padding: clamp(4rem, 9vh, 7rem) var(--pad); }

/* =============================================================
   STORYTELLING-ANIMATIONEN  (nur Hochzeit-Seite — Datei ist nur
   hier eingebunden). Baut auf dem .reveal-System aus index.js,
   das beim Scrollen .is-visible setzt. Alles hinter html.js →
   ohne JS bleibt die Seite vollständig sichtbar.
   ============================================================= */
:root { --hz-ease: cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: no-preference) {

  /* HERO-WORT — steigt auf, Blur → scharf, Laufweite setzt sich */
  html.js .hz-hero-word.reveal {
    opacity: 0;
    transform: translateY(46px);
    filter: blur(12px);
    letter-spacing: 0.18em;
    transition: opacity 1.2s var(--hz-ease), transform 1.4s var(--hz-ease),
                filter 1.3s var(--hz-ease), letter-spacing 1.5s var(--hz-ease);
  }
  html.js .hz-hero-word.reveal.is-visible {
    opacity: 1; transform: none; filter: blur(0); letter-spacing: 0.03em;
  }

  /* BILDER — eleganter Masken-Wipe (unten → oben) + sanfter Zoom-Settle */
  html.js .hz-intro-media figure.reveal,
  html.js .hz-why-media.reveal {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.06);
    transition: opacity 1.1s var(--hz-ease),
                clip-path 1.35s var(--hz-ease),
                transform 1.6s var(--hz-ease);
    will-change: clip-path, transform;
  }
  html.js .hz-intro-media figure.reveal.is-visible,
  html.js .hz-why-media.reveal.is-visible {
    opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1);
  }
  /* Collage der drei Intro-Bilder gestaffelt */
  html.js .hz-intro-media figure.reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
  html.js .hz-intro-media figure.reveal:nth-child(2).is-visible { transition-delay: 0.20s; }
  html.js .hz-intro-media figure.reveal:nth-child(3).is-visible { transition-delay: 0.34s; }

  /* INTRO-PANEL als Bühne — Titel & Absätze steigen nacheinander ein */
  html.js .hz-intro-panel.reveal { opacity: 1; transform: none; }
  html.js .hz-intro-panel.reveal .hz-intro-title,
  html.js .hz-intro-panel.reveal .hz-body p {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--hz-ease), transform 1s var(--hz-ease);
  }
  html.js .hz-intro-panel.reveal.is-visible .hz-intro-title         { opacity: 1; transform: none; transition-delay: 0.10s; }
  html.js .hz-intro-panel.reveal.is-visible .hz-body p:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.24s; }
  html.js .hz-intro-panel.reveal.is-visible .hz-body p:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.34s; }
  html.js .hz-intro-panel.reveal.is-visible .hz-body p:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.44s; }
  html.js .hz-intro-panel.reveal.is-visible .hz-body p:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.53s; }
  html.js .hz-intro-panel.reveal.is-visible .hz-body p:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.61s; }

  /* „GUT ZU WISSEN" — Überschrift steigt + Blur → scharf */
  html.js .hz-faq-head.reveal {
    opacity: 0; transform: translateY(36px); filter: blur(6px);
    transition: opacity 1s var(--hz-ease), transform 1.1s var(--hz-ease), filter 1.1s var(--hz-ease);
  }
  html.js .hz-faq-head.reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

  /* Mittelachse zeichnet sich von oben nach unten */
  html.js .hz-steps.reveal { opacity: 1; transform: none; }
  html.js .hz-steps.reveal::before {
    transform: translateX(-0.5px) scaleY(0);
    transform-origin: top center;
    transition: transform 1.5s var(--hz-ease);
  }
  html.js .hz-steps.reveal.is-visible::before { transform: translateX(-0.5px) scaleY(1); }

  /* FAQ-Blöcke fliegen aus ihrer Spaltenseite ein, leicht gestaffelt */
  html.js .hz-step.reveal {
    opacity: 0;
    transition: opacity 0.9s var(--hz-ease), transform 1.05s var(--hz-ease);
  }
  html.js .hz-step:nth-child(odd).reveal  { transform: translateX(-44px); }
  html.js .hz-step:nth-child(even).reveal { transform: translateX(44px); }
  html.js .hz-step.reveal.is-visible { opacity: 1; transform: none; }
  html.js .hz-step:nth-child(2).reveal.is-visible { transition-delay: 0.12s; }
  html.js .hz-step:nth-child(3).reveal.is-visible { transition-delay: 0.22s; }

  /* WARUM BUCHEN — Textblock als Bühne, Kinder gestaffelt */
  html.js .hz-why .reveal:not(.hz-why-media) { opacity: 1; transform: none; }
  html.js .hz-why .reveal:not(.hz-why-media) .hz-why-title,
  html.js .hz-why .reveal:not(.hz-why-media) .hz-body p,
  html.js .hz-why .reveal:not(.hz-why-media) .hz-why-btn {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.9s var(--hz-ease), transform 1s var(--hz-ease);
  }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-why-title          { opacity: 1; transform: none; transition-delay: 0.10s; }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-body p:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.22s; }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-body p:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.31s; }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-body p:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.40s; }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-body p:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.48s; }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-body p:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.55s; }
  html.js .hz-why .reveal:not(.hz-why-media).is-visible .hz-why-btn            { opacity: 1; transform: none; transition-delay: 0.66s; }

  /* KONTAKT-CTA-Karte — steigt sanft & setzt sich */
  html.js .cta-card.reveal {
    opacity: 0; transform: translateY(40px) scale(0.985);
    transition: opacity 1s var(--hz-ease), transform 1.15s var(--hz-ease);
  }
  html.js .cta-card.reveal.is-visible { opacity: 1; transform: none; }

  /* INSTAGRAM — Raster-Kaskade */
  html.js .insta-tile.reveal {
    opacity: 0; transform: translateY(30px) scale(0.96);
    transition: opacity 0.9s var(--hz-ease), transform 1s var(--hz-ease);
  }
  html.js .insta-tile.reveal.is-visible { opacity: 1; transform: none; }
  html.js .insta-tile.reveal:nth-child(1).is-visible { transition-delay: 0.04s; }
  html.js .insta-tile.reveal:nth-child(2).is-visible { transition-delay: 0.12s; }
  html.js .insta-tile.reveal:nth-child(3).is-visible { transition-delay: 0.20s; }
  html.js .insta-tile.reveal:nth-child(4).is-visible { transition-delay: 0.28s; }
  html.js .insta-tile.reveal:nth-child(5).is-visible { transition-delay: 0.36s; }
}

/* Barrierefrei: keine Bewegung → alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important; transition: none !important;
  }
  html.js .hz-intro-panel .hz-intro-title,
  html.js .hz-intro-panel .hz-body p,
  html.js .hz-why .hz-why-title,
  html.js .hz-why .hz-body p,
  html.js .hz-why .hz-why-btn {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.js .hz-hero-media img { animation: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .hz-intro-grid, .hz-why-inner { grid-template-columns: 1fr; }
  .hz-why-media { max-width: 480px; }

  /* Zickzack → einspaltig, Linie nach links */
  .hz-steps { grid-template-columns: 1fr; }
  .hz-steps::before { left: 0; }
  .hz-step:nth-child(odd), .hz-step:nth-child(even) {
    grid-column: 1;
    grid-row: auto;              /* Zentrier-Span nur im Desktop-Layout */
    align-self: start;
    margin-top: 0;
    padding-left: clamp(1.6rem, 5vw, 2.4rem);
    padding-right: 0;
    padding-bottom: clamp(3rem, 6vh, 5rem);
  }
  .hz-step::after { display: none; }
  /* Reveal auf Mobil vertikal statt seitwärts – die seitliche Startposition der
     noch nicht eingeblendeten Schritte verursachte sonst horizontalen Overflow. */
  html.js .hz-step:nth-child(odd).reveal,
  html.js .hz-step:nth-child(even).reveal { transform: translateY(28px); }
}