/* ---------- BEB ---------- */
.beb-visual{position:relative;overflow:hidden;border-radius:var(--radius);min-height:420px;display:grid;place-items:center;padding:40px;text-align:center;background:var(--deep) url('img/2026/07/FB_IMG_1664983682131.jpg') center/cover no-repeat}
.beb-slides{position:absolute;inset:0}
.beb-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;animation:bebFade 21s linear infinite;will-change:opacity}
.beb-slide:nth-child(1){animation-delay:0s}
.beb-slide:nth-child(2){animation-delay:-14s}
.beb-slide:nth-child(3){animation-delay:-7s}
@keyframes bebFade{0%{opacity:1}28.5%{opacity:1}33.3%{opacity:0}95.2%{opacity:0}100%{opacity:1}}
.beb-visual::after{content:"";position:absolute;inset:0;background:rgba(12,20,6,.68)}
.beb-visual-inner{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.beb-slide{animation:none}.beb-slide:nth-child(1){opacity:1}}
.beb-visual img{max-width:280px}


.hero-media{position:relative;overflow:hidden;width:100%;height:min(70vh,640px);min-height:340px;background:#EFEFEC}
/* Ueberblendung + Ken-Burns-Effekt.
   Beide Animationen laufen 18s und teilen sich denselben Versatz, damit
   Zoom und Sichtbarkeit synchron bleiben. Sichtbar ist ein Bild von
   94,4 % bis 33,3 % des Zyklus, also rund 7 Sekunden.
   Zoomtiefe zentral ueber --ken-zoom.                                   */
.hero-media{--ken-zoom:1.08}
.hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
 opacity:0;transform-origin:50% 50%;
 animation:heroFade 18s linear infinite, heroKenIn 18s linear infinite;
 will-change:opacity,transform;backface-visibility:hidden}
.hero-slide:nth-child(1){animation-delay:0s,0s}
.hero-slide:nth-child(2){animation-delay:-12s,-12s;animation-name:heroFade,heroKenOut}
.hero-slide:nth-child(3){animation-delay:-6s,-6s}
@keyframes heroFade{0%{opacity:1}27.7%{opacity:1}33.3%{opacity:0}94.4%{opacity:0}100%{opacity:1}}
/* langsam hineinfahren */
@keyframes heroKenIn{
  0%{transform:scale(1.0115)}
  33.3%{transform:scale(var(--ken-zoom))}
  33.4%{transform:scale(1)}
  94.4%{transform:scale(1)}
  100%{transform:scale(1.0115)}
}
/* langsam herausfahren, zur Abwechslung beim zweiten Bild */
@keyframes heroKenOut{
  0%{transform:scale(1.0685)}
  33.3%{transform:scale(1)}
  33.4%{transform:scale(var(--ken-zoom))}
  94.4%{transform:scale(var(--ken-zoom))}
  100%{transform:scale(1.0685)}
}
@media (prefers-reduced-motion:reduce){.hero-slide{animation:none;transform:none}.hero-slide:nth-child(1){opacity:1}}
.hero-intro{padding:56px 0 24px}
.hero-intro h1{margin-bottom:.35em}
.hero-intro p{font-size:17px;max-width:60ch}
.hero-actions{margin-top:26px}
.hero-social{margin-top:30px}
.hero-social a{color:var(--ink);opacity:1}
.hero-social a:hover{color:var(--green-dark)}