/* ============================================================
   07-logos.css — NUR das Meeresfoto-Band als großer,
   wellenförmiger Übergang (Größe wie Mockup).
   Kein Text, keine blaue Fläche, keine Logo-Overrides.
   Die Logo-Marquee kommt unverändert aus 01-onepager.css.
   ============================================================ */

/* alte gezeichnete SVG-Welle aus */
.ao2-wave-divider{display:none !important}

/* Großes Meeresfoto-Band, wellenförmig oben + unten.
   background-size: contain-artig über width -> mehr Meer sichtbar,
   das Foto wird als Ganzes gezeigt statt stark beschnitten. */
.ao2-wave-photo{
  width:100%;
  height:440px;
  margin-top:40px;
  background-image:url('wave-band.jpg?v=1');
  background-size:100% auto;      /* volle Breite, Höhe frei -> mehr Bild sichtbar */
  background-position:center 35%;
  background-repeat:no-repeat;
  background-color:#204a5e;        /* falls Foto nicht ganz füllt: Ocean-Ton drunter */

  /* Geschwungene Ober- UND Unterkante über SVG-Maske */
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0,16 C25,40 45,-4 65,12 C82,25 92,4 100,14 L100,84 C78,98 58,60 38,72 C20,82 10,94 0,78 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0,16 C25,40 45,-4 65,12 C82,25 92,4 100,14 L100,84 C78,98 58,60 38,72 C20,82 10,94 0,78 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

@media (max-width:860px){
  .ao2-wave-photo{height:280px;margin-top:32px}
}