:root{--blue-900:#005058;--red-600:#a0d2d4;--slate-50:#f0f0f0;--border:#a0d2d4;}

.karriere > div{position: relative;display: block;}
.karriere > .mobile-menu{display: none;}
.container{width: 100%;margin: 0 auto;max-width: 1800px;position: relative;padding: 0 100px;box-sizing: border-box;}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
@media(min-width:768px){
	.grid-2{grid-template-columns:1fr 1fr}
	#offenestellen .grid-2:not(:has(.job-card:nth-child(2))) {grid-template-columns: 1fr;justify-items: center;}
}
@media screen and (max-width:1200px){
	.container{padding: 0 50px;}
}
@media (max-width: 900px) {
	.container {flex-direction: column;width: 82%;padding: 0;}
}

.hero{color:#fff;position:relative;}
.hero .container {position: absolute !important;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.hero .container > div{display: flex;align-items: stretch;padding: 200px 0;}
.hero .title {flex: 0 0 60%;padding-right: 100px;box-sizing: border-box;}
.hero .title h2{font-family: "Inter Regular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";color: var(--cyan);margin-bottom: 40px;}
.hero .title h2 strong{color: #fff;}
.hero .title span{display: block;margin-bottom: 50px;line-height: 150%;}
.hero .title .links a.content-button{color: var(--cyan);padding: 10px 25px;font-size: 90%;border-radius: 999px;background: #fff;}
.hero .title .links a.content-button + a.content-button{margin-left: 10px;}
.hero .title .links a.content-button:hover{background: var(--cyan); color: #fff;}
.hero .title .links a.content-button i{margin-right: 10px;}
.hero .hero-grid {flex: 0 0 40%;grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);gap: 25px;border-radius: 25px;padding: 0px;box-sizing: border-box;display:none;}
.hero .hero-grid.hero-grid-desktop{display: grid;}
.hero .hero-grid > div {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;border-radius: 15px;padding: 15px;min-width: 0;min-height: 0;background: var(--cyan);position: relative;}
.hero .hero-grid .icon {display: block;line-height: 1;margin-bottom: 0.5rem;color: #fff;}
.hero .hero-grid .icon i {display: block;font-size: 135%;margin-bottom: 10px;}
.hero .hero-grid p {margin: 0;color: #fff;font-size: 90%;}
section[data-layout="teaser"] > .hero > .teaserbg{transform: none;padding-top: 0;}
section[data-layout="teaser"] > .hero > .teaserbg > .bg > div{height: 100%;}
section[data-layout="teaser"] > .hero > .container{z-index: 1;position: relative;}
@media screen and (max-width:1600px){
	.hero .container{padding: 200px 100px 100px;}
	.hero .title{padding-right: 50px;}
	.hero .title h2{margin-bottom: 30px;}
	.hero .title span{margin-bottom: 35px;}
}
@media screen and (max-width:1200px){
	    .hero .container {padding: 150px 50px 100px;}
}
@media (max-width: 900px) {
	.hero .container{padding: 18% 0;}
	.hero .title, .hero .hero-grid {flex: 0 0 auto;width: 100%;padding-right: 0;}
	.hero .hero-grid.hero-grid-desktop{display: none;}
	.hero .hero-grid.hero-grid-mobile{display: grid;gap:10px;margin-bottom: 35px;}
	.hero .hero-grid .icon{margin-bottom: 5px;}
	.hero .hero-grid > div{padding: 20px;}
	.hero .title h2{margin-bottom: 30px;}
	.hero .title span{margin-bottom: 35px;}
	.hero .title .links a.content-button{border-radius: 999px;}
	.hero .title .links a.content-button + a.content-button{margin-left: 0;margin-top: 20px;}
}

.offene-stellen{padding: 200px 0;position: relative;}
.offene-stellen > .container > h2{margin-bottom:200px;font-family: "Inter Regular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";color: var(--cyan);text-align: center;}
.offene-stellen > .container > h2 strong{display: block;color: #fff;}
.offene-stellen > .container > span{margin-bottom: 50px;line-height: 135%;display: block;max-width: 1300px;}
.offene-stellen > .container > .grid {gap: 50px;}
.offene-stellen > .container > .grid > .job-card{border-radius:20px;padding:50px;background:var(--petrol);color: #fff;display: flex;flex-direction: column;max-width: 775px;}
.offene-stellen > .container > .grid > .job-card > h4{margin-bottom: 15px;color: #fff;font-size: 150%;}
.offene-stellen > .container > .grid > .job-card > .badges{display: block;}
.offene-stellen > .container > .grid > .job-card > .badges > .badge{display:inline-block;background:var(--cyan);color:#fff;border-radius:999px;padding:10px 20px;;font-size:70%;}
.offene-stellen > .container > .grid > .job-card > .badges > .badge i{margin-right: 5px;}
.offene-stellen > .container > .grid > .job-card > .teaser{margin: 35px 0;line-height: 135%;}
.offene-stellen > .container > .grid > .job-card > .links{margin-top: auto;}
.offene-stellen > .container > .grid > .job-card > .links a.content-button{padding: 10px 25px;color: var(--cyan);font-size: 90%;background: #fff;border-radius: 999px;}
.offene-stellen > .container > .grid > .job-card > .links a.content-button i{margin-right: 10px;}
.offene-stellen > .container > .grid > .job-card > .links a.content-button:hover{background: var(--cyan);color: #fff;}
.offene-stellen > .container > .grid > .job-card > .links a.content-button + a.content-button{margin-left: 10px;}
.offene-stellen > .container > .initiativbewerbung{text-align: center;padding-top: 100px;}
.offene-stellen > .container > .initiativbewerbung a.content-button{padding: 13px 25px;color: var(--cyan);}
.offene-stellen > .container > .initiativbewerbung a.content-button:hover{color: #fff;background: var(--cyan);}
.offene-stellen > .container > .initiativbewerbung a.content-button i{padding-right: 10px;}
@media screen and (max-width:1600px){
	.offene-stellen{padding: 100px 0;}
	.offene-stellen > .container > h2{margin-bottom: 100px;}
	.offene-stellen > .container > .grid > .job-card > .links a.content-button{display: table;}
	.offene-stellen > .container > .grid > .job-card > .links a.content-button + a.content-button{margin-left: 0;margin-top: 10px;}
}
@media screen and (max-width:900px){
	.offene-stellen{padding: 18% 0;}
	.offene-stellen > .container > h2{margin-bottom: 18%;}
	.offene-stellen > .container > .grid{gap:25px;}
	.offene-stellen > .container > .grid > .job-card{padding: 9%;}
	.offene-stellen > .container > .grid > .job-card > h4{margin-bottom: 25px;}
	.offene-stellen > .container > .grid > .job-card > .badges > .badge{display: table;}
	.offene-stellen > .container > .grid > .job-card > .badges > .badge + .badge{margin-top: 10px;}
	.offene-stellen > .container > .grid > .job-card > .teaser{margin: 30px 0;}
	.offene-stellen > .container > .grid > .job-card > .links a.content-button{display: table;}
	.offene-stellen > .container > .grid > .job-card > .links a.content-button + a.content-button{margin-left: 0;margin-top: 10px;}
	.offene-stellen > .container > .initiativbewerbung{padding-top: 50px;}
}

.benefits{padding: 200px 0;position: relative;}
.benefits > .container > h2{font-family: "Inter Regular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";margin-bottom: 200px;text-align: center;color: #fff;}
.benefits > .container > h2 strong{display: block;}

.benefits > .container .benefit-grid{display:grid;gap:25px;grid-template-columns:1fr}
.benefits > .container .benefit-grid > div{border-radius:15px;padding:25px;background:var(--petrol);display:flex;gap:25px}
.benefits > .container .benefit-grid > div > span{width: 50px;height: 50px;align-self: center;background: var(--cyan);border-radius: 5px;padding: 20px;min-width: 50px;min-height: 50px;position: relative;}
.benefits > .container .benefit-grid > div > div p{line-height: 135%;}
.benefits > .container .benefit-grid i{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 140%;}
.benefits > .container .benefit-grid h4{font-family: "Inter Bold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";text-transform: none;letter-spacing: 0;font-size: 100%;line-height: 135%;color: var(--standard);white-space: nowrap;}
@media(min-width:768px){.benefits > .container .benefit-grid{grid-template-columns:repeat(3,1fr)}}
@media screen and (max-width:1600px){
	.benefits{padding: 100px 0;}
	.benefits > .container > h2{margin-bottom: 100px;}
	.benefits > .container .benefit-grid > div{padding: 20px;gap:20px;}
	.benefits > .container .benefit-grid > div > span{min-width: 40px;min-height: 40px;padding: 15px;}
}
@media screen and (max-width:900px){
	.benefits{padding: 18% 0;}
	.benefits > .container > h2{margin-bottom: 18%;}
	.benefits > .container .benefit-grid{gap:20px;}
	.benefits > .container .benefit-grid > div{padding: 20px;gap:20px;}
	.benefits > .container .benefit-grid > div > span{width: 25px;height: 25px;padding: 20px;min-width: 25px;min-height: 25px;}
	
}

.firma{position: relative;padding: 200px 0;}
.firma > .container > h2{font-family: "Inter Regular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";margin-bottom: 200px;text-align: center;color: var(--standard);}
.firma > .container > h2 strong{display: block;}
.firma > .container > .tabs{display: grid;gap: 25px;grid-template-columns: 1fr;}
.firma > .container > .tabs > .tab{border-radius: 15px;padding: 50px;background: var(--petrol);color: #fff;}
.firma > .container > .tabs > .tab > .head{display: flex;gap: 25px;}
.firma > .container > .tabs > .tab > .head > .icon{color: #fff;font-size: 125%;width: 50px;height: 50px;align-self: center;background: var(--cyan);border-radius: 5px;padding: 10px;min-width: 50px;min-height: 50px;position: relative;}
.firma > .container > .tabs > .tab > .head > .icon i{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.firma > .container > .tabs > .tab > .head > h4{color: #fff;font-size: 150%;}
.firma > .container > .tabs > .tab > .text{display: block;margin-top: 40px;line-height: 135%;}
.firma > .container > .tabs > .tab > .text ul{padding: 0;margin: 0;padding-left: 1em;}
.firma > .container > .tabs > .tab > .text ul li{padding: 5px 0;}
@media (min-width: 768px) {.firma > .container > .tabs {grid-template-columns: repeat(3, 1fr);}}
@media screen and (max-width:1600px){
	.firma{padding: 100px 0;}
	.firma > .container > h2{margin-bottom: 100px;}
	.firma > .container > .tabs > .tab > .head > h4{font-size: 135%;}
}
@media screen and (max-width:900px){
	.firma{padding: 18% 0;}
	.firma > .container > h2{margin-bottom: 18%;}
	.firma > .container > .tabs > .tab{padding: 25px;}
	.firma > .container > .tabs > .tab > .text{margin-top: 20px;}
	.firma > .container > .tabs > .tab > .head > .icon{padding: 5px;}
	.firma > .container > .tabs > .tab > .head > h4{align-self: center;}
}

.bewerbung{padding: 200px 0;position: relative;}
.bewerbung > .container > h2{font-family: "Inter Regular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";margin-bottom: 200px;text-align: center;color: var(--cyan);}
.bewerbung > .container > h2 strong{display: block;color: #fff;}
.bewerbung > .container > .apply-wrap{align-items: start; width: 90%;max-width: 1000px;margin: 0 auto;}
.bewerbung > .container > .apply-wrap > div > details summary::marker{float: right;}
.bewerbung > .container > .apply-wrap > div > details.apply-acc {border-radius: 20px;padding: 25px;background: var(--petrol);margin-bottom: 25px;cursor: pointer;}
.bewerbung > .container > .apply-wrap > div > details span.num{background: var(--cyan);color: #fff;border-radius: 50%;width: 30px;height: 30px;display: inline-block;text-align: center;line-height: 30px;margin-right: 10px;}
.bewerbung > .container > .apply-wrap > div > details span.title{font-size: 100%;position: relative;font-family: "Inter Bold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.bewerbung > .container > .apply-wrap > div > details span.chev{display: none;}
.bewerbung > .container > .apply-wrap > .apply-accordion .content{padding-left: 4rem;padding-top: .25rem;line-height: 135%;}
.bewerbung > .container > .apply-wrap > .apply-accordion .content p{font-size: 100% !important;}
.bewerbung > .container > .cta{display: block;margin-top: 50px;text-align: center;}
.bewerbung > .container > .cta a.content-button{font-size: 90%;color: var(--cyan);padding: 10px 25px;background: #fff;border-radius: 999px;}
.bewerbung > .container > .cta a.content-button:hover{background: var(--cyan);color: #fff;}
.bewerbung > .container > .cta a.content-button i{margin-right: 10px;}
@media screen and (max-width:1600px){
	.bewerbung{padding: 100px 0;}
	.bewerbung > .container > h2{margin-bottom: 100px;}
}
@media screen and (max-width:900px){
	.bewerbung{padding: 18% 0;}
	.bewerbung > .container > h2{margin-bottom: 18%;}
	.bewerbung > .container > .apply-wrap{width: 100%;}
	.bewerbung > .container > .apply-wrap > .apply-accordion .content{padding-left: 0;padding-top: 10px;}
}

.faqs{position: relative;padding: 200px 0 0;}
.faqs > .container > h2{font-family: "Inter Regular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";margin-bottom: 200px;text-align: center;color: var(--cyan);}
.faqs > .container > h2 strong{display: block;color: #fff;}
.faqs > .container > .faq details{border-radius:15px;padding:25px;background:var(--petrol);margin-bottom: 25px;}
.faqs > .container > .faq summary{cursor:pointer;font-size: 100%;font-family: "Inter Bold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.faqs > .container > .faq details > p{padding-left: 1em;line-height: 135%;margin-top: 10px;}
@media screen and (max-width:1600px){
	.faqs{padding: 100px 0;}
	.faqs > .container > h2{margin-bottom: 100px;}
}
@media screen and (max-width:900px){
	.faqs{padding: 18% 0;}
	.faqs > .container > h2{margin-bottom: 18%;}
	.faqs > .container > .faq details > p{padding-left: 0;}
}

body.popup-open{overflow: hidden;}
.karriere > .popup{position: fixed;inset: 0;place-items: center;padding: 50px; display: none;z-index: 99999;}
body.popup-open.karriere > .popup{display: grid;}
.karriere > .popup > .popupbg{display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;background: rgb(0 0 0 / 0.5);width: 100%;height: 100%;}
.karriere > .popup > .popupcontent{inline-size: min(90vw, 720px);max-block-size: calc(100dvh - 100px);overflow: auto;background: var(--petrol);border-radius: 15px;padding: 50px;box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);z-index: 2;position: relative;box-sizing: border-box;width: 90%;max-width: 1200px;}
.karriere > .popup > .popupcontent > #popupclose{color: var(--cyan);position: absolute;right: 15px;top: 15px;font-size: 150%;cursor: pointer;}
.karriere > .popup > .popupcontent > #popupclose:hover{color: #fff;}
.karriere > .popup > .popupcontent > .job-card{display: none;}
.karriere > .popup > .popupcontent > .job-card.open{display: block;}

.karriere > .popup > .popupcontent > .job-card h4{font-size: 150%;margin-bottom: 15px;color: var(--standard);}
.karriere > .popup > .popupcontent > .job-card > .badges{display: block;}
.karriere > .popup > .popupcontent > .job-card > .badges > .badge {display: inline-block;background: var(--cyan);color: var(--standard);border-radius: 999px;padding: 3px 15px;font-size: 70%;}
.karriere > .popup > .popupcontent > .job-card > .badges > .badge i {margin-right: 5px;}
.karriere > .popup > .popupcontent > .job-card > .teaser{margin: 35px 0;line-height: 135%;}
.karriere > .popup > .popupcontent > .job-card > div{line-height: 135%;}
.karriere > .popup > .popupcontent > .job-card > div > ul{padding: 0;margin: 0;padding-left: 1em;line-height: 135%;}
.karriere > .popup > .popupcontent > .job-card > div > ul li{padding: 2px 0;}
.karriere > .popup > .popupcontent > .job-card > div > strong{margin: 35px 0 15px;display: block;}
.karriere > .popup > .popupcontent > .job-card > div .content-button{margin-top: 35px;font-size: 90%;color: var(--cyan);padding: 10px 25px;display: inline-block;background: #fff;border-radius: 999px;}
.karriere > .popup > .popupcontent > .job-card > div .content-button:hover{background: var(--cyan);color: #fff;}
.karriere > .popup > .popupcontent > .job-card > div .content-button i{margin-right: 10px;}
@media screen and (max-width:900px){
	.karriere > .popup{padding: 25px;}
	.karriere > .popup > .popupcontent{width: 100%;padding: 25px;}
	.karriere > .popup > .popupcontent > .job-card > .teaser{margin: 25px 0;}
	.karriere > .popup > .popupcontent > .job-card > div > strong{margin: 25px 0 10px;}
	.karriere > .popup > .popupcontent > .job-card > div .content-button{margin-top: 25px;}
}

.contentbg{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: -1;overflow: hidden;}
.contentbg > .bg{width: 100%;height: 100%;background: var(--bilderoverlay);}
.contentbg > .bg > div{background-size: cover;background-position: center;width: 100%;height: 100%;mix-blend-mode: multiply;}

.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.list li{display:flex;gap:.5rem;align-items:flex-start}
.list-grid{display:grid;gap:.5rem;grid-template-columns:1fr}
@media(min-width:768px){.list-grid{grid-template-columns:1fr 1fr}}

.hero-dark{background:#0b2252;color:#fff;padding:2.5rem 0}
.hero-title{display:flex;align-items:center;gap:.6rem}

.onlinebewerbung{max-width: 1000px;margin: 100px auto;position: relative;width: 90%;overflow-x: hidden;}
.onlinebewerbung .frm_html_container{line-height: 150%;}
.onlinebewerbung .frm_html_container > *{margin-bottom: 25px;}
.onlinebewerbung .frm_html_container ul li{list-style-type: disc;margin-left: 1em;line-height: 125%;margin-bottom: 15px;font-size: 20px;}
.onlinebewerbung .frm_label_button_container{text-align: center;}
.onlinebewerbung .frm_style_big-text.with_frm_style .form-field{margin-bottom: 20px;}
.onlinebewerbung .frm_display_format_buttons .frm_label_button_container{flex-flow: column;border-radius: 10px;min-height: 200px;}
.onlinebewerbung .frm_display_format_buttons .frm_label_button_container i{font-size: 250%;width: 100%;display: block;margin: 25px 0;}
.onlinebewerbung .frm_display_format_buttons.frm_two_col .frm_label_button_container i{font-size: 150%;font-family: 'Anton', arial, sans-serif;}
.onlinebewerbung .frm_text_label_for_image{font-size: inherit;color: #282a2c;background: #fff;}

@media screen and (max-width:768px){
	.karriere > .mobile-menu{display: block;}
	.page-template-page-onlinebewerbung form fieldset label{padding: 0;}
	.hero .finne .jquery-fin{height: 90px;top: -95px;}
	.page-template-page-karriere #page-main section, .single-job #page-main section, .page-template-page-karriere #page-main section:last-of-type, .single-job #page-main section:last-of-type{margin: 0;}
    .start-box h4, #lehre h3, .page-template-page-karriere .section-title, .single-job .section-title, .shark-job .hero h2{font-size: 2rem;margin-bottom: 3rem;}
	.hero-apply{width: 34%;}
	#apply .section-title{padding-top: 3rem;}
	.start-box{padding: 1rem;}
	.start-slide{padding: 1rem;}
	.section{padding: 3rem 0;}
	.page-template-page-karriere div#page-main .cb-title h1, .single-job div#page-main .cb-title h1{border-bottom: 1rem var(--blue-900) solid;}
	.apply-wrap{width:100%;}
	.apply-accordion .content{padding-right: 0;padding-left: 0;}
	.apply-accordion > details:last-of-type .content{padding-right: 4rem;}
	.start-box h4{margin-bottom: 1rem;}
	.shark-job .hero h2{font-size: 2rem;margin-bottom: 2rem;margin-top: 2rem;}
	.shark-job .cb-title .job-icon.lg svg {width: 30px;height: 30px;}
}