/* Kachel finden und formatieren */
.class-bildungsweg {
    font-family: "Roboto";
    color: white;
}

.class-bildungsweg>.frame-type-text {
    font-weight: 300;
}


.class-bildungsweg>.frame-type-text {
    border: 1px solid blue;
    width: 24rem;
    height:16rem;
    color: white;
    
}

.class-bildungsweg>.frame-type-text {
    z-index: 101;
    position: absolute;
    top: 6rem;
    left: 22rem;
}

.class-bildungsweg .zahl {
   cursor: pointer;
}
.class-bildungsweg .container-zahlen {
    z-index: 101;
    position: absolute;
    top: 7.5rem;
    left: 3.5rem;
    /*border: .1px solid blue;*/
    width: 5rem;
    color: #dadada;
    font-size: 4rem;
}

.class-bildungsweg .container-zahlen .zahl {
    z-index: 101;
    /*border: 1px solid red;*/
}

/* Höhe einer Zahl nach dimension */
.class-bildungsweg .container-zahlen .zahl {
    display: block;
    margin-bottom: 18px;
    font-weight:900;
}
/* Aktive Zahl */
.class-bildungsweg .container-zahlen .zahl.active {
    color: black;
    /*border: 1px solid green;*/
}

.class-bildungsweg .container-zahlen .zahl:hover {
    /*color: #bababa;*/
    /*border: 1px solid green;*/
}


.bildungsweg-current {
/*    border: 1px solid blue;*/
    width: 24rem;height:16rem;
    color: white;
    z-index: 101;
    position: absolute;
    top: 6rem;
    left: 10rem;
    padding-top: 1rem;
    transition: top 450ms ease, border-color 450ms ease;
    
    /* wichtig für :before */
    box-sizing: border-box;

}

/* Linie links neben der Box */
.bildungsweg-current::before{
  content: "";
  position: absolute;
  right: calc(100% + 0rem); /* Abstand zur Box anpassen */
  top: 25%;
  transform: translateY(-50%);

  width: 5rem;   /* Linienlänge */
  height: 1px;
  background: red;
}


@media(max-width:568px) {
    .bildungsweg-current { left: 9rem;width: 14rem;height:12rem; }
}
@media(min-width:568px) {
    .bildungsweg-current { left: 6rem;width: 14rem;height:12rem; }
}
@media(min-width:768px) {
    .bildungsweg-current { left: 10rem;width: 14rem;height:12rem; }
}
@media(min-width:992px) {
    .bildungsweg-current { left: 10rem;width: 14rem;height:12rem; }
}
@media(min-width:1040px) {
    .bildungsweg-current { left: 10rem;width: 14rem;height:12rem; }
}
@media(min-width:1200px) {
    .bildungsweg-current { left: 14rem;width: 16rem;height:16rem; }
}
@media(min-width:1300px) {
    .bildungsweg-current { left: 14rem;width: 16rem;height:16rem; }
}
@media(min-width:1400px) {
    .bildungsweg-current { left: 14rem;width: 24rem;height:16rem; }
}

/* Nach Zahlen */
.bildungsweg-current.state-01 { 
    top: 6.5rem;
    border: 0px solid red;
}
.bildungsweg-current.state-02 { 
    top: 13.5rem;
    border: 0px solid orange;
}
.bildungsweg-current.state-03 { 
    top: 20.6rem;
    border: 0px solid green;
}
.bildungsweg-current.state-04 { 
    top: 27.7rem;
    border: 0px solid green;
}
.bildungsweg-current.state-05 { 
    top: 35rem;
    border: 0px solid green;
}
.bildungsweg-current.state-06 { 
    top: 42rem;
    border: 0px solid green;
}

/* Blende alle frame-type-text aus */

.class-bildungsweg>.frame-type-text {
    border: 1px solid red;
    opacity: .0;
}

@media(min-width:1200px) {
    /*#c609 { margin-top: -150px;}*/
    #c611 { margin-top: -150px;}
}

/* Desktop bis 1400px */

