/* ---   Leaflet-Control Container   --- */
.timeslider-control {
    background: white;
    padding: 8px 15px 25px 15px;
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    border: 3px solid #ccc;
    width: 50vw;
    margin: 0;
}

/* ---   Slider-Grundelement   --- */
    #timeslider {
        position: relative;
        height: 14px;                 /* Höhe des Balkens */
    }

    /* Inaktiver Bereich */
    #timeslider .noUi-base {
        background: #ffffff;
    }

    /* Aktiver Bereich */
    #timeslider .noUi-connect {
        background: #6A8DAD;
    }

/* ---   Handle   --- */
    #timeslider .noUi-handle {
        height: 18px;
        width: 16px;
        top: -3px;                    /* zentriert über 14px Balkenhöhe */
        right: -8px;
        border-radius: 4px;
        background: rgba(70,70,70,1.0);
        z-index: 10;
        box-shadow:
            inset 0 0 0px #FFF,
            inset 0 0px 0px #EBEBEB,
            0 0px 0px -0px #BBB;
    }

    /* Griff-Linien */
    #timeslider .noUi-handle:before,
    #timeslider .noUi-handle:after {
        content: "";
        position: absolute;
        height: 13px;
        width: 2px;
        background: #E8E7E6;
        left: 6px;
        top: 2px;
    }

    /* Tooltip */
    #timeslider .noUi-tooltip {
        padding: 2px 4px;
        font-size: 12px;
        line-height: 1.1;
    }

/* ---   Pips (Markierungen)   --- */
    #timeslider .noUi-pips {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 14px;
        pointer-events: none;
        z-index: 5;
    }

    #timeslider .noUi-marker {
        width: 2px;
        top: 0px;
        height: 12px;                 /* gleiche Höhe wie Balken */
        background: #000;
        z-index: 6;
    }

    #timeslider .noUi-value {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        white-space: nowrap;
        top: 22px;
        font-size: 12px;
        font-weight: bold;
        color: #000;
        text-shadow: 0 0 2px white;
        pointer-events: none;
        z-index: 7;
    }

/* ---   Titel   --- */
    .timeslider-title {
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        margin: 0 0 25px 0;
    }

/* Linken (ersten) Pip komplett ausblenden */
#timeslider .noUi-pips-horizontal .noUi-marker:first-child,
#timeslider .noUi-pips-horizontal .noUi-value:first-child {
    display: none;
}