/* Der Bilderzähler – Coral Dynamik V02 · 15.10.2026 13:39
   Bildtreue-Prinzip: keine CSS-Abdunklung oder Farbfilter auf Marcs Fotos.
   Lesbarkeit wird lokal über Verläufe/Textschatten gelöst, nicht über das Foto. */
:root{--bz-coral:#c96f5c;--bz-coral-soft:#d98472;--bz-cream:#fbf8f3;--bz-ink:#171513}

/* Fotos bleiben so hell, farbig und kontrastreich wie Marc sie bearbeitet hat. */
.home-page img{filter:none!important}

.bz-accent{color:var(--bz-coral);display:inline-block;position:relative;transform-origin:50% 75%;text-decoration:none!important}
.bz-accent-script{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.055em}
.bz-stroke{z-index:0}
.bz-stroke::after{content:"";position:absolute;left:-.03em;right:-.08em;bottom:-.035em;height:.09em;background:var(--bz-coral);border-radius:100%;transform:rotate(-2.2deg) scaleX(.92);transform-origin:left center;opacity:.9;z-index:-1}

/* Hero: quiet base + one strong emotional break. */
.bz-hero{isolation:isolate}
.bz-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:43%;pointer-events:none;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 22%,rgba(0,0,0,.24) 58%,rgba(0,0,0,.62) 100%)}
.bz-hero .hero-picture{display:block;width:100%;position:relative;z-index:0}
.bz-hero .hero-photo{filter:none!important}
.bz-hero-copy h1{max-width:16ch;text-wrap:balance}
.bz-hero-line{display:inline}
.bz-hero-accent{font-size:1.18em;line-height:.8;color:var(--bz-coral)!important;padding:0 .02em;transform:rotate(-3.2deg)}
.bz-hero-accent.bz-stroke::after{bottom:-.12em;height:.065em;transform:rotate(-3deg) scaleX(1.08)}

/* Subtle editorial movement in the homepage grids. */
.home-page .opening-photos figure:nth-child(2),
.home-page .opening-story-grid figure:nth-child(2),
.home-page .opening-story-grid figure:nth-child(6),
.home-page .moments-images figure:nth-child(2){transform:translateY(18px) rotate(1deg)}
.home-page .opening-story-grid figure:nth-child(3),
.home-page .moments-images figure:nth-child(4){transform:translateY(-9px) rotate(-.8deg)}

/* Scroll entrance. JS only adds these classes after load; without JS everything stays visible. */
.bz-motion-ready .home-page main>section:not(.bz-hero){opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .86s cubic-bezier(.2,.7,.2,1)}
.bz-motion-ready .home-page main>section.bz-in-view{opacity:1;transform:none}
.bz-motion-ready .bz-accent:not(.bz-hero-accent){opacity:0;transform:translateY(.42em) rotate(-5deg) scale(.94);transition:opacity .55s ease,transform .78s cubic-bezier(.18,.78,.23,1.16)}
.bz-motion-ready .bz-accent.bz-word-in-view{opacity:1;transform:translateY(0) rotate(-1.8deg) scale(1)}
.bz-motion-ready .bz-stroke::after{transform:rotate(-2.2deg) scaleX(0);transition:transform .62s .18s cubic-bezier(.2,.8,.2,1)}
.bz-motion-ready .bz-stroke.bz-word-in-view::after{transform:rotate(-2.2deg) scaleX(.98)}

@keyframes bzHeroPhoto{from{transform:scale(1.025)}to{transform:scale(1)}}
@keyframes bzHeroCopy{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bzHeroFriend{0%{opacity:0;transform:translateY(.5em) rotate(-8deg) scale(.88)}70%{opacity:1;transform:translateY(-.05em) rotate(-2.2deg) scale(1.04)}100%{opacity:1;transform:rotate(-3.2deg) scale(1)}}
.bz-motion-ready .bz-hero .hero-photo{animation:bzHeroPhoto 1.25s cubic-bezier(.2,.75,.2,1) both}
.bz-motion-ready .bz-hero-copy{animation:bzHeroCopy .82s .18s cubic-bezier(.2,.75,.2,1) both}
.bz-motion-ready .bz-hero-accent{animation:bzHeroFriend .9s .55s cubic-bezier(.18,.78,.23,1.14) both}

@media(max-width:760px){
  .bz-hero{height:calc(100svh - 72px);min-height:610px;padding:0!important;background:var(--bz-ink)}
  .bz-hero .hero-picture{height:100%}
  .bz-hero .hero-photo{width:100%;height:100%!important;min-height:100%!important;object-fit:cover;object-position:center 45%;filter:none!important}
  .bz-hero .hero-letter{left:7%;right:7%;bottom:8.5%;width:86%;text-shadow:0 2px 14px rgba(0,0,0,.68);z-index:2}
  .bz-hero .hero-letter h1{font-size:clamp(2rem,8.8vw,3.25rem);line-height:.98;max-width:12.5ch;letter-spacing:-.055em}
  .bz-hero-line{display:inline}
  .bz-hero-line-friend{display:inline}
  .bz-hero-accent{font-size:1.26em;margin:0 .02em;transform:rotate(-4deg)}
  .bz-hero .hero-scroll{display:none}
  .home-page .opening-photos figure:nth-child(2),
  .home-page .opening-story-grid figure:nth-child(2),
  .home-page .opening-story-grid figure:nth-child(6),
  .home-page .moments-images figure:nth-child(2){transform:translateX(10px) rotate(1.25deg)}
  .home-page .opening-story-grid figure:nth-child(3),
  .home-page .moments-images figure:nth-child(4){transform:translateX(-8px) rotate(-1.1deg)}
  .bz-motion-ready .home-page main>section:not(.bz-hero){transform:translateY(30px)}
  .bz-motion-ready .bz-accent:not(.bz-hero-accent){transform:translateX(-.32em) translateY(.42em) rotate(-7deg) scale(.92)}
  .bz-motion-ready .bz-accent.bz-word-in-view{transform:translateX(0) translateY(0) rotate(-2.4deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .bz-motion-ready .home-page main>section:not(.bz-hero),.bz-motion-ready .bz-accent,.bz-motion-ready .bz-stroke::after,.bz-motion-ready .bz-hero .hero-photo,.bz-motion-ready .bz-hero-copy,.bz-motion-ready .bz-hero-accent{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .bz-stroke::after{transform:rotate(-2.2deg) scaleX(.98)!important}
}