/*
 * Jobs
 */
.jobswrapper
{
  display:flex;
  flex-wrap:wrap;
  float:left;
  width:100%;
}

.jobswrapper .jobteaser
{
  margin:0 45px 35px 0;
  width:calc(50% - 45px / 2);
}

.jobswrapper .jobteaser:nth-of-type(2n)
{
  margin-right:0;
}

.jobswrapper .jobteaser .imagewrapper
{
  float:left;
  margin:0 30px 0 0;
  width:150px;
}

.jobswrapper .jobteaser .textwrapper
{
  float:right;
  padding:5px 0 0;
  width:calc(100% - 180px);
}

.jobswrapper .jobteaser.withoutimage .textwrapper
{
  width:100%;
}

.jobswrapper .jobteaser .additional
{
  float:right;
  width:calc(100% - 180px);
}

.jobswrapper .jobteaser.withoutimage .additional
{
  width:100%;
}

.jobswrapper .jobteaser .additional span
{
  display:block;
  float:left;
  font-weight:700;
  margin:0 20px 0 0;
}

.jobswrapper .jobteaser.optikjob .additional span, .optikjob h1, .optikjob h2, .additionals.optikjob span, .additionals.optikjob i
{
color:var(--primary-color-optik);	
}

.jobswrapper .jobteaser.akustikjob .additional span, .akustikjob h1, .akustikjob h2, .additionals.akustikjob span, .additionals.akustikjob i
{
color:var(--primary-color-akustik);	
}

.jobswrapper .jobteaser .additional span:last-child
{
  margin-right:0;
}

.jobswrapper .jobteaser .additional span i
{
  margin:0 3px 0 0;
}

.jobswrapper .jobteaser .buttonwrapper
{
  float:left;
  margin:20px 0 0;
  width:100%;
}

.jobswrapper .jobteaser .buttonwrapper .button
{
  float:left;
  margin:0 15px 10px 0;
} 

.jobswrapper .jobteaser .buttonwrapper .button:last-child
{
  margin-right:0;
}

#job
{
  float:left;
  width:100%;
}

#job .wesearch
{
  display:block;
  float:left;
  font-weight:700;
  width:100%;
}

#job h1
{
  float:left;
  width:100%;
}

#job .description,
#job .tasks,
#job .shouldbring,
#job .expectfromus
{
  float:left;
  margin:0 0 15px;
  width:100%;
}

#job .additionals
{
  background:#eeeeee;
  float:left;
  padding:12px 15px;
  width:100%;
}

#job .additionals .additional
{
  float:left;
  margin:0 30px 0 0;
}

#job .additionals .additional:last-child
{
  margin-right:0;
}

#job .additionals .additional i
{
  float:left;
  margin:2px 7px 0 0;
}

#job .additionals .additional .value
{
  display:block;
  float:left;
}

#job .schema
{
  display:none;
}

#application
{
  float:left;
  margin:90px 0 0;
  width:100%;
}

#application #jobformular
{
  float:left;
  margin:0 60px 0 0;
  width:calc(100% - 480px);
}

#application #jobformular .mwformular
{
  float:left;
  margin:0 0 30px;
  width:100%;
}

#application #jobformular .mwformular label
{
  float:left;
  margin:7px 30px 0 0;
  width:225px;
}

#application #jobformular .mwformular.checkbox label
{
  margin:0 0 0 10px;
  width:calc(100% - 30px);
}

#application #jobformular .mwformular input[type="text"],
#application #jobformular .mwformular input[type="tel"],
#application #jobformular .mwformular input[type="email"],
#application #jobformular .mwformular textarea
{
  float:left;
  width:calc(100% - 285px);
	background-color: var(--darker-light-grey);
	border:none;
	font-size:16px;
	font-family: Mulish, sans-serif;
	color: var(--text-color);	
	height:30px;
	padding:5px;
}

#application #jobformular .mwformular textarea
{height:130px;}

#application #jobformular .mwformular input[type="checkbox"]
{
  float:left;
  margin:3px 0 0;
}


@media (max-width: 1023px) {

.jobswrapper .jobteaser, .jobswrapper .jobteaser:nth-of-type(2n) {
        margin: 0 0 20px 0;
        width: 100%;
    }

    .jobswrapper .jobteaser .imagewrapper {
        margin: 0 20px 0 0;
        width: 150px;
    }

    .jobswrapper .jobteaser .textwrapper, .jobswrapper .jobteaser .additional, .jobswrapper .jobteaser .buttonwrapper {
        width: calc(100% - 170px);
    }

    #application {
        margin-top: 45px;
    }

    #application #jobformular {
        margin: 0 0 30px;
        width: 100%;
    }

    #application #jobformular .mwformular label {
        margin: 0 0 5px;
        width: 100%;
    }

    #application #jobformular .mwformular input[type="text"], #application #jobformular .mwformular input[type="tel"], #application #jobformular .mwformular input[type="email"], #application #jobformular .mwformular textarea {
        width: 100%;
    }

    #application #writtenapplication {
        width: 100%;
    }
}



@media (max-width: 767px) {

	.jobswrapper .jobteaser .imagewrapper
	{
	  float:none;
	  margin:0 30px 0 0;
	}
	
	.jobswrapper .jobteaser .imagewrapper img
	{
	 width:70%;
	}
	
	.jobswrapper .jobteaser .textwrapper{
		width:100%; 
		float:none;
	}
	
	.jobswrapper .jobteaser .additional{width:100%; float:none; margin-top:20px;} 
	.jobswrapper .jobteaser .buttonwrapper{ width:100%;}
}