/* Leiste unten auf den Produktseiten Geschichte, Namenssong, Zweiklang (Felix, 10.11.2026).
   Aussehen wie die Leiste auf social.songstory.de: Farbe und Schrift wie der Knopf im Kopfbereich,
   volle Breite. Liegt unter dem Kopf (1000) und dem Cookie-Hinweis (9999). Bewusst ohne
   Unschärfe-Effekte, die bremsen auf dem iPhone. Ein-/Ausblenden steuert produkt-leiste.js. */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; display: block;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); text-align: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 1.08rem; line-height: 1.2; text-decoration: none;
  box-shadow: 0 -10px 30px -14px rgba(91, 61, 160, .45);
  transform: translateY(110%); transition: transform .25s ease; }
.leiste.sichtbar { transform: none; }
/* Erkennbar zum Antippen: Pfeil im hellen Kreis wie beim Knopf oben, wippt beim Erscheinen dreimal.
   Pfeil nach rechts, weil das Ziel je nach Stelle über oder unter einem liegt. */
.leiste::after { content: ''; display: inline-block; width: 30px; height: 30px; margin-left: 12px; vertical-align: middle;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.leiste.sichtbar::after { animation: leiste-wippen 1.2s ease-in-out .4s 3; }
@keyframes leiste-wippen { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.leiste:active { filter: brightness(.9); }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } .leiste.sichtbar::after { animation: none; } }
/* Platz unter dem Fuß, damit die Leiste am Seitenende nichts verdeckt */
.site-footer { padding-bottom: 96px; }