/**
 * Innova-IQ — Ticker CSS (Slide-Effekt)
 * Externe Datei damit Deploy-Updates sie nicht überschreiben.
 * Eingebunden via wp_enqueue_style in functions.php.
 */

/* ============================================================
   KEYFRAMES — Slide von rechts rein / nach links raus
============================================================ */
@keyframes tickerSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes tickerSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

/* ============================================================
   TICKER-STRUKTUR (Slide statt Marquee/Laufband)
============================================================ */

/* Schienencontainer: nur 1 Item gleichzeitig sichtbar */
.ticker-track {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 42px;
}

/* Innen-Wrapper auf Block setzen (kein flex/nowrap mehr) */
.ticker-track-inner {
  display: block;
  white-space: normal;
  position: relative;
  height: 100%;
}

/* Alle Items absolut positioniert, standardmäßig unsichtbar */
.ticker-inner {
  display: block;
  position: relative;
  height: 100%;
}

.ticker-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aktives Item: sichtbar, zentriert */
.ticker-item.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Slide-in-Animation (von rechts) */
.ticker-item.slide-in {
  animation: tickerSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Slide-out-Animation (nach links) */
.ticker-item.slide-out {
  animation: tickerSlideOut 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Tag-Labels */
.ticker-item-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
}

.ticker-sep {
  color: #1D9E75;
  font-weight: 300;
  font-size: 16px;
  flex-shrink: 0;
}

.feed-tag-ki      { background: rgba(12, 68, 124, 0.9);   color: #60a5fa; }
.feed-tag-foerder { background: rgba(29, 158, 117, 0.2);  color: #1D9E75; }
.feed-tag-eu      { background: rgba(196, 154, 26, 0.15); color: #C49A1A; }