@media(max-width:140px) {
   
    .class-bildungsweg .container-zahlen {
    z-index: 101;
    position: absolute;
    top: 7.5rem;
    left: 3rem;
    /*border: .1px solid blue;*/
    width: 2rem;
    color: #dadada;
    font-size: 4rem;
}
    
/* Inhalt */
.bildungsweg-current { left: 13rem;}
    
.bildungsweg-current {
/*    border: 1px solid blue;*/
    width: 20rem;height:16rem;
    color: white;
    z-index: 101;
    position: absolute;
    top: 6rem;
    padding-top: 1rem;
    transition: top 450ms ease, border-color 450ms ease;
    
    /* wichtig für :before */
    box-sizing: border-box;

}

  .bildungsweg-current::before{
  content: "";
  position: absolute;
  right: calc(100% + 0rem); /* Abstand zur Box anpassen */
  top: 25%;
  transform: translateY(-50%);

  width: 5rem;   /* Linienlänge */
  height: 1px;
  background: red;
}
    
.class-bildungsweg .container-zahlen .zahl {
    display: block;
    margin-bottom: 0px;
    font-weight:900;
    height: 5.7rem;
}


    
/* Nach Zahlen */

/* Nach Zahlen */
.bildungsweg-current.state-01 { 
    top: 6.5rem;
    border: 0px solid red;
}
.bildungsweg-current.state-02 { 
    top: 12.2rem;
    border: 0px solid orange;
}
.bildungsweg-current.state-03 { 
    top: 17.8rem;
    border: 0px solid green;
}
.bildungsweg-current.state-04 { 
    top: 23.5rem;
    border: 0px solid green;
}
.bildungsweg-current.state-05 { 
    top: 29.2rem;
    border: 0px solid green;
}
.bildungsweg-current.state-06 { 
    top: 35rem;
    border: 0px solid green;
}
    
.class-bildungsweg { min-height: calc(50vh); background: white; }


/* Mobil Bild weg */
#c615 { opacity: 1;}

}



/* Desktop bis 1200px */

@media(max-width:1200px) {
    
    .class-bildungsweg .container-zahlen {
    z-index: 101;
    position: absolute;
    top: 6rem;
    left: 3rem;
    /*border: .1px solid blue;*/
    width: 2rem;
    color: #dadada;
    font-size: 4rem;
}
    .bildungsweg-current::before{
  content: "";
  position: absolute;
  right: calc(100% + 0rem); /* Abstand zur Box anpassen */
  top: 25%;
  transform: translateY(-50%);

  width: 3rem;   /* Linienlänge */
  height: 1px;
  background: red;
}
    
.class-bildungsweg .container-zahlen .zahl {
    display: block;
    margin-bottom: 0px;
    font-weight:900;
    height: 4.78rem;
}

/* Inhalt */
.bildungsweg-current { left: 11rem;}
    
/* Nach Zahlen */
.bildungsweg-current.state-01 { 
    top: 6rem;
    border: 0px solid red;
}
.bildungsweg-current.state-02 { 
    top: 10.8rem;
    border: 0px solid orange;
}
.bildungsweg-current.state-03 { 
    top: 15.5rem;
    border: 0px solid green;
}
.bildungsweg-current.state-04 { 
    top: 20.1rem;
    border: 0px solid green;
}
.bildungsweg-current.state-05 { 
    top: 25rem;
    border: 0px solid green;
}
.bildungsweg-current.state-06 { 
    top: 30rem;
    border: 0px solid green;
}
    
.class-bildungsweg { min-height: calc(50vh); background: white; }


/* Mobil Bild weg */
#c615 { opacity: 1;}

}


/* Tablett Versionen bis 992 */

