/* Desktop 8x */
/*
:root {
    --var-tri-box: 250px;
    --var-tri-width: 250px;
    --var-tri-height: 250px;
    --var-tri-width: calc( 1.15555 * var(--var-tri-height) );
    --var-tri-gutter: 0px;
    --var-par-3x-width: calc( var(--var-tri-width) * 3.0);
    --var-tri-shape-background-left: rgba(200,200,200,.0);
    --var-tri-shape-background-right: rgba(200,0,0,.0);
}
*/

:root {
    --var-tri-box: 0px;/* obsolete. wird berechnet */
    
    --var-tri-height: 350px;
    --var-tri-width: calc( 1.15555 * var(--var-tri-height) );
    
    --var-tri-gutter: -1px;
    --var-par-3x-width: calc( var(--var-tri-width) * 3.0);
    --var-tri-shape-background-left: rgba(200,200,200,.0);
    --var-tri-shape-background-right: rgba(200,0,0,.0);
}

/* Desktop 4x */

@media (min-width: 768px) {
    :root {
    --var-tri-height: 250px;
    --var-tri-width: calc( 1.15555 * var(--var-tri-height) );
}
}

@media (min-width: 992px) {
    :root {
    --var-tri-height: 300px;
    --var-tri-width: calc( 1.15555 * var(--var-tri-height) );
}
}
@media (min-width: 1200px) {
    :root {
    --var-tri-height: 350px;
    --var-tri-width: calc( 1.15555 * var(--var-tri-height) );
}
}

@media (max-width: 768px) {
    .pyramide-desktop { display: none;}
}

.no-display { display: none; }

@media (min-width: 768px) {

    #c468 { 
        position: realtive; 
        left: calc( -1 * var(--var-tri-width) / 2 );
    }
    


.tri-row {
        display:flex;
        width:100%;
        flex-direction: row;
        cursor: default;
}   

.par-content-3x {
    width:  calc (  var(--var-tri-width) * 3.0 ) ;
    border: 1px solid red;
}

.tri-content { 
    width:  var(--var-tri-width); 
    height: var(--var-tri-height); 
}

.tri-content>.inner { 
    height: var(--var-tri-height);
}


/* automatische anordnung der Texte im Dreieck */
.tri-content>.inner {
    height: var(--var-tri-height);
    /*
    display: flex;
    vertical-align: bottom;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
   */  
}

.tri-article {
    display: flex;
    min-height: 100%;
    align-content: stretch;
    /*border: 1px solid red;*/
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}



