/* ----------------------------------- ENTWICKLUNG ----------------------------------- */


.content.entwicklung svg {max-width: 100%; height: auto;}
.content.entwicklung svg g[id*='technologie_'] {cursor: pointer;}
.content.entwicklung svg g[id*='technologie_'] path[id*='hg'] {fill: rgba(var(--grey10)); transition: 0.5s; }
.content.entwicklung svg g[id*='technologie_']:hover path[id*='hg'] {fill: rgba(var(--grey20));}

.content.entwicklung svg g[id*='portfolio_']  {cursor: pointer;}
.content.entwicklung svg g[id*='portfolio_'] path[id*='hg'] {fill: rgba(var(--grey100)); transition: 0.5s; }
.content.entwicklung svg g[id*='portfolio_']:hover path[id*='hg'] {fill: rgba(var(--greydark));}

.content.entwicklung svg g[id*='services_']  {cursor: pointer;}
.content.entwicklung svg g[id*='services_'] g[id*='hg'] path.cls-24 {fill: rgba(255,255,255,1); transition: 0.5s; }
.content.entwicklung svg g[id*='services_']:hover g[id*='hg'] path.cls-24 {fill: rgba(var(--grey10));}


.content.entwicklung .tab_container .texte table tbody {display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px;}
.content.entwicklung .tab_container .texte table tr {display: grid; grid-template-rows: fit-content(200px) 1fr; }
.content.entwicklung .tab_container .texte table tr td:nth-child(1) {grid-row: 1; padding-bottom: 10px; border: 0px solid red; padding-left: 40px; padding-top: 5px;}
.content.entwicklung .tab_container .texte table tr td:nth-child(2) {grid-row: 2; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid rgba(var(--grey100)); }

.content.entwicklung .tab_container .texte table tr td:nth-child(1) {font-family: 'Medium'; font-weight: normal; font-size: 20px; background-image: url('/fileadmin/user_upload/basics/picto.png'); background-repeat: no-repeat; background-size: 30px 30px; }

.content.entwicklung .tab_container .texte .text.tab-1 table tr:nth-child(1) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/portfolio_1.svg');}
.content.entwicklung .tab_container .texte .text.tab-1 table tr:nth-child(2) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/portfolio_2.svg');}
.content.entwicklung .tab_container .texte .text.tab-1 table tr:nth-child(3) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/portfolio_3.svg');}
.content.entwicklung .tab_container .texte .text.tab-1 table tr:nth-child(4) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/portfolio_4.svg');}
.content.entwicklung .tab_container .texte .text.tab-1 table tr:nth-child(5) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/portfolio_5.svg');}
.content.entwicklung .tab_container .texte .text.tab-1 table tr:nth-child(6) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/portfolio_6.svg');}

.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(1) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_1.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(2) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_2.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(3) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_3.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(4) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_4.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(5) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_5.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(6) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_6.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(7) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_7.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(8) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_8.svg');}
.content.entwicklung .tab_container .texte .text.tab-2 table tr:nth-child(9) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/technologie_9.svg');}

.content.entwicklung .tab_container .texte .text.tab-3 table tr:nth-child(1) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/services_1.svg');}
.content.entwicklung .tab_container .texte .text.tab-3 table tr:nth-child(2) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/services_2.svg');}
.content.entwicklung .tab_container .texte .text.tab-3 table tr:nth-child(3) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/services_3.svg');}
.content.entwicklung .tab_container .texte .text.tab-3 table tr:nth-child(4) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/services_4.svg');}
.content.entwicklung .tab_container .texte .text.tab-3 table tr:nth-child(5) td:nth-child(1) {background-image: url('/fileadmin/user_upload/entwicklung/pictos/services_5.svg');}




.content.entwicklung .tab_container .grid .texte .text.tab-1 {opacity: 1; grid-column: 2; grid-row: 1; z-index: 5;}
.content.entwicklung .tab_container .grid .texte .text.tab-2 {grid-column: 2; grid-row: 1; opacity: 0; max-height: 400px; max-width: unset;}
.content.entwicklung .tab_container .grid .texte .text.tab-3 {grid-column: 2; grid-row: 1; opacity: 0; max-height: 400px; max-width: unset;}

.content.entwicklung .texte .text.hide { animation: merkmaleHideEntwicklung 2s ease-out; animation-iteration-count: 1; animation-fill-mode: forwards; z-index: 0;}
.content.entwicklung .texte .text.show { animation: merkmaleShowEntwicklung 3s ease-in; animation-iteration-count: 1; animation-fill-mode: forwards; z-index: 5;}

