.input-wrapper-signature-3 {

    /* 
        label appears *above* input[range] 
        .labels are positioned absolutely - 
            therefore below 
    */
    display: flex;
    flex-direction: column-reverse;

    /* anchor for absolute position of .labels */
    position: relative;


    width: var(--range-03-width);
    color: var(--clr-inp-border);

    /* all widths and heights inside the 'module' refer to this base */
    font-size: 1em;
    line-height: 1;
}

.input-wrapper-signature-3 [type=range] {

    /* undo questionnaire styles.css */
    max-width: unset;

    margin: 0;
    padding: 0;
    width: 100%;

    /* accommodate the range input height */
    height: 2.6em;

    background-color: transparent;

    /* 
        repeating-linear-gradient - 
        <linear-color-stop>
            color-stop's <color> value
            followed by one or two optional stop positions, 
            (each a <percentage> or a <length>).
    */
    background-image: repeating-linear-gradient(
            90deg,
            var(--clr-inp-border) 0,
            var(--clr-inp-border) 2px,
            transparent 0,
            transparent calc(2*var(--range-03-tick-cx))
    );
    background-image: none;

    background-repeat: no-repeat;

    /* background-position-x align ticks-gradient to label-numbers */
    /* background-position-x: calc(0.75em - 1px) ; */
    background-position-x: calc(.5*(1.5em - 2px));

    /* move down */
    background-position-y: 1.875em;

    /* background-size  - restrict gradient ticks */
    background-size: calc(var(--range-02-width) - var(--range-thumbsize) + 2px) 0.75em;

    font: inherit;
}

.input-wrapper-signature-3 [type=range],
.input-wrapper-signature-3 [type=range]::-webkit-slider-thumb {
    /* required for custom thumb */
    -webkit-appearance: none;
}


.input-wrapper-signature-3 [type=range]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    border: none;
    width:      var(--range-03-width);
    height:     var(--range-trackheight);
    background: var(--clr-inp-border);
}

.input-wrapper-signature-3 [type=range]::-moz-range-track {
    box-sizing: border-box;
    border: none;
    width:      var(--range-03-width);
    height:     var(--range-trackheight);
    background: var(--clr-inp-border);
}

.input-wrapper-signature-3 [type=range]::-ms-track {
    box-sizing: border-box;
    border: none;
    width:      var(--range-03-width);
    height:     var(--range-trackheight);
    background: var(--clr-inp-border);
}


.input-wrapper-signature-3 [type=range]::-webkit-slider-thumb {
    margin-top: -0.625em;
    box-sizing: border-box;
    border:     none;
    border-radius: 50%;
    width:      var(--range-thumbsize);
    height:     var(--range-thumbsize);

    background: var(--clr-inp-border);
    background: var(--clr-inp-focus);
    background: var(--clr-pri);
}

.input-wrapper-signature-3 [type=range]::-moz-range-thumb {
    box-sizing: border-box;
    border:     none;
    border-radius: 50%;
    width:      var(--range-thumbsize);
    height:     var(--range-thumbsize);

    background: var(--clr-inp-border);
    background: var(--clr-inp-focus);
    background: var(--clr-pri);
}

.input-wrapper-signature-3 [type=range]::-ms-thumb {
    margin-top: 0;
    box-sizing: border-box;
    border:     none;
    border-radius: 50%;
    width:      var(--range-thumbsize);
    height:     var(--range-thumbsize);

    background: var(--clr-inp-border);
    background: var(--clr-inp-focus);
    background: var(--clr-pri);
}

.input-wrapper-signature-3 [type=range]::-ms-tooltip {
    display: none;
}


/* label */

.input-wrapper-signature-3 [type=range]~label {
    /* 
        tilde - some previous sibling has was [type=range] => apply to label...  
        =>  depending on 
                range-input before  label
                label       after   range-input
    */

    /* overwrite --clr-inp-border */
    color: var(--clr-fg);

    /* change in font size destroys horizontal alignment to gradient ticks */
    /* font-size: 90%; */

    text-align: center;
}




[type=range]~label:after {
    /* automatic appending of a colon */
    /* margin: -4px; */
    /* content: ":"; */
}





/* labels - for the ticks */


/* labels envelope */
.input-wrapper-signature-3 .labels {

    position: absolute;
    bottom: -0.1em;    
    
    /* width:  calc(100%  - var(--range-thumbsize)); */
    width:  var(--ticks-width);
    left:   var(--ticks-cx);

    height: 0.7em; /* must be below the thumb; in conjunction with bottom */

    /* background-color: transparent; */
}

/* labels single elements - positioning */
.input-wrapper-signature-3 .labels span.tick { 
    display: block;
    float:   left;

    height: 0.4em;

    /* transform: translate(-50%) scale(0.9); */
    background-color: lightgray;
    background-color: transparent;

    text-align: center;

    border-right: 3px solid greenyellow;
    border-right: 1px solid #444;
}

/* additional border left */
.input-wrapper-signature-3 .labels span.first { 
    border-left:  3px solid darkgreen;
    border-left:  1px solid #444;
}

/* no border */
.input-wrapper-signature-3 .labels span.suppress-right { 
    border-right:  none;
}
.input-wrapper-signature-3 .labels span.suppress-left {
    border-left: none;
}

/* labels */
.input-wrapper-signature-3 [type=range]~label span.lbl-anchor {
    display: block;
    float: left;
    /* dont disturb the range span;
        good, that the text is still rendered
    */
    width: 0px;
    position: relative; /* anchor for child span.lbl */
}

.input-wrapper-signature-3 [type=range]~label span.lbl {
    position: absolute; /* origin to lbl-anchor */

    display: inline-block;

    height: 0.4em; /* only as base for translatey below */

    font-weight: normal;
    color: var(--clr-fg);
    text-align: center;


    transform: translatex(-50%) translatey(66%) scale(0.85);     

}