.explo-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:10000;overflow:auto;display:none;
    /* Pull-to-refresh verhindern */
    overscroll-behavior:none;
    -webkit-overflow-scrolling:auto;
    touch-action:pan-x pan-y pinch-zoom
}

/* Loading State - Modal sofort gross */
.explo-modal.explo-modal-loading .explo-modal-content{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent
}
.explo-modal-content{position:relative;margin:20px auto;max-width:95%;max-height:calc(100vh - 40px);background:#1a1a1a;border-radius:8px;overflow:hidden}
.explo-modal-close{
    position:fixed;
    top:10px;
    right:15px;
    font-size:32px;
    color:#fff;
    cursor:pointer;
    z-index:10002;
    background:rgba(0,0,0,0.5);
    border-radius:50%;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1
}
.explo-modal-close:hover{color:#ff6b6b;background:rgba(0,0,0,0.7)}
.explo-modal-header{display:flex;justify-content:center;align-items:center;gap:20px;padding:10px;background:#222;color:#fff}
.explo-nav-btn{background:#4a90d9;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer}
.explo-nav-btn:hover{background:#357abd}
.explo-nav-btn:disabled{background:#555;cursor:not-allowed}
.explo-modal-body{position:relative;overflow:auto;max-height:calc(100vh - 120px);text-align:center}
.explo-image-container{position:relative;display:inline-block}
.explo-image-container img{max-width:100%;height:auto;display:block}
/* Cursor fuer Zoomed-Panning auf Desktop */
.explo-image-container.zoomed{cursor:grab}
.explo-image-container.zoomed.panning{cursor:grabbing}
#exploHotspots{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.explo-hotspot{position:absolute;border:2px solid #4a90d9;background:rgba(74,144,217,0.2);cursor:pointer;pointer-events:auto;transition:all 0.2s ease-out}
.explo-hotspot:hover{background:rgba(74,144,217,0.5);border-color:#fff}

/* Hotspot Status: Auf Lager = gruen */
.explo-hotspot-instock{
    border-color:#28a745;
    background:rgba(40,167,69,0.25)
}
.explo-hotspot-instock:hover{
    background:rgba(40,167,69,0.5);
    border-color:#fff
}

/* Hotspot Status: Nicht auf Lager = rot */
.explo-hotspot-outofstock{
    border-color:#dc3545;
    background:rgba(220,53,69,0.25)
}
.explo-hotspot-outofstock:hover{
    background:rgba(220,53,69,0.5);
    border-color:#fff
}

/* Hotspot Badge: Im Warenkorb */
.explo-hotspot-incart{
    box-shadow:0 0 0 3px rgba(40,167,69,0.6)
}

.explo-hotspot-badge{
    position:absolute;
    top:-8px;
    right:-8px;
    width:18px;
    height:18px;
    background:#28a745;
    color:#fff;
    border-radius:50%;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    box-shadow:0 2px 4px rgba(0,0,0,0.3);
    pointer-events:none
}

/* Aktiver Hotspot Highlight */
.explo-hotspot-active{
    background:rgba(74,144,217,0.6) !important;
    border-color:#fff !important;
    box-shadow:0 0 0 3px rgba(74,144,217,0.4), 0 0 20px rgba(74,144,217,0.6);
    z-index:10 !important;
    animation:explo-hotspot-pulse 1.5s ease-in-out infinite
}

@keyframes explo-hotspot-pulse{
    0%,100%{box-shadow:0 0 0 3px rgba(74,144,217,0.4), 0 0 20px rgba(74,144,217,0.6)}
    50%{box-shadow:0 0 0 6px rgba(74,144,217,0.3), 0 0 30px rgba(74,144,217,0.5)}
}
.explo-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px}
.explo-popup{
    position:absolute;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,0.5);
    padding:10px;
    min-width:200px;
    max-width:280px;
    z-index:10002;
    display:none;
    /* Einfacher schneller Fade - kein Scale/Fly-in */
    opacity:0.1;
    transition:opacity 0.15s ease-out
}

/* Popup sichtbar */
.explo-popup-visible{
    opacity:1
}

/* Tablet-spezifisches Popup */
.explo-popup-tablet{
    min-width:260px;
    max-width:320px;
    padding:15px;
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,0.4)
}
.explo-popup img{width:100%;height:auto;border-radius:4px;margin-bottom:8px}
.explo-popup-name{font-weight:bold;font-size:14px;color:#333;margin-bottom:4px}
.explo-popup-price{font-size:16px;color:#4a90d9;font-weight:bold;margin-bottom:8px}
.explo-popup-btn{display:block;width:100%;background:#28a745;color:#fff;border:none;padding:10px;border-radius:4px;cursor:pointer;font-size:14px;text-align:center;text-decoration:none}
.explo-popup-btn:hover{background:#218838;color:#fff}
.explo-popup-loading{text-align:center;padding:20px;color:#666}

/* Product Frame (iframe) Styles */
#exploProductFrame{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10003;
    display:none
}
#exploProductFrame .explo-frame-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5)
}
#exploProductFrame .explo-frame-content{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff
}
#exploProductFrame .explo-frame-loading{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#333;
    font-size:16px;
    z-index:10
}
#exploIframe{
    width:100%;
    height:100%;
    border:none;
    background:#fff
}
.explo-frame-close{
    position:fixed;
    top:10px;
    right:15px;
    font-size:28px;
    color:#333;
    background:#fff;
    border-radius:50%;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10005;
    box-shadow:0 2px 10px rgba(0,0,0,0.3);
    border:none;
    line-height:1
}
.explo-frame-close:hover{background:#f0f0f0}

/* Loading Box Enhanced */
.explo-loading-box{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.85);
    color:#fff;
    padding:30px 50px;
    border-radius:12px;
    font-size:18px;
    z-index:10005;
    text-align:center;
    box-shadow:0 4px 30px rgba(0,0,0,0.5)
}
.explo-loading-box .spinner{
    width:40px;
    height:40px;
    border:4px solid rgba(255,255,255,0.3);
    border-top-color:#4a90d9;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 15px
}
@keyframes spin{
    to{transform:rotate(360deg)}
}

/* ============================================
   TABLET STYLES (max-width: 1024px)
   ============================================ */
@media screen and (max-width:1024px){
    .explo-modal-content{
        margin:10px auto;
        max-width:98%
    }

    .explo-modal-header{
        padding:12px;
        gap:15px;
        flex-wrap:wrap
    }

    .explo-nav-btn{
        padding:12px 20px;
        font-size:15px;
        min-width:44px;
        min-height:44px
    }

    .explo-modal-close{
        font-size:36px;
        top:8px;
        right:12px;
        width:44px;
        height:44px;
        display:flex;
        align-items:center;
        justify-content:center
    }

    /* Hotspots fuer Touch */
    .explo-hotspot{
        border-width:2px
    }

    /* Tablet-Popup: Dynamisch positioniert */
    .explo-popup-tablet{
        min-width:280px;
        max-width:350px;
        padding:18px;
        border-radius:12px;
        box-shadow:0 8px 40px rgba(0,0,0,0.35)
    }

    .explo-popup-tablet img{
        max-height:140px;
        border-radius:6px
    }

    .explo-popup-tablet .explo-popup-name{
        font-size:16px;
        margin-bottom:6px
    }

    .explo-popup-tablet .explo-popup-price{
        font-size:18px;
        margin-bottom:10px
    }

    .explo-popup-tablet .explo-popup-btn{
        padding:14px;
        font-size:16px;
        min-height:48px;
        border-radius:8px
    }

    .explo-popup-tablet .explo-popup-link{
        padding:10px;
        font-size:14px
    }

    .explo-popup{
        min-width:250px;
        max-width:320px;
        padding:15px
    }

    .explo-popup-name{font-size:15px}
    .explo-popup-price{font-size:17px}

    .explo-popup-btn{
        padding:14px;
        font-size:16px;
        min-height:48px
    }
}

/* ============================================
   TABLET LANDSCAPE - Split View Ready
   ============================================ */
@media screen and (min-width:769px) and (max-width:1024px) and (orientation:landscape){
    .explo-modal-body{
        display:flex;
        flex-direction:row;
        max-height:calc(100vh - 80px)
    }

    .explo-image-container{
        flex:1;
        max-width:65%
    }

    /* Popup rechts fixiert im Landscape */
    .explo-popup-tablet{
        max-width:300px
    }
}

/* ============================================
   PHONE STYLES (max-width: 768px)
   ============================================ */
@media screen and (max-width:768px){
    .explo-modal{
        /* Touch-Zoom aktivieren */
        touch-action:pan-x pan-y pinch-zoom
    }

    .explo-modal-content{
        margin:0;
        max-width:100%;
        max-height:100vh;
        border-radius:0
    }

    .explo-modal-header{
        padding:10px 15px;
        gap:10px;
        position:sticky;
        top:0;
        z-index:10001
    }

    .explo-modal-body{
        max-height:calc(100vh - 80px);
        -webkit-overflow-scrolling:touch
    }

    .explo-nav-btn{
        padding:12px 18px;
        font-size:14px;
        flex:1;
        max-width:120px
    }

    .explo-modal-close{
        font-size:24px;
        top:10px;
        right:10px;
        width:40px;
        height:40px
    }

    /* Hotspots fuer Touch */
    .explo-hotspot{
        border-width:2px;
        -webkit-tap-highlight-color:rgba(74,144,217,0.4)
    }
    .explo-hotspot:active{
        background:rgba(74,144,217,0.5)
    }

    /* Popup zentriert auf Mobile */
    .explo-popup{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        transform:translate(-50%,-50%) !important;
        width:calc(100% - 32px);
        max-width:320px;
        min-width:auto;
        padding:12px;
        border-radius:8px;
        box-shadow:0 4px 20px rgba(0,0,0,0.5)
    }

    .explo-popup img{
        max-height:120px;
        object-fit:contain;
        margin-bottom:8px
    }

    .explo-popup-name{
        font-size:14px;
        margin-bottom:4px
    }

    .explo-popup-price{
        font-size:16px;
        margin-bottom:8px
    }

    .explo-popup-btn{
        padding:12px;
        font-size:14px;
        min-height:44px;
        border-radius:6px
    }

    /* Loading Box Mobile */
    .explo-loading-box{
        width:calc(100% - 60px);
        max-width:300px;
        padding:25px 30px;
        font-size:16px
    }

    .explo-loading{
        font-size:16px;
        padding:15px;
        background:rgba(0,0,0,0.7);
        border-radius:8px
    }

    /* Product Frame Fullscreen Mobile */
    #exploProductFrame{
        width:100vw;
        height:100vh;
        height:100dvh
    }

    #exploProductFrame .explo-frame-content{
        width:100vw;
        height:100vh;
        height:100dvh
    }

    #exploIframe{
        width:100%;
        height:100%
    }

    .explo-frame-close{
        top:10px;
        right:10px;
        width:44px;
        height:44px;
        font-size:24px
    }
}

/* ============================================
   SMALL PHONE STYLES (max-width: 480px)
   ============================================ */
@media screen and (max-width:480px){
    .explo-modal-header{
        padding:8px 10px;
        gap:8px
    }

    .explo-nav-btn{
        padding:10px 12px;
        font-size:13px;
        border-radius:6px
    }

    .explo-modal-close{
        font-size:24px;
        top:3px;
        right:5px;
        width:40px;
        height:40px
    }

    /* Hotspots fuer Touch */
    .explo-hotspot{
        border-width:2px
    }

    /* Bottom Sheet Style fuer kleine Phones */
    .explo-popup-bottom-sheet{
        position:fixed !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:auto !important;
        border-radius:16px 16px 0 0 !important;
        padding:20px !important;
        padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
        max-height:70vh;
        overflow-y:auto;
        transform:translateY(0) !important;
        box-shadow:0 -4px 30px rgba(0,0,0,0.4);
        /* Slide-Up Animation */
        animation:explo-slide-up 0.3s ease-out
    }

    .explo-popup-bottom-sheet::before{
        content:"";
        display:block;
        width:40px;
        height:4px;
        background:#ccc;
        border-radius:2px;
        margin:0 auto 15px
    }

    @keyframes explo-slide-up{
        from{
            transform:translateY(100%) !important;
            opacity:0
        }
        to{
            transform:translateY(0) !important;
            opacity:1
        }
    }

    .explo-popup-bottom-sheet img{
        max-height:150px;
        margin:0 auto 12px;
        display:block
    }

    .explo-popup-bottom-sheet .explo-popup-name{
        font-size:16px;
        text-align:center
    }

    .explo-popup-bottom-sheet .explo-popup-price{
        font-size:20px;
        text-align:center;
        margin-bottom:12px
    }

    .explo-popup-bottom-sheet .explo-popup-btn{
        padding:14px;
        font-size:16px;
        min-height:48px;
        border-radius:8px
    }

    .explo-popup-bottom-sheet .explo-popup-link{
        display:block;
        text-align:center;
        padding:12px;
        font-size:14px
    }

    /* Fallback fuer normale zentrierte Popups */
    .explo-popup:not(.explo-popup-bottom-sheet){
        width:calc(100% - 20px);
        max-width:300px;
        padding:10px;
        max-height:calc(100vh - 40px);
        overflow-y:auto
    }

    .explo-popup:not(.explo-popup-bottom-sheet) img{
        max-height:100px
    }

    .explo-popup-name{
        font-size:13px
    }

    .explo-popup-price{
        font-size:15px
    }

    .explo-popup-btn{
        padding:10px;
        font-size:13px;
        min-height:40px
    }

    .explo-popup-loading{
        padding:15px;
        font-size:14px
    }

    /* Loading Box kleiner */
    .explo-loading-box{
        width:calc(100% - 40px);
        padding:20px;
        font-size:14px;
        border-radius:10px
    }

    .explo-loading-box .spinner{
        width:32px;
        height:32px;
        margin-bottom:12px
    }

    .explo-frame-close{
        top:10px;
        right:10px;
        width:44px;
        height:44px;
        font-size:24px
    }
}

/* ============================================
   LANDSCAPE MODE (Phones im Querformat)
   ============================================ */
@media screen and (max-width:768px) and (orientation:landscape){
    .explo-modal-body{
        max-height:calc(100vh - 60px)
    }

    .explo-modal-header{
        padding:6px 15px
    }

    .explo-nav-btn{
        padding:8px 14px
    }

    .explo-popup{
        max-height:calc(100vh - 20px);
        max-width:500px
    }

    .explo-popup img{
        max-height:120px
    }
}

/* ============================================
   TOUCH DEVICE ENHANCEMENTS
   ============================================ */
@media (hover:none) and (pointer:coarse){
    .explo-nav-btn:active{
        background:#2a5a8a
    }

    .explo-popup-btn:active{
        background:#1e7e34
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
    .explo-hotspot{
        border-width:2px
    }

    .explo-popup{
        box-shadow:0 4px 20px rgba(0,0,0,0.4)
    }
}

/* ============================================
   REDUCED MOTION (Barrierefreiheit)
   ============================================ */
@media (prefers-reduced-motion:reduce){
    .explo-hotspot{
        transition:none
    }

    .explo-hotspot-active{
        animation:none
    }

    .explo-popup{
        transition:none
    }

    .explo-popup-bottom-sheet{
        animation:none
    }

    .explo-loading-box .spinner{
        animation:none;
        border:4px solid #4a90d9
    }

    .explo-nav-btn,
    .explo-popup-btn,
    .explo-modal-close{
        transition:none
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme:dark){
    .explo-popup{
        background:#2a2a2a;
        color:#fff
    }

    .explo-popup-name{
        color:#fff
    }

    .explo-popup-loading{
        color:#ccc
    }

    .explo-popup-bottom-sheet{
        background:#2a2a2a
    }

    .explo-popup-bottom-sheet::before{
        background:#555
    }
}

/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */
.explo-hotspot:focus{
    outline:3px solid #fff;
    outline-offset:2px;
    background:rgba(74,144,217,0.5)
}

.explo-nav-btn:focus,
.explo-popup-btn:focus,
.explo-modal-close:focus,
.explo-frame-close:focus{
    outline:3px solid #4a90d9;
    outline-offset:2px
}

.explo-popup-link:focus{
    outline:2px solid #4a90d9;
    outline-offset:2px
}

/* Skip-to-Content Support */
.explo-skip-link{
    position:absolute;
    top:-100px;
    left:50%;
    transform:translateX(-50%);
    background:#4a90d9;
    color:#fff;
    padding:10px 20px;
    border-radius:4px;
    z-index:10010;
    transition:top 0.2s
}

.explo-skip-link:focus{
    top:10px
}

/* ============================================
   LOADING STATES
   ============================================ */
.explo-hotspot-loading{
    position:relative;
    pointer-events:none
}

.explo-hotspot-loading::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin 0.8s linear infinite
}

/* ============================================
   STOCK STATUS COLORS
   ============================================ */
.explo-popup-stock{
    font-size:12px;
    padding:4px 8px;
    border-radius:4px;
    margin-bottom:8px;
    display:inline-block
}

.explo-popup-stock.in-stock{
    background:#d4edda;
    color:#155724
}

.explo-popup-stock.out-of-stock{
    background:#f8d7da;
    color:#721c24
}

.explo-popup-incart{
    font-size:12px;
    color:#856404;
    background:#fff3cd;
    padding:4px 8px;
    border-radius:4px;
    margin-bottom:8px
}

/* Dark Mode Stock Status */
@media (prefers-color-scheme:dark){
    .explo-popup-stock.in-stock{
        background:#1e4620;
        color:#a3d9a5
    }

    .explo-popup-stock.out-of-stock{
        background:#4a1c1c;
        color:#f5a5a5
    }

    .explo-popup-incart{
        background:#4a3c00;
        color:#ffd666
    }
}

/* ============================================
   CART ROW LAYOUT
   ============================================ */
.explo-popup-cart-row{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:8px
}

.explo-popup-qty{
    width:60px;
    padding:8px;
    border:1px solid #ddd;
    border-radius:4px;
    text-align:center;
    font-size:14px
}

.explo-popup-qty:focus{
    outline:2px solid #4a90d9;
    border-color:#4a90d9
}

.explo-popup-cart-row .explo-popup-btn{
    flex:1
}

/* Config/Variation Button */
.explo-popup-config{
    background:#4a90d9
}

.explo-popup-config:hover{
    background:#357abd
}

.explo-popup-unavailable{
    color:#721c24;
    background:#f8d7da;
    padding:10px;
    border-radius:4px;
    text-align:center;
    font-size:13px;
    margin-bottom:8px
}

/* Detail Link */
.explo-popup-link{
    display:block;
    text-align:center;
    color:#4a90d9;
    text-decoration:none;
    padding:8px;
    font-size:13px;
    margin-top:4px
}

.explo-popup-link:hover{
    text-decoration:underline
}

/* ============================================
   ZOOM CONTROLS (Mobile + Desktop)
   ============================================ */
.explo-zoom-controls{
    position:fixed;
    bottom:20px;
    right:20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:10003;
    background:rgba(0,0,0,0.7);
    padding:10px;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.4)
}

.explo-zoom-btn{
    width:44px;
    height:44px;
    border:none;
    background:#fff;
    color:#333;
    font-size:24px;
    font-weight:bold;
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
    -webkit-tap-highlight-color:transparent
}

.explo-zoom-btn:hover{
    background:#e0e0e0
}

.explo-zoom-btn:active{
    background:#4a90d9;
    color:#fff;
    transform:scale(0.95)
}

.explo-zoom-reset{
    font-size:20px;
    background:#666;
    color:#fff
}

.explo-zoom-reset:hover{
    background:#555
}

.explo-zoom-reset.active{
    background:#4a90d9;
    animation:explo-pulse 1s ease-in-out infinite
}

@keyframes explo-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(74,144,217,0.5)}
    50%{box-shadow:0 0 0 8px rgba(74,144,217,0)}
}

