.logo-section-wrapper {
  position: relative;
  height: 100vh; /* genug Scroll-Raum für den langen Effekt */
  overflow: hidden;
}

.logo-background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.logo-mask-layer{
  height:100vh;
  position: fixed;
  inset: 0;
  /* background: #000;        /* SCHWARZ */
  mix-blend-mode: overlay; /* WICHTIG */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity:0;
}

.logo-svg {
  width: 100vw;
  height: auto;
  max-width: none;
  display: block;           /* wichtig für exakte Zentrierung */
  margin: 0 auto;           /* falls nötig */
  transform: translateZ(0);
    will-change: transform;
}

.mask-logo {
  fill: #fff; /* schwarz = Cut-Out → Bild scheint durch */
}

.logo-transform-layer {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  height:100vh;
}

.logo-final {
  height:100vh;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0; /* startet unsichtbar */
}

.final-logo {
  height: auto;
  width: 100vw;
}

.logo-dark-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0); /* startet komplett transparent */
  pointer-events: none;
  z-index: -1; /* direkt über dem Bild, unter den Logos */
  height:100vh;
}