/* ENDLICH DU V19 — unified design system, 28 October 2026
   Typography: Jost (headlines), Montserrat (body, UI, CTAs).
   Cinematic filmstrips: frames, sprocket holes and borders move as one object.
*/
:root{
 --font-display:'Jost',Arial,sans-serif;
 --font-head:'Jost',Arial,sans-serif;
 --font-body:'Montserrat',Arial,sans-serif;
 --v19-h1:3.25rem;
 --v19-h2:2.7rem;
 --v19-h3:1.5rem;
 --v19-body:1rem;
 --v19-intro:1.05rem;
 --v19-small:.8rem;
 --v19-kicker:.74rem;
 --v19-cta:.96rem;
}
body,button,input,select,textarea{font-family:var(--font-body)!important;}
/* Headline family + scale, across every section and special story module */
#hero .hero-story,
main .section-heading h2,
main .story-description h3,
main .father-copy h2,
main .marian-copy h2,
main .human-card h3,
main .step-card h3,
main .audience-card h3,
main .fact-tile h3,
main .final-center h2,
main .about-text h2,
main .faq-heading h2,
main .modal-head h2,
#signup-heading,
main .section h2,
main .section h3{
 font-family:var(--font-head)!important;
 font-style:normal!important;
 font-stretch:normal!important;
 font-weight:800!important;
 letter-spacing:-.028em!important;
 text-wrap:balance;
}
#hero .hero-story{
 font-size:var(--v19-h1)!important;
 line-height:1.16!important;
 max-width:1120px!important;
 letter-spacing:-.035em!important;
 margin-top:24px;
}
main .section h2,main .section-heading h2,main .final-center h2,
main .father-copy h2,main .marian-copy h2,main .about-text h2{
 font-size:var(--v19-h2)!important;
 line-height:1.18!important;
}
main .section h3,main .story-description h3,main .human-card h3,
main .fact-tile h3,main .step-card h3{
 font-size:var(--v19-h3)!important;
 line-height:1.32!important;
}
/* Keep utility data and body copy in one family, with coherent scale */
main .section p, main .section li, #hero .hero-sub,
#hero .desktop-panel-copy,#hero .v3-mirror,
#hero .benefits li p, main .story-description>p,
main .father-copy p, main .marian-copy p,main .about-text>p,
main .human-card p{font-family:var(--font-body)!important;font-size:var(--v19-body)!important;line-height:1.7!important;letter-spacing:0!important;}
#hero .desktop-panel-copy,#hero .v3-mirror,#hero .hero-sub,
main .section-heading p{font-size:var(--v19-intro)!important;line-height:1.65!important;}
#hero .benefits li b,main .human-card .transformation-label,
main .section .sec-kicker,#hero .known-label, .sec-kicker, .story-number,
main .fact-num, main .step-digit, .final-countdown-title{
 font-family:var(--font-body)!important;
}
main .section .sec-kicker,.sec-kicker,#hero .known-label,
main .story-number{font-size:var(--v19-kicker)!important;line-height:1.4!important;}
#hero .benefits li b{font-size:.94rem!important;line-height:1.5!important;}
.cta,.announcement,.v19-premiere-ribbon,#signup-modal button,.sticky button{
 font-family:var(--font-body)!important;
 font-size:var(--v19-cta)!important;
 font-weight:800!important;
}
#hero .premiere-banner strong{font-family:var(--font-body)!important;}
#hero .clock-part strong,.final-time strong,.tobi-stat strong{
 font-family:var(--font-head)!important;font-stretch:normal!important;
}
/* Full width ribbon at the true top of the hero, before the headline */
#hero .v19-premiere-ribbon.hero-dateline.premiere-banner{
 position:relative!important;
 z-index:12!important;
 display:flex!important;
 justify-content:center!important;
 align-items:center!important;
 flex-wrap:wrap!important;
 width:100%!important;
 max-width:none!important;
 margin:0!important;
 padding:16px 28px!important;
 border:none!important;
 border-radius:0!important;
 background:linear-gradient(102deg,#c45179 0%,#d76a8a 36%,#ee8b5c 73%,#f2b53c 100%)!important;
 box-shadow:0 12px 30px rgba(134,45,75,.22)!important;
 color:#fff!important;
 gap:10px 24px!important;
 isolation:isolate;
}
#hero .v19-premiere-ribbon::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 23% 0%,rgba(255,255,255,.22),transparent 58%)}
#hero .v19-premiere-ribbon .hero-free{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 background:rgba(255,255,255,.20)!important;
 color:#fff!important;
 border:1px solid rgba(255,255,255,.36)!important;
 border-radius:8px!important;
 padding:7px 14px!important;
 font-size:.78rem!important;
 letter-spacing:.1em!important;
 font-family:var(--font-body)!important;
}
#hero .v19-premiere-ribbon strong{
 color:#fff!important;
 font-family:var(--font-body)!important;
 font-size:1.07rem!important;
 font-weight:800!important;
 text-shadow:0 1px 6px rgba(89,26,50,.18);
}
#hero .v19-premiere-ribbon .hero-where{
 color:#fff!important;font-family:var(--font-body)!important;
 font-size:.78rem!important;font-weight:800!important;letter-spacing:.09em!important;
}
#hero .hero-head{padding-top:clamp(30px,3.4vw,48px)!important;}

