/* ============================================================
   SEFODO Landing html_v5: Preise-Seite
   Ergänzt styles.css (Fotostapel-Mechanik, Überblick-Blatt).
   Hier nur, was diese Seite zusätzlich braucht: je Plan ein
   Blatt mit Kicker, großem Preis und Leistungsliste.
   ============================================================ */

.nav-link.is-active { color: var(--text); border-bottom-color: var(--text); }
.scene-hero .hero-title em { color: var(--accent-ink); }

/* ---------- Plan-Blatt ---------- */

.plan-kicker { font-size: var(--fs-sm); color: var(--text-2); letter-spacing: 0.02em; margin-bottom: var(--s-2); }
.plan-kicker-featured { color: var(--accent-ink); }
.plan-title {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.plan-title span { font-size: 0.38em; color: var(--text-2); font-family: var(--f-body); }
.scene-pro .plan-title { color: var(--accent-ink); }
.scene-pro .plan-title span { color: var(--text-2); }

/* Leistungszeilen, erscheinen nacheinander */
.scene-list { margin-bottom: var(--s-6); }
.scene-list li {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  line-height: 1.35;
  padding: 0.2rem 0;
  border-top: 1px solid rgba(34, 28, 22, 0.14);
  opacity: 0; transform: translateY(8px);
  transition:
    opacity 0.9s var(--ease-out) calc(0.5s + var(--i) * 120ms),
    transform 0.9s var(--ease-out) calc(0.5s + var(--i) * 120ms);
}
.scene-list li:last-child { border-bottom: 1px solid rgba(34, 28, 22, 0.14); }
.scene.is-visible .scene-list li { opacity: 1; transform: none; }

/* ---------- Kleine Höhen ---------- */

@media (max-height: 780px), (max-width: 767px) and (max-height: 920px) {
  .plan-title { font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
  .scene-list li { font-size: 1.05rem; line-height: 1.3; padding: 0.15rem 0; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .scene-list li { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
}
