/* Primärfarbe ändern */
:root {
  --primary-color: #FF5733;
  /* Deine gewünschte Primärfarbe */
  /*--background-color: #333333;
  --text-color: #000000; */
}

[data-theme="dark"] {
  --background-color: #333333;
  --text-color: #FFF;
}


/* Beispiel für eine benutzerdefinierte Klasse mit der angepassten Farbe */
.my-custom-text {
  color: var(--primary-color);
}

svg path {
  animation: wobble 1s infinite;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}


/* CSS für den Druck */
@media print {
  .no-print {
    display: none;
  }

  body {
    background-color: white !important;
    color: black;
    margin: 0;
    padding: 0;
  }


}


.marquee-wrapper {
  width: 100%;
  color: white;
  font-size: 1rem;
}

.marquee-text {
  overflow: clip;
}

.marquee-text-track {
  display: flex;
  padding-left: 10rem;
  gap: 10rem;
  width: max-content;
  animation: marquee-move-text var(--speed, 13s) linear infinite
    var(--direction, forwards);
}

.marquee-text p {
  border: 1px solid white;
  background-color: #141414;
  border-radius: 999px;
  padding: 1rem 2.5rem;
}


@keyframes marquee-move-text {
  to {
    transform: translateX(-50%);
  }
}

/* Optional: Pause animation on hover */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}