/* === Basis: Ticker === */
.news-ticker {
  background: #007cba;
  color: #ffffff;
  font-family: "Roboto", Sans-Serif;
  font-size: 1.4em;
  text-transform: uppercase;
  line-height: 1;
  padding: 15px 0;
  user-select: none;
  overflow: visible;
  white-space: normal;
}

.news-ticker.has-ticker {
  overflow: hidden;
  white-space: nowrap;
}

.news-ticker .ticker-wrap { 
  display: block; 
  overflow: hidden; 
}

.news-ticker.has-ticker .ticker-move {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-move var(--ticker-duration, 20s) linear infinite;
  will-change: transform;
}

.news-ticker .ticker-move.no-anim { 
  animation: none !important; 
  transform: translateX(0); 
}

.news-ticker .ticker-move.paused { 
  animation-play-state: paused; 
}

.news-ticker .ticker-item { 
  display: inline-block; 
  margin: 0; 
}

.news-ticker .ticker-sep { 
  display: inline-block; 
  padding: 0 1rem; 
  opacity: .6; 
}

@keyframes ticker-move { 
  0% { transform: translateX(0) } 
  100% { transform: translateX(-50%) } 
}

.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  margin: -1px; 
  padding: 0; 
  border: 0;
  clip: rect(0 0 0 0); 
  clip-path: inset(50%); 
  overflow: hidden; 
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .news-ticker.has-ticker .ticker-move { 
    animation: none; 
    transform: none; 
  }
}

/* === Toggle: außerhalb, darunter zentriert === */
.news-ticker-controls {
  display: flex;
  justify-content: center;
  margin-top: .5rem;
}

.news-ticker-controls .ticker-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  text-shadow: none;
  background-image: none;
  transition: opacity 0.2s ease;
}

.news-ticker-controls .ticker-toggle:hover {
  /* Hover-Effekt wird über PHP gesetzt */
}

.news-ticker-controls .ticker-toggle:focus-visible {
  /* Focus-Outline wird über PHP gesetzt */
}

.news-ticker-controls .ticker-toggle svg {
  width: 60%;
  height: 60%;
  display: block;
  /* SVG-Farbe wird über PHP gesetzt */
}