/* ==========================================================================
   GÖNNER WERDEN · Hero (Plakette freigestellt), Scroll-Sequenz «Support-Family»,
   Vorteils-Karten, Vollbild-Parallax, Statement
   ========================================================================== */

/* Hero: die Plakette ist breiter als die Home-Fliege – weiter nach rechts
   (Mitte ca. 80vw) und leicht kleiner, damit ihre weisse Front nicht hinter
   dem Titel liegt und rechts nicht angeschnitten wird. Das verkleinerte Video
   endet über dem unteren Rand – Unterkante weich ausblenden, keine Naht */
#hero .hero__cutout video,#hero .hero__cutout>img{
  left:30vw;transform:scale(.88);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,#000 90%,transparent 100%);
  mask-composite:intersect;
}
/* Hochformat-Tablets (ab 821px, schmaler als 3:2): das Video würde über die
   Höhe skaliert und die Plakette den Titel überdecken – stattdessen über die
   Breite skalieren (Geometrie wie 1440×900), vertikal mittig, oben und unten
   weich ausblenden */
@media (min-width:821px) and (max-aspect-ratio:3/2){
  #hero .hero__cutout video,#hero .hero__cutout>img{
    top:calc(50% - 31.25vw);height:62.5vw;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
  }
}
/* Zeilen etwas enger als das Fundament (-.2em), aber so, dass die Ä-Punkte
   («TÄTSCHER») nicht in die Zeile darüber ragen */
#hero .hero__title .line{margin-bottom:-.08em}

/* Vorteile */
.benefits{padding-block:clamp(70px,8vw,160px) clamp(80px,9vw,180px)}
.benefits .h2{margin-bottom:clamp(36px,4vw,80px)}
.benefits__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,40px);
  margin-right:var(--wrap-r);
}
.bcard{
  background:var(--paper);color:var(--ink);
  padding:clamp(20px,2.2vw,42px);
  min-height:clamp(240px,20vw,390px);
  min-width:0;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.bcard:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:0 24px 60px rgba(0,0,0,.35)}
/* lange Wörter («PASSIVTÄTSCHER») dürfen in schmalen Karten nicht überlaufen */
.bcard .h3{margin-bottom:clamp(12px,1.3vw,24px);overflow-wrap:break-word;hyphens:auto}
.bcard p{font-size:var(--fs-meta);line-height:1.65}

/* Vollbild-Foto (Parallax über data-parallax) */
.fullbleed{height:min(78vh,860px);overflow:hidden;position:relative}
.fullbleed img,.fullbleed video{width:100%;height:100%;object-fit:cover;will-change:transform}

/* Statement + CTA */
.statement{padding-block:clamp(80px,10vw,190px) 0}
.statement .h2{max-width:12em;font-size:clamp(30px,3.4vw,66px);line-height:1.14;overflow-wrap:break-word}
.statement .pill{margin-top:clamp(30px,3.4vw,64px)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .benefits__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .benefits__grid{grid-template-columns:1fr;margin-right:0}
  .bcard{min-height:0}
  .fullbleed{height:62vh}
  /* Video endet mobil bei 66 % Höhe: Kanten weich ausblenden, keine Naht */
  #hero .hero__cutout video,#hero .hero__cutout>img{
    left:0;transform:none;
    top:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 94%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;
    mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 94%,transparent 100%);
  }
  /* Endstand der Scroll-Sequenz: Titel bleibt unter dem Logo */
  #support-family .scrolly__title{top:50%}
  #support-family .scrolly__text{top:53%}
}