/* ============================================================
   SEFODO Landing html_v5: Funktionen-Seite
   Ergänzt styles.css (Fotostapel-Mechanik). Hier nur, was die
   Funktionen-Seite zusätzlich braucht: Funktionslisten je Szene,
   das Papierblatt „Neu" und die aktive Navigation.
   ============================================================ */

/* aktiver Menüpunkt */
.nav-link.is-active { color: var(--text); border-bottom-color: var(--text); }

/* Hero: Betonung in derselben Schrift, Akzentfarbe */
.scene-hero .hero-title em { color: var(--accent-ink); }

/* ---------- Funktionsliste je Szene (Zeilen 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; }
.scene-dark .scene-list li { border-color: rgba(247, 242, 234, 0.16); }

/* ---------- „Neu": Papierblatt mit sechs Zeilen ---------- */

.scene-neu .scene-copy { max-width: 760px; }
.neu-list > div { grid-template-columns: 15rem 1fr; }
.neu-list dt { font-size: var(--fs-lg); }

@media (max-width: 767px) {
  .neu-list > div { grid-template-columns: 1fr; row-gap: 2px; }
}

/* ---------- Kleine Höhen: Listen enger, damit die Szene in den Viewport passt ---------- */

@media (max-height: 780px), (max-width: 767px) and (max-height: 920px) {
  .scene-list li { font-size: 1.05rem; line-height: 1.3; padding: 0.15rem 0; }
  .scene-neu .section-title { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
  .neu-list > div { padding: 0.35rem 0; }
  .neu-list dt { font-size: 1.05rem; }
  .neu-list dd { font-size: 0.9rem; line-height: 1.4; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .scene-list li { font-size: 0.98rem; }
  .neu-list dd { font-size: 0.82rem; line-height: 1.3; }
  .neu-list > div { padding: 0.25rem 0; }
}

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