/* ==========================================================================
   educis.de: Produktvorstellung mit Animationsfilm
   (Produktseiten von Play, Quest und Connect)

   Der Film läuft am Stück wie auf play/quest/connect.educis.app: breite Bühne
   (16:9), auf dem Handy hochkant (4:5). Darunter stehen kurze Beschreibungen.
   Die Szenen selbst kommen aus den Repositories der Produkte (assets/film/,
   siehe _build/sync-films.mjs); hier steht nur, wie sich der Film in die Seite
   einfügt.

   Keine Klassennamen verwenden, die es in assets/film/*.css gibt.
   ========================================================================== */

/* Die Bühne: so breit wie der Inhalt, aber nie höher als der Bildschirm */
.tour__film .film__stage {
  width: min(100%, 1120px, calc((100vh - 150px) * 16 / 9));
  width: min(100%, 1120px, calc((100svh - 150px) * 16 / 9));
  min-width: min(100%, 560px);
  aspect-ratio: 16 / 9;
}
@media (max-width: 720px) {
  .tour__film .film__stage {
    width: min(100%, calc((100vh - 110px) * 4 / 5));
    width: min(100%, calc((100svh - 110px) * 4 / 5));
    min-width: 0;
    aspect-ratio: 4 / 5;
  }
}

/* Kurze Beschreibungen unter dem Film */
.tour__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px);
  margin-top: clamp(48px, 6vw, 80px);
}
.tour__note {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.tour__note .ico {
  width: 22px;
  height: 22px;
  color: var(--accent-text);
}
.tour__note h3 {
  margin: 14px 0 6px;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.tour__note h3 .tag {
  margin-left: 8px;
  vertical-align: middle;
}
.tour__note p {
  max-width: 44ch;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 960px) {
  .tour__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .tour__notes {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}