.r4w-hv {
    --r4w-hv-border-width: 2px;
    --r4w-hv-border-style: solid;
    --r4w-hv-border-color: #cfa294;
    --r4w-hv-radius: 14px;
    --r4w-hv-max-width: 420px;
    --r4w-hv-tablet-width: 420px;
    --r4w-hv-mobile-width: 420px;
    --r4w-hv-trigger-max-width: 180px;
    --r4w-hv-space-top: 0px;
    --r4w-hv-space-bottom: 0px;

    position: relative;
    display: block;
    width: var(--r4w-hv-max-width);
    max-width: 100%;
    box-sizing: border-box;
    margin-top: var(--r4w-hv-space-top);
    margin-bottom: var(--r4w-hv-space-bottom);
    overflow: hidden;
    border: var(--r4w-hv-border-width) var(--r4w-hv-border-style) var(--r4w-hv-border-color);
    border-radius: var(--r4w-hv-radius);
    background: #000;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.r4w-hv--hover-border {
    border-color: transparent;
}

.r4w-hv--hover-border:hover,
.r4w-hv--hover-border:focus,
.r4w-hv--hover-border:focus-within,
.r4w-hv--playing,
.r4w-hv-popup-layer--open .r4w-hv--hover-border {
    border-color: var(--r4w-hv-border-color);
}

.r4w-hv:hover,
.r4w-hv:focus,
.r4w-hv:focus-within,
.r4w-hv--playing,
.r4w-hv-popup-layer--open .r4w-hv-popup-card {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.r4w-hv video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 0;
    border-radius: inherit;
    background: #000;
}

.r4w-hv:focus {
    outline: 2px solid rgba(207, 162, 148, .45);
    outline-offset: 3px;
}

/* Popup trigger */
.r4w-hv-popup-root {
    --r4w-hv-border-width: 2px;
    --r4w-hv-border-style: solid;
    --r4w-hv-border-color: #cfa294;
    --r4w-hv-radius: 14px;
    --r4w-hv-max-width: 420px;
    --r4w-hv-tablet-width: 420px;
    --r4w-hv-mobile-width: 420px;
    --r4w-hv-trigger-max-width: 180px;
    --r4w-hv-space-top: 0px;
    --r4w-hv-space-bottom: 0px;

    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: var(--r4w-hv-space-top);
    margin-bottom: var(--r4w-hv-space-bottom);
    vertical-align: top;
}

.r4w-hv-popup-root--align-left {
    text-align: left;
}

.r4w-hv-popup-root--align-center {
    text-align: center;
}

.r4w-hv-popup-root--align-right {
    text-align: right;
}

.r4w-hv-trigger {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.r4w-hv-trigger--poster {
    width: var(--r4w-hv-trigger-max-width);
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--r4w-hv-radius);
    transition: box-shadow .2s ease, transform .2s ease;
}

.r4w-hv-trigger--poster:hover,
.r4w-hv-trigger--poster:focus-visible {
    box-shadow: 0 7px 20px rgba(0, 0, 0, .12);
    transform: translateY(-1px);
}

.r4w-hv-trigger-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: inherit;
}

.r4w-hv-trigger--text {
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .14em;
}

.r4w-hv-trigger:focus-visible {
    outline: 2px solid rgba(207, 162, 148, .55);
    outline-offset: 4px;
}

/* Popup layer intentionally has no backdrop. It floats above the page without changing layout. */
.r4w-hv-popup-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.r4w-hv-popup-layer--open {
    visibility: visible;
    opacity: 1;
}

.r4w-hv-popup-card {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--r4w-hv-max-width);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    pointer-events: auto;
    visibility: hidden;
    opacity: 0;
    transform: scale(.985);
    transform-origin: center;
    transition: opacity .14s ease, transform .14s ease;
}

.r4w-hv-popup-card--positioned {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.r4w-hv-popup-card video {
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    object-fit: contain;
}

.r4w-hv-error {
    padding: 10px 12px;
    border: 1px solid #d63638;
    border-radius: 6px;
    color: #8a2424;
    background: #fcf0f1;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {
    .r4w-hv {
        width: var(--r4w-hv-tablet-width);
        max-width: 100%;
    }

    .r4w-hv-popup-card {
        width: var(--r4w-hv-tablet-width);
        max-width: calc(100vw - 28px);
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
    }

    .r4w-hv-popup-card video {
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
    }
}

/* Mobil: Tap statt Hover, Popup sicher im sichtbaren Viewport */
@media (max-width: 767px) {
    .r4w-hv {
        width: var(--r4w-hv-mobile-width);
        max-width: 100%;
    }

    .r4w-hv-popup-root {
        width: 100%;
        max-width: 100%;
    }

    .r4w-hv-trigger--poster {
        width: min(var(--r4w-hv-trigger-max-width), 100%);
    }

    .r4w-hv-trigger--poster:hover {
        transform: none;
    }

    .r4w-hv-popup-card {
        width: var(--r4w-hv-mobile-width);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .r4w-hv-popup-card video {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .r4w-hv,
    .r4w-hv-trigger--poster,
    .r4w-hv-popup-layer,
    .r4w-hv-popup-card {
        transition: none;
    }
}