/**
 * NF Digital Shop - Teaser Widget Styles
 */

/* Wrapper */
.nfds-teaser-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Container - Desktop: nebeneinander */
.nfds-teaser-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

/* Einzelnes Teaser Item - HORIZONTAL: Icon links, Titel rechts */
.nfds-teaser-item {
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px;
    height: auto;
    box-sizing: border-box !important;
}

.nfds-teaser-item-link {
    text-decoration: none;
    color: inherit;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px;
    width: 100%;
    height: 100%;
    box-sizing: border-box !important;
}

/* Kein Hover-Effekt */

/* Icon - Links, PERFEKT MITTIG mit !important */
.nfds-teaser-icon {
    font-size: 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.nfds-teaser-icon i,
.nfds-teaser-icon svg {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Titel - Rechts, PERFEKT MITTIG mit !important */
.nfds-teaser-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    white-space: nowrap;
    display: block !important;
    align-self: center !important;
}

/* Navigation Buttons - Komplett entfernt (alles automatisch) */

/* ============================================
   MOBILE (nur Phone): Slider oder Laufschrift
   Tablet bleibt normal wie Desktop
   ============================================ */

@media (max-width: 600px) {

    /* MARQUEE (Laufschrift) - Seamless Loop */
    .nfds-teaser-wrapper {
        overflow: hidden !important;
        width: 100% !important;
    }

    .nfds-teaser-wrapper .nfds-teaser-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 50px !important;
        animation-name: nfds-marquee-scroll !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
        animation-duration: 12s !important;
        will-change: transform;
        width: max-content !important;
        min-width: 200vw !important;
    }

    .nfds-teaser-wrapper .nfds-teaser-item {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        max-width: none !important;
        width: auto !important;
    }

    @keyframes nfds-marquee-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-33.333%); /* -33.333% weil Items 2x dupliziert sind (3x total) */
        }
    }

    /* Pausieren bei Hover */
    .nfds-teaser-wrapper[data-mobile-mode="marquee"]:hover .nfds-teaser-container {
        animation-play-state: paused;
    }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
    .nfds-teaser-item {
        padding: 15px 10px;
    }

    .nfds-teaser-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .nfds-teaser-title {
        font-size: 16px;
    }

    .nfds-teaser-description {
        font-size: 13px;
    }
}