.tri-content p {
  color: white;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Verschiebung der Elemente START */
/* ---------------------------------------------------------------------------- */


.tri>.first {
    position: relative;
}


.tri.n-1 {
    position: relative;
    left: calc(  -0.0 *  var(--var-tri-width) / 2.0 +  1.0 * var(--var-tri-gutter) );
}
.tri.n-2 {
    position: relative;
    left: calc(  -1.0 *  var(--var-tri-width) / 2.0 + 2.0 * var(--var-tri-gutter) );
}
.tri.n-3 {
    position: relative;
    left: calc(  -2.0 *  var(--var-tri-width) / 2.0 + 3.0 * var(--var-tri-gutter) );
}
.tri.n-4 {
    position: relative;
    left: calc(  -3.0 *  var(--var-tri-width) / 2.0 + 4.0 * var(--var-tri-gutter) );
}
.tri.n-5 {
    position: relative;
    left: calc(  -4.0 *  var(--var-tri-width) / 2.0 + 5.0 * var(--var-tri-gutter) );
}
.tri.n-6 {
    position: relative;
    left: calc(  -5.0 *  var(--var-tri-width) / 2.0 + 6.0 * var(--var-tri-gutter) );
}
.tri.n-7 {
    position: relative;
    left: calc(  -6.0 *  var(--var-tri-width) / 2.0 + 7.0 * var(--var-tri-gutter) );
}


/* Verschiebung der Elemente ENDE */
/* ---------------------------------------------------------------------------- */

.tri.tri-up  .tri-clip-path {
    border: 1px solid green;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tri.tri-down  .tri-clip-path {
    border: 1px solid orange;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.tri.tri-invisible { opacity: .01; }
.tri-row-invisible { display: none;}

.main {
  /*
  width: var(--var-tri-box);
  height: var(--var-tri-box);
  */
  width: var(--var-tri-width);
  height: var(--var-tri-height);
  
  /*border: 1px solid red;*/
}

.main .par-down {

  width:  calc ( 3 * var(--var-tri-width) );
  height: var(--var-tri-height);
  border: 1px solid red;
  /*border: 1px solid red;*/
}

.tri .left
{
  width: 50%;
  height: var(--var-tri-height);
  background-color: var(--var-tri-shape-background-left);
}
.tri .right
{
  width: 50%;
  height: var(--var-tri-height);
  background-color:  var(--var-tri-shape-background-right);
}

  

.tri-up>.left {
  float:left;
  clip-path:        polygon(0 0, 0 100%, 100% 0);
  shape-outside:    polygon(0 0, 0 100%, 100% 0);
}

.tri-up>.right {
  float:right;
  clip-path:       polygon(100% 100%, 0% 0%, 100% 0%);
  shape-outside:   polygon(100% 100%, 0% 0%, 100% 0%);
  
}
.tri-down>.left {
  float:left;
  clip-path:        polygon(0 0, 100% 100%, 0 100%);
  shape-outside:    polygon(0 0, 100% 100%, 0 100%);
}

.tri-down>.right {
  float:right;
  clip-path:       polygon(100% 0, 100% 100%, 0 100%);
  shape-outside:   polygon(100% 0, 100% 100%, 0 100%);
  
}


.tri.tri-up  {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    /*background: url("/fileadmin/user_upload/b1.png");*/
    background-position: top center;
    background-size: 110%;
}
.tri.tri-down  {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    /*background: url("/fileadmin/user_upload/b2.png");*/
    background-position: bottom center;
    background-size: 110%;
}

.tri.tri-up:hover  {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    /*background: url("/fileadmin//user_upload/Seite/02_Leistungen/01_Arbeits_und_Gesundheitsschutz/01_bild_Dreieck_Leistungen_Arbeits.png");*/
    background-size: 108%;
    background-position: top center;
    /*background-size: auto 100%;*/
    
}
.tri.tri-down:hover  {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    /*background: url("/fileadmin/user_upload/Seite/02_Leistungen/01_Arbeits_und_Gesundheitsschutz/06_bild_Dreieck_Leistungen_Arbeits.png");*/
    background-size: 108%;
    background-position: bottom center;
}


}

/* Anmiationen */
@media (min-width: 768px) {
    
    .fly-in {
        
    }
    .tri {
        transition: .2s ease-in-out;
        
    }
    .tri-row {
       
    }
    /*
    .fly-in {
        transition: 1.2s ease-in-out;
    }
    
    .n-1.fly-in {
        position: relative;
        left: -1500px;
        top: 600px;
        transition-delay: 3s;
        transition-duration: 3s;
        transform: rotate(180deg);
    }
    .n-2.fly-in {
        position: relative;
        left: 1500px;
        top: 900px;
        transition-delay: 3s;
        transition-duration: 3s;
        transform: rotate(-180deg);
    }
    .n-3.fly-in {
        position: relative;
        left: 3000px;
        top: 1300px;
        transition-delay: 3s;
        transition-duration: 3s;
        transform: rotate(180deg);
    }
    .n-4.fly-in {
        position: relative;
        left: 50px;
        top: 50px;
        transition-delay: 5s;
        transition-duration: 5s;
        transform: rotate(80deg);
    }
 */
    
}

/* Sektion nach oben */
@media (min-width:992px)
 {
     .section.section-default {
    position: relative;
    top: -225px;
    z-index: 100;
}
}