/* ==========================================================================
   Werks Makler GmbH – Bild-Hero für Formularseiten (wm-landing.css)
   Pfad: /wm-shared/wm-hero-bild.css · NEUE Datei, ergänzt wm-base.css + wm-landing.css + wm-form.css
   Version 1.0 · 11.11.2026 (Entwurf Lenny, NOCH NICHT FREIGEGEBEN)
   Gleiche Gestaltung wie der Produktseiten-Hero 1.1 (wm-product.css, live seit 11.11.2026):
     Variante A (.wm-heroBild--a) = Hintergrundbild mit dunklem Petrol-Verlauf (--c-deep #173d43)
     Variante B (.wm-heroBild--b) = Petrol-Verlauf, Text links, Foto rechts (ohne Hero-Karte – Formularseiten haben keine)
   Wirkt NUR auf <section class="wm-hero wm-heroBild …">. Seiten ohne diese Klasse bleiben unverändert;
   wm-landing.css, wm-form.css und wm-form.js werden nicht verändert. Formular, Felder und Ablauf unverändert.
   Mobil (≤ 600 px) gilt weiter die Bestandsregel aus wm-landing.css: „Erst informieren“ und Vertrauenspunkte
   ausgeblendet, damit das Formular schnell erreichbar bleibt.
   Markup (statische Seiten und wm-seite.js identisch):
     <section class="wm-hero wm-heroBild wm-heroBild--a|b">
       [A] <figure class="wm-heroBild__bg"><picture><img …></picture></figure>
       <div class="wm-shell wm-heroBild__grid"><div class="wm-heroBild__text"> eyebrow · h1 · lead · cta · trust (Bestand) </div>
       [B]   <figure class="wm-heroBild__foto"><picture><img …></picture><figcaption>© …</figcaption></figure>
       </div>
       [A] <p class="wm-heroBild__credit">© …</p>
     </section>
   ========================================================================== */
.wm-hero.wm-heroBild{position:relative;isolation:isolate;overflow:hidden;width:auto;margin:0;padding:84px 0 88px;text-align:left;color:#fff;background:linear-gradient(145deg,#2e6e7a 0%,#5aa4ae 55%,#7bbcc5 100%)}
.wm-heroBild figure{margin:0}
.wm-heroBild picture{display:block}
.wm-heroBild__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
.wm-heroBild__grid>*{min-width:0}

/* Text auf Petrol: weiß, Bestandstypografie aus wm-landing.css bleibt (Manrope 800, Größen) */
.wm-hero.wm-heroBild h1{color:#fff;margin:0 0 18px;max-width:760px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.wm-hero.wm-heroBild h1 span{color:#d3eef2}
.wm-hero.wm-heroBild .wm-lead{color:rgba(255,255,255,.93);margin-inline:0;text-align:left;max-width:640px}
.wm-hero.wm-heroBild .wm-lead strong{color:#fff}
.wm-heroBild .wm-eyebrow{color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:7px 13px;border-radius:999px;letter-spacing:.1em}
.wm-heroBild .wm-hero__cta{justify-content:flex-start}
.wm-heroBild .wm-btn--pri{background:#fff;color:var(--c-deep);box-shadow:0 10px 30px rgba(10,40,48,.22)}
.wm-heroBild .wm-btn--pri:hover{background:#eaf4f6}
.wm-heroBild .wm-btn--ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.wm-heroBild .wm-btn--ghost:hover{background:rgba(255,255,255,.2)}
.wm-heroBild .wm-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wm-heroBild .wm-trust{justify-content:flex-start;color:rgba(255,255,255,.92)}
.wm-heroBild .wm-trust li::before{background:#fff}

/* Variante A: Hintergrundbild, Verlauf von links für gut lesbare Schrift */
.wm-hero.wm-heroBild--a{background:#173d43;padding:104px 0 108px}
.wm-heroBild__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.wm-heroBild__bg picture{height:100%}
.wm-heroBild__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.wm-heroBild__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,61,67,.94) 0%,rgba(23,61,67,.86) 36%,rgba(32,86,95,.55) 64%,rgba(46,110,122,.22) 100%),linear-gradient(0deg,rgba(23,61,67,.45) 0%,rgba(23,61,67,0) 38%)}
.wm-heroBild--a h1,.wm-heroBild--a .wm-lead{text-shadow:0 1px 22px rgba(10,34,38,.35)}
.wm-heroBild--a .wm-heroBild__text{max-width:700px}
.wm-heroBild__credit{position:absolute;right:14px;bottom:10px;margin:0;font-size:11px;line-height:1.3;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* Variante B: Text links, Foto rechts (3:2, Radius 28 px, Schatten), Nachweis klein unter dem Foto */
.wm-heroBild--b .wm-heroBild__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.wm-hero.wm-heroBild--b h1{font-size:clamp(2.1rem,3.6vw,3.3rem)}  /* halbe Breite: lange Wörter („Rechtsschutzversicherung“) passen */
.wm-heroBild__foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%;border-radius:28px;background:#2e6e7a;box-shadow:0 28px 60px rgba(14,54,62,.28)}
.wm-heroBild__foto figcaption{margin-top:8px;font-size:11px;line-height:1.3;color:rgba(255,255,255,.8);text-align:right}

/* Abstand zur folgenden Formularkarte (wm-form.css: .wm-formwrap{padding-top:8px}) */
.wm-heroBild+.wm-formwrap{padding-top:44px}

@media (max-width:960px){
  .wm-hero.wm-heroBild{padding:64px 0 68px}
  .wm-hero.wm-heroBild--a{padding:72px 0 80px}
  .wm-heroBild__bg::after{background:linear-gradient(180deg,rgba(23,61,67,.78) 0%,rgba(23,61,67,.86) 45%,rgba(23,61,67,.94) 100%)}
  .wm-heroBild--b .wm-heroBild__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .wm-heroBild__foto{max-width:640px}
}
@media (max-width:600px){
  .wm-hero.wm-heroBild{padding:32px 0 36px}
  .wm-hero.wm-heroBild--a{padding:40px 0 44px}
  .wm-hero.wm-heroBild h1{margin-bottom:12px}
  .wm-heroBild .wm-eyebrow{font-size:.68rem;padding:6px 11px}
  .wm-heroBild--b .wm-heroBild__grid{gap:22px}
  .wm-heroBild__foto img{aspect-ratio:3/1;border-radius:20px}   /* flaches Bildband: Formular bleibt im ersten Bildschirm (390 px: Formularbeginn ~710 px) */
  .wm-heroBild__foto figcaption{font-size:10.5px}
  .wm-heroBild__credit{right:10px;bottom:8px;font-size:10px}
  .wm-heroBild+.wm-formwrap{padding-top:24px}
}