/* Hero-Film: Glaskarte am Videorahmen. Darin tippt sich eine Notiz im
   Stil des Films ("> ..."), danach fuehrt ein Folgepfeil auf den Knopf
   "Mit Ton ansehen" im Video. Gestaltung wie Kopfleiste, Glas-Knopf und
   Hauptknopf der Seite. Alles setzt assets/js/film.js ein; ohne
   JavaScript bleibt die Seite wie bisher. */

.clv-video:not(.is-zoomed){position:relative}
.clv-video.is-zoomed .clv-card,.clv-video.is-zoomed .clv-folge,.clv-video.is-zoomed .clv-film-cta{display:none}

/* --- Karte ------------------------------------------------------------ */
.clv-card{position:absolute;right:-26px;bottom:calc(100% - 44px);z-index:6;width:max-content;padding:15px 22px 15px 18px;border:1px solid var(--pill-border);border-radius:var(--radius-l);background:var(--pill-bg);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 18px 44px rgba(3,26,66,.34),0 2px 8px rgba(3,26,66,.14);color:#ffffff;font-family:var(--font-head);text-align:left;cursor:pointer;opacity:0;transform:translateY(10px) scale(.94);transform-origin:right bottom;transition:opacity .5s var(--ease-soft),transform .6s cubic-bezier(.34,1.4,.64,1)}
.clv-card.is-on{opacity:1;transform:none}

.clv-card__zeilen{font-size:17px;font-weight:600;line-height:1.42;letter-spacing:-.005em;white-space:nowrap}
.clv-card__zeile{display:block}
.clv-card__pfeil{display:inline-block;width:1.15em;color:#a2d5ff;font-weight:700}
.clv-card__z{opacity:0}
.clv-card__z.is-da{opacity:1}
.clv-card__caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;border-radius:1px;background:#a2d5ff;animation:clv-blink 1s steps(1) infinite}

/* --- Folgepfeil von der Karte zum Knopf (Pfad setzt film.js) ---------- */
.clv-folge{position:absolute;left:0;top:0;z-index:4;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(3,26,66,.55))}
.clv-folge path{stroke-dasharray:1;stroke-dashoffset:1}
.clv-folge.is-on path{animation:clv-zeichnen .55s cubic-bezier(.4,.1,.3,1) forwards}
.clv-folge.is-on path{animation-duration:.35s}
.clv-folge.is-on path+path{animation-delay:.3s;animation-duration:.18s}

/* --- Knopf im Video, gestaltet wie .btn--primary ---------------------- */
.clv-film-cta{position:absolute;right:20px;top:96px;z-index:5;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:0;border-radius:var(--radius-full);background:var(--blue-action);color:#ffffff;font-family:var(--font-head);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;box-shadow:0 8px 22px rgba(15,93,230,.38),0 2px 6px rgba(3,26,66,.25);opacity:0;transform:translateY(-6px) scale(.96);transition:background-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft),opacity .4s var(--ease-soft),transform .45s cubic-bezier(.34,1.4,.64,1)}
.clv-film-cta.is-on{opacity:1;transform:none}
.clv-film-cta:hover{background:var(--blue-deep);box-shadow:0 12px 28px rgba(15,93,230,.45)}
.clv-film-cta:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.clv-film-cta__dauer{font-weight:500;color:rgba(255,255,255,.72)}

.clv-eq{display:inline-flex;align-items:center;gap:2px;height:12px}
.clv-eq i{display:block;width:2.5px;height:100%;border-radius:2px;background:#ffffff;animation:clv-eq 1.1s ease-in-out infinite}
.clv-eq i:nth-child(2){animation-delay:-.4s}
.clv-eq i:nth-child(3){animation-delay:-.75s}
.clv-eq i:nth-child(4){animation-delay:-.2s}

.has-filmcta .clv-unmute{display:none!important}

/* --- Gestapeltes Layout (ab 1024 px): Karte im Rahmen, Platz darueber - */
@media (max-width:1100px){
  .clv-card{right:16px}
}
@media (max-width:1024px){
  .clv-video.has-card{margin-top:76px}
}
@media (max-width:560px){
  .clv-video.has-card{margin-top:58px}
  .clv-card{right:12px;bottom:calc(100% - 26px);padding:11px 16px 11px 14px;border-radius:16px}
  .clv-card__zeilen{font-size:15px}
  .clv-film-cta{right:12px;gap:8px;padding:8px 14px;font-size:13px}
  .clv-folge{stroke-width:1.8}
}

@keyframes clv-blink{50%{opacity:0}}
@keyframes clv-zeichnen{to{stroke-dashoffset:0}}
@keyframes clv-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .clv-card,.clv-film-cta{transition:none}
  .clv-folge path{stroke-dashoffset:0;animation:none!important}
  .clv-card__caret,.clv-eq i{animation:none}
}