/* ======================= Bildsystem =======================
   Eine Bauform fuer alle Seitenkoepfe, drei Stufen.
   Ein Abstandsmass fuer alles: --ab. Der Rahmen bildet sich zentriert
   innerhalb der Herorow mit --ab zum Rand, dann schwebt er nach rechts
   unten, bis seine Ecke oben links mit --ab ueber der Brotkrume sitzt,
   linksbuendig zur Textspalte. Rechts und unten laeuft er aus dem Bild.
   Linie in Electric Blue, Staerke gleich dem Signetstrich.
   Ebenen: Bild, Schleier, Rahmen, freigestellte Person, Text und Signet.
     buehne  Leit-, Themen-, Verbandsseiten: Rahmen bildet sich und schwebt
     band    Verfahrens-, Service-, Rechtsseiten: Rahmen bildet sich in Endlage
     zeile   Beitraege, Ratgeber: kurzer Strich, runde Enden
   Masse aus dem Beobachter (bvh_kopf_beobachter): --kopf-w, --kopf-h,
   --kopf-links (Spaltenkante), --kopf-oben (Oberkante Textblock).
   ========================================================= */
.bvh-filterdefs{position:absolute!important;width:0;height:0;overflow:hidden;pointer-events:none;}

.bvh-bild{display:block;position:absolute;inset:0;}
.bvh-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%;}
.bvh-motiv{position:absolute;inset:0;display:block;width:100%;height:100%;}

/* ---------- Masse ---------- */
.bvh-phero--bild{
  --bvh-linie:4px;                                    /* Signetstrich: 8 % der Kante */
  --bvh-sig:calc(var(--bvh-linie) * 12.5);
  --bvh-rahmen:var(--bvh-accent);
  --kw:var(--kopf-w, 100vw);                          /* Breite der Row */
  --sl:var(--kopf-links, max(var(--bvh-gutter), (100vw - var(--bvh-shell)) / 2));  /* Spaltenkante */
  --ab:max(48px, min(clamp(48px,4.4vw,68px), var(--sl)));  /* das eine Abstandsmass, nie groesser als die Spaltenkante */
  --pb:calc(2 * var(--ab) + var(--bvh-linie));                           /* Text zur Unterkante: Rahmen + Abstand */
  --rb:max(calc(var(--kw) - 2 * var(--ab)), calc(var(--kw) - var(--sl) + 3 * var(--bvh-linie)));  /* Rahmenbreite Endlage: laeuft rechts aus dem Bild */
  --rh:max(calc(var(--kopf-h, 560px) - 2 * var(--ab)), calc(var(--kopf-h, 560px) - var(--kopf-oben, 240px) + 3 * var(--ab)));  /* Rahmenhoehe Endlage: laeuft unter die naechste Row */
  position:relative;z-index:3;overflow:hidden;
  background:var(--bvh-deep);
  display:flex;align-items:flex-end;
  padding:clamp(96px,9vw,140px) var(--bvh-gutter) var(--pb);
}
@media(min-width:1400px){.bvh-phero--bild{--bvh-linie:5px;}}
.bvh-phero--buehne{min-height:clamp(500px,46vw,660px);}
.bvh-phero--band{min-height:clamp(380px,33vw,490px);}
.bvh-phero--zeile{min-height:clamp(360px,32vw,470px);}

/* ---------- Bild und Schleier ---------- */
.bvh-phero--bild .bvh-phero__flaeche{position:absolute;inset:0;overflow:hidden;}
.bvh-phero--bild .bvh-bild img{filter:url(#bvh-duo);}
.bvh-js .bvh-phero--bild .bvh-bild img{transform:scale(1.07);opacity:0;transition:transform 3s var(--bvh-ease),opacity 1s linear;}
.bvh-js .bvh-phero--bild.is-in .bvh-bild img{transform:scale(1);opacity:1;}
.bvh-phero__schleier{position:absolute;inset:0;background:linear-gradient(94deg,rgba(0,23,24,.97) 0%,rgba(0,35,37,.94) 28%,rgba(0,35,37,.54) 50%,rgba(0,35,37,.12) 72%,rgba(0,25,255,.16) 100%);}
.bvh-phero__schleier::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,23,24,.46),rgba(0,23,24,0) 38%);}