.explo-zoom-indicator{
    text-align:center;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    padding:4px 0
}

/* Kleinere Zoom-Controls auf kleinen Phones */
@media screen and (max-width:480px){
    .explo-zoom-controls{
        bottom:15px;
        right:15px;
        padding:8px;
        gap:6px
    }

    .explo-zoom-btn{
        width:40px;
        height:40px;
        font-size:20px
    }

    .explo-zoom-indicator{
        font-size:11px
    }
}

/* Landscape: Controls links unten damit nicht im Weg */
@media screen and (max-width:768px) and (orientation:landscape){
    .explo-zoom-controls{
        bottom:10px;
        right:auto;
        left:10px;
        flex-direction:row;
        padding:8px
    }

    .explo-zoom-btn{
        width:36px;
        height:36px;
        font-size:18px
    }
}

/* ============================================
   TUTORIAL OVERLAY
   ============================================ */
.explo-tutorial{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10010;
    animation:explo-fade-in 0.3s ease-out
}

@keyframes explo-fade-in{
    from{opacity:0}
    to{opacity:1}
}

.explo-tutorial-hide{
    animation:explo-fade-out 0.3s ease-out forwards
}

@keyframes explo-fade-out{
    from{opacity:1}
    to{opacity:0}
}

.explo-tutorial-box{
    background:#fff;
    border-radius:16px;
    padding:30px 40px;
    max-width:400px;
    width:calc(100% - 40px);
    text-align:center;
    box-shadow:0 10px 50px rgba(0,0,0,0.5)
}