@media(min-width:768px) and (max-width:992px) {
    
    .class-bildungsweg .container-zahlen {
    z-index: 101;
    position: absolute;
    top: 6rem;
    left: 2.5rem;
    /*border: .1px solid blue;*/
    width: 2rem;
    color: #dadada;
    font-size: 2rem;
}
    .bildungsweg-current::before{
  content: "";
  position: absolute;
  right: calc(100% + 0rem); /* Abstand zur Box anpassen */
  top: 25%;
  transform: translateY(-50%);

  width: 1.5rem;   /* Linienlänge */
  height: 1px;
  background: red;
}
    
.class-bildungsweg .container-zahlen .zahl {
    display: block;
    margin-bottom: 10px;
    font-weight:900;
    height: 44px;
}

/* Inhalt */
    .bildungsweg-current { left: 7rem;}
    
/* Nach Zahlen */
.bildungsweg-current.state-01 { 
    top: 4.5rem;
    border: 0px solid red;
}
.bildungsweg-current.state-02 { 
    top: 8rem;
    border: 0px solid orange;
}
.bildungsweg-current.state-03 { 
    top: 11.2rem;
    border: 0px solid green;
}
.bildungsweg-current.state-04 { 
    top: 14.5rem;
    border: 0px solid green;
}
.bildungsweg-current.state-05 { 
    top: 18rem;
    border: 0px solid green;
}
.bildungsweg-current.state-06 { 
    top: 21.2rem;
    border: 0px solid green;
}
    
.class-bildungsweg { min-height: calc(50vh); background: white; }


/* Mobil Bild weg */
#c615 { opacity: 1;}

}






/* Tablett Versionen bis 768 */

@media(max-width:768px) {
    
    .class-bildungsweg .container-zahlen {
    z-index: 101;
    position: absolute;
    top: 1.5rem;
    left: 0rem;
    /*border: .1px solid blue;*/
    width: 2rem;
    color: #dadada;
    font-size: 2rem;
}
    .bildungsweg-current::before{
  content: "";
  position: absolute;
  right: calc(100% + 0rem); /* Abstand zur Box anpassen */
  top: 25%;
  transform: translateY(-50%);

  width: 1.5rem;   /* Linienlänge */
  height: 1px;
  background: red;
}
    
.class-bildungsweg .container-zahlen .zahl {
    display: block;
    margin-bottom: 10px;
    font-weight:900;
    height: 48px;
}

/* Inhalt */
    .bildungsweg-current { left: 4rem;}
    
/* Nach Zahlen */
.bildungsweg-current.state-01 { 
    top: 0rem;
    border: 0px solid red;
}
.bildungsweg-current.state-02 { 
    top: 3.6rem;
    border: 0px solid orange;
}
.bildungsweg-current.state-03 { 
    top: 7.3rem;
    border: 0px solid green;
}
.bildungsweg-current.state-04 { 
    top: 10.7rem;
    border: 0px solid green;
}
.bildungsweg-current.state-05 { 
    top: 14.5rem;
    border: 0px solid green;
}
.bildungsweg-current.state-06 { 
    top: 18rem;
    border: 0px solid green;
}
    
.class-bildungsweg { min-height: calc(50vh); background: white; }


/* Mobil Bild weg */
#c615 { opacity: 0;}

}




/* Mobile Version Bildungweg */



@media(max-width:586px) {
    
    .class-bildungsweg .container-zahlen {
    z-index: 101;
    position: absolute;
    top: 1.5rem;
    left: 0rem;
    /*border: .1px solid blue;*/
    width: 2rem;
    color: #dadada;
    font-size: 2rem;
}
    .bildungsweg-current::before{
  content: "";
  position: absolute;
  right: calc(100% + 0rem); /* Abstand zur Box anpassen */
  top: 25%;
  transform: translateY(-50%);

  width: 1.5rem;   /* Linienlänge */
  height: 1px;
  background: red;
}
    
.class-bildungsweg .container-zahlen .zahl {
    display: block;
    margin-bottom: 10px;
    font-weight:900;
}

/* Inhalt */
    .bildungsweg-current { left: 4rem;}
    
/* Nach Zahlen */
.bildungsweg-current.state-01 { 
    top: 0rem;
    border: 0px solid red;
}
.bildungsweg-current.state-02 { 
    top: 3.5rem;
    border: 0px solid orange;
}
.bildungsweg-current.state-03 { 
    top: 7rem;
    border: 0px solid green;
}
.bildungsweg-current.state-04 { 
    top: 11rem;
    border: 0px solid green;
}
.bildungsweg-current.state-05 { 
    top: 14.5rem;
    border: 0px solid green;
}
.bildungsweg-current.state-06 { 
    top: 18rem;
    border: 0px solid green;
}
    
.class-bildungsweg { min-height: calc(50vh); background: white; }


/* Mobil Bild weg */
#c615 { opacity: 0;}

}