/**
 * Darstellung des rotierenden Bibelvers-Textes. Die eigentlichen Verse
 * und die Wechsel-Logik stecken in assets/js/verses-data.js und
 * assets/js/verse-rotator.js.
 *
 * Siehe MANUAL.md, Abschnitt "Verse bearbeiten".
 */

.verse-wrap{
  min-height: clamp(180px, 30vh, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Einstellung "Bibelverse anzeigen" aus, siehe MANUAL.md
   Abschnitt "Einstellungen (Burger-Menü)". */
body.emds-verses-hidden .verse-wrap{
  display: none;
}

#verse{
  font-size: clamp(1.35rem, 3.1vw, 2.15rem);
  line-height: 1.55;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.8s ease, transform 1.8s ease;
  text-wrap: balance;
}

#verse.visible{
  opacity: 1;
  transform: translateY(0);
}

#reference{
  display: block;
  margin-top: clamp(0.9rem, 2vw, 1.3rem);
  font-size: 0.98rem;
  font-style: normal;
  font-family: Georgia, serif;
  color: var(--gold);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 1.8s ease 0.2s;
}

#reference.visible{ opacity: 0.85; }