/* seitenvideo.css — Seitenkopf-Video und Erklärvideo (01.10.2026)
   Gemeinsam genutzt von xelion.php, cloud-protection.php, fif-max.php
   und webseiten.php. Eingebunden über $seitenCssDatei.
   Die Klassen heißen noch xh (Kopf) und xa (Erklärvideo), weil das
   zuerst auf der Xelion-Seite gebaut wurde. */

/* ===== Seitenkopf mit Video-Schleife (01.10.2026, v2) =====
   Das Video steht rechts neben dem Text, immer in voller Höhe des Kopfes
   und wird nie beschnitten (contain). Die Ränder laufen weich aus.
   Nur auf breiten Bildschirmen und nur ohne "Bewegung reduzieren";
   auf Handy/Tablet bleibt der Kopf wie vorher. */
.page-hero.xh { overflow: hidden; }
.xh-video { display: none; }
.xh-pause { display: none; }
@media (min-width: 1200px) {
  .page-hero.xh { min-height: 460px; display: flex; align-items: center; }
  .page-hero.xh > .container { position: relative; z-index: 1; width: 100%; }
  .page-hero.xh h1 { max-width: 700px; }
  .xh-video {
    display: block; position: absolute; top: 0; z-index: 0;
    height: 100%; width: auto; aspect-ratio: 3 / 2; object-fit: contain;
    right: calc(max(0px, (100vw - var(--max-width, 1240px)) / 2) - 140px);
    pointer-events: none; background: transparent;
    -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  }
  .xh-pause {
    display: grid; place-items: center; position: absolute; right: 20px; bottom: 16px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    background: rgba(19,27,41,.7); border: 1px solid var(--border); color: var(--text-muted);
    transition: color .2s, border-color .2s;
  }
  .xh-pause:hover, .xh-pause:focus-visible { color: var(--accent); border-color: var(--accent); }
  .xh-pause svg { width: 14px; height: 14px; }
  .xh-pause .ic-play { display: none; }
  .xh-pause.angehalten .ic-play { display: block; }
  .xh-pause.angehalten .ic-pause { display: none; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .xh-pause { display: none; }
}

/* ===== Erklärvideo mit Start-Knopf und Schritten als Text ===== */
.xa-video {
  position: relative; margin: 28px 0 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: #0a0e14; aspect-ratio: 16 / 9;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.xa-video video { display: block; width: 100%; height: 100%; }
.xa-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; background: rgba(10,14,20,.45);
  color: var(--text-primary); font: inherit; transition: background .2s;
}
.xa-start:hover, .xa-start:focus-visible { background: rgba(10,14,20,.3); }
.xa-start .knopf {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px;
  border-radius: 999px; background: var(--accent); color: var(--bg-base);
  font-weight: 700; font-size: 1rem; box-shadow: 0 0 0 0 rgba(0,229,168,.5);
  animation: xa-puls 2.4s ease-out infinite;
}
.xa-start .knopf svg { width: 26px; height: 26px; }
.xa-start .dauer { font-family: var(--font-mono); font-weight: 400; font-size: .8rem; opacity: .75; }
.xa-video.laeuft .xa-start { display: none; }
@keyframes xa-puls { 0% { box-shadow: 0 0 0 0 rgba(0,229,168,.45); } 70%,100% { box-shadow: 0 0 0 18px rgba(0,229,168,0); } }
@media (prefers-reduced-motion: reduce) { .xa-start .knopf { animation: none; } }
.xa-schritte {
  list-style: none; counter-reset: xa; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px;
}
.xa-schritte li {
  counter-increment: xa; position: relative; padding-left: 34px;
  color: var(--text-secondary); font-size: .95rem; line-height: 1.5;
}
.xa-schritte li::before {
  content: counter(xa, decimal-leading-zero); position: absolute; left: 0; top: .1em;
  font-family: var(--font-mono); font-size: .75rem; color: var(--accent);
}
@media (max-width: 720px) { .xa-schritte { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .xa-start .knopf { padding: 10px 16px 10px 12px; font-size: .9rem; gap: 8px; }
  .xa-start .knopf svg { width: 20px; height: 20px; }
  .xa-start .dauer { display: none; }
}