/* ═══════════════════════════════════════════════════════════
   Headline Rotator – CSS
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper (neue Zeile) ─────────────────────────────────── */
.hr-wrap {
  display: inline;
  position: relative;
  height: 1em;         /* Basis-Höhe – passe an falls Text abgeschnitten */
  line-height: inherit;
  overflow: visible;   /* Items aus-/einblenden per opacity, nicht durch clip */
}

/* ── Einzelne Phrase – standardmäßig unsichtbar ──────────── */
.hr-item {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(0.5em);   /* startet unten */
  transition:
    opacity    0.5s ease,
    transform  0.5s ease;
  white-space: nowrap;
}

/* ── Einblenden (von unten nach oben) ────────────────────── */
.hr-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Ausblenden (nach oben) ──────────────────────────────── */
.hr-item.is-leaving {
  opacity: 0;
  transform: translateY(-0.3em);
  transition:
    opacity    0.5s ease,
    transform  0.5s ease;
}