/* ---------- Spalte: Text und Signet mit --ab innerhalb des Rahmens ---------- */
.bvh-phero--bild .bvh-phero__inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,4vw,64px);align-items:end;}
.bvh-phero--bild .bvh-phero__text{position:relative;min-width:0;max-width:min(60ch,62%);}
.bvh-phero--buehne .bvh-phero__text,.bvh-phero--band .bvh-phero__text{margin-left:calc(var(--ab) + var(--bvh-linie));}
.bvh-phero--bild .bvh-phero__satz{position:relative;z-index:1;}
.bvh-phero--bild .bvh-phero__satz > *{max-width:100%;overflow-wrap:break-word;}
.bvh-phero--bild h1{color:#fff;}
.bvh-phero--bild .bvh-phero__lead{color:rgba(255,255,255,.88);}
.bvh-phero--bild .bvh-crumbs,.bvh-phero--bild .bvh-crumbs a{color:rgba(255,255,255,.72);}
.bvh-phero--bild .bvh-crumbs a:hover{color:#fff;}
.bvh-phero--bild .bvh-crumbs span[aria-hidden]{opacity:.45;}
.bvh-phero--bild .bvh-article__meta,.bvh-phero--bild .bvh-article__meta span{color:rgba(255,255,255,.8);margin-top:22px;}
.bvh-phero--bild .bvh-eyebrow{color:rgba(255,255,255,.72);margin:22px 0 6px;}
.bvh-phero--bild .bvh-marke--kopf{position:relative;z-index:1;justify-self:end;align-self:end;flex:none;max-width:none;width:var(--bvh-sig);height:var(--bvh-sig);margin-right:calc(var(--ab) + var(--bvh-linie) - var(--bvh-sig) * .19);margin-bottom:calc(var(--bvh-sig) * -.04);}
.bvh-phero--zeile .bvh-marke--kopf{margin-right:calc(var(--bvh-sig) * -.15);}
.bvh-phero--bild .bvh-marke--kopf path{stroke:#fff;}

/* ---------- Rahmen: eigene Ebene der Row, Endlage an der Spalte ---------- */
.bvh-phero__rahmen{
  position:absolute;display:block;pointer-events:none;overflow:visible;z-index:1;max-width:none;max-height:none;
  left:var(--sl);
  top:calc(var(--kopf-oben, 240px) - var(--ab) - var(--bvh-linie));
  width:var(--rb);
  height:var(--rh);
}
.bvh-phero__rahmen rect{
  fill:none;stroke:var(--bvh-rahmen);stroke-width:var(--bvh-linie);stroke-linejoin:miter;stroke-linecap:square;
  x:calc(var(--bvh-linie) / 2);y:calc(var(--bvh-linie) / 2);
  width:calc(100% - var(--bvh-linie));height:calc(100% - var(--bvh-linie));
}
/* bilden */
.bvh-js .bvh-phero__rahmen rect{stroke-dasharray:1;stroke-dashoffset:1;}
.bvh-js .bvh-phero--bild.is-in .bvh-phero__rahmen rect{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--bvh-ease) .35s;}
/* Buehne: zuerst zentriert in der Row mit --ab zu allen Kanten, dann nach rechts unten schweben */
.bvh-js .bvh-phero--buehne .bvh-phero__rahmen{
  width:calc(var(--kw) - 2 * var(--ab));height:calc(var(--kopf-h, 560px) - 2 * var(--ab));
  transform:translate(calc(-1 * max(0px, var(--sl) - var(--ab))), calc(-1 * (var(--kopf-oben, 240px) - 2 * var(--ab) - var(--bvh-linie))));
}
.bvh-js .bvh-phero--buehne.is-in .bvh-phero__rahmen{
  width:var(--rb);height:var(--rh);transform:translate(0,0);
  transition:transform 1.3s cubic-bezier(.45,0,.15,1) 1.75s,width 1.3s cubic-bezier(.45,0,.15,1) 1.75s,height 1.3s cubic-bezier(.45,0,.15,1) 1.75s;
}

/* ---------- Freigestellte Person: ueber dem Rahmen, unter dem Text ---------- */
.bvh-phero__person{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.bvh-phero__person .bvh-bild{position:absolute;inset:0;}
.bvh-phero__person .bvh-bild img{filter:url(#bvh-duo);}
.bvh-phero__person .bvh-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(94deg,rgba(0,23,24,.97) 0%,rgba(0,35,37,.94) 28%,rgba(0,35,37,.54) 50%,rgba(0,35,37,.12) 72%,rgba(0,25,255,.16) 100%),linear-gradient(to top,rgba(0,23,24,.46),rgba(0,23,24,0) 38%);
  -webkit-mask-image:var(--person-maske);mask-image:var(--person-maske);
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 0%;mask-position:50% 0%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.bvh-js .bvh-phero--bild .bvh-phero__person .bvh-bild{transform:scale(1.07);opacity:0;transition:transform 3s var(--bvh-ease),opacity 1s linear;}
.bvh-js .bvh-phero--bild.is-in .bvh-phero__person .bvh-bild{transform:scale(1);opacity:1;}
.bvh-js .bvh-phero--bild .bvh-phero__person .bvh-bild img{transform:none;opacity:1;transition:none;}

/* ---------- Zeile: kurzer Strich, beide Enden rund ---------- */
.bvh-phero--zeile .bvh-phero__satz::before{content:"";display:block;width:calc(var(--bvh-sig) * 1.1);height:var(--bvh-linie);border-radius:var(--bvh-linie);background:var(--bvh-rahmen);margin-bottom:clamp(20px,2vw,28px);}

/* ---------- Textaufbau ---------- */
.bvh-js .bvh-phero--bild .bvh-phero__satz > *{opacity:0;transform:translateY(14px);transition:opacity .8s var(--bvh-ease),transform 1s var(--bvh-ease);}
.bvh-js .bvh-phero--bild .bvh-phero__satz > :nth-child(2){transition-delay:.1s;}
.bvh-js .bvh-phero--bild .bvh-phero__satz > :nth-child(3){transition-delay:.2s;}
.bvh-js .bvh-phero--bild .bvh-phero__satz > :nth-child(4){transition-delay:.3s;}
.bvh-js .bvh-phero--bild .bvh-phero__satz > :nth-child(5){transition-delay:.4s;}
.bvh-js .bvh-phero--bild.is-in .bvh-phero__satz > *{opacity:1;transform:none;}

/* ---------- Markenmotiv statt Foto ---------- */
.bvh-phero--motiv .bvh-phero__schleier{background:linear-gradient(94deg,rgba(0,23,24,.90) 0%,rgba(0,35,37,.74) 30%,rgba(0,35,37,.30) 58%,rgba(0,35,37,.06) 80%,rgba(0,25,255,.10) 100%);}
.bvh-phero--motiv .bvh-phero__schleier::after{background:linear-gradient(to top,rgba(0,23,24,.34),rgba(0,23,24,0) 30%);}

/* ---------- Abschnittsnavigation tritt erst nach dem Kopf auf ---------- */
.bvh-secnav{transition:opacity .45s var(--bvh-ease),visibility .45s;}
.bvh-kopf-im-blick .bvh-secnav{opacity:0;visibility:hidden;}

/* ---------- Schmale Ansichten ---------- */
@media(max-width:1100px){
  .bvh-phero--bild .bvh-phero__text{max-width:min(58ch,70%);}
}
@media(max-width:820px){
  .bvh-phero--bild{--bvh-linie:4px;padding:clamp(60px,12vw,86px) var(--bvh-gutter) clamp(30px,6vw,42px);}
  .bvh-phero--buehne,.bvh-phero--band,.bvh-phero--zeile{min-height:clamp(360px,82vw,480px);}
  .bvh-phero--bild .bvh-phero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,32px);}
  .bvh-phero--bild .bvh-phero__text,.bvh-phero--buehne .bvh-phero__text,.bvh-phero--band .bvh-phero__text{max-width:100%;margin-left:0;}
  .bvh-phero__rahmen,.bvh-phero__person{display:none;}
  .bvh-phero--bild .bvh-phero__satz::before{content:"";display:block;width:calc(var(--bvh-sig) * 1.1);height:var(--bvh-linie);border-radius:var(--bvh-linie);background:var(--bvh-rahmen);margin-bottom:clamp(20px,4vw,26px);}
  .bvh-phero--bild .bvh-marke--kopf,.bvh-phero--zeile .bvh-marke--kopf{justify-self:start;margin:0;}
  .bvh-phero__schleier{background:linear-gradient(to top,rgba(0,23,24,.94) 0%,rgba(0,35,37,.82) 38%,rgba(0,35,37,.38) 70%,rgba(0,25,255,.16) 100%);}
  .bvh-phero__schleier::after{background:none;}
  .bvh-phero--motiv .bvh-phero__schleier{background:linear-gradient(to top,rgba(0,23,24,.88) 0%,rgba(0,35,37,.66) 44%,rgba(0,35,37,.20) 78%,rgba(0,25,255,.12) 100%);}
}

@media(prefers-reduced-motion:reduce){
  .bvh-js .bvh-phero--bild .bvh-bild img{transform:none;opacity:1;transition:none;}
  .bvh-js .bvh-phero--bild .bvh-phero__person .bvh-bild{transform:none;opacity:1;transition:none;}
  .bvh-js .bvh-phero--bild .bvh-phero__satz > *{opacity:1;transform:none;transition:none;}
  .bvh-js .bvh-phero__rahmen rect{stroke-dashoffset:0;transition:none;}
  .bvh-js .bvh-phero--buehne .bvh-phero__rahmen{width:var(--rb);height:var(--rh);transform:none;transition:none;}
}