.SB-zeitorga {

    .bar-container {
        padding-top:2.1em;
        padding-bottom:1.7em;
        position: relative;
        width: 100%;
    }

    .bar-markers {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .marker {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 3px;
        background: rgba(61, 61, 61, 1);
    }
    .marker-main {
        position: absolute;
        top: -34px;
        bottom: 0px;
        width: 2px;
        background: rgba(14, 70, 2, 0.57);
        height: 73px;
    }

    .bar-wrapper {
        position: relative;
        height: 25px;
        border: 1px solid #fff;
        background: #eee;
        border-radius: 12px;
        display: flex;
        width: 100%;
    }


    .bar-phases {
        position: absolute;
        left: 0;
        right: 0;
        top: -4px;          /* wie weit nach oben überstehen */
        bottom: -4px;       /* wie weit nach unten überstehen */
        pointer-events: none;
    }

    .phase-bottom {
        padding-left:0.4em;
        padding-top:0.05em;
        position: absolute;
        top: 23px;
        bottom: 0;
        border-bottom-left-radius: 6px;
        display: flex;
        justify-content: left;
        font-size: 15px;
        color: #fff;
        text-shadow: 0 0 3px rgba(0,0,0,0.7);
        overflow: hidden;
        white-space: nowrap;
        height: 26px;
        vertical-align: bottom;
        border-bottom-right-radius: 6px;
    }

    .phase-top1 {
        padding:0.4em;
        position: absolute;
        bottom: 23px;
        border-top-left-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 15px;
        color: #fff;
        text-shadow: 0 0 3px rgba(0,0,0,0.7);
        overflow: hidden;
        white-space: nowrap;
        height: 26px;
        vertical-align: bottom;
        border-bottom-right-radius: 6px;
    }
    .phase-top-main {
        position: absolute;
        bottom: 56px;
        height: 26px;
        padding:0.4em;
        border-top-right-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 18px;
        color: #fff;
        text-shadow: 0 0 3px rgba(0,0,0,0.7);
        overflow: hidden;
        white-space: nowrap;
        vertical-align: bottom;
        border-bottom-left-radius: 6px;
        background: rgba(14, 70, 2, 0.57);
    }
    .phase-top2 {
        position: absolute;
        bottom: 23px;
        height: 26px;
        padding:0.4em;
        border-top-right-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 15px;
        color: #fff;
        text-shadow: 0 0 3px rgba(0,0,0,0.7);
        overflow: hidden;
        white-space: nowrap;
        vertical-align: bottom;
        border-bottom-left-radius: 6px;
    }

    .phase-standard {
        background: rgba(61, 61, 61, 1);
        border: 1px solid rgba(61, 61, 61, 1);
    }


    .bar-elapsed {          /* vergangene Zeit */
        background: #7b7b7b80;
        height: 100%;
    }

    .bar-remaining {        /* verbleibende Zeit */
        background: #26a54cba;
        height: 100%;
    }

    span.FormatMin {
        font-size: 80%;
    }
    .marker.gestartet, .phase-bottom.gestartet, .phase-top1.gestartet, .phase-top2.gestartet {
        background: #19825b;
        border-color: #19825b;
    }

    .phase-top1.gestartet, .phase-top2.gestartet {
        font-size: 120%;
    }

}