/* Eingefasst auf Inhaltsbreite (wie /presse/): zentriert, max 1140px, runde Ecken, etwas Luft oben.
   Greift auch in Elementor-Full-Width-Sections (max-width+margin:auto zentriert den Balken). */
.ssg-hero{position:relative;width:100%;max-width:1140px;margin:clamp(16px,3vw,30px) auto 0;
  height:clamp(220px,38vw,420px);overflow:hidden;color:#fff;background:var(--ssg-navy,#0c1f3f);
  border-radius:16px;isolation:isolate}
.ssg-hero__slides,.ssg-hero__slide{position:absolute;inset:0}
/* background-position:center 40% statt center → Gesichts-Band der Gruppenfotos (4:3) sichtbar,
   sonst schneidet der breite Banner-Crop die oberen Köpfe weg. Ken-Burns-Zoom gezähmt
   (1.02→1.06 statt 1.04→1.12), damit der Zoom die Gesichter nicht wieder aus dem Bild schiebt. */
.ssg-hero__slide{background-size:cover;background-position:center 40%;opacity:0;transform:scale(1.02);
  transition:opacity 1.2s ease;will-change:opacity,transform}
.ssg-hero__slide.is-active{opacity:1;animation:ssg-hero-kenburns var(--ssg-hero-zoom,12s) ease-out forwards}
@keyframes ssg-hero-kenburns{from{transform:scale(1.02)}to{transform:scale(1.06)}}
.ssg-hero__overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(8,18,42,.96) 0%,rgba(8,18,42,.30) 52%,rgba(8,18,42,.50) 100%)}
.ssg-hero__content{position:absolute;left:clamp(20px,5vw,56px);bottom:clamp(34px,5vw,56px);z-index:3;max-width:80%}
.ssg-hero__kicker{display:block;font-family:"Lato",sans-serif;font-size:clamp(.66rem,1.4vw,.78rem);letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.88);margin-bottom:.5rem;text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* Lato = projektweite Überschriften-Schrift (Elementor-Kit), damit der Titel zur Seite passt. */
.ssg-hero__title{margin:0;font-family:"Lato",sans-serif;font-weight:800;line-height:1.02;font-size:clamp(1.7rem,5vw,3rem);
  text-shadow:0 3px 22px rgba(0,0,0,.5)}
.ssg-hero__dots{position:absolute;right:clamp(16px,3vw,26px);bottom:clamp(20px,3vw,30px);z-index:3;display:flex;align-items:center;gap:7px}
/* Hohe Spezifität + appearance:none, sonst stylt Elementor/Theme die <button> als rosa/gelbe Buttons (aufgeblasen). */
.ssg-hero .ssg-hero__dots .ssg-hero__dot{
  -webkit-appearance:none;appearance:none;
  width:9px;height:9px;min-width:0;min-height:0;padding:0;margin:0;
  border:0;box-shadow:none;outline:none;border-radius:50%;line-height:0;
  background-color:rgba(255,255,255,.5);cursor:pointer;
  transition:width .3s ease,background-color .3s ease}
.ssg-hero .ssg-hero__dots .ssg-hero__dot.is-active{
  background-color:#fff;width:22px;border-radius:5px}
.ssg-hero .ssg-hero__dots .ssg-hero__dot:hover,
.ssg-hero .ssg-hero__dots .ssg-hero__dot:focus,
.ssg-hero .ssg-hero__dots .ssg-hero__dot:focus-visible{
  background-color:#fff;box-shadow:none;outline:none}
.ssg-hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:clamp(28px,4vw,46px);display:block}
.ssg-hero__wave path{fill:var(--ssg-hero-wave-fill,#f4f6fb)}
@media (prefers-reduced-motion:reduce){
  .ssg-hero__slide{transition:none}
  .ssg-hero__slide.is-active{animation:none;transform:none}
}