/* ---------- Promoseite ---------- */
/* Eigene Datei statt eines Blocks in styles.css: Der Abschnitt gehört zur
   anderen Spur, und ein Werbevideo ist der einzige Ort der ganzen Anwendung,
   an dem Gestaltung um ihrer selbst willen erlaubt ist. Getrennt gehalten
   heisst auch: fällt die Werbung eines Tages weg, fällt eine Datei weg.

   Die Bühne ist dunkel, weil das Video dunkel ist. Ein heller Rahmen um ein
   dunkles Bild zieht den Blick auf den Rahmen. */

.promo-buehne {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #08070c;
  box-shadow: 0 24px 70px rgba(11, 11, 11, .28);
  /* 16:9 – anders als beim Erklärvideo (16:10). Wer hier aspect-ratio
     ändert, ohne die Quelle neu zu rendern, schneidet Text ab. */
  aspect-ratio: 16 / 9;
  position: relative;
}
.promo-buehne video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #08070c;
}

/* Der Startknopf liegt über dem Video, bis einmal gespielt wurde. Danach
   übernehmen die eigenen Bedienelemente des Browsers – die kennt jeder,
   und sie sind mit Tastatur und Vorleseprogramm bereits bedienbar. */
.promo-start {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #111;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  transition: transform var(--dur-schnell) var(--easing);
}
.promo-start:hover { transform: scale(1.07); }
.promo-start svg { width: 40px; height: 40px; margin-left: 5px; }
.promo-start[hidden] { display: none; }

/* Ton: Das Video hat Sprecher und Musik. Es startet darum nie von selbst –
   eine Seite, die ungefragt zu sprechen beginnt, wird geschlossen. */
.promo-tonhinweis {
  max-width: 1180px;
  margin: 12px auto 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.promo-tonhinweis svg { width: 15px; height: 15px; flex: none; }

/* ---------- Kapitel ---------- */
/* Gleiche Bauart wie .lp-vstep beim Erklärvideo, damit beide Videos sich
   gleich bedienen lassen. Eigene Klassen, weil die Zeitmarken andere sind. */
.promo-kapitel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  max-width: 1180px;
  margin: 20px auto 0;
}
.promo-kap {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 11px;
  padding: 12px;
  cursor: pointer;
  transition: all var(--dur-schnell) var(--easing);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promo-kap:hover { border-color: var(--accent); }
.promo-kap.aktiv { border-color: var(--accent); background: var(--accent-soft); }
.promo-kap b { font-size: var(--fs-md); }
.promo-kap span { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45; }
.promo-kap .promo-zeit {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- Kurzfassung in Schrift ---------- */
/* Wer kein Video anschauen kann oder will – im Zug ohne Kopfhörer, mit
   Vorleseprogramm, bei knappem Datenvolumen – bekommt denselben Inhalt als
   Text. Das ist keine Nettigkeit, sondern die einzige Fassung, die sich
   durchsuchen und zitieren lässt. */
.promo-text {
  max-width: 820px;
  margin: 0 auto;
}
.promo-text h3 {
  font-size: var(--fs-xl);
  margin: 0 0 10px;
}
.promo-text p {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: 1.7;
  margin: 0 0 14px;
}
.promo-text p:last-child { margin-bottom: 0; }

.promo-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 1000px;
  margin: 28px auto 0;
  list-style: none;
  padding: 0;
}
.promo-fakt {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 16px;
}
.promo-fakt b {
  display: block;
  font-size: var(--fs-lg);
  margin-bottom: 5px;
}
.promo-fakt span {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .promo-start { width: 68px; height: 68px; }
  .promo-start svg { width: 30px; height: 30px; }
  .promo-kap span { display: none; }
}

/* Wer Bewegung abbestellt hat, bekommt kein von selbst startendes Bild und
   keine Aufblendung – das Video bleibt bedienbar, es beginnt nur nichts
   ungefragt. */
@media (prefers-reduced-motion: reduce) {
  .promo-start { transition: none; }
  .promo-start:hover { transform: none; }
}