html[data-hero="v3"] .hero-blatt,html[data-hero="v4"] .hero-blatt,
html[data-hero="v5"] .hero-blatt,html[data-hero="v6"] .hero-blatt{background:none;border:0;box-shadow:none;padding:0}

html[data-hero="v2"] .hero-blatt{max-width:30rem;background:rgba(245,247,250,.86);border:0;padding:1rem 1.2rem;
  box-shadow:0 0 0 18px rgba(245,247,250,.86),0 0 60px 54px rgba(245,247,250,.86)}
html[data-hero="v2"] .hero-text{padding-top:clamp(2rem,6vh,3.4rem)}
html[data-hero="v2"] .hero--zeichnung h1{font-size:clamp(1.9rem,min(3.4vw,6svh),2.9rem);line-height:1.05}
html[data-hero="v2"] .hero--zeichnung .lede{display:none}
html[data-hero="v2"] .hero-knoepfe{margin-top:1rem}

html[data-hero="v3"] .hero-zeichnung{left:auto;right:0;translate:none;width:min(60vw,130svh)}
html[data-hero="v3"] .hero--zeichnung{justify-content:center}
html[data-hero="v3"] .hero-text{padding-top:1rem;padding-bottom:calc(min(60vw,130svh) * .0731 + 2rem)}
html[data-hero="v3"] .hero-blatt{max-width:31rem}
html[data-hero="v3"] .hero--zeichnung h1{font-size:clamp(2.2rem,min(4.1vw,7svh),3.7rem);line-height:1.03}
html[data-hero="v3"] .hero--zeichnung .lede{max-width:44ch}
html[data-hero="v3"] .hero--zeichnung::after{content:"";position:absolute;left:0;right:0;bottom:calc(min(60vw,130svh) * .0731);height:calc(min(60vw,130svh) * .00303);background:#242933;pointer-events:none}

html[data-hero="v4"] .hero-zeichnung{left:0;translate:none;width:100vw;aspect-ratio:930/244}
html[data-hero="v4"] .hero-zeichnung .m-desk{display:none}
html[data-hero="v4"] .hero-zeichnung .m-mob{display:block}
html[data-hero="v4"] .hero-text{padding-top:clamp(1rem,3vh,2rem)}
html[data-hero="v4"] .hero-blatt{max-width:none;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:3rem;
  grid-template-areas:"kicker ." "h1 claim" "knoepfe lede";align-items:start}
html[data-hero="v4"] .hero-blatt .kicker{grid-area:kicker}
html[data-hero="v4"] .hero-blatt h1{grid-area:h1;font-size:clamp(2.2rem,min(3.6vw,6.5svh),3.2rem);line-height:1.04}
html[data-hero="v4"] .hero-blatt .claim{grid-area:claim;margin-top:.2rem}
html[data-hero="v4"] .hero-blatt .lede{grid-area:lede;margin-top:.6rem}
html[data-hero="v4"] .hero-blatt .hero-knoepfe{grid-area:knoepfe;margin-top:1rem;align-self:start}

html[data-hero="v5"] .hero--zeichnung{min-height:0;height:calc(72svh - var(--oben,96px));justify-content:center}
html[data-hero="v5"] .hero-zeichnung{left:auto;right:0;translate:none;width:min(54vw,105svh)}
html[data-hero="v5"] .hero-text{padding-top:0;padding-bottom:calc(min(54vw,105svh) * .0731 + 1rem)}
html[data-hero="v5"] .hero-blatt{max-width:32rem}
html[data-hero="v5"] .hero--zeichnung h1{font-size:clamp(2rem,min(3.5vw,6svh),3.2rem);line-height:1.04}
html[data-hero="v5"] .hero--zeichnung .lede{display:none}
html[data-hero="v5"] .hero--zeichnung::after{content:"";position:absolute;left:0;right:0;bottom:calc(min(54vw,105svh) * .0731);height:calc(min(54vw,105svh) * .00303);background:#242933;pointer-events:none}

html[data-hero="v6"]{--zb:min(100vw,112svh)}
@media (max-height:700px){html[data-hero="v6"]{--zb:min(100vw,100svh)}}
html[data-hero="v6"] .hero-zeichnung{width:var(--zb)}
html[data-hero="v6"] .hero-text{padding-top:clamp(1rem,3vh,2rem)}
html[data-hero="v6"] .hero-blatt{max-width:none;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:3rem;
  grid-template-areas:"kicker ." "h1 claim" "knoepfe .";align-items:start}
html[data-hero="v6"] .hero-blatt .kicker{grid-area:kicker}
html[data-hero="v6"] .hero-blatt h1{grid-area:h1;font-size:clamp(2rem,min(3.4vw,6svh),3rem);line-height:1.04}
html[data-hero="v6"] .hero-blatt .claim{grid-area:claim;margin-top:.2rem}
html[data-hero="v6"] .hero-blatt .lede{display:none}
html[data-hero="v6"] .hero-blatt .hero-knoepfe{grid-area:knoepfe;margin-top:.9rem;align-self:start}
html[data-hero="v6"] .hero--zeichnung::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--zb) * .0731);height:calc(var(--zb) * .00303);background:#242933;pointer-events:none}

