.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero #logoBig {
  width: 65%;
  position: absolute;
  z-index: 100;
}

.hero .svg-container {
  height: 100%;
}

.hero #textBig {
  position: absolute;
  z-index: 111;
}

/* !!!!!!!!!!! TEXT ANIMATION !!!!!!!!!!!!*/
.svg-container {
  width: 100%;
  max-width: 65%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.svg-text {
  width: 100%;
  height: auto;
}

.hero path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke: black;
  fill: none;
}

.blobs {
  width: 35%;
  position: absolute;
}

.rbs {
  z-index: 0;
  width: 15%;
  position: absolute;
}

.dots {
  z-index: 0;
  width: 15%;
  position: absolute;
}

.hero-simple {
  position: relative;
  min-height: 60vh;
  padding: 4rem 0;

  background: url('/gfx/image/raumlichkeiten/spiel_wohnzimmer.webp') center/cover no-repeat;
}

/* dunkles Overlay für Lesbarkeit */
.hero-simple::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Inhalt über Overlay */
.hero-simple .container {
  position: relative;
  z-index: 2;
}

/* Text */
.hero-simple h1 {
  color: #fff;
}

.hero-simple .hero-sub {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  max-width: 40ch;
  margin: 0 auto;
}






@media screen and (max-width: 770px) {
  .hero #logoBig {
    width: 95%;
    position: absolute;
  }

  .svg-container {
    max-width: 100%;
  }

  .blobs {
    width: 75%;
    position: absolute;
  }

  .rbs {
    width: 50%;
    position: absolute;
  }

  .dots {
    width: 25%;
    position: absolute;
  }
}