/* ================================================== *
 * MARK: 
 * -------------------------------------------------- */

.wp-block-meta-box-leistungsspektrum{
    --gap: 2rem;
    position: relative;
}

.wp-block-meta-box-leistungsspektrum img{
    width: calc(var(--wh) / 2.5);
    translate: 10%;
}

.wp-block-meta-box-leistungsspektrum :is(.tab-wrapper,.tab-trigger-wrapper){
    min-height: 600px;    
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.tab-trigger-wrapper {
    --m: 8;
    --tan: calc(pi/var(--m));
    --areas: calc(360 / var(--m));
    --wh: 500px;

    --r: calc(var(--wh) / 2.5);

    --s: var(--r);

    position: relative;
  }

[data-tab-trigger] .mask, 
[data-tab-trigger]::before{
    content: '\a';
    mask-image: url('./segment.svg');
    mask-size: 100%;
    mask-repeat: no-repeat;

    position: absolute;
    inset: 0;

    background-color: var(--base-light);      
} 

[data-tab-trigger]::before{
    top: 25px;
    background-color: #ececec;
}  

[data-tab-trigger]  {
    position: absolute;
    top: 35%; 
    left: 47%;

    margin: calc(-.5*var(--d));
    
    width: var(--s); 
    height: var(--s);
    
    --az: calc(( var(--_count) + 2 ) * 1turn/var(--m));
    
    transform: 
      rotate(var(--az)) 
      translate(var(--r))
      rotate(calc(1turn/4))
    ;
    translate: calc(-50% + var(--gap)) 0;
    cursor: pointer;
}


[data-tab-trigger] span{
    display: inline-block;
    rotate:calc(-1*var(--az));
    transform: rotate(-90deg);

    pointer-events: none;

    text-align: center;
    max-width: 120px;

    font-weight: bold;
    font-size: 15px;
}

[data-tab-trigger]:is(:hover, [data-tab-active]) :is( span){
    color:#fff;
}
[data-tab-trigger]:is(:hover, [data-tab-active]) :is(.mask){
    background-color: var(--primary);
}

[data-tab-trigger]:nth-child(1) span{translate: 0%  -85%;}
[data-tab-trigger]:nth-child(2) span{translate: 0%  -30%; max-width: 100px;}
[data-tab-trigger]:nth-child(3) span{translate: 0%  -65%;}
[data-tab-trigger]:nth-child(4) span{translate: 0%  -65%;}
[data-tab-trigger]:nth-child(5) span{translate: 0%  -75%;}
[data-tab-trigger]:nth-child(6) span{translate: 0%  -50%; max-width: 100px;}
[data-tab-trigger]:nth-child(7) span{translate: 0%  -90%;}

[data-tab]{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;

}
[data-tab] .tab-container{
    overflow: hidden;
    height: 0;
    transition: height 0.4s ease-in-out;
}

[data-tab].active{
    grid-template-rows: 1fr;
}
[data-tab].active .tab-container{
    height: 100%;
}

@media screen and (width <= 1025px) {
    .wp-block-meta-box-leistungsspektrum :is(.tab-wrapper){
        min-height: fit-content;            
    }
    
}
@media screen and (width <= 850px) {

    .wp-block-meta-box-leistungsspektrum img{
        display: none;
    }

    .wp-block-meta-box-leistungsspektrum :is(.tab-wrapper){
        order: 2;
    }
    .wp-block-meta-box-leistungsspektrum :is(.tab-trigger-wrapper){
        order: 1;
        min-height: fit-content;            
    }

    [data-tab-trigger] .mask, 
    [data-tab-trigger]::before{
        content: unset;
        mask-image: unset;
    } 
    
    [data-tab-trigger]::before{
        top: 25px;
        background-color: var(--base-semi-dark);
    }  
    
    [data-tab-trigger]  {
        position:  static;
        transform: unset;

        width:  100%;
        height: fit-content;

        padding:  var(--cvh-space-xs);

        margin: 0 0 var(--cvh-space-xs) 0;

        translate: 0 0;
        cursor: pointer;
    }
    
    
    [data-tab-trigger]:nth-child(n) span{
        rotate:unset;
        transform: unset;
        
        text-align: left;
        max-width:  100%;

        translate: 0 0;
    
    }
    
}