/* ── ASTRO-EREIGNIS-BANNER ───────────────────────────────────
   Dezenter, einzeiliger Ereignis-Ticker fuer die Hauptseite.
   Nutzt ausschliesslich die vorhandenen CSS-Variablen aus style.css
   (--bg-card, --border, --text-muted, --accent, ...), damit der
   Banner sich automatisch mit dem restlichen Seiten-Theme aendert. */

.nf-astro-banner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 38px;
  line-height: 38px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
}

.nf-astro-banner__track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  animation: nf-marquee 60s linear infinite;
  padding-left: 100%;
}

.nf-astro-banner:hover .nf-astro-banner__track,
.nf-astro-banner:focus-within .nf-astro-banner__track {
  animation-play-state: paused;
}

.nf-astro-banner__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0 1.75em;
  color: var(--text-muted);
}

.nf-astro-banner__item strong {
  color: var(--text);
  font-weight: 400;
}

.nf-astro-banner__date {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.nf-astro-banner__sep {
  color: var(--border-hover);
}

.nf-astro-banner__more {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-dark);
  transition: color var(--transition);
}
.nf-astro-banner__more:hover,
.nf-astro-banner__more:focus-visible {
  color: var(--accent);
}

.nf-astro-banner--empty,
.nf-astro-banner--loading {
  padding: 0 24px;
  color: var(--text-muted);
}

@keyframes nf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nf-astro-banner__track {
    animation: none;
    padding-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nf-astro-banner__track::-webkit-scrollbar { display: none; }
}

@media (max-width: 768px) {
  .nf-astro-banner { font-size: 12px; }
  .nf-astro-banner__item { padding: 0 1.25em; }
}