html[data-hero="v7"] .hero-text{position:absolute;inset:0 auto 0 0;width:min(46%,40rem);max-width:none;margin:0;
  padding:1rem 2rem 1.5rem calc(max(2.5rem,(100vw - 1160px)/2 + 2.5rem));background:rgba(255,255,255,.9);
  border-right:1px solid var(--stahl);display:flex;flex-direction:column;justify-content:center;animation:none}
html[data-hero="v7"] .hero-blatt{background:none;border:0;box-shadow:none;padding:0;max-width:none}
html[data-hero="v7"] .hero--zeichnung h1{font-size:clamp(2rem,min(3.4vw,6svh),3rem)}
html[data-hero="v7"] .hero--zeichnung .lede{max-width:46ch}

html[data-hero="v8"] .hero-text{padding-top:clamp(.6rem,1.6vh,1rem)}
html[data-hero="v8"] .hero-blatt{max-width:min(66rem,100% - 3.5rem);margin-inline:auto;padding:.7rem 1.7rem 1rem;display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:2.5rem;grid-template-areas:"kicker ." "h1 claim" "knoepfe claim";align-items:start}
html[data-hero="v8"] .hero-blatt .kicker{grid-area:kicker}
html[data-hero="v8"] .hero-blatt h1{grid-area:h1;font-size:clamp(1.9rem,min(3.7vw,6.2svh),3.4rem);line-height:1.02;margin-top:.15rem}
html[data-hero="v8"] .hero-blatt .claim{grid-area:claim;margin-top:.3rem;font-size:clamp(1.05rem,1.6vw,1.3rem)}
html[data-hero="v8"] .hero-blatt .kicker{font-size:.85rem}
html[data-hero="v8"] .hero-knoepfe .cta{min-height:48px;padding:.6rem 1.3rem;font-size:1.05rem}
html[data-hero="v8"] .hero-knoepfe .tel{font-size:1.15rem}
html[data-hero="v8"] .hero-blatt .lede{display:none}
html[data-hero="v8"] .hero-blatt .hero-knoepfe{grid-area:knoepfe;margin-top:.5rem;align-self:start}
@media (max-height:700px){html[data-hero="v8"] .hero-blatt{padding:.7rem 1.2rem .8rem}}

@media (max-width:760px){
  html[data-hero] .hero-zeichnung{left:0;right:auto;translate:none;width:100vw;aspect-ratio:auto;height:46svh}
  html[data-hero] .hero-zeichnung .m-desk{display:none}
  html[data-hero] .hero-zeichnung .m-mob{display:block}
  html[data-hero] .hero--zeichnung::after{display:none}
  html[data-hero] .hero--zeichnung{justify-content:flex-start;height:auto;min-height:calc(100svh - var(--oben,88px));border:0}
  html[data-hero] .hero-text{position:relative;inset:auto;width:100%;max-width:var(--maxw);margin-inline:auto;
    padding:1.2rem clamp(1.25rem,4vw,2.5rem) 1.5rem;background:none;border:0;display:block;animation:none}
  html.js[data-hero] .hero-text{animation:hero-text-ein .55s ease-out .18s both}
  html[data-hero] .hero-blatt{display:block;max-width:none;padding:1.1rem 1.2rem 1.2rem;background:rgba(245,247,250,.92);
    border-left:3px solid var(--stahl);box-shadow:0 12px 40px rgba(36,41,51,.08)}
  html[data-hero] .hero--zeichnung h1{font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.08;text-shadow:none}
  html[data-hero] .hero--zeichnung .claim{max-width:none;text-shadow:none;font-size:1.02rem}
  html[data-hero] .hero--zeichnung .lede{display:none}
  html[data-hero="v6"] .hero-blatt{display:block}
  html[data-hero="v2"] .hero-blatt{box-shadow:0 12px 40px rgba(36,41,51,.08)}
}

