#all-videos .col {
    padding-left:var(--sfd-margin-2x);
    padding-right:var(--sfd-margin-2x);
}

.preview-video,
.preview-image {
    display:block;
    width:100%;
}

.preview-video {
    position: absolute;
    z-index: 1;
    top: 0;
}

.videoPreview .card-footer {
    height:63px;
}

.videoPreview h2 {
    font-size: 1rem;
    letter-spacing: 0.03rem;
    line-height: 1.4rem;
    font-weight: bold;
    margin:0;
}

.videoPreview .play-icon i {
    font-size: 2rem;
    padding: .1rem .4rem 0rem .6rem
}

.videoPreview {
    transition: transform 0.2s ease;
}

.videoPreview:hover {
    transform: scale(1.01);
}


/********************************************
/* Styles für das Preview-Overlay 
/*******************************************/
.videoPreview {
    position: relative; /* damit .swipe-overlay absolut darin sitzen kann */
}

/* ===== Android-Swipe-Overlay ===== */
.swipeAndroid-overlay {
    position: absolute;
    inset: 0;              /* top:0; right:0; bottom:0; left:0; */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.swipeAndroid-hint p {
    color: #fff;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    padding: 0 1rem;
    font-weight: bold;
}

.swipeAndroid-hint .finger-icon {
    color: #fff;
    font-size: 2rem;
    animation: swipeAndroid 1.2s ease-in-out 8; /* 8 Durchläufe */
}

/* Close-Button oben rechts */
.swipeAndroid-overlay .close-swipeAndroid-hint {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Keyframes für die Wisch-Animation (Android) */
@keyframes swipeAndroid {
    0%   { transform: translateX(0);     opacity: 1; }
    80%  { transform: translateX(80px);  opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

/* ===== iOS-Tap-Overlay ===== */
.swipeIOS-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.swipeIOS-hint p {
    color: #fff;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    padding: 0 1rem;
    font-weight: bold;
}

.swipeIOS-hint .finger-icon {
    color: #fff;
    font-size: 2rem;
}

/* Close-Button für iOS */
.swipeIOS-overlay .close-swipeIOS-hint {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}


/* Smartphone (xs): bis knapp unter 576px */
@media (max-width: 575.98px) {
    .sfd-container {
        max-width: var(--sfd-container-max-width);
        margin: 0 var(--sfd-margin-2x);
    }
    
    .videoPreview .card-footer {
        padding: var(--sfd-margin-2x);
        height: 55px;
    }
}

/* Tablet (sm + md): 576px bis knapp unter 992px */
@media (min-width: 576px) and (max-width: 991.98px) {
    .sfd-container {
        margin: 0;
    }
    
    h1 {
      margin-left: var(--sfd-margin-2x);
      margin-right: var(--sfd-margin-2x);
    }
}