/* ============================================================
   PROMO-VIDEO — kurzer Loop-Film im Inhalt (Startseite, Prozessseite).
   Markup: <section class="section promo-sec"> … <video class="promo-player">
   Verhalten: js/promo-video.js (Format-Wahl, Lazy-Load, Autoplay stumm, Ton-Knopf)
   Nutzt die Seiten-Tokens (--line, --panel, --mono, --ease) und --chrome-lime aus site-chrome.css.
   Der Ton-Knopf liegt auf dem Video und bleibt deshalb in beiden Themes hell auf dunkel.
   ============================================================ */

.promo-sec{padding-top:0}

.promo-frame{--promo-on-video:#f2f3ec;--promo-on-video-line:rgba(242,243,236,.18);--promo-on-video-bg:rgba(10,11,9,.72);position:relative;margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:16/9}
.promo-player{display:block;width:100%;height:100%;object-fit:cover}

.promo-sound{position:absolute;right:18px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--promo-on-video);
  background:var(--promo-on-video-bg);border:1px solid var(--promo-on-video-line);border-radius:99px;padding:9px 14px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .3s,border-color .3s,transform .4s var(--ease)}
.promo-sound:hover,.promo-sound:focus-visible{color:var(--chrome-lime);border-color:var(--chrome-lime)}
.promo-sound:active{transform:scale(.96)}
.promo-sound svg{width:14px;height:14px;flex:none}
.promo-sound .promo-wave{opacity:0;transition:opacity .3s}
.promo-sound .promo-mute{opacity:1;transition:opacity .3s}
.promo-sound.is-unmuted .promo-wave{opacity:1}
.promo-sound.is-unmuted .promo-mute{opacity:0}
.promo-sound[hidden]{display:none}

@media (max-width:700px){
  .promo-sec .video-head{flex-direction:column;align-items:flex-start}
  .promo-frame{aspect-ratio:9/16;width:min(100%,calc(82svh * 9 / 16));margin:0 auto}
}