/* Video: eigenes MP4 (poster, preload=none, controls) und YouTube als Zwei-Klick-Lösung. */
.video { margin: 1.5rem 0; }
.video video, .video-rahmen { display: block; width: 100%; height: auto; max-height: 80vh; background: #1d1913; border-radius: var(--radius, 8px); }
.video video { aspect-ratio: 16 / 9; object-fit: contain; }
.video figcaption { margin-top: .5rem; font-size: var(--t-klein); line-height: 1.4; color: var(--farbe-text-leise, #6b6254); }
.video figcaption strong { color: var(--farbe-text, #1f1a14); }
.video figcaption small { display: block; font-size: var(--t-klein); }
.video-dauer { white-space: nowrap; }

.video-rahmen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video-rahmen > img, .video-rahmen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-rahmen > img { object-fit: cover; filter: brightness(.55); }   /* Vorschaubild abgedunkelt, damit der Hinweis lesbar bleibt */
.video-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 1rem;
  text-align: center;
  color: #f7f1e4;
}
.video-hinweis p { margin: 0; max-width: 30rem; font-size: var(--t-klein); line-height: 1.45; }
.video-knopf {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  background: var(--farbe-akzent, #8a3b2a);
  color: var(--farbe-auf-akzent, #fff);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.video-knopf:hover { filter: brightness(1.1); }
.video-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video-dreieck { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }