Logo und Hintergrund verwenden

Überschriften und Logo bleiben als HTML flexibel positionierbar.

<section class="mako-hero">
  <img class="mako-logo" src="/marketing/logos/makohub-wort-bild-farbe.png" alt="MAKOHUB">
  <div class="mako-content">
    <h1>Unternehmen verbinden. Prozesse beschleunigen.</h1>
    <p>Marktkommunikation. Vernetzt. Schnell. Intelligent.</p>
  </div>
</section>

.mako-hero {
  min-height: 70vh;
  padding: clamp(24px, 5vw, 72px);
  color: white;
  background:
    linear-gradient(90deg, rgba(6,27,45,.85), rgba(6,27,45,.1)),
    url('/marketing/bildwelt/03-leitzentrale.jpg') center / cover;
}
.mako-logo {
  width: min(330px, 80%);
  padding: 18px;
  background: white;
  border-radius: 12px;
}
.mako-content { max-width: 36rem; }
@media (max-width: 640px) {
  .mako-hero { background-position: 65% center; }
}

Die dunkle Logo-Datei hat einen eingebauten Hintergrund. Die farbige PNG ist transparent. Bilder nicht in ein anderes Seitenverhältnis verzerren.