@keyframes merkmaleShowEntwicklung {
     0% { max-height: 400px; opacity: 0;}
     80% {max-height: 5000px; max-width: 5000px;opacity: 1;}
     100% {max-height: 5000px;  max-width: 5000px; opacity: 1;}
}
               
@keyframes merkmaleHideEntwicklung {
     0% { max-height: 5000px; max-width: 5000px; opacity: 1;}
     20% {max-height: 5000px; max-width: 5000px; opacity: 0;}
     50% {max-height: 1000px; max-width: 1000px; opacity: 0;}
     100% {max-height: 400px; max-width: unset; opacity: 0;}
}

/*
.content.entwicklung .tab_container  .texte table tr:nth-of-type(2n+1) td {padding-right: 20px;  }
.content.entwicklung .tab_container .texte table tr:nth-of-type(2n+2) td {padding-left: 20px;  }
.content.entwicklung .tab_container .texte table tr td:nth-child(2) {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(var(--grey100));}

.content.entwicklung .tab_container .texte table tr:nth-child(2n+1) td:nth-child(1) {padding: 10px 20px 10px 40px; background-position: left center;}
.content.entwicklung .tab_container  .texte table tr:nth-child(2n+2) td:nth-child(1) {padding: 10px 20px 10px 60px; background-position: 20px center;}

*/
@media only screen and (max-width: 1500px) {

}


/* DESKTOP SMALL */
 @media only screen and (min-width: 1024px) and (max-width: 1400px) {
     

     
     }
/* TABLET */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
     .content.entwicklung .tab_container .grid .texte table tbody {display: grid; grid-template-columns: 1fr; column-gap: 0px;}
     .content.entwicklung .tab_container .grid { grid-template-columns: 80px 80px 1fr; overflow: visible;}
     .content.entwicklung .tab_container .tabs ul li {padding-top: 8px; padding-bottom: 6px;}
     .content.entwicklung .tab_container .grid .texte {grid-template-columns: 120px auto 40px;}
}
/* MOBILE */

@media only screen and (max-width: 767px) {
     .content.entwicklung div:has(svg) {display: none;}
     .content.entwicklung .tab_container .tabs {display: none;}
     .content.entwicklung .tab_container .grid { grid-template-columns: 100%; overflow: visible;}
     .content.entwicklung .tab_container .grid .texte {grid-column: 1; grid-template-columns: 100%; background-color: transparent; border: 0;}
     .content.entwicklung .tab_container .grid .texte .text {display: grid; grid-template-rows: auto auto 1fr; background-color: rgb(var(--grey5)); border-radius: 20px; border: 1px solid rgb(var(--grey30)); padding-top: 0px; overflow: visible; margin-bottom: 60px;}
     .content.entwicklung .tab_container .grid .texte .text.tab-1 {grid-column: 1; grid-row: 1; opacity: 1; width: auto; height: auto; max-height: unset; max-width: unset;}
     .content.entwicklung .tab_container .grid .texte .text.tab-2 {grid-column: 1; grid-row: 2; opacity: 1; width: auto; height: auto; max-height: unset; max-width: unset;}
     .content.entwicklung .tab_container .grid .texte .text.tab-3 {grid-column: 1; grid-row: 3; opacity: 1; width: auto; height: auto; max-height: unset; max-width: unset;}
     .content.entwicklung .tab_container .grid .texte .text.show { animation: none;}
     .content.entwicklung .tab_container .grid .texte .text.hide { animation: none;}
     .content.entwicklung .tab_container .grid .texte .text .header {display: block; grid-row: 1/3; grid-column: 1; color: #FFF; border-radius: 100px; background-color: rgb(var(--pColor)); text-align: center; font-family: "Medium"; font-weight: normal; border: 1px solid rgb(var(--pColor)); box-sizing: border-box; display: inline-block; padding: 6px 20px 4px 20px;  font-size: 16px; margin-left: 20px; margin-bottom: 0px; justify-self: start; z-index: 1; transform: translateY(-50%);}
     .content.entwicklung .tab_container .grid .texte .text figure {grid-row: 2/4;  grid-column: 1; margin-top: 20px; }
     .content.entwicklung .tab_container .grid .texte .text table {margin: 0 20px 0 20px;}
     .content.entwicklung .tab_container .grid .texte .text table tbody {grid-template-columns: 100%;}
     .content.entwicklung .tab_container .grid .texte .text table tr:last-child td:nth-child(2) {margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}
     .content.entwicklung .tab_container .grid .texte .text table tr td {float: left; width: 100%;}







}