/**
 * Timelapse Slider
 * Styles
 */


/* Hauptcontainer */

.tls-wrapper {

    width:100%;
    max-width:1200px;

    margin:30px auto;

    padding:20px;

    border-radius:var(--theme-border-radius,12px);

    background:
            var(--theme-palette-color-8,#ffffff);

    box-sizing:border-box;

}



/* Kopfbereich */

.tls-header {

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

}



.tls-title {

    margin-right:auto;

    font-size:1.25rem;

    font-weight:600;

    color:
            var(--theme-text-color,#222);

}



/* Buttons */

.tls-header button {

    border:none;

    cursor:pointer;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    background:
            var(--theme-palette-color-1,#2874f0);

    color:white;

    transition:.2s ease;

}



.tls-header button:hover {

    transform:scale(1.08);

}



/*
 Vergleichsbereich
*/

.tls-comparison {

    overflow:hidden;

    border-radius:
            var(--theme-border-radius,12px);

}



.tls-comparison img {

    width:100%;

    height:auto;

    display:block;

}




/*
 Datum
*/

.tls-date {

    text-align:center;

    margin:15px 0;

    font-size:.95rem;

    font-weight:600;

    color:
            var(--theme-text-color,#333);

}



/*
 Timeline
*/

.tls-timeline {

    margin:30px 10px;

}



.noUi-target {

    border:none;

    height:8px;

    border-radius:20px;

    background:
            var(--theme-palette-color-6,#ddd);

}



.noUi-connect {

    background:
            var(--theme-palette-color-1,#2874f0);

}



.noUi-handle {

    width:22px!important;

    height:22px!important;

    right:-11px!important;

    top:-7px!important;

    border-radius:50%;

    cursor:pointer;

}



/*
 Thumbnails
*/

.tls-thumbs {

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:10px 0;

    scrollbar-width:thin;

}



.tls-thumb {

    flex:0 0 auto;

    padding:0;

    border:3px solid transparent;

    border-radius:10px;

    overflow:hidden;

    background:none;

    cursor:pointer;

}



.tls-thumb img {

    width:90px;

    height:60px;

    object-fit:cover;

    display:block;

}



.tls-thumb.active {

    border-color:
            var(--theme-palette-color-1,#2874f0);

}



/*
 Fehleranzeige
*/

.tls-error {

    padding:20px;

    border-radius:10px;

    background:#f5f5f5;

    text-align:center;

}



/*
 Vollbildmodus
*/

.tls-wrapper:fullscreen {

    max-width:none;

    width:100vw;

    height:100vh;

    margin:0;

    padding:30px;

    background:#000;

}



.tls-wrapper:fullscreen img {

    max-height:80vh;

    object-fit:contain;

}



/*
 Mobile Optimierung
*/

@media(max-width:768px){


    .tls-wrapper {

        padding:12px;

        margin:15px auto;

    }



    .tls-title {

        font-size:1rem;

    }



    .tls-header button {

        width:38px;

        height:38px;

        font-size:16px;

    }



    .tls-thumb img {

        width:75px;

        height:50px;

    }



    .tls-date {

        font-size:.85rem;

    }



}



/*
 Sehr kleine Geräte
*/

@media(max-width:420px){


    .tls-header {

        flex-wrap:wrap;

    }


    .tls-title {

        width:100%;

        margin-bottom:10px;

    }


}