.explo-tutorial-box h3{
    margin:0 0 20px;
    font-size:22px;
    color:#333
}

.explo-tutorial-controls{
    text-align:left;
    margin-bottom:25px
}

.explo-tutorial-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 0;
    border-bottom:1px solid #eee;
    font-size:14px;
    color:#555
}

.explo-tutorial-item:last-child{
    border-bottom:none
}

.explo-tutorial-icon{
    font-size:24px;
    min-width:40px;
    text-align:center
}

.explo-tutorial-ok{
    background:#4a90d9;
    color:#fff;
    border:none;
    padding:14px 40px;
    font-size:16px;
    border-radius:8px;
    cursor:pointer;
    transition:background 0.2s
}

.explo-tutorial-ok:hover{
    background:#357abd
}

/* ============================================
   THUMBNAIL STRIP (Seitenvorschau)
   ============================================ */
.explo-thumbnails{
    background:#111;
    padding:10px 15px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#4a90d9 #222
}

.explo-thumbnails::-webkit-scrollbar{
    height:6px
}

.explo-thumbnails::-webkit-scrollbar-track{
    background:#222
}

.explo-thumbnails::-webkit-scrollbar-thumb{
    background:#4a90d9;
    border-radius:3px
}

.explo-thumbnails-inner{
    display:inline-flex;
    gap:10px;
    align-items:center
}

