/* Click-to-play YouTube embed shared by the visual App Guides (en/ and de/).
   Uses the colour variables every guide page defines in its own :root. */
.guide-video { margin-bottom: 56px; }
.guide-video .video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--panel-alt), var(--panel));
}
.guide-video .video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.guide-video .video-load {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink); font: inherit; text-align: center;
}
.guide-video .video-play {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: #fff; font-size: 26px; padding-left: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.guide-video .video-load:hover .video-play,
.guide-video .video-load:focus-visible .video-play { transform: scale(1.08); }
.guide-video .video-load:focus-visible { outline: 2px solid var(--violet); outline-offset: -4px; border-radius: var(--radius); }
.guide-video .video-cta { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 18px; }
.guide-video .video-note { max-width: 52ch; font-size: 12.5px; color: var(--ink-dim); }
.guide-video .video-alt { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }
.guide-video .video-alt a { color: var(--ink-dim); font-weight: 600; }
.guide-video .video-alt a:hover { color: var(--violet); }
@media (max-width: 520px) {
  .guide-video .video-play { width: 56px; height: 56px; font-size: 20px; }
  .guide-video .video-note { display: none; }
  .guide-video .video-cta { font-size: 16px; }
}