/* ---> initiale styles im sf css */

.ark-abm,
.ark-abm-base{
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
}

.ark-abm.show .ark-abm-base{
    display: block !important;
}

.ark-abm-linie{
    position: relative;
    height: 2px;
    width: 100%;
    background-image: linear-gradient(to right, #fff 0 5px, transparent 5px 10px);
    background-size: 10px 100%;
    background-repeat: repeat-x;
}

.ark-abm-linie:before,
.ark-abm-linie:after{
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: -3px;
    background-color: #fff;
    border-radius: 999px;
}

.ark-abm-linie:before{
    left: -3px;
}

.ark-abm-linie:after{
    right: -3px;
    left: auto;
}

.ark-abm-zahl{
    position: absolute;  
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.ark-abm-zahl:after{
    content: 'cm';
    padding-left: 2px;
}

.ark-abm-base > div{
    position: absolute;
    transform-origin: left top;
}

.ark-abm-l{
    bottom: 35%;
    left: 8.3%;
    width: 31%;
    transform: rotate(25deg);
}

.ark-abm-b{
    bottom: 30%;
    left: 38.4%;
    width: 54%;   
    transform: rotate(-7.2deg); 
}

.ark-abm-h{
    bottom: 36%;
    left: 7%;
    width: 17%;
    transform: rotate(-90deg);
}

.ark-abm-kt{
    bottom: 60%;
    left: 8.6%;
    width: 47%; 
    transform: rotate(-1.2deg);
}

.ark-abm-bmt{
    bottom: 21.8%;
    left: 38%;
    width: 27.9167%;
    transform: rotate(-90deg);
}

.ark-abm-boden{
    bottom: 29.5%;
    left: 92.8%;
    width: 4%;
    transform: rotate(-90deg);
}

.ark-abm-boden .ark-abm-zahl{
    transform: rotate(90deg);
    transform-origin: left;
}