.anton-regular {
        font-family: "Anton", sans-serif;
        font-weight: 400;
        font-style: normal;
      }

      .lila {
        background-color: #4b3081;
      }
      .text-lila {
        color:#4b3081;
      }
      .text-socials {
        /* Textfarbe + Outline */
        color: #4b3081;
            text-shadow: 
        1px  1px 0 rgba(255,255,255,0.2),
       -1px -1px 0 rgba(255,255,255,0.2),
        1px -1px 0 rgba(255,255,255,0.2),
       -1px  1px 0 rgba(255,255,255,0.2);

        /* Responsive Größe */
        font-size: clamp(3rem, 8vw, 50rem);
        line-height: 1;

        /* Zentrierung im Container */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; /* muss Containerhöhe haben */

        /* Fade-Out Maske */
        mask-image: linear-gradient(
          to bottom,
          black 0%,
          black 5%,
          transparent 80%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          black 0%,
          black 5%,
          transparent 80%
        );

        /* Maske an Elementgröße anpassen */
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;

        z-index: 2;
      }

      header {
  position: relative;
  height: 100vh;
  background-image: url('../img/header2.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  inset: 0; /* oben, rechts, unten, links = 0 */
  background: linear-gradient(
    to bottom,
    rgba(29, 13, 61, 0.5) 0%,   /* lila, 60% Deckkraft */
    rgba(29, 15, 58, 0.5) 50%,  /* halbtransparent in der Mitte */
    rgba(35, 22, 59, 0.5) 80%    /* komplett transparent unten */
  );
  pointer-events: none; /* Overlay blockiert keine Klicks */
  z-index: 0; /* unter dem Inhalt */
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  background-image: url('./img/games.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
}


.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px white;
}
.outline-text-black {
  color: transparent;
  -webkit-text-stroke: 1px black;
}
.faded-hr {
  border: none;                 /* Standard‑hr‑Linie entfernen */
  height: 1px;                  /* Dicke der Linie */
  background: linear-gradient(
      to right,                /* Richtung */
      transparent 0%,          /* Links */
      gray 50%,                /* Mitte (oder deine Farbe) */
      transparent 100%         /* Rechts */
  );
}
    /* Container für die rotierenden Logos */
      .logo-rotator-mobile {
        position: relative;
        width: 250px; /* Breite an das breiteste SVG anpassen */
        height: 50px; /* Höhe an die höchste SVG anpassen */
      }

      /* Jedes einzelne rotierende Logo-Element */
      .logo-rotator-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        animation: fade-in-out 15s infinite; /* Die Gesamtdauer bleibt 15s für 5 Logos */
      }

      /* Die Verzögerung für jedes Element (3s pro Logo) */
      .logo-rotator-item:nth-child(2) {
        animation-delay: 3s;
      }
      .logo-rotator-item:nth-child(3) {
        animation-delay: 6s;
      }
      .logo-rotator-item:nth-child(4) {
        animation-delay: 9s;
      }
      .logo-rotator-item:nth-child(5) {
        animation-delay: 12s;
      }

      /* Keyframes für das schnellere Ein- und Ausblenden */
      @keyframes fade-in-out {
        0% {
          opacity: 0;
        }
        1% {
          opacity: 1; /* Schnelles Einblenden */
        }
        21% {
          opacity: 1; /* Bleibt lange sichtbar */
        }
        22% {
          opacity: 0; /* Schnelles Ausblenden */
        }
        100% {
          opacity: 0; /* Bleibt unsichtbar bis der nächste Zyklus beginnt */
        }
      }