.box.onboarding .row .cols.entries {display: grid; grid-template-columns: 5% 40% 5% 5% 40% 5%; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_hochkant.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain;}
.box.onboarding .row .cols.entries div.wrapper {background-color: #FFF; margin-top: 22px; margin-bottom: 22px; min-height: 135px; padding: 15px 0px 15px 0px; height: auto; border-radius: 10px; display: grid; box-sizing: border-box; transform: rotateX(90deg); transition: transform 2s;}
.box.onboarding .row .cols.entries div.wrapper.anim {transform: rotateX(0deg);}
.box.onboarding .row .cols.entries div.wrapper img {width: 55px; height: auto;}
.box.onboarding .row .cols.entries div {background-repeat: no-repeat; background-position: center center;}
.box.onboarding .row .cols.entries div:nth-of-type(3) {--myindex: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_1.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_links.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(4) {--mystartindex: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_2.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(9) {--myindex: 2; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_3.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_links.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(10) {--mystartindex: 2; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_4.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(15) {--myindex: 3; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_5.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_links.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(16) {--mystartindex: 3; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_6.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(21) {--myindex: 4; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_7.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_links.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(22) {--mystartindex: 4; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_8.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(27) {--myindex: 5; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_9.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_links.svg');}
.box.onboarding .row .cols.entries div:nth-of-type(28) {--mystartindex: 5; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_10.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}

/* 6n+3 & 6n+4 => mittlere Grafiken */
.box.onboarding .row .cols.entries div:nth-of-type(6n+3) {display: grid; grid-column-start: 3; grid-column-end: span 2; grid-row: var(--myindex);}
.box.onboarding .row .cols.entries div:nth-of-type(6n+4) {grid-column-start: 3; grid-column-end: span 2; grid-row-start: var(--mystartindex); grid-row-end: span 2;}

/* 6n+2 => linke Einträge */
.box.onboarding .row .cols.entries div:nth-of-type(2) {--myindex: 1;}
.box.onboarding .row .cols.entries div:nth-of-type(8) {--myindex: 2;}
.box.onboarding .row .cols.entries div:nth-of-type(14) {--myindex: 3;}
.box.onboarding .row .cols.entries div:nth-of-type(20) {--myindex: 4;}
.box.onboarding .row .cols.entries div:nth-of-type(26) {--myindex: 5;}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) {grid-column: 2; grid-row: var(--myindex); display: grid; grid-template-columns: auto 115px;}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) div.picto {grid-row-start: 1; grid-row-end: span 2; grid-column: 2; justify-self: center; align-self: center;}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) div.titel {grid-column: 1; grid-row: 1; justify-self: end; align-self: end; font-family: "Medium"; font-weight: normal; font-size: var(--fontLarger); line-height: var(--fontLargerLH);}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) div.info {grid-column: 1; grid-row: 2; justify-self: end; align-self: start; text-align: right; margin-bottom: 0px; max-width: 90%; background-image: none;}

/* 6n+5 => rechte Einträge */
.box.onboarding .row .cols.entries div:nth-of-type(5) {--mystartindex: 1; --myendindex: 2;}
.box.onboarding .row .cols.entries div:nth-of-type(11) {--mystartindex: 2; --myendindex: 3;}
.box.onboarding .row .cols.entries div:nth-of-type(17) {--mystartindex: 3; --myendindex: 4;}
.box.onboarding .row .cols.entries div:nth-of-type(23) {--mystartindex: 4; --myendindex: 5;}
.box.onboarding .row .cols.entries div:nth-of-type(6n+5) {grid-column: 5; grid-row-start: var(--mystartindex); grid-row-end: span 2; justify-self: center; align-self: center; display: grid; grid-template-columns: 115px auto;}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) div.picto {grid-row-start: 1; grid-row-end: span 2; grid-column: 1; justify-self: center; align-self: center;}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) div.titel {grid-column: 2; grid-row: 1; justify-self: start; align-self: end; font-family: "Medium"; font-size: var(--fontLarger); line-height: var(--fontLargerLH);}
.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) div.info {grid-column: 2; grid-row: 2; justify-self: start; align-self: start; text-align: left; margin-bottom: 0px; max-width: 90%; background-image: none;}

/* 6n+6 & 6n+7 => ausblenden */
.box.onboarding .row .cols.entries div:nth-of-type(6n+6) {display: none;}
.box.onboarding .row .cols.entries div:nth-of-type(6n+7) {display: none;}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
	.box.onboarding .row .cols.entries div.wrapper {min-height: 150px; margin-top: 15px; margin-bottom: 15px;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.box.onboarding .row .cols.entries { grid-template-columns: 0% 45% 5% 5% 45% 0%;}
	.box.onboarding .row .cols.entries div.wrapper {min-height: 175px; margin-top: 15px; margin-bottom: 15px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) { grid-template-columns: auto 80px;}
	.box.onboarding .row .cols.entries div:nth-of-type(6n+5) { grid-template-columns: 80px auto;}
	.box.onboarding .row .cols.entries div.wrapper div.picto img {width: 40px; height: auto;}
}

@media only screen and (max-width: 767px) {
	.box.onboarding .row .cols.entries {grid-template-columns: 50px 1fr; background-position: 14px center;}
	.box.onboarding .row .cols.entries div.graphics {}
	.box.onboarding .row .cols.entries div:nth-of-type(2) {--myindex: 1;}
	.box.onboarding .row .cols.entries div:nth-of-type(5) {--myindex: 2;}
	.box.onboarding .row .cols.entries div:nth-of-type(8) {--myindex: 3;}
	.box.onboarding .row .cols.entries div:nth-of-type(11) {--myindex: 4;}
	.box.onboarding .row .cols.entries div:nth-of-type(14) {--myindex: 5;}
	.box.onboarding .row .cols.entries div:nth-of-type(17) {--myindex: 6;}
	.box.onboarding .row .cols.entries div:nth-of-type(20) {--myindex: 7;}
	.box.onboarding .row .cols.entries div:nth-of-type(23) {--myindex: 8;}
	.box.onboarding .row .cols.entries div:nth-of-type(26) {--myindex: 9;}
	.box.onboarding .row .cols.entries div:nth-of-type(29) {--myindex: 10;}
	.box.onboarding .row .cols.entries div.wrapper {height: auto; min-height: unset; margin-top: 10px; margin-bottom: 10px; padding: 0px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) {grid-column: 2; grid-row: var(--myindex); grid-template-columns: 60px auto;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) {grid-column: 2; grid-row: var(--myindex); grid-template-columns: 60px auto;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) div.picto {grid-row: 1/3; grid-column: 1; justify-self: center; align-self: center; width: 40px; height: auto; background-image: none; padding: 10px 0 10px 0; line-height: 0px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) div.titel {grid-column: 2; grid-row: 1; justify-self: start; align-self: center; padding: 10px 0 0 10px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+2) div.info {grid-column: 2/3; grid-row: 2; justify-self: start; align-self: start; text-align: left; margin-bottom: 0px; max-width: 90%; padding-bottom: 10px; padding: 0 0 10px 10px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) div.picto {grid-row: 1/3; grid-column: 1; justify-self: center; align-self: center; width: 40px; height: auto; background-image: none; padding: 10px 0 10px 0; line-height: 0px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) div.titel {grid-column: 2; grid-row: 1; justify-self: start; align-self: center; padding: 10px 0 0 10px;}
	.box.onboarding .row .cols.entries div.wrapper:nth-of-type(6n+5) div.info {grid-column: 2/3; grid-row: 2; justify-self: start; align-self: start; text-align: left; margin-bottom: 0px; max-width: 90%; padding-bottom: 10px; padding: 0 0 10px 10px;}
	.box.onboarding .row .cols.entries div {background-position: left center, center center;}
	.box.onboarding .row .cols.entries div:nth-of-type(1) {grid-row: 1; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_1.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(4) {grid-row: 2; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_2.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(7) {display: block; grid-row: 3; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_3.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(10) {grid-row: 4; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_4.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(13) {display: block; grid-row: 5; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_5.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(16) {grid-row: 6; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_6.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(19) {display: block; grid-row: 7; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_7.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(22) {grid-row: 8; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_8.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(25) {display: block; grid-row: 9; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_9.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
	.box.onboarding .row .cols.entries div:nth-of-type(28) {grid-row: 10; grid-column: 1; background-image: url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_1.svg'), url('/fileadmin/user_upload/karriere/onboarding/grafik_onboarding_linie_rechts.svg');}
}


