/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-regular-webfont.eot");
  src: url("../fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-regular-webfont.woff2") format("woff2"), url("../fonts/montserrat-regular-webfont.woff") format("woff"), url("../fonts/montserrat-regular-webfont.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/montserrat-bold-webfont.eot");
  src: url("../fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-bold-webfont.woff2") format("woff2"), url("../fonts/montserrat-bold-webfont.woff") format("woff"), url("../fonts/montserrat-bold-webfont.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
  background:#3a3b3d;
  color:#121416;
  font-family: 'Montserrat','Open Sans',sans-serif;
  font-size:20px;
  margin:0;
  padding:0;
}
.view-on-scroll {
  border:2px solid #fff!important;
  bottom:10px;
  display:none;
  font-size:18px!important;
  left:50%;
  padding:12px 26px!important;
  position:fixed;
  transform:translateX(-50%);
  z-index: 100;
}
.wrapper {
  background:#4f8dba;
  margin:0 auto;
  max-width:800px;
  padding:0;
}
.spacer {
  height:40px;
}
.spacer.green {
  background:#8ccbbb;
}
.spacer.white {
  background:#fff;
}
header {
  background-image: url("../img/kreise-s.png");
  background-size:100% 100%;
  padding-bottom:198.375%;
  position:relative;
}
.logo {
  left:20px;
  position:absolute;
  top:20px;
  width:55%;
}
.logo img {
  width:100%;
}
.headline-cta {
  left:0;
  position:absolute;
  text-align: center;
  top:42%;
  width:100%;
}
h1 {
  color:#fff;
  font-size:3em;
  margin:10px 0 20px;
}
.btn {
  border:none;
  border-radius:25px;
  font-size:24px;
  color:#fff;
  outline:0;
  padding:15px 35px;
}
.btn-blue {
  background:#4f8dba;
}
.btn-green {
  background:#8ccbbb;
}
.btn-cta {
  cursor:pointer;
}
h2 {
  color:#000;
  font-size:2.5em;
  margin:0 35px 0;
  padding:30px 0;
}
h2 span {
  display:inline-block;
  padding:3px 10px;
}
h2 .bg-white {
  background:#fff;
}
h3 {
  color:#000;
  font-size:1.8em;
  margin:0;
  padding:30px 0;
}
.p {
  color:#fff;
  margin:0 0 15px 0;
  padding:0 45px;
}
.benefits {
  margin-top:-40px;
}
.list-item {
  background-image:url("../img/list-icon.png");
  background-position:0 0;
  background-repeat:no-repeat;
}
.strong {
  font-weight:700;
}
.large {
  font-size:1.6em;
}
.green {
  color:#8ccbbb;
}
/* Gemeinsame Stildefinition für die Liste */
ul {
  list-style-type: none; /* Entfernt die standardmäßigen Bulletpoints */
  padding: 0; /* Entfernt den standardmäßigen Padding-Wert für die UL */
}

/* Stildefinitionen für die Listenelemente */
li {
  margin-bottom: 4px; /* Abstand zwischen den Listenelementen */
  display: flex;
  align-items: flex-start;
}

/* Stildefinitionen für das List-Icon (Bulletpoint) */
li::before {
  content: '\2022'; /* Unicode-Zeichen für den Bulletpoint */
  color: #fff; /* Farbe des Bulletpoints */
  font-size: 1.2em; /* Größe des Bulletpoints */
  display: inline-block;
  margin-right: 5px; /* Abstand zwischen dem Bulletpoint und dem Text */
}

/* Eingerückter Text neben dem Bulletpoint */
li span {
  margin-left: 10px; /* Einrückung des Textes neben dem Bulletpoint */
}
.toggle-trigger {
  cursor:pointer;
}
.toggle-target {
  display:none;
}
.toggle-target.open {
  display:block;
}
.current-jobs {
  background:#8ccbbb;
}
.job-list-item {
  border-top:3px solid #4f8dba;
}
.job-list-item-header {
  color:#fff;
  cursor:pointer;
  display:block;
  padding:10px 65px 10px 45px;
  position:relative;
}
.arrow-down {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right:8px;
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
.job-list-item-body {
  background:#fff;
  color:#000;
  display:none;
  padding:20px 45px 10px;
}
.job-list-item-body li::before {
  color: #000; /* Farbe des Bulletpoints */
}
.wrap-application-form {
  background:#fff;
  padding:20px 45px;
}
.wrap-application-form p {
  color:#4f8dba;
  margin-top:0;
}
.application-form {
  text-align: center;
}
input[type=text],input[type=email],input[type=tel],textarea {
  border:1px solid #4f8dba;
  border-radius:25px;
  display:block;
  font-family:'Montserrat';
  font-size:18px;
  margin-bottom:10px;
  outline:0;
  padding:10px;
  width:100%;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #4f8dba;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #4f8dba;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #4f8dba;
}
:-moz-placeholder { /* Firefox 18- */
  color: #4f8dba;
}
.input-website {
  display:none!important;
}
.success-message {
  background:#8ccbbb;
  border-radius:5px;
  color:#fff;
  padding:10px;
  text-align:center;
}
.form-error {
  color:#e7313c;
  display:none;
  padding:10px;
  text-align:center;
}
.input-website {
  display:none;
}
.footer {
  background-color:#fff;
  background-image: url("../img/footer.png");
  background-size:100% 100%;
  margin:0;
  padding-top:53.375%;
}
footer {
  background:#4f8dba;
  padding:0 45px 10px;
  text-align:right;
}
footer a {
  color:#fff;
  display:inline-block;
  margin-right:16px;
  font-size:16px;
  text-decoration:none;
}
@media(max-width:640px) {
  h1 {
    font-size:2.6em;
  }
}
@media(max-width:560px) {
  h1 {
    font-size:2.2em;
  }
  h2 {
    font-size:1.8em;
  }
}
@media(max-width:480px) {
  h1,h2 {
    font-size:1.8em;
  }
  .headline-cta {
    left:0;
    position:absolute;
    text-align: center;
    top:40%;
    width:100%;
  }
}