.explo-thumb{
    position:relative;
    width:80px;
    height:60px;
    border:2px solid #444;
    border-radius:6px;
    overflow:hidden;
    cursor:pointer;
    transition:all 0.2s;
    flex-shrink:0
}

.explo-thumb:hover{
    border-color:#4a90d9;
    transform:scale(1.05)
}

.explo-thumb.active{
    border-color:#4a90d9;
    box-shadow:0 0 0 2px rgba(74,144,217,0.5)
}

.explo-thumb img{
    width:100%;
    height:100%;
    object-fit:cover
}

.explo-thumb-num{
    position:absolute;
    bottom:2px;
    right:4px;
    background:rgba(0,0,0,0.7);
    color:#fff;
    font-size:10px;
    padding:2px 5px;
    border-radius:3px
}

/* Tablet: Groessere Thumbnails */
@media screen and (min-width:769px) and (max-width:1024px){
    .explo-thumb{
        width:100px;
        height:75px
    }

    .explo-thumb-num{
        font-size:11px;
        padding:3px 6px
    }
}

/* Desktop: Noch groesser */
@media screen and (min-width:1025px){
    .explo-thumb{
        width:120px;
        height:90px
    }

    .explo-thumbnails{
        padding:12px 20px
    }
}

/* Phones: Thumbnails ausblenden */
@media screen and (max-width:768px){
    .explo-thumbnails{
        display:none
    }
}

/* Tutorial auf kleinen Screens */
@media screen and (max-width:480px){
    .explo-tutorial-box{
        padding:20px 25px;
        border-radius:12px
    }

    .explo-tutorial-box h3{
        font-size:18px;
        margin-bottom:15px
    }

    .explo-tutorial-item{
        font-size:13px;
        padding:8px 0;
        gap:10px
    }

    .explo-tutorial-icon{
        font-size:20px;
        min-width:32px
    }

    .explo-tutorial-ok{
        padding:12px 30px;
        font-size:15px;
        width:100%
    }
}

/* Dark Mode Tutorial */
@media (prefers-color-scheme:dark){
    .explo-tutorial-box{
        background:#2a2a2a;
        color:#fff
    }

    .explo-tutorial-box h3{
        color:#fff
    }

    .explo-tutorial-item{
        color:#ccc;
        border-color:#444
    }
}