html[data-hero="v8"] .hero-blatt{background:var(--papier)}

@media (min-width:761px){
  html[data-hero="v8"] .hero--zeichnung .halt{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  html[data-hero="v8"] .hero--zeichnung .halt .halt-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (max-width:760px){
  html[data-hero="v8"] .hero-text{padding-top:.9rem;padding-bottom:0}
  html[data-hero="v8"] .hero-blatt{padding:1.1rem 1.1rem 1.15rem;background:var(--weiss)}
  html[data-hero="v8"] .hero--zeichnung h1{font-size:clamp(1.9rem,8.4vw,2.6rem);line-height:1.04}
  html[data-hero="v8"] .hero--zeichnung .claim{font-size:1.05rem;margin-top:.5rem;color:var(--nacht)}
  html[data-hero="v8"] .hero--zeichnung .claim em{color:var(--nacht)}
  html[data-hero="v8"] .hero-knoepfe{margin-top:.9rem;gap:.6rem .9rem}
  html[data-hero="v8"] .hero-knoepfe .cta{flex:1 1 auto;justify-content:center;min-height:48px}
}

html[data-hero="v8"]:not(:has(.begleiter)):not(:has(.rufleiste)) body{padding-bottom:0}

@media (min-width:761px){
  html[data-klein]{--kw:min(80vw,130svh);--kh:80svh}
  html[data-klein] .hero--zeichnung{min-height:0;height:calc(var(--kh) - var(--oben,96px))}

  html[data-klein] .hero--zeichnung .halt{left:calc(50% - var(--kw) / 2 + .7rem);right:auto;top:auto;bottom:.8rem;border-color:var(--stahl)}
  html[data-klein] .hero-zeichnung{width:var(--kw)}
  html[data-klein] .hero-text{padding-top:clamp(1.6rem,4.5vh,2.8rem)}

  html[data-klein] .hero-text{max-width:none}
  html[data-klein] .hero-blatt{max-width:var(--kw);margin-inline:auto}

  html[data-klein] .hero--zeichnung::before,html[data-klein] .hero--zeichnung::after{content:"";position:absolute;pointer-events:none;
    bottom:calc(var(--kw) * var(--bl-b,.0746) - var(--kw) * var(--bl-h,.00303) / 2);
    height:calc(var(--kw) * var(--bl-h,.00303));width:calc((100% - var(--kw) * var(--bl-w,1)) / 2);
    background:var(--bl-c,#242933)}
  html[data-klein] .hero--zeichnung::before{left:0}
  html[data-klein] .hero--zeichnung::after{right:0}
  html[data-klein] .hero--zeichnung.bl-gemessen::before,html[data-klein] .hero--zeichnung.bl-gemessen::after{
    bottom:auto;top:var(--bl-y);height:var(--bl-px)}
  html[data-klein] .hero--zeichnung.bl-gemessen::before{width:var(--bl-l)}
  html[data-klein] .hero--zeichnung.bl-gemessen::after{width:var(--bl-r)}

  html[data-klein] .hero-zeichnung::before{content:"";position:absolute;inset:0 0 auto 0;height:56px;z-index:1;
    background:linear-gradient(var(--papier),rgba(245,247,250,0))}

  html[data-klein] #mehrwert{padding-top:7.5rem}

  html[data-nurhero] body{background:var(--papier)}
}

@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  html[data-klein]{--kw:min(96vw,130svh);--kh:72svh}
}