/* ENDLICH DU V34: kürzere Gewinnerheadline, ein Prolog statt zwei Wuppertal-Sektionen,
   erweiterte echte Filmbild-Collage und einheitliche, zentrierte Buttons. */

/* Prolog-Headline oben über beide Spalten statt innerhalb der linken Spalte */
.prologue-section {padding:clamp(70px,7.5vw,108px) 0 clamp(82px,8vw,118px);}
.prologue-shell {width:100%;}
.prologue-intro {text-align:center;max-width:1120px;margin:0 auto clamp(30px,4.2vw,60px);}
.prologue-intro .sec-kicker {display:block;font:800 .72rem/1.5 'Montserrat',sans-serif;letter-spacing:.16em;color:#b84a71;margin-bottom:15px;}
main .prologue-section .prologue-intro h2 {max-width:1100px;margin:0 auto!important;font-size:clamp(2.45rem,5vw,4.55rem)!important;line-height:1.12!important;text-wrap:balance;}
.prologue-grid {grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(30px,4.6vw,74px);}
.prologue-copy {min-width:0;}
/* Höhere Collage: drei Lebensphasen und sechs echte Filmstills. */
.prologue-collage {
  display:grid;
  grid-template-columns:1.03fr .97fr;
  grid-template-rows:repeat(4,minmax(0,148px));
  gap:12px;min-height:628px;width:100%;align-self:center;
  transform:none;
}
.prologue-photo {border-radius:17px;border:3px solid rgba(255,255,255,.85);box-shadow:0 18px 40px rgba(63,28,49,.13);}
.prologue-photo-album {grid-column:1;grid-row:1/3;}
.prologue-photo-family {grid-column:2;grid-row:1;}
.prologue-photo-school {grid-column:2;grid-row:2;}
.prologue-photo-present {grid-column:1;grid-row:3/5;}
.prologue-photo-young {grid-column:2;grid-row:3;}
.prologue-photo-stage {grid-column:2;grid-row:4;}
.prologue-photo-album img {object-position:50% 45%;}
.prologue-photo-family img {object-position:50% 45%;}
.prologue-photo-school img {object-position:46% 44%;}
.prologue-photo-present img {object-position:58% 45%;}
.prologue-photo-young img {object-position:50% 39%;}
.prologue-photo-stage img {object-position:50% 48%;}
/* Bereits im Prolog frühere Breitenvorgaben überschreiben. */
.prologue-cta {min-width:0!important;}

/* CTA-System: einheitliches Format; frei stehende Buttons ca. halbe Sektionsbreite,
   maximal 420px, immer horizontal zentriert. */
main .section-cta,
main .about-text > .section-cta,
main .last-text .section-cta,
main #hinter-der-kamera .marian-cta {
  width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;
  align-items:center!important;justify-content:center!important;text-align:center!important;
}
main .section-cta > .cta,
main #hinter-der-kamera .marian-cta > .cta,
main #sein-vater .father-cta > .cta {
  display:flex!important;
  width:50%!important;
  max-width:420px!important;
  min-width:min(100%,270px)!important;
  margin-inline:auto!important;
  padding-inline:16px!important;
  gap:12px!important;
}
main .prologue-copy .prologue-cta {
  display:flex!important;
  width:min(75%,370px)!important;
  max-width:370px!important;
  min-width:0!important;
  margin:22px auto 0!important;
  padding:0 16px!important;
}
#hero .benefit-panel .cta {width:min(84%,360px)!important;max-width:360px!important;margin-inline:auto!important;}
#hero .mobile-top-cta .cta,
#hero .mobile-bottom-cta .cta {width:min(100%,380px)!important;max-width:380px!important;margin-inline:auto!important;}
/* Formular und Sticky sind schmale Funktionsflächen: begrenzen und zentrieren,
   ohne die Bedienbarkeit auf kleinen Geräten zu beeinträchtigen. */
#signup-modal #submit-signup {width:min(100%,400px)!important;max-width:400px!important;margin-inline:auto!important;}
.sticky .cta {max-width:340px!important;margin-inline:auto!important;}

@media(max-width:900px){
  .prologue-grid {grid-template-columns:1fr;gap:30px;}
  .prologue-intro {margin-bottom:34px;}
  .prologue-collage {max-width:680px;min-height:585px;grid-template-rows:repeat(4,minmax(0,137px));margin-inline:auto;}
  main .section-cta > .cta,
  main #hinter-der-kamera .marian-cta > .cta,
  main #sein-vater .father-cta > .cta {width:min(72%,420px)!important;}
}
@media(max-width:575px){
  .prologue-section {padding:55px 0 72px;}
  .prologue-intro {margin-bottom:26px;}
  main .prologue-section .prologue-intro h2 {font-size:clamp(2.05rem,8vw,2.75rem)!important;}
  .prologue-collage {grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,172px));min-height:353px;gap:9px;}
  .prologue-photo-album {grid-column:1;grid-row:1;}
  .prologue-photo-family {grid-column:2;grid-row:1;}
  .prologue-photo-present {grid-column:1;grid-row:2;}
  .prologue-photo-school {grid-column:2;grid-row:2;}
  .prologue-photo-young,.prologue-photo-stage {display:none;}
  main .prologue-copy .prologue-cta,
  main .section-cta > .cta,
  main #hinter-der-kamera .marian-cta > .cta,
  main #sein-vater .father-cta > .cta {width:min(100%,360px)!important;max-width:360px!important;min-width:0!important;}
  #hero .benefit-panel .cta {width:min(100%,360px)!important;}
}