/* 1. Der Container für den Beitrag (z.B. deine Grid-Zelle) */
.post-card {
  position: relative; /* Wichtig: Bildet den Anker für die absolute Positionierung */
  overflow: hidden;   /* Schneidet den Ticker an den Bildrändern sauber ab */
  display: flex;      /* Verhindert unschöne Abstände unter dem Bild */
}

.post-image {
height: auto;
  display: block;
  max-height: 250px; /* Optional: Begrenzung der Bildhöhe */
}

.post-card img.post-image {
	max-height: 250px;
    width: auto;
}

/* 2. Der Ticker-Container über dem Bild */
.marquee-container {
  position: absolute;
  bottom: 0;          /* Platziert den Ticker ganz unten auf dem Bild */
  left: 0;
  width: 100%;        /* Passt sich exakt der Breite des Bildes an */
  z-index: 10;        /* Liegt sicher über dem Bild */
  
  /* Styling (Optional anpassbar) */
  background: #c60c0f;
  color: #ffffff;
  padding: 8px 0;
}

/* 3. Die Ticker-Animation (unverändert sicher fürs Grid) */
.marquee-content {
  display: flex;
  width: max-content;
  animation: marquee-scroll 15s linear infinite;
}

.marquee-item {
  flex-shrink: 0; 
  padding-right: 2rem;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-content { animation: none; }
}