/* Rose / blush cinematic overlay, preserving crisp photographs */
#hero.hero{background:#f5d9e2!important;}
#hero.hero::before{
 z-index:-2!important;
 /* Keep the film visible; no flat pink wash across the whole header. */
 background:linear-gradient(180deg,rgba(251,223,233,.07),rgba(240,170,197,.045) 62%,rgba(206,114,155,.08))!important;
}
#hero.hero::after{
 z-index:0!important;
 background:linear-gradient(180deg,rgba(253,236,242,.04),rgba(238,169,198,.055) 60%,rgba(192,94,140,.045))!important;
 pointer-events:none!important;
}
#hero .hero-head,#hero .hero-stage,#hero .known-from,#hero .mobile-top-cta,
#hero .mobile-benefits,#hero .countdown-wrap,#hero .trustbox-wrap{
 position:relative;z-index:2;
}
/* Reduce wall from 4 to 3 straight, bigger film lanes with more spacing.
   Expand beyond the angled edges so no pale corner holes occur. */
@media(min-width:768px){
 #hero .hero-film-wall{
   display:flex!important;
   inset:-35% -35% -35% -35%!important;
   transform:rotate(-5deg) scale(1.16)!important;
   transform-origin:50% 50%!important;
   justify-content:center!important;
   align-items:stretch!important;
   gap:clamp(36px,4vw,70px)!important;
   opacity:.94!important;
   z-index:0!important;
 }
 #hero .hero-film-wall .final-film-lane{
   flex:0 0 auto!important;
   height:clamp(240px,27vw,410px)!important;
 }
 #hero .hero-film-wall::after{
   position:absolute!important;inset:0!important;
   background:
     radial-gradient(ellipse 64% 57% at 50% 26%,rgba(252,226,236,.86) 0%,rgba(251,222,232,.56) 65%,rgba(242,182,207,.075) 100%)!important;
   pointer-events:none!important;
 }
}
/* Shared real filmstrip mechanics: one continuous scrollable piece with its frame border
   AND perforations attached, never static sprockets on the parent container. */
