main{
  margin: auto;
  position: relative;
}

.main-section{
  background-color: #0d0d0d;
  height: calc(100vh - 150px);
}

.logo{
  height: calc(100vh - 150px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.logo svg{
  width: 40%; 
}

.logo-image,
.logo-hover {
  position: absolute;
  width: 100%;
  height: auto;
}

.logo-hover {
  pointer-events: all;
  cursor: pointer;
  transition: fill 0.3s ease;
}

/* Standardfarben überschreiben (optional) */
#D:hover,
#A:hover,
#Web:hover {
  /* fill: #AF1737; */
  fill: #ffffff;
  cursor: pointer;
}

#D,
#A,
#Web {
  transition: fill 0.5s ease-in-out, transform 0.3s ease-in-out;
  transform-origin: static;
}


  /* RESPONSIV */

/* „sm“ – größere Smartphones / portrait */
@media (max-width: 768px) { 
  .main-section{
    height: calc(100vh - 80px);
  }

  .logo{
    height: calc(100vh - 80px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }


}

/* „md“ – Tablets, kleinere Tablets */
@media (min-width: 768px) { }

/* „lg“ – Laptops, größere Tablets */
@media (min-width: 1024px) { }

/* „xl“ – klassische Desktop-Breiten */
@media (min-width: 1280px) { }

/* „xxl“ – große Desktop-/Ultra-Wide Screens */
@media (min-width: 1440px) { }