.termin-list-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.termin-list-item:hover { transform: translateX(4px); }
.termin-list-item__datum { flex: 0 0 9rem; display: flex; flex-direction: column; }
.termin-list-item__tag { font-family: var(--font-display); font-weight: 700; color: var(--color-teal); }
.termin-list-item__zeit { font-size: var(--text-sm); color: var(--color-terracotta); font-weight: 600; }
.termin-list-item__bereich { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-terracotta); margin: 0 0 var(--space-3xs); }
.termin-list-item__title { margin: 0 0 var(--space-3xs); font-size: var(--text-lg); }
.termin-list-item__ort, .termin-list-item__kurzbeschreibung { margin: 0 0 var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ---------- Today's dates: kept as flat rows, marked only by a light badge ----------
   A full-card ring around every event turned overwhelming on days with many
   Termine, so "today" is signalled by a small pill with a status dot instead. */
.termin-list-item--heute .termin-list-item__tag { color: var(--color-terracotta); }

/* ---------- Heute / Live badge ---------- */
.termin-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-2xs);
  padding: 0.15rem 0.6rem 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.termin-badge--heute {
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 14%, var(--color-surface));
}
.termin-badge--live {
  color: var(--color-cream);
  background: var(--color-terracotta);
}
.termin-badge__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}
/* The pulse is reserved for events actually running now, so a day full of
   "Heute" pills stays calm. */
.termin-badge--live .termin-badge__dot {
  animation: fze-termin-live-pulse 1.4s ease-in-out infinite;
}
@keyframes fze-termin-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-cream) 60%, transparent); }
  50% { opacity: 0.55; transform: scale(0.85); box-shadow: 0 0 0 0.2rem transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .termin-badge--live .termin-badge__dot { animation: none; }
}

/* ---------- Actions row (Mehr erfahren + Kalender-Export) ---------- */
.termin-list-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-2xs);
}
.termin-list-item__ics {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-teal);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.termin-list-item__ics:hover { color: var(--color-terracotta); }
.termin-list-item__ics-icon { font-size: 1em; line-height: 1; }

@media (max-width: 600px) {
  .termin-list-item { flex-direction: column; gap: var(--space-2xs); }
  /* flex-basis:auto — without it the base `flex: 0 0 9rem` would force a fixed
     9rem height on the now-stacked date block and leave a large gap. */
  .termin-list-item__datum { flex: 0 0 auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs); }
  .termin-badge { flex-basis: 100%; }
}