#hero .hero-film-wall .final-film-lane,
#aufruf .final-film-wall .final-film-lane{
 position:relative!important;
 overflow:hidden!important;
 padding:0!important;
 background:transparent!important;
 box-shadow:none!important;
}
#hero .hero-film-wall .final-film-lane::before,
#hero .hero-film-wall .final-film-lane::after,
#aufruf .final-film-wall .final-film-lane::before,
#aufruf .final-film-wall .final-film-lane::after{content:none!important;display:none!important;}
#hero .hero-film-wall .final-film-track,
#aufruf .final-film-wall .final-film-track{
 display:flex!important;
 align-items:center!important;
 position:relative!important;
 gap:10px!important;
 width:max-content!important;
 height:100%!important;
 padding:16px 9px!important;
 background:#241a24!important;
 border-top:2px solid rgba(255,235,218,.16)!important;
 border-bottom:2px solid rgba(255,235,218,.16)!important;
 box-shadow:inset 0 0 0 2px rgba(12,7,16,.7)!important;
 animation:v19-reel-left 116s linear infinite!important;
 will-change:transform;
}
#hero .hero-film-wall .final-film-track::before,
#hero .hero-film-wall .final-film-track::after,
#aufruf .final-film-wall .final-film-track::before,
#aufruf .final-film-wall .final-film-track::after{
 content:''!important;
 display:block!important;
 position:absolute!important;
 left:0!important;right:0!important;
 height:12px!important;
 z-index:3!important;
 background:repeating-linear-gradient(90deg,transparent 0 19px,#dec4c8 19px 30px,transparent 30px 45px)!important;
 border-radius:2px!important;
 opacity:.82!important;
 pointer-events:none!important;
}
#hero .hero-film-wall .final-film-track::before,
#aufruf .final-film-wall .final-film-track::before{top:2px!important}
#hero .hero-film-wall .final-film-track::after,
#aufruf .final-film-wall .final-film-track::after{bottom:2px!important}
#hero .hero-film-wall .final-film-tile,
#aufruf .final-film-wall .final-film-tile{
 width:clamp(300px,29vw,500px)!important;
 min-width:0!important;
 height:100%!important;
 flex:0 0 auto!important;
 background-size:cover!important;
 background-position:center center!important;
 border-left:3px solid #1c141f!important;
 border-right:3px solid #1c141f!important;
 filter:saturate(.95) contrast(1.02)!important;
}
#hero .hero-film-wall .final-film-lane:nth-child(even) .final-film-track,
#aufruf .final-film-wall .final-film-lane:nth-child(even) .final-film-track{
 animation:v19-reel-right 131s linear infinite!important;
}
#hero .hero-film-wall .final-film-lane:nth-child(3) .final-film-track,
#aufruf .final-film-wall .final-film-lane:nth-child(3) .final-film-track{animation-duration:145s!important;}
@keyframes v19-reel-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes v19-reel-right{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* Finale: same 3-track architecture, scaled up, more breathing room */
#aufruf .final-film-wall{
 inset:-32% -35%!important;
 transform:rotate(-6deg) scale(1.12)!important;
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 gap:clamp(35px,4vw,70px)!important;
 opacity:.85!important;
}
#aufruf .final-film-wall .final-film-lane{height:clamp(240px,25vw,390px)!important;flex:none!important;}
#aufruf.section-final::after{
 background:radial-gradient(ellipse 78% 75% at 50% 49%,rgba(30,18,30,.91) 5%,rgba(40,23,38,.82) 58%,rgba(64,30,51,.51) 100%)!important;
}
/* Animation and film-photo quality safety */
@media(prefers-reduced-motion:reduce){
 #hero .hero-film-wall .final-film-track,
 #aufruf .final-film-wall .final-film-track{animation:none!important;will-change:auto!important;}
}

/* Mobile: bring the previous inward-leaning real-filmstock artwork back,
   preserving the soft cream centre for the existing dark text. */
@media(max-width:767px){
 :root{--v19-h1:1.62rem;--v19-h2:1.9rem;--v19-h3:1.25rem;
       --v19-body:.89rem;--v19-intro:.94rem;--v19-kicker:.65rem;--v19-cta:.92rem;}
 #hero .v19-premiere-ribbon.hero-dateline.premiere-banner{
   padding:10px 9px!important;gap:5px 10px!important;
 }
 #hero .v19-premiere-ribbon .hero-free{font-size:.65rem!important;padding:6px 9px!important;}
 #hero .v19-premiere-ribbon strong{font-size:.86rem!important;}
 #hero .v19-premiere-ribbon .hero-where{font-size:.61rem!important;}
 #hero .hero-head{padding-top:30px!important;}
 #hero .hero-story{font-size:var(--v19-h1)!important;line-height:1.19!important;letter-spacing:-.035em!important;max-width:100%!important;width:100%!important;}
 #hero .hero-mobile-bg{
   display:block!important;position:absolute!important;
   inset:0!important;width:100%!important;height:100%!important;
   z-index:-3!important;
   background-image:url('../../neu/assets/film/hero-mobile-v19-reference.webp')!important;
   background-color:#352337!important;
   background-size:100% 100%!important;
   background-position:center top!important;
   background-repeat:no-repeat!important;
   filter:none!important;opacity:1!important;
 }
 #hero .hero-mobile-shade{
   display:block!important;position:absolute!important;inset:0!important;
   z-index:-2!important;
   background:
     linear-gradient(90deg,rgba(246,219,222,.09),rgba(253,239,238,.93) 24%,rgba(253,239,238,.94) 74%,rgba(246,219,222,.09)),
     linear-gradient(180deg,rgba(241,178,203,.21),rgba(201,91,142,.17))!important;
 }
 #hero .hero-head::before{
   background:linear-gradient(90deg,rgba(255,248,242,0) 0%,rgba(253,239,238,.58) 19%,rgba(253,239,238,.63) 80%,rgba(255,248,242,0) 100%)!important;
 }
 #hero .hero-film-wall{display:none!important;}
 #hero .hero-sub{max-width:31ch!important;font-size:var(--v19-intro)!important;}
 #hero .benefits li p,#hero .v3-mirror{font-size:var(--v19-body)!important;}
 #aufruf .final-film-wall{inset:-22% -65%!important;transform:rotate(-7deg) scale(1.16)!important;gap:26px!important;}
 #aufruf .final-film-wall .final-film-lane{height:205px!important;}
 #hero .hero-stage{margin-top:25px!important;}
 #hero .mobile-benefits,#hero .countdown-wrap,#hero .trustbox-wrap.mobile-trust{background:#f8f5f3!important;}
 #hero .benefits li b{font-size:.84rem!important;}
 main .section p,main .section li{line-height:1.66!important;}
}
@media(min-width:768px) and (max-width:1199px){
 :root{--v19-h1:2.65rem;--v19-h2:2.3rem;--v19-h3:1.33rem;--v19-body:.95rem;--v19-intro:.98rem;}
}
@media(max-width:360px){:root{--v19-h1:1.49rem;--v19-h2:1.77rem;}}
/* Wide tablets: extend the same photo wall all the way to the upper edge. */
@media(min-width:768px) and (max-width:1199px){
  #hero .hero-film-wall{inset:-18% -34%!important;justify-content:space-between!important;}
  #hero .hero-film-wall .final-film-lane{flex:1 1 0!important;height:auto!important;min-height:290px!important;}
}

/* --------------------------------------------------------------
   V20  –  Consistent headings and softly fading blush overlay
   This block wins over older rules across the template.
   -------------------------------------------------------------- */
:root{--font-display:'Jost',Arial,sans-serif;--font-head:'Jost',Arial,sans-serif;}
#hero .hero-story,
main h2,main h3,
main h2 em,main h3 em,
main .father-copy h2,main .marian-copy h2,
main .story-feature h3,main .section-heading h2,
main .final-center h2,
#signup-modal h2{
  font-family:'Jost',Arial,sans-serif!important;
  font-weight:800!important;
  font-stretch:normal!important;
  font-style:normal!important;
  letter-spacing:-.035em!important;
}
/* Support exact same character as the H1, not a secondary Montserrat heading. */
main .section-heading h2,main .father-copy h2,
main .marian-copy h2,main .final-center h2,
main .about-text h2{line-height:1.16!important;}
/* Same radial falloff as the original white overlay; only the hue changed. */
@media (min-width:768px){
  #hero .hero-film-wall::after{
    background:radial-gradient(ellipse 64% 57% at 50% 26%,
       rgba(252,226,236,.86) 0%,
       rgba(251,222,232,.56) 65%,
       rgba(242,182,207,.075) 100%)!important;
  }
}
/* Keep the same soft readability gradient on the inward-leaning mobile artwork. */
@media (max-width:767px){
  #hero .hero-mobile-shade{
    background:
      radial-gradient(ellipse 65% 52% at 50% 13%,rgba(252,229,238,.86),rgba(250,224,233,.58) 68%,transparent 100%),
      linear-gradient(90deg,rgba(243,199,217,.055) 0%,rgba(253,237,242,.78) 24%,rgba(253,237,242,.78) 76%,rgba(243,199,217,.055) 100%)!important;
  }
  #hero .hero-head::before{
    background:linear-gradient(90deg,rgba(254,238,244,0) 0%,rgba(253,230,239,.48) 19%,rgba(253,230,239,.54) 81%,rgba(254,238,244,0) 100%)!important;
  }
}