/* Kopie der Player-Styles aus index.html (Plyr), plus Karten-Variante */
/* Video-Player (Plyr, 16:9-Quelle, lädt erst beim Klick) */
.vp { position: relative; width: 100%; height: 16rem; border-radius: 32px; overflow: hidden; background: #0d1c2f; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
@media (min-width: 768px) { .vp { height: 24rem; } }
.vp .plyr { height: 100%; --plyr-color-main: #006767; --plyr-video-control-background-hover: #006767; --plyr-font-family: 'Inter', system-ui, sans-serif; --plyr-control-radius: 9999px; }
.vp .plyr__video-wrapper { height: 100%; background: #0d1c2f; }
.vp video { width: 100%; height: 100%; object-fit: cover; }
.vp .plyr__poster { background-size: cover; }
.vp .plyr__control--overlaid { background: rgb(255 255 255 / 0.95); color: #006767; padding: 1.25rem; box-shadow: 0 8px 24px rgb(0 0 0 / 0.3); }
.vp .plyr__control--overlaid:hover, .vp .plyr__control--overlaid:focus-visible { background: #fff; color: #006767; }
.vp .plyr__control--overlaid svg { width: 1.75rem; height: 1.75rem; }
.vp [data-plyr="rewind"], .vp [data-plyr="fast-forward"] { padding: 2px; }
.vp [data-plyr="rewind"] svg, .vp [data-plyr="fast-forward"] svg { width: 28px; height: 28px; }
.vp .plyr--fullscreen-active video, .vp .plyr--fullscreen-fallback video { object-fit: contain; background: #000; }
.vp .plyr--fullscreen-fallback { z-index: 2147483000; }
/* Play-Button: einmaliger Impuls beim Hinscrollen; Ladepunkte während das Video lädt */
.vp .plyr__control--overlaid::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgb(255 255 255 / 0.6); opacity: 0; pointer-events: none; }
.vp.is-pulse .plyr__control--overlaid { animation: vp-pop 0.9s cubic-bezier(0.22, 0.8, 0.2, 1) 0.1s 1; }
.vp.is-pulse .plyr__control--overlaid::after { animation: vp-ring 1.1s ease-out 0.1s 1; }
@keyframes vp-pop { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.14); } }
@keyframes vp-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.vp-loader { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 0.75rem; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s; }
.vp-loader i { width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.35); animation: vp-dot 1.1s ease-in-out infinite; }
.vp-loader i:nth-child(2) { animation-delay: 0.16s; }
.vp-loader i:nth-child(3) { animation-delay: 0.32s; }
@keyframes vp-dot { 0%, 80%, 100% { transform: scale(0.35); opacity: 0.55; } 40% { transform: scale(1.25); opacity: 1; } }
.vp.is-loading .vp-loader { opacity: 1; visibility: visible; }
.vp.is-loading .plyr__control--overlaid { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .vp-loader i { animation: none; transform: scale(0.8); } }
/* Kipp-Hinweis (nur Handy hochkant, beim ersten Abspielen, max. 2 s) */
.vp-rotate { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; text-align: center; color: #fff; font: 600 0.9375rem/1.3 'Inter', system-ui, sans-serif; background: rgb(13 28 47 / 0.62); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; }
.vp-rotate svg { filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.4)); transform-origin: 50% 50%; }
.vp.is-rotate-hint .vp-rotate { opacity: 1; visibility: visible; }
.vp.is-rotate-hint .vp-rotate svg { animation: vp-tilt 1.1s cubic-bezier(0.45, 0, 0.2, 1) 0.15s 1 forwards; }
@keyframes vp-tilt { 0%, 15% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .vp.is-rotate-hint .vp-rotate svg { animation: none; transform: rotate(-90deg); } }
/* Startansicht: nur der große Play-Button, Steuerleiste erst nach dem Start */
.vp .plyr--stopped .plyr__controls { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
  .vp [data-plyr="rewind"], .vp [data-plyr="fast-forward"] { display: none; }
  /* Lautstärke: nur Lautsprecher, vertikaler Regler erscheint nach Tippen */
  .vp .plyr__volume input[type="range"] { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 96px; min-width: 0; max-width: none; margin: 0; padding: 0 12px; box-sizing: content-box; border-radius: 9999px; background: rgb(13 28 47 / 0.8); transform-origin: 0 50%; transform: rotate(-90deg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s, visibility 0.15s; }
  .vp .plyr__volume.vp-vol-open input[type="range"] { opacity: 1; visibility: visible; pointer-events: auto; }
}
.vp-host { transform: none !important; transition: none !important; will-change: auto !important; filter: none !important; }

/* Variante in der Video-Karte: 16:9 statt fester Höhe, Karten-Rundung */
.vp.vp--card { height: auto; aspect-ratio: 16 / 9; border-radius: 1.25rem; box-shadow: none; }
.vp.vp--card .plyr__poster { background-position: center 20%; }