.rot-cpt-dias{
    flex-wrap:wrap;
    width:100%;
    position:relative;
    line-height:1.15;
}

.rot-flex{
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.gemeinsamercontainer{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:75%;
    margin-top: 7rem;
}
.hermann-inner{
    height:100%;
    width:100%;
    top:0;
    left:0;
    position: absolute;
    /* background-color: #f9f9f9; */
    font-size:1rem;
    padding-top: 2em;
}
.hermann-segment{
    position:absolute;
    top:50%;
    left:50%;
    transform: rotate(0deg) translate(-7em,-100%);
    height:35%;
    /* outline:2px dashed purple; */
    transform-origin:0 0;
    font-size:0.9em;

}

.hermann-segment>*{
    position:absolute;
}
.segment-link{
    display:block;
    top:0;
    left:0;
    height:100%;
}
.segment-link:not([href]){
    cursor:help;
}
.segment-circle{
    position:absolute;
    top:0;
    left: -1.2em;
    width: 2.4em;
    height: 2.4em;
    line-height: 2.4em;
    text-align:center;
    color:white;
    font-size:1.5em;
    border-radius:500px;
}
svg.peter{
    width: 5.5em;
    left: 2.1em;
    top: 0.6em;
    position:absolute;
}
svg.hermann-logo{
    left: 50%;
    top: 50%;
    width: 5rem;
    position: absolute;
    transform: translate(-50%, -50%);
}

.greytext{
    position: absolute;
    width:10em;
    text-align:center;
    transform: translateX(-50%);
}
.greytext1{
    top: 9%;
    left: 67%;
}
.greytext2{
    top: 32%;
    left: 87%;
}
.greytext3{
    top: 60%;
    left: 87%;
}
.manderl-container{
    position: absolute;
    width:10em;
    height: 2em;
    top: -2.5em;

    /* transform: translateX(-50%); */
}
.manderl-container>span,
.manderl-container>.manderl{
    position: relative;
    height: auto;
    bottom: 0em;
    width: 21%;
    transform: translateX(0);
    display:inline-block;
}

.manderl-container>.manderl:first-child .manderl-color{
    fill:black;
}

.hermann-segment:nth-child(2) .manderl-container,
.hermann-segment:nth-child(3) .manderl-container,
.hermann-segment:nth-child(4) .manderl-container{
    bottom: 0.5em;
    top: auto;
    left: 103%;
    transform: translateX(0);
    text-align:left;
}
.hermann-segment:nth-child(5) .manderl-container{
    bottom: -2.5em;
    top: auto;
    left: 0;
    transform: translateX(0);
    text-align: center;
}
.hermann-segment:nth-child(6) .manderl-container,
.hermann-segment:nth-child(7) .manderl-container,
.hermann-segment:nth-child(8) .manderl-container{
    bottom: 0.5em;
    top: auto;
    left: -103%;
    transform: translateX(0);
    text-align:right;
}
.hermann-segment:nth-child(2) .manderl-container>.manderl,
.hermann-segment:nth-child(3) .manderl-container>.manderl,
.hermann-segment:nth-child(4) .manderl-container>.manderl,
.hermann-segment:nth-child(5) .manderl-container>.manderl{
    /* position: absolute; */
    height: auto;
    bottom: 0.3em;
    /* width: 25%; */
    left:0;
    transform: translateX(0);
}
.hermann-segment:nth-child(6) .manderl-container>.manderl,
.hermann-segment:nth-child(7) .manderl-container>.manderl,
.hermann-segment:nth-child(8) .manderl-container>.manderl{
    /* position: absolute; */
    height: auto;
    bottom: 0.3em;
    /* width: 25%; */
    right:0;
    transform: translateX(0);
}

.hermann-segment .link-label{
    position: absolute;
    top: -28.5%;
    width:10em;
    text-align:center;
    left: 50%;
    transform: translateX(-50%);
}
.greytext2,
.hermann-segment:nth-child(2) .link-label{
    top: -9.4em;
    left: 1.2em;
    transform: rotate(-45deg) translateX(-50%);
}
.greytext3,
.hermann-segment:nth-child(3) .link-label{
    top: -2.5em;
    left: -5.9em;
    transform: rotate(-90deg) translateX(50%);
}
.greytext4,
.hermann-segment:nth-child(4) .link-label{
    top: -3em;
    left: -3.4em;
    transform: rotate(-135deg) translateX(50%);
}
.greytext5,
.hermann-segment:nth-child(5) .link-label{
    top: -4.1em;
    left: -50%;
    transform: rotate(-180deg) translateX(50%);
}
.greytext6,
.hermann-segment:nth-child(6) .link-label{
    top: -10em;
    left: 0.4em;
    transform: rotate(-225deg) translateX(50%);
}
.greytext7,
.hermann-segment:nth-child(7) .link-label{
    top: -12em;
    left: -4.2em;
    transform: rotate(-270deg) translateX(50%);
}
.greytext8,
.hermann-segment:nth-child(8) .link-label{
    top: -9.2em;
    left: -11em;
    transform: rotate(-315deg) translateX(50%);
}
.hermann-segment:last-child .greytext{display:none;}

.hermann-segment .text1 a{
    font-size: 0.95rem;
    line-height: 1.3!important;
    display: block;
}
.greytext{ text-align: left;}
.greytext1 {top: -3.6em; left: 15em;}
.greytext2 {top: -8.8em; left:10.2em;}
.greytext3 {top: -2.1em; left:1.8em;}
.greytext4 {top: -4em; left:3em;}
.greytext5 {top: -3.4em; left:14.2em;}
.greytext6 {top: -7.9em; left: 10.3rem;}
.greytext7 {top: -11.7em; left: 3.3em;}

@media(max-width:1199px){


    .hermann-segment.segment-3 .manderl-container{top:3.4em; left:0; text-align:center;}
    .hermann-segment.segment-7 .manderl-container{top:3.4em; left:0; text-align:center;}

    .greytext1{    top: -3em;        left: 13em;}
    .greytext2{    top: -9.7em;        left: 9.9em;}
    .greytext3{    top: -3.2em;        left: 1.5em;}
    .greytext4{    top: -4.6em;        left: 1.2em;}
    .greytext5{    top: -3.4em;        left: 13.7em;}
    .greytext6{    top: -9.1em;        left: 8.3em;}
    .greytext7{    top: -11.7em;        left: 1.4em;}

}
@media(max-width:991px){


    .hermann-segment.segment-3 .manderl-container{top:3.4em; left:0; text-align:center;}
    .hermann-segment.segment-7 .manderl-container{top:3.4em; left:0; text-align:center;}

    .greytext1{    top: -3.5em;        left: 11.2em;}
    .greytext2{    top: -9.3em;        left: 7.2em;}
    .greytext3{    top: -2.4em;        left: 1.7em;}
    .greytext4{    top: -4.1em;        left: 1em;}
    .greytext5{    top: -4.1em;        left: 10.4em;}
    .greytext6{    top: -10em;        left: 6em;}
    .greytext7{    top: -11.7em;        left: 0.3em;}

}
@media(max-width:767px){
    .gemeinsamercontainer{
        position:relative;
        width:100%;
        height:0;
        padding-bottom:68em;
    }
    .hermann-inner{left:1em;}
    .hermann-segment{
        transform: rotate(70deg)!important;
        left:9%;
    }
    a.segment-link .segment-circle {
        transform:rotate(-70deg)!important;
    }
    .hermann-segment .link-label{
        position: absolute;
        text-align:left;
        top: -11em!important;
        left: -1.1em!important;
        transform: rotate(-70deg) translateX(-35%)!important;
    }
    .hermann-segment.segment-1{top:2.7em;}
    .hermann-segment.segment-2{top:12.3em;}
    .segment-2 .link-label{top: -17.3em;}
    .hermann-segment.segment-3{top:21.9em;}
    .hermann-segment.segment-4{top:31.5em;}
    .hermann-segment.segment-5{top:41.1em;}
    .hermann-segment.segment-6{top:50.6em;}
    .hermann-segment.segment-7{top:60.1em;}
    .hermann-segment.segment-8{top:69.6em;}

    .hermann-segment .manderl-container{
        bottom: 0.5em;
        top: 0.3em!important;
        left: 103%!important;
        transform: translateX(0);
        text-align:left!important;
    }

    .greytext {transform: rotate(-70deg);top: -7.6em;left:2.7em;}
    .greytext1 {top: -7.6em; left: 2.6em; text-align: left; transform: rotate(-70deg);}
    svg.hermann-logo{top:0.4em; right:-2em; left:auto; transform:translate(-50%, -69%);}

}

@media (min-width:1200px){
    .gemeinsamercontainer>.text1{
        width:20%;
    }
    .gemeinsamercontainer>.text1 a{
        font-size: 1rem;
        line-height: 1.5!important;
    }
    svg.peter{
        width:7.8em;
    }
    .hermann-segment{
        position:absolute;
        top:50%;
        left:50%;
        transform: rotate(0deg) translateY(-100%);
        height:35%;
        /* outline:2px dashed purple; */
        transform-origin:0 0;

    }
    .hermann-segment .link-label{
        position: absolute;
        top: -24.5%;
        width:10em;
        text-align:center;
        left: 50%;
        transform: translateX(-50%);
    }
    .hermann-segment:nth-child(2) .link-label{
        top: -9.8em;
        left: 1.2em;
        transform: rotate(-45deg) translateX(-50%);
    }
    .hermann-segment:nth-child(3) .link-label{
        top: -2.5em;
        left: -5.2em;
        transform: rotate(-90deg) translateX(50%);
    }
    .hermann-segment:nth-child(4) .link-label{
        top: -3em;
        left: -5em;
        transform: rotate(-135deg) translateX(50%);
    }
    .hermann-segment:nth-child(5) .link-label{
        top: -26.5%;
        left: -50%;
        transform: rotate(-180deg) translateX(50%);
    }
    .hermann-segment:nth-child(6) .link-label{
        top: -10em;
        left: 2.1em;
        transform: rotate(-225deg) translateX(50%);
    }
    .hermann-segment:nth-child(7) .link-label{
        top: -12em;
        left: -4.9em;
        transform: rotate(-270deg) translateX(50%);
    }
    .hermann-segment:nth-child(8) .link-label{
        top: -9.4em;
        left: -10.9em;
        transform: rotate(-315deg) translateX(50%);
    }
    .hermann-segment .text1 a{
        font-size: 0.95rem;
        line-height: 1.3!important;
        display: block;
    }

}
.guy-hermann .manderl-color{
    fill:currentColor;
}
.guy-expert .manderl-color{
    fill:#00b7f5;
}
.guy-client .manderl-color{
    fill:#333333;
}
.guy-builder .manderl-color{
    fill:#d69e02;
}
.guy-hermann {
    color:#36b8b0;
}
.legende .guy-hermann .manderl-color{
    fill:#36b8b0;
}
.guy-expert{
    color:#00b7f5;
}
.guy-client{
    color:#333333;
}
.guy-builder{
    color:#d69e02;
}
.gemeinsamercontainer{margin-top:7.5em;}

.legende{
    width:18.6rem;margin-top:2rem;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    margin-top:-6em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid grey;
}

@media(max-width:575.888px){
    .legende{
        width: 18.6rem;
        margin-top: 2rem;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-top: -9em;
        padding-bottom: 2.7em;
        border-bottom: 2px solid grey;
    }
    .gemeinsamercontainer {
        margin-top: 10.5em;
    }
    svg.hermann-logo {
        top: -0.5em;
    }
}
.legende [class*="guy-"]{
    width:25%;text-align: center;
    width:50%;text-align: left;
    -ms-flex-align: center !important;
    align-items: center !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    margin-bottom:0.5em;
}
.legende [class*="guy-"]:first-child,
.legende [class*="guy-"]:nth-child(3){width:59%;}
.legende [class*="guy-"]:last-child,
.legende [class*="guy-"]:nth-child(2){width:41%;}


.legende [class*="guy-"] svg{
    width:2.5em;
    display:block;
    margin-left: auto;
    margin-right: auto;

    width: 1.7em;
    display: block;
    margin-left: 0;
    margin-right: 0.5em;
}
.legendetext{
    font-size: 0.8em;
    line-height: 1.4;
    display: block;
    margin-top: 3px;
    max-width: 100%;
    position: relative;

    font-size: 0.9em;
    line-height: 1;
    display: block;
    margin-top: 3px;
    max-width: 100%;
    position: relative;
}
@media(min-width:768px){
    .rot-cpt-dias{
        padding-bottom:10rem;
    }
    svg.peter{width:4.5em;}

    .legende{
        width:35.5rem;
        position:absolute;
        z-index:2;
        /* bottom:0; */
        border-bottom: 2px solid grey;
    }
    .legende [class*="guy-"]:first-child,
    .legende [class*="guy-"]:nth-child(3),
    .legende [class*="guy-"]:last-child,
    .legende [class*="guy-"]:nth-child(2){width:25%;}

    .greytext{text-align:center;}
}
@media(min-width:992px){
    svg.peter{width:6.4em;}
    .legende{
        width:18.5rem;
        position:absolute;
        z-index:2;
        /* bottom:0; */
        padding-bottom:0.5em;
        border-bottom: 2px solid grey;
    }
    .legende [class*="guy-"]:first-child,
    .legende [class*="guy-"]:nth-child(3){width:59%;}
    .legende [class*="guy-"]:last-child,
    .legende [class*="guy-"]:nth-child(2){width:41%;}
}
@media(min-width:1200px){
    .rot-cpt-dias{
        padding-bottom:2rem;}
    .legende{
        width:20.5rem;
        position:absolute;
        z-index:2;
        margin-top:1rem;
        bottom:auto;
        padding-bottom: 0.8em;
        /* padding-right: 0.8em; */
        border-bottom: 2px solid grey;
        /* border-right: 2px solid grey; */
    }
    .gemeinsamercontainer{margin-top: 2em;}

    svg.peter{width:8.8em;}
}

.hermann-segment{
    opacity:0;
    transform:scale(0);
    transition:all 1s;
}

.hermann-segment.is-damn-visible{
    opacity:1;
    transform:scale(1);

}
.pp-tab-label{background:#36b8b0; color:white!important; border:2px solid transparent; padding:5px 15px;display:inline-block; z-index:12;position:relative;}
.pp-tab-label:hover{background:#1c7772;}
.pp-tab-active .pp-tab-label{
    background:white;
    color:#36b8b0!important;
    padding:5px 15px;
    border:2px solid #36b8b0;
}

.pp-tab-active .pp-tab-label:hover{color:grey;}

.tippy-box{padding:0.5em 0.5em 0.7em;}