/* Clarity – Video-Band (draggo_clarity_video) */
.cl-video__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: center; }
.cl-video__grid--solo { grid-template-columns: minmax(0, 1fr); }
.cl-video--side-links .cl-video__body { order: 2; }
.cl-video__body .cl-title { font-size: 42px; line-height: 1.2; }
.cl-video__body .cl-text { margin-top: 24px; }
.cl-video__head { margin-bottom: 50px; }
.cl-video__head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: end; }

/* Vorschau + Player (16:9, Radius 20 px) */
.cl-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: #020626; box-shadow: 0 24px 60px rgba(2, 6, 38, .18); isolation: isolate; }
.cl-video__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(1, 3, 23, .05) 40%, rgba(1, 3, 23, .6)); transition: opacity .4s; }
.cl-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cl-video__frame:hover .cl-video__poster { transform: scale(1.05); }
.cl-video__play { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: #e10419; color: #fff; text-decoration: none; box-shadow: 0 10px 30px rgba(225, 4, 25, .35); transition: background-color .3s, transform .3s; }
.cl-video__play .cl-play-icon { width: 34px; height: 34px; margin-left: 5px; }
.cl-video__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #e10419; opacity: 0; pointer-events: none; }
.cl-video__frame:hover .cl-video__play, .cl-video__play:focus-visible { background: #8f0815; transform: scale(1.04); }
.cl-video__frame:hover .cl-video__ring, .cl-video__play:focus-visible .cl-video__ring { animation: cl-video-pulse 1.6s ease-out infinite; }
.cl-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes cl-video-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.cl-video__note { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 2; margin: 0; font-family: var(--cl-sans); font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .85); text-align: center; }
.cl-video__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.cl-video__frame.is-playing::after { opacity: 0; }

/* Editor-Arbeitsfläche */
.draggo-canvas .cl-video__body .cl-title { font-size: 42px; line-height: 1.2; }
.draggo-canvas .cl-video__note { font-family: var(--cl-sans); font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .85); margin: 0; }

@media (max-width: 1199px) {
    .cl-video__grid { gap: 40px; }
    .cl-video__body .cl-title, .draggo-canvas .cl-video__body .cl-title { font-size: 36px; }
}
@media (max-width: 991px) {
    .cl-video__grid, .cl-video__head--split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .cl-video--side-links .cl-video__body { order: 0; }
    .cl-video__head { margin-bottom: 30px; }
    .cl-video__play { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
    .cl-video__play .cl-play-icon { width: 28px; height: 28px; }
}
@media (max-width: 767px) {
    .cl-video__body .cl-title, .draggo-canvas .cl-video__body .cl-title { font-size: 30px; line-height: 36px; }
    .cl-video__frame { border-radius: 14px; }
    .cl-video__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
    .cl-video__play .cl-play-icon { width: 24px; height: 24px; margin-left: 3px; }
    .cl-video__note { left: 12px; right: 12px; bottom: 8px; font-size: 11px; line-height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-video__frame:hover .cl-video__ring { animation: none; }
    .cl-video__frame:hover .cl-video__poster { transform: none; }
}