/* Hero variants B–D for the team photo (preview pages in _varianten/ only). */
.br-sm{display:none}

/* B — cinematic: centred copy, wide panorama below, stats overlap its bottom */
.hero--b{padding:48px 0 0;text-align:center}
.hero--b .wrap{display:block}
.hero--b .hero-text{max-width:860px;margin:0 auto}
.hero--b p.sub{margin-left:auto;margin-right:auto;max-width:720px}
.hero--b .hero-cta{justify-content:center;margin-bottom:0}
.hb-pano{position:relative;margin:38px 0 0;z-index:1}
.hb-pano>img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 30%}
.hb-pano::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(#0d2543,rgba(13,37,67,0));z-index:1;pointer-events:none}
.hb-pano .hero-badge{left:auto;bottom:auto;top:26px;right:max(20px,calc((100vw - var(--wrap)) / 2 + 20px))}

/* C — immersive: photo on the right melts into the navy (masked, no frame) */
.hero--c{padding:90px 0 150px}
.hero--c .wrap{display:block}
.hero--c .hero-text{position:relative;z-index:2;max-width:520px}
.hero--c .eyebrow{background:#12345a}
.hc-photo{position:absolute;top:0;right:0;bottom:110px;width:60%;margin:0;z-index:1}
.hc-photo>img{width:100%;height:100%;object-fit:cover;object-position:64% 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(0deg,transparent,#000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(0deg,transparent,#000 22%);
  mask-composite:intersect}

/* D — light: bright hero, framed photo on a blue offset card */
.hero--d{background:radial-gradient(900px 520px at 85% 0%,#d9eefc 0%,transparent 62%),linear-gradient(180deg,#f7fbff,#e9f3fb);color:var(--ink)}
.hero--d::before{background-image:radial-gradient(rgba(14,116,184,.12) 1px,transparent 1px);opacity:1}
.hero--d h1{color:var(--ink)}
.hero--d h1 .accent{color:var(--blue)}
.hero--d p.sub{color:var(--muted)}
.hero--d .hero-chips span{color:var(--ink)}
.hero--d .hero-chips svg{color:#1fae5b}
.hd-frame{position:relative;margin:0 0 0 18px;flex:1;animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}
.hd-frame::before{content:"";position:absolute;inset:28px -20px -20px 28px;border-radius:32px;background:linear-gradient(135deg,var(--blue),var(--blue-d));z-index:0}
.hd-frame>img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;border-radius:28px;border:6px solid #fff;box-shadow:0 30px 60px rgba(16,40,70,.22)}
.hero--d .hero-badge{left:-24px;bottom:-24px}

@media(max-width:980px){
  .br-sm{display:inline}
  .hero--b{padding-top:40px}
  .hb-pano{margin-top:34px}
  .hb-pano>img{aspect-ratio:4/3;object-position:66% 50%}
  .hb-pano .hero-badge{display:none}
  .hero--c{padding:0 0 110px}
  .hero--c .hero-text{max-width:none}
  .hc-photo{position:relative;width:auto;bottom:auto;margin:0 0 26px}
  .hc-photo>img{height:auto;aspect-ratio:4/3;object-position:66% 50%;
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent);mask-image:linear-gradient(180deg,#000 68%,transparent)}
  .hero--d{padding-top:28px}
  .hd-frame{margin:0 8px 48px}
  .hd-frame::before{inset:16px -10px -10px 16px;border-radius:24px}
  .hd-frame>img{border-width:4px;border-radius:22px}
  .hero--d .hero-badge{left:50%;bottom:-26px;transform:translateX(-50%)}
}