/* pageSTAY+ · Filmbaustein
   Hochformat 9:16, liegt neben einem Textblock. Das Video lädt erst,
   wenn es gebraucht wird (preload="none" im Markup), startet stumm und
   in der Schleife; über die Bedienleiste lässt sich der Ton zuschalten. */

.ps-reel-section { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.ps-reel-section.is-dark {
  background: #101113;
  color: #f4f2ec;
  /* headline-refinement.css faerbt <em> in Ueberschriften ueber diese
     Variable. Sie hier zu setzen ist sauberer, als mit hoeherer
     Spezifitaet dagegenzuhalten. */
  --headline-accent: #ffd600;
}

.ps-reel-grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}
.ps-reel-grid.is-left { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.ps-reel-grid.is-left .ps-reel-copy { order: 2; }
.ps-reel-grid.is-left .ps-reel-figure { order: 1; }
@media (max-width: 860px) {
  .ps-reel-grid, .ps-reel-grid.is-left { grid-template-columns: 1fr; }
  .ps-reel-grid.is-left .ps-reel-copy,
  .ps-reel-grid.is-left .ps-reel-figure { order: 0; }
  .ps-reel-figure { max-width: 320px; margin-inline: auto; }
}

.ps-reel-copy > .eyebrow { margin-bottom: .9rem; }
.ps-reel-copy h2 { margin: 0 0 1rem; }
.ps-reel-copy p { max-width: 54ch; margin: 0 0 1.1rem; }
.ps-reel-copy .ps-reel-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.6rem; }

.ps-reel-figure { margin: 0; }
.ps-reel-figure video {
  display: block;
  width: 100%;
  /* height:auto ist noetig, sonst gewinnt das height-Attribut des <video>
     und das Seitenverhaeltnis wird nicht berechnet. */
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  background: #0b0b0b;
  object-fit: cover;
  box-shadow: 0 26px 60px rgba(10, 12, 14, .28);
}
.ps-reel-section.is-dark .ps-reel-figure video { box-shadow: 0 26px 60px rgba(0, 0, 0, .5); }
.ps-reel-figure figcaption {
  margin: .85rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}

@media (prefers-reduced-motion: reduce) {
  .ps-reel-figure video { animation: none; }
}

/* Dunkles Feld: Auszeichnung und Umrissknopf müssen hell bleiben */
.ps-reel-section.is-dark h2,
.ps-reel-section.is-dark .ps-reel-copy p { color: #f4f2ec; }
.ps-reel-section.is-dark h2 em { color: #ffd600; }
.ps-reel-section.is-dark .ps-reel-copy strong { color: #fff; }
.ps-reel-section.is-dark .eyebrow { color: #ffd600; }
.ps-reel-section.is-dark .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .46);
  background: rgba(255, 255, 255, .08);
}
.ps-reel-section.is-dark .btn-outline:hover,
.ps-reel-section.is-dark .btn-outline:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: #ffd600;
}
.ps-reel-section .ps-reel-hinweis small { font-size: .78rem; line-height: 1.6; opacity: .72; }
.ps-reel-section.is-dark a:not(.btn) { color: #ffd600; }