@charset "UTF-8";
/**
    Author:  Marco Both
    Date:    Ver1.0 - 28.07.2020
    Project: KCS Medical

    Media:       all (screen, projector, print)
    Responsive:  yes
    Breakpoints: 576px, 768px, 1024px, 1200px (mobile first)
*/
/* -------------------------------------------------------------
//  Gridsystem
// -----------------------------------------------------------*/
.container {
  padding-right: 24px;
  padding-left: 24px;
}

.container-small {
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: unset;
  }
  .container-small {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: unset;
  }
  .container-small {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-small {
    max-width: 960px;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-right: 32px;
    padding-left: 32px;
  }
  .container-small {
    padding-right: 32px;
    padding-left: 32px;
  }
}
@media (min-width: 1200px) {
  .container-small {
    max-width: 1040px;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 1264px;
  }
}
.row {
  margin-right: -24px;
  margin-left: -24px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-right: 24px;
  padding-left: 24px;
}

@media only screen and (min-width: 1024px) {
  .row {
    margin-right: -32px;
    margin-left: -32px;
  }
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 32px;
    padding-left: 32px;
  }
}
/* -------------------------------------------------------------
//  Colors & Fonts
// -----------------------------------------------------------*/
:root {
  --color-primary: #fa851e;
  --color-primary--hover: #ff973b;
  --color-primary--light: #fff3e9;
  --color-secondary: #7b97b7;
  --color-secondary--hover: #80A6D0;
  --color-secondary--light: #eff4f7;
  --color-grey: #8d8d8d;
  --color-grey--light: #a7a7a7;
  --color-white: #ffffff;
  --transition--fast: .1s cubic-bezier(.215, .61, .355, 1);
  --transition--slow: .5s cubic-bezier(.215, .61, .355, 1);
  --border-radius: 7px;
  --border-radius--large: 23px;
}

.color-primary {
  color: #fa851e;
}

.color-secondary {
  color: #7b97b7;
}

.color-grey {
  color: #8d8d8d;
}

.color-primary--light {
  color: #fa851e;
}

.color-secondary--light {
  color: #eff4f7;
}

.color-grey--light {
  color: #a7a7a7;
}

.color-white {
  color: #ffffff;
}

/* ubuntu-regular - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/kcs/fonts/ubuntu-v14-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Ubuntu Regular"), local("Ubuntu-Regular"), url("/assets/kcs/fonts/ubuntu-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("/assets/kcs/fonts/ubuntu-v14-latin-regular.woff2") format("woff2"), url("/assets/kcs/fonts/ubuntu-v14-latin-regular.woff") format("woff"), url("/assets/kcs/fonts/ubuntu-v14-latin-regular.ttf") format("truetype"), url("/assets/kcs/fonts/ubuntu-v14-latin-regular.svg#Ubuntu") format("svg");
  /* Legacy iOS */
}
/* ubuntu-500 - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/kcs/fonts/ubuntu-v14-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Ubuntu Medium"), local("Ubuntu-Medium"), url("/assets/kcs/fonts/ubuntu-v14-latin-500.eot?#iefix") format("embedded-opentype"), url("/assets/kcs/fonts/ubuntu-v14-latin-500.woff2") format("woff2"), url("/assets/kcs/fonts/ubuntu-v14-latin-500.woff") format("woff"), url("/assets/kcs/fonts/ubuntu-v14-latin-500.ttf") format("truetype"), url("/assets/kcs/fonts/ubuntu-v14-latin-500.svg#Ubuntu") format("svg");
  /* Legacy iOS */
}
/* kcs iconfont */
@font-face {
  font-family: "kcs";
  src: url("/assets/kcs/fonts/kcs.eot");
  src: url("/assets/kcs/fonts/kcs.eot?#iefix") format("embedded-opentype"), url("/assets/kcs/fonts/kcs.woff") format("woff"), url("/assets/kcs/fonts/kcs.ttf") format("truetype"), url("/assets/kcs/fonts/kcs.svg#kcs") format("svg");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  font-family: "kcs" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^=icon-]:before, [class*=" icon-"]:before {
  font-family: "kcs" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-android:before {
  content: "a";
}

.icon-apple:before {
  content: "b";
}

.icon-close-18px:before {
  content: "c";
}

.icon-document-file-paper-text:before {
  content: "d";
}

.icon-formular:before {
  content: "e";
}

.icon-hospital-ill-medicine-doctor-ambulance:before {
  content: "f";
}

.icon-menu-hambuger:before {
  content: "g";
}

.icon-navigation-location-drop-pin:before {
  content: "h";
}

.icon-navigation-location-drop-pin-map:before {
  content: "i";
}

.icon-small-left:before {
  content: "j";
}

.icon-small-right:before {
  content: "k";
}

.icon-sort-24px:before {
  content: "l";
}

.icon-thin-0306-chat-message-discussion-bubble-conversation:before {
  content: "m";
}

.icon-thin-down:before {
  content: "n";
}

.icon-time-watch-clock:before {
  content: "o";
}

.icon-whatsapp:before {
  content: "p";
}

.icon-thin-0479-rocket-space-nasa:before {
  content: "q";
}

.icon-xing:before {
  content: "r";
}

.icon-indeed:before {
  content: "s";
}

/* -------------------------------------------------------------
//  Basics
// -----------------------------------------------------------*/
html {
  overflow-x: hidden;
}

html.active {
  overflow-y: hidden;
}

html.show_application {
  overflow-y: hidden !important;
}

body {
  background-color: var(--color-white);
  color: var(--color-grey);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Ubuntu", Verdana, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

body::-webkit-scrollbar-track {
  background: #000;
}

body::-webkit-scrollbar-track {
  background: #6649b8;
}

.page--neutral main {
  padding-top: 60px;
}

.page--location {
  background: white;
}

@media only screen and (min-width: 768px) {
  body {
    font-size: 20px;
    line-height: 1.6em;
  }
  .page--neutral main {
    padding-top: 70px;
  }
}
@media only screen and (min-width: 992px) {
  html.active {
    overflow-y: initial;
  }
  .page--neutral main {
    padding-top: 115px;
  }
  .page--location {
    background: white url("/assets/kcs/img/kcs_bg_locations.svg") no-repeat 30vw -17vw;
    background-size: 1560px 1525px;
  }
}
@media only screen and (min-width: 1024px) {
  .page--neutral main {
    padding-top: 130px;
  }
}
/* -------------------------------------------------------------
//  Typo
// -----------------------------------------------------------*/
.faq h2 {
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1, .h1, h2, .h2 {
  display: block;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.22em;
  margin-bottom: 0.4em;
  margin-top: 0;
}

h3, .h3 {
  display: block;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33em;
  margin-bottom: 1em;
  margin-top: 0px;
}

h4, .h4 {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3em;
  margin-bottom: 0.5em;
  margin-top: 0px;
  text-transform: uppercase;
}

h5, .h5 {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6em;
  margin-bottom: 1em;
  margin-top: 0px;
}

h6, .h6 {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.375em;
  margin-bottom: 1em;
  margin-top: 0px;
}

p {
  font-size: 16px;
  line-height: 1.5em;
}

p.small {
  display: block;
  font-size: 16px;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
  h1, .h1, h2, .h2 {
    font-size: 47px;
    line-height: 1.167em;
  }
  h3, .h3 {
    font-size: 32px;
    line-height: 1.25em;
  }
  h4, .h4 {
    font-size: 24px;
    line-height: 1.33em;
  }
  p {
    font-size: 20px;
    line-height: 1.6em;
  }
}
.fittext {
  color: var(--color-primary);
  font-size: 7.6vw;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(0.6em);
}

@media only screen and (min-width: 1200px) {
  .fittext {
    font-size: 7.9vw;
  }
}
@media only screen and (min-width: 1264px) {
  .fittext {
    font-size: 101px;
  }
}
/* -------------------------------------------------------------
//  Links
// -----------------------------------------------------------*/
a, a:visited {
  color: #8d8d8d;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: color var(--transition--fast);
  -moz-transition: color var(--transition--fast);
  -ms-transition: color var(--transition--fast);
  -o-transition: color var(--transition--fast);
  transition: color var(--transition--fast);
}

a:hover, a:focus {
  color: #fa851e;
  text-decoration: none;
}

.link-stage-back, .link-stage-back:hover, .link-stage-back:focus, .link-stage-back:visited {
  color: var(--color-white) !important;
  display: block;
  font-size: 16px;
  margin-left: -8px;
  margin-bottom: 17px !important;
  text-transform: uppercase;
}

.link-stage-back::before {
  font-size: 23px;
  vertical-align: middle;
}

.logolink {
  color: var(--color-secondary) !important;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.logolink:hover, .logolink:focus {
  color: var(--color-secondary--hover) !important;
}

@media only screen and (min-width: 768px) {
  .link-stage-back, .link-stage-back:hover, .link-stage-back:focus, .link-stage-back:visited {
    margin-bottom: 11px !important;
  }
}
/* -------------------------------------------------------------
//  Images
// -----------------------------------------------------------*/
img {
  height: auto;
  max-width: 100%;
}

.image_application {
  max-width: 160px;
}

.kcs_logos {
  height: 50px;
  margin-bottom: 1em;
  margin-top: 3em;
  width: auto;
}

.imagesize-100 img {
  margin-bottom: 2em;
  max-width: 230px;
}

.bg-image-cover {
  background-size: cover;
  background-position: center;
}

.bg-image-top-center {
  background-repeat: no-repeat;
  background-position: center top;
}

@media only screen and (min-width: 1200px) {
  .bg-image-top-center {
    background-size: 112% auto;
  }
}
/* -------------------------------------------------------------
//  Buttons
// -----------------------------------------------------------*/
.btn {
  border: none;
  border-radius: var(--border-radius);
  margin-bottom: 1.5em;
}

.btn--primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
  font-weight: 500;
  padding: 10px 28px 10px 28px;
  text-transform: uppercase;
  -webkit-transition: background-color var(--transition--slow);
  -moz-transition: background-color var(--transition--slow);
  -ms-transition: background-color var(--transition--slow);
  -o-transition: background-color var(--transition--slow);
  transition: background-color var(--transition--slow);
}

.btn--primary:hover, .btn--primary:focus {
  background-color: var(--color-primary--hover) !important;
}

/* individuelle Abstände */
h3 + .btn--primary {
  margin-top: 10px;
}

.btn--secondary {
  background-color: var(--color-secondary);
  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
  color: var(--color-white) !important;
  font-weight: 500;
  padding: 10px 28px 10px 28px;
  text-transform: uppercase;
  -webkit-transition: background-color var(--transition--slow);
  -moz-transition: background-color var(--transition--slow);
  -ms-transition: background-color var(--transition--slow);
  -o-transition: background-color var(--transition--slow);
  transition: background-color var(--transition--slow);
}

.btn--secondary:hover, .btn--secondary:focus {
  background-color: var(--color-secondary--hover);
  color: var(--color-white);
}

.btn--submitselection {
  background-color: var(--color-white);
  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
  border: 2px solid #a7a7a7;
  color: var(--color-grey--light) !important;
  font-weight: 500;
  padding: 8px 26px 8px 26px;
  text-transform: uppercase;
  -webkit-transition: all var(--transition--slow);
  -moz-transition: all var(--transition--slow);
  -ms-transition: all var(--transition--slow);
  -o-transition: all var(--transition--slow);
  transition: all var(--transition--slow);
}

.btn--submitselection:hover, .btn--submitselection:focus {
  background-color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  color: var(--color-white) !important;
}

.btn--mainmenu, .btn--mainmenu:hover, .btn--mainmenu:focus, .btn--mainmenu:visited {
  color: var(--color-white);
  font-family: "kcs";
  font-size: 30px;
  margin: 0;
  padding: 0;
  width: auto !important;
}

.page--normal .btn--mainmenu, .page--normal .btn--mainmenu:hover, .page--normal .btn--mainmenu:focus, .page--normal .btn--mainmenu:visited {
  color: var(--color-grey);
}

.btn--submit {
  margin-top: 25px;
}

.navbar.scroll .btn--mainmenu {
  color: var(--color-grey);
}

.btn--zoe {
  color: var(--color-white) !important;
  display: block;
  font-size: 13px;
  line-height: 16px;
  margin: 0 auto;
  margin-bottom: 1.5em;
  padding-left: 44px;
  padding-top: 8px;
  padding-bottom: 10px;
  position: fixed;
  text-align: left;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: initial;
  z-index: 2;
}

.btn--application {
  bottom: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  left: 50%;
  position: fixed;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.btn--zoe::before {
  content: "p";
  font-family: "kcs";
  position: absolute;
  top: 18px;
  left: 11px;
  font-size: 25px;
}

.btn--zoe-inline {
  position: relative;
  bottom: auto;
  left: auto;
  transform: translateX(0);
}

.page--firm .btn--chatbot {
  background-color: var(--color-secondary) !important;
}

.btn--close {
  background-color: var(--color-primary);
  border-radius: 24px 24px 0 24px;
  color: var(--color-white) !important;
  font-family: "kcs";
  font-size: 27px;
  height: 64px;
  left: 50%;
  margin-left: -32px;
  position: absolute;
  top: 461px;
  transform: scale(0);
  width: 64px !important;
  -webkit-transition: all 0.1s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.1s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.1s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.1s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.1s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn--close-chat {
  color: var(--color-white) !important;
  display: none;
  font-family: "kcs";
  font-size: 27px;
  height: 44px;
  right: 0%;
  top: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 44px !important;
  z-index: 3;
}

.chatbot.active .btn--close-chat {
  display: block;
}

.navwrapper.active .btn--close {
  transform: scale(1);
}

.btn--chatbot {
  display: none;
}

.chatbotwrapper {
  position: relative;
}

.chatboticon {
  font-family: "kcs";
  font-size: 30px;
  position: absolute;
  top: 1px;
  right: -12px;
}

.chatbotcopy {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  padding-top: 3px;
  display: none;
}

.chatbotcopy span {
  font-size: 20px;
}

.chatbotcopy.active {
  display: block !important;
  color: #000;
}

@media only screen and (min-width: 768px) {
  .btn--zoe {
    display: none;
  }
  .btn--chatbot {
    background-color: var(--color-primary);
    border-radius: 24px 24px 0 24px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    bottom: 50px;
    color: var(--color-white) !important;
    display: block;
    height: 64px;
    margin-left: -32px;
    margin-bottom: 0;
    position: fixed;
    right: 50px;
    width: 64px !important;
    z-index: 3;
    text-transform: none;
    -webkit-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .btn--chatbot:hover {
    border-radius: 7px 7px 0 7px;
    width: 310px !important;
  }
  .btn--chatbot.hide {
    display: block;
    right: -330px;
    -webkit-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
@media only screen and (max-width: 991px) {
  .btn {
    width: 272px;
  }
}
@media only screen and (min-width: 1200px) {
  .btn--mainmenu {
    display: none;
  }
  .btn--close, .btn--application {
    display: none;
  }
}
/* -------------------------------------------------------------
//  Chatbot
// -----------------------------------------------------------*/
.js-toggle-chatbot {
  min-height: 530px;
}

#web-messenger-container {
  z-index: 1;
}

.chatbot {
  max-width: 624px;
  margin: 0 auto;
  margin-top: 80px;
}

.chatbot.active {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 624px;
  z-index: 10;
}

#chat-container {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  width: 100%;
  cursor: pointer;
}

@media only screen and (min-width: 1200px) {
  .chatbot {
    margin-top: 0;
  }
  .chatbot {
    width: 528px;
  }
  .chatbot.active {
    left: auto;
    transform: none;
    right: 32px;
    width: 528px;
  }
}
@media only screen and (min-width: 1265px) {
  .chatbot {
    width: 568px;
  }
  .chatbot.active {
    transform: none;
    left: 50%;
    right: auto;
    margin-left: 32px;
    width: 568px;
  }
}
/* -------------------------------------------------------------
//  List
// -----------------------------------------------------------*/
.section--resultdetail ul, .featurelist {
  margin-bottom: 3em;
  padding: 0;
}

.section--resultdetail ul li, .featurelist li {
  background: transparent url("/assets/kcs/img/kcs_list_style_image.svg") no-repeat left 9px;
  list-style-type: none;
  padding-bottom: 8px;
  padding-left: 16px;
}

.page--firm .featurelist li {
  background: transparent url("/assets/kcs/img/kcs_list_style_image_blue.svg") no-repeat left 9px;
}

@media only screen and (min-width: 768px) {
  .section--resultdetail ul li, .featurelist li {
    background: transparent url("/assets/kcs/img/kcs_list_style_image.svg") no-repeat left 14px;
  }
  .page--firm .featurelist li {
    background: transparent url("/assets/kcs/img/kcs_list_style_image_blue.svg") no-repeat left 14px;
  }
}
.js-openmodal-1, .js-openmodal-2, .js-openmodal-3, .js-openmodal-4, .js-openmodal-5, .js-openmodal-6 {
  cursor: pointer;
}

.speclist {
  margin: 0;
  margin-bottom: 3em;
  margin-top: 50px;
  padding: 0;
}

.speclist li {
  background: transparent url("/assets/kcs/img/kcs_linie.svg") no-repeat left bottom;
  background-size: 900px auto;
  list-style-type: none;
  margin: 0;
  padding-left: 35px;
  padding-bottom: 0.4em;
  padding-top: 0.4em;
  position: relative;
  text-align: left;
}

.speclist--small {
  margin-bottom: 1rem !important;
}

.speclist--small li {
  background: none;
  padding-top: 0 !important;
  margin-left: 20px !important;
}

.modalwrapper ul {
  margin: 0;
  margin-bottom: 1rem !important;
  padding: 0;
}

.modalwrapper ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-left: 20px !important;
  padding-bottom: 0.4em;
  position: relative;
}

.modalwrapper ul li::before {
  background: transparent url(/assets/kcs/img/kcs_list_style_image.svg) no-repeat left top;
  background-size: 16px;
  content: "";
  display: block;
  height: 16px;
  position: absolute;
  top: 11px;
  left: 5px;
  width: 16px;
  background-size: 7px !important;
  top: 13px !important;
  left: -20px !important;
}

.modalwrapper .overlay--blue ul li::before {
  background: transparent url(/assets/kcs/img/kcs_list_style_image_blue.svg) no-repeat left top;
  background-size: 16px;
}

.speclist li:last-of-type {
  background: transparent;
}

.speclist li::before {
  background: transparent url("/assets/kcs/img/kcs_list_style_image.svg") no-repeat left top;
  background-size: 16px;
  content: "";
  display: block;
  height: 16px;
  position: absolute;
  top: 11px;
  left: 5px;
  width: 16px;
}

.speclist--small li::before {
  background-size: 7px !important;
  top: 13px !important;
  left: -20px !important;
}

.speclist.speclist--blue li::before, .page--firm .speclist li::before {
  background: transparent url("/assets/kcs/img/kcs_list_style_image_blue.svg") no-repeat left top;
  background-size: 16px;
}

@media only screen and (min-width: 768px) {
  .speclist li::before {
    top: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .speclist {
    margin-top: 0px;
  }
}
/* -------------------------------------------------------------
//  Sections
// -----------------------------------------------------------*/
.section {
  padding: 40px 0;
  position: relative;
}

.section--primary-light {
  background-color: var(--color-primary--light);
}

.section--light {
  background-color: var(--color-secondary--light);
}

.section--white {
  background-color: var(--color-white);
}

.section--parallax {
  height: 80vh;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.section.bg-color-white,
.section.section--light,
.section.section--primary-light {
  padding-top: 12.5vw;
}

.section.bg-color-white::after {
  background: transparent url(/assets/kcs/img/kcs_wave.svg) center top no-repeat;
  background-size: 112vw auto;
  content: "";
  height: 6.6666666667vw;
  width: 100%;
  z-index: 1;
  position: absolute;
  bottom: -6.6666666667vw;
}

.section.section--light::after {
  background: transparent url(/assets/kcs/img/kcs_wave_grey.svg) no-repeat center top;
  background-size: 112vw auto;
  content: "";
  height: 6.6666666667vw;
  width: 100vw;
  z-index: 1;
  position: absolute;
  bottom: -6.6666666667vw;
}

.section.section--parallax::after {
  background: transparent url(/assets/kcs/img/kcs_wave.svg) center top no-repeat;
  background-size: 112vw auto;
  content: "";
  height: 6.6666666667vw;
  width: 100vw;
  z-index: 1;
  position: absolute;
  bottom: -3px;
  transform: rotate(180deg);
}

.section.section--primary-light::after {
  background: transparent url(/assets/kcs/img/kcs_wave_top_primary-light.svg) center top no-repeat;
  background-size: 112vw auto;
  content: "";
  height: 6.6666666667vw;
  width: 100vw;
  z-index: 1;
  position: absolute;
  bottom: -6.6666666667vw;
}

.section-padding-bottom {
  padding-top: 0 !important;
}

.section.section-padding-top-medium {
  padding-top: 5.5555555556vw;
}

@media only screen and (max-width: 1200px) {
  .section-padding-none .container {
    padding-left: 0;
    padding-right: 0;
  }
  .section-padding-none .container .ce_text {
    padding-right: 24px;
    padding-left: 24px;
  }
  .section-padding-none .container .specswrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .section {
    padding: 70px 0;
  }
  .section--parallax {
    padding: 0 !important;
  }
}
@media only screen and (min-width: 1024px) {
  .section {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .section {
    padding: 100px 0;
  }
  .section--parallax {
    padding: 0 !important;
  }
}
/* -------------------------------------------------------------
//  ScrollMagic
// -----------------------------------------------------------*/
.parallaxParent {
  background-size: cover;
}

.parallaxParent > * {
  height: 200%;
  position: relative;
  top: -100%;
}

.parallaxContent {
  background-size: cover;
  background-position: center;
}

@media only screen and (min-width: 768px) {
  .parallaxContent {
    background-position: center right 48%;
  }
}
@media only screen and (min-width: 1200px) {
  .parallaxContent {
    background-position: center right 48%;
  }
}
/* -------------------------------------------------------------
//  Stages
// -----------------------------------------------------------*/
.stage--main {
  background: rgb(242, 131, 69);
  background: linear-gradient(12deg, rgb(242, 131, 69) 20%, rgb(249, 176, 115) 84%, rgb(252, 190, 127) 99%);
  position: relative;
}

.stage--search {
  background: rgb(242, 131, 69);
  background: linear-gradient(12deg, rgb(242, 131, 69) 20%, rgb(249, 176, 115) 84%, rgb(252, 190, 127) 99%);
  position: relative;
  padding-top: 63px;
  padding-bottom: 117px;
}

.stage--about {
  background-size: cover;
  color: var(--color-white) !important;
  overflow: hidden;
  position: relative;
  padding-top: 63px;
  padding-bottom: 0px;
}

.stage--normal {
  background-color: var(--color-white);
  position: relative;
  padding-top: 63px;
}

.stage--normal::after {
  background: transparent url(/assets/kcs/img/kcs_wave.svg) center top no-repeat;
  background-size: 105% auto;
  content: "";
  height: 6.6666666667vw;
  width: 100%;
  z-index: 1;
  position: absolute;
  bottom: -6.6666666667vw;
}

.pflege-medizin .stage--normal:after,
.paedagogik-soziales .stage--normal:after {
  display: none !important;
}

.stage--firm::before, .stage--about::before {
  background-image: url(/assets/kcs/img/kcs_wave.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 112%;
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 10%;
  transform: rotate(180deg);
  z-index: 2;
}

.stage--neutral {
  background-color: var(--color-white);
  position: relative;
  padding-top: 63px;
  padding-bottom: 27px;
}

.stage--gradient {
  background: rgb(239, 157, 101) !important;
  background: linear-gradient(35deg, rgb(239, 157, 101) 0%, rgb(244, 163, 103) 61%, rgb(245, 173, 114) 100%) !important;
  height: auto !important;
}

.stage--gradient::before {
  background-image: url(/assets/kcs/img/kcs_wave_top_primary-light.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 112%;
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 10%;
  transform: rotate(180deg);
  z-index: 2;
}

@media only screen and (min-width: 992px) {
  .stage--gradient {
    padding-bottom: 60px;
  }
  .stage--gradient::before {
    bottom: -3px;
    height: 7%;
  }
  .stage--gradient .ce_bs_gridSeparator {
    display: flex;
    flex-direction: column;
    margin-top: auto;
  }
}
.page--location .stage--normal, .page--location .stage--neutral {
  background: transparent;
}

.stage--search-detail {
  padding-bottom: 0 !important;
}

.stage--landingpage {
  overflow: hidden;
  padding-bottom: 0 !important;
}

.stage--landingpage-2:before {
  background-image: url(/assets/kcs/img/kcs_wave.svg);
}

.stageheadline {
  color: var(--color-white);
  margin-bottom: 18px;
  width: 100%;
}

.searchheadline {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3em;
  margin-bottom: 40px;
  position: relative;
  width: 100%;
}

.stagecopy {
  color: var(--color-white);
  font-weight: 500;
  max-width: 480px;
  padding-bottom: 9px;
}

.stageimage {
  left: 50%;
  margin-left: -259px;
  position: absolute;
  top: 0px;
  width: auto;
  height: 490px;
}

@media only screen and (min-width: 768px) {
  .stageaboutimage {
    max-width: 500px;
  }
}
.stageconnectimage {
  margin-bottom: -20px;
  width: 100vw;
}

.scaleimage img {
  transform: scale(1) translateY(10px);
}

@media only screen and (min-width: 992px) {
  .scaleimage img {
    transform: scale(1.5) translateY(60px);
    transform-origin: bottom left;
  }
}
#jobsuche .teaserhomewrapper {
  background-color: var(--color-secondary--light);
  border-top: 36px solid var(--color-secondary--light);
}

.stage--jobsuche #jobsuche::before {
  background-image: url(/assets/kcs/img/kcs_wave_grey.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 112%;
  content: "" !important;
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 10%;
  transform: rotate(180deg);
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  .stage--jobsuche .stagecopy,
  .stage--jobsuche .stageheadline {
    display: none !important;
  }
  .stage--jobsuche .teaserhomewrapper {
    display: none !important;
  }
  .stage--jobsuche .stagewrapperleft {
    display: block !important;
    padding-top: 80px;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .stage--jobsuche .stagewrapperright {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  #jobsuche::before {
    background-image: url(/assets/kcs/img/kcs_wave_grey.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 112%;
  }
}
@media only screen and (min-width: 992px) {
  #jobsuche::before {
    background-position: center bottom;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ti-container {
  display: inline-block;
  font-size: inherit;
}

.ti-text-container {
  position: relative;
  display: inline;
  font-size: inherit;
}

.ti-text-container:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  position: relative;
}

.ti-text-container.active-container.ti-cursor:after {
  display: inline;
}

.ti-cursor:after {
  display: none;
  content: "|";
  bottom: 0.05em;
  right: -0.25em;
  position: absolute;
  line-height: normal;
  font-size: inherit;
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

@media only screen and (max-width: 767px) {
  .stageheadline--home {
    height: 280px;
    margin: 0 auto;
    max-width: 340px;
    padding-top: 194px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    text-shadow: 0 0 15px rgb(0, 0, 0);
    width: 100%;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px;
    z-index: 1;
  }
  .stagewrapperright {
    width: 100% !important;
    flex: initial;
    max-width: 100% !important;
    padding: 0;
    position: relative;
  }
}
.stage--jobsuche::before {
  background-image: url(/assets/kcs/img/kcs_wave_grey.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 112%;
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 10%;
  transform: rotate(180deg);
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .stage--main {
    padding-top: 104px;
    height: auto;
  }
  .stage--main::before {
    background-image: url(/assets/kcs/img/kcs_wave.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 112%;
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 10%;
    transform: rotate(180deg);
    z-index: 1;
  }
  .stage--about {
    padding-top: 104px;
  }
  .stage--search {
    padding-top: 98px;
    padding-bottom: 94px;
  }
  .stage--normal {
    padding-top: 78px;
    padding-bottom: 24px;
  }
  .stage--neutral {
    padding-top: 98px;
    padding-bottom: 24px;
  }
  .stagewrapperleft {
    z-index: 1;
    display: flex !important;
    flex-direction: row;
    gap: 30px;
  }
  .stagewrapperright {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
  }
  .stageheadline {
    margin-bottom: 37px;
    height: 168px;
  }
  .stagejobimage {
    height: 550px;
    margin-top: -62px;
    margin-left: -80px;
    width: auto;
  }
  .searchheadline {
    font-size: 48px;
    line-height: 1.2em;
    margin-bottom: 34px;
  }
}
@media only screen and (min-width: 992px) {
  .stage--normal-left {
    padding-top: 55px;
  }
  .stage--about {
    height: 610px;
  }
  .stage--firm::before, .stage--about::before {
    background-position: center bottom;
  }
  .stage--landingpage {
    overflow: hidden;
    padding-bottom: 6vw !important;
  }
  .stageaboutimage {
    max-width: initial;
    width: auto;
    height: 560px;
    margin-top: -50px;
  }
  .stagewrapperconnect {
    display: flex;
    align-items: flex-end;
  }
  .stageconnectimage {
    max-width: initial;
    width: auto;
    height: 450px;
    margin: 0;
    margin-left: -50px;
  }
}
@media only screen and (min-width: 1024px) {
  .stagewrapperright {
    display: block !important;
    flex-direction: initial;
    justify-content: initial;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .sliderstagewrapper {
    margin-top: -2vw;
  }
}
@media only screen and (min-width: 1100px) {
  .sliderstagewrapper {
    margin-top: -4vw;
  }
}
@media only screen and (min-width: 1150px) {
  .sliderstagewrapper {
    margin-top: -6vw;
  }
}
@media only screen and (min-width: 1200px) {
  .stage--main, .stage--about {
    padding-top: 177px;
  }
  .stage--about::before,
  .stage--main::before {
    bottom: -3px;
    background-position: center bottom;
  }
  .stage--about {
    height: 760px;
  }
  .stage--firm::before, .stage--about::before {
    bottom: -3px;
  }
  .stage--main::before {
    background-position: center bottom;
    bottom: -16px;
  }
  .stageaboutimage {
    height: 680px;
    margin-top: -130px;
    margin-left: -100px;
  }
  .stageconnectimage {
    height: 500px;
    margin-top: 0;
    margin-left: -100px;
    margin-bottom: -20px;
  }
  .stage--search {
    padding-top: 135px;
    padding-bottom: 63px;
  }
  .stage--normal {
    min-height: 600px;
    padding-top: 135px;
    padding-bottom: 20px;
  }
  .stage--neutral {
    padding-top: 215px;
    padding-bottom: 102px;
  }
  .stage--normal-left {
    padding-top: 42px;
  }
  .stagejobimage {
    height: 680px;
    margin-top: -264px;
  }
  .sliderstagewrapper {
    margin-top: -280px;
  }
}
@media only screen and (min-width: 1200px) {
  .stage.stage--main .inside.container {
    position: relative;
  }
}
.kununu-widget {
  border-radius: 10px;
  color: #102965;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 67px;
  height: 36px;
  width: 78px;
}

@media only screen and (min-width: 768px) {
  .kununu-widget {
    top: 104px;
    right: 24px;
    left: auto;
    height: 56px;
    width: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .kununu-widget {
    right: 32px;
    top: 7px;
    height: 90px;
    width: 195px;
  }
}
/* -------------------------------------------------------------
//  Teaer
// -----------------------------------------------------------*/
.teaserhomewrapper {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  height: auto;
  flex-direction: column;
  align-items: center;
}
.teaserhomewrapper:after {
  content: "";
  background: #fff;
  height: 22px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.teaserhomewrapper .btn {
  z-index: 2;
  position: relative;
  margin-bottom: 0;
}
.teaserhomewrapper .btn:first-child {
  margin-bottom: 8px;
}
.teaserhomewrapper .btn:last-child {
  margin-bottom: 0;
}

.teaserhomelink {
  background-color: var(--color-secondary--light);
  border-radius: var(--border-radius);
  color: var(--color-grey);
  display: block;
  height: 90px;
  text-align: center;
  text-decoration: none;
  width: calc(50% - 12px);
}

.teaserhomesmall {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  height: 100%;
  justify-content: center;
  line-height: 1.2em;
}

.teaserhomesmall.icon::before {
  font-size: 30px;
  margin-bottom: 8px;
}

.jobhomelink {
  text-transform: uppercase;
  margin-bottom: 0;
}

.stoererhome {
  margin: 0 auto;
  max-width: 245px;
  position: relative;
}

.contact_stoerer {
  width: 230px;
}

@media only screen and (min-width: 768px) {
  .stoererhome {
    max-width: 312px;
  }
}
@media only screen and (min-width: 992px) {
  .contact_stoerer {
    margin-top: 30px;
    width: 300px;
  }
}
@media only screen and (min-width: 1200px) {
  .stoererhome {
    max-width: 360px;
  }
}
.contact_card {
  padding-top: 16px;
}

.contact_card_wrapper {
  padding-top: 37px;
}

.contact_card_image {
  background-color: var(--color-white);
  border-radius: 50%;
  display: block;
  height: 105px;
  width: 105px;
}

.contact_card_headline {
  margin-bottom: 8px;
}

@media only screen and (min-width: 768px) {
  .contact_card_image {
    float: left;
  }
  .contact_card_wrapper {
    margin-left: 130px;
    padding-top: 32px;
  }
}
/* -------------------------------------------------------------
//  Map home
// -----------------------------------------------------------*/
.homemap {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
}

.mapoutline, .maptooltips {
  position: absolute;
  top: 0;
  left: 0;
}

@media only screen and (min-width: 1200px) {
  .homemap {
    margin: 0 auto;
    max-width: 500px;
  }
}
/* -------------------------------------------------------------
//  Aniamtion
// -----------------------------------------------------------*/
.scroll-in {
  transform: translateY(150px);
  opacity: 0;
}

.scroll-in.get-visible {
  transform: translateY(150px);
  opacity: 0;
  animation: scroll-in 1s ease forwards;
}

.fade-in {
  opacity: 0;
}

.fade-in.get-visible {
  opacity: 0;
  animation: fade-in 1.1s ease forwards;
}

.already-visible {
  transform: translateY(0px);
  opacity: 1;
}

.pop-in {
  transform: scale(0);
}

.pop-in.get-visible {
  transform: scale(1);
  animation: pop-in 0.3s ease-out forwards;
}

@keyframes scroll-in {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes pop-in {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/*
/*  Animation made with JavaScript /js/scripts.js */
/*
.map-in {
  transform: scale(0.9);
  opacity: 0;
}

.map-in.map-in-1.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0s ease-out forwards;
}

.map-in.map-in-2.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.2s ease-out forwards;
}

.map-in.map-in-3.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.3s ease-out forwards;
}

.map-in.map-in-4.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.4s ease-out forwards;
}

.map-in.map-in-5.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.5s ease-out forwards;
}

.map-in.map-in-6.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.6s ease-out forwards;
}

.map-in.map-in-7.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.7s ease-out forwards;
}

.map-in.map-in-8.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.8s ease-out forwards;
}

.map-in.map-in-9.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 0.9s ease-out forwards;
}

.map-in.map-in-10.get-visible {
  transform: scale(1);
  opacity: 1;
  animation: map-in 0.3s 1s ease-out forwards;
}

@keyframes map-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  90% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
*/
/* -------------------------------------------------------------
//  Cards
// -----------------------------------------------------------*/
.cardlink {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  margin-bottom: 70px;
}

.cardlink:hover, .cardlink:focus {
  color: #8d8d8d !important;
}

.card {
  height: 100%;
  justify-content: flex-start;
}

.card--benefit {
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.14);
  height: auto;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  -webkit-transition: box-shadow var(--transition--fast);
  -moz-transition: box-shadow var(--transition--fast);
  -ms-transition: box-shadow var(--transition--fast);
  -o-transition: box-shadow var(--transition--fast);
  transition: box-shadow var(--transition--fast);
}

.firmwrapper .card--benefit {
  margin-bottom: 3em;
}

.firmcards {
  padding: 40px 0 30px;
}

.firmspecs {
  margin-top: -100px;
}

.cardheadline {
  display: block;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25em;
  text-align: center;
}

.card--benefit p {
  font-size: 16px;
  text-align: center;
}

.cardimage {
  padding: 10px 10px 0 10px;
}

.cardmore {
  color: var(--color-primary) !important;
  display: block;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 15px;
  padding-top: 19px;
}

.cardmore--firm {
  color: var(--color-secondary) !important;
}

.cardlink:hover .cardmore, .cardlink:focus .cardmore {
  color: var(--color-primary--hover) !important;
}

.cardlink:hover .cardmore--firm, .cardlink:focus .cardmore--firm {
  color: var(--color-secondary) !important;
}

.cardlink:hover .card--benefit, .cardlink:focus .card--benefit {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.24);
}

.cardlink:hover .cardheadline, .cardlink:hover p, .cardlink:focus .cardheadline, .cardlink:focus p {
  color: var(--color-grey) !important;
}

.specswrapper {
  background: transparent url("/assets/kcs/img/kcs_bg_specs.svg") no-repeat center;
  background-size: auto 90%;
  padding-top: 80px;
}

.specs--number {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0;
}

.card--specs {
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.14);
  height: auto;
  max-width: 400px;
  margin: 0 auto;
  margin-bottom: 60px;
  padding: 20px;
}

.card--specs h3 {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .cardlink {
    max-width: 624px;
    margin-bottom: 80px;
  }
  .card--benefit {
    flex-direction: row;
    height: auto;
    max-width: 624px;
  }
  .cardimage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
  }
  .cardimage img {
    width: 235px;
  }
  .cardcopy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 22px;
    padding-bottom: 20px;
  }
  .cardheadline {
    padding-bottom: 11px;
  }
  .cardmore {
    padding-top: 13px;
    padding-bottom: 0;
  }
  .cardheadline, .card--benefit p, .cardmore {
    text-align: left;
  }
  .specs-4 {
    margin-top: -40px;
  }
  .specs-6 {
    margin-top: -70px;
  }
  .firmspecs {
    margin-top: -160px;
  }
}
@media only screen and (min-width: 1200px) {
  .cardlink {
    border-bottom: 80px solid rgba(255, 255, 255, 0);
    height: 100%;
    margin: 0;
  }
  .card--benefit {
    flex-direction: column;
    max-width: 625px;
    height: 100%;
  }
  .cardcopy {
    height: 100%;
    padding: 30px 20px;
    padding-bottom: 45px;
  }
  .cardmore {
    margin-top: auto;
    padding: 0;
  }
  .card--benefit p {
    margin-bottom: 14px;
  }
  .cardheadline, .card--benefit p, .cardmore {
    text-align: center;
  }
  .cardimage {
    padding-bottom: 13px;
  }
  .cardimage img {
    width: 100%;
  }
  .firmwrapper .card--benefit {
    margin: 0px;
  }
  .firmwrapper .cardimage {
    padding-top: 0;
    display: block;
    flex-direction: initial;
    justify-content: initial;
  }
  .firmwrapper .cardcopy {
    padding-bottom: 20px;
  }
  .firmcards {
    padding: 60px 0 80px;
  }
  .firmspecs {
    margin-top: -220px;
  }
  .specswrapper {
    background-size: auto;
    background-position-y: 250px;
    padding-top: 120px;
    padding-bottom: 40px;
  }
  .specs-2 {
    margin-top: -40px;
  }
  .specs-3 {
    margin-top: -20px;
  }
  .specs-4 {
    margin-top: 10px;
  }
  .specs-5 {
    margin-top: -70px;
  }
  .specs-6 {
    margin-top: -10px;
  }
}
/* -------------------------------------------------------------
//  Bewerbung
// -----------------------------------------------------------*/
.generaloverlay {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  left: 0;
  display: none;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}

.generaloverlaywrapper {
  background-color: var(--color-secondary--light);
  border-radius: 5px 5px 0 0;
  bottom: -120%;
  left: 0;
  padding: 25px 20px 46px 20px;
  position: absolute;
  width: 100%;
  -webkit-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.generaloverlaywrapper.active {
  bottom: 0%;
}

.btn-general {
  background-color: var(--color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  color: #8d8d8d;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  line-height: 25px;
  margin: 0 auto;
  margin-bottom: 6px;
  padding-top: 12px;
  padding-left: 20px;
  width: 270px;
}

.btn-general::before {
  margin-right: 14px;
  vertical-align: middle;
}

.btn-general.icon-whatsapp {
  background-color: var(--color-primary);
  border-radius: 7px 7px 0 0;
  color: var(--color-white);
  margin-top: -50px;
  padding-left: 14px;
}

.btn-general.icon-whatsapp:hover {
  background-color: var(--color-primary--hover);
  color: var(--color-white) !important;
}

.btn-general.icon-whatsapp::before {
  font-size: 24px;
  margin-right: 11px;
}

.btn-general.icon-formular {
  border-radius: 0 0 7px 0;
}

.btn-closeoverlay {
  cursor: pointer;
  font-size: 16px;
  line-height: 25px;
  margin-top: 36px;
  text-align: center;
}

@media only screen and (min-width: 992px) {
  .contactpersonwrapper {
    height: 100%;
    position: relative;
  }
  .contactperson {
    width: 252px;
  }
  .contactperson.fixed {
    top: 130px;
    position: fixed;
  }
  .contactperson.scroll {
    position: absolute;
    top: auto;
    bottom: 10px;
  }
  .generaloverlay {
    display: block !important;
    height: auto;
    left: auto;
    position: relative;
    top: auto;
    max-width: 251px;
    width: auto;
    z-index: 1;
  }
  .generaloverlaywrapper {
    background: white;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    font-size: 16px;
    position: relative;
    bottom: auto;
    left: auto;
  }
  .generaloverlaywrapper hr {
    margin-bottom: 2px;
  }
  .btn-general {
    background-color: var(--color-primary);
    box-shadow: none;
    color: #8d8d8d;
    height: auto;
    font-weight: 400;
    margin: 0;
    padding-left: 14px;
    padding-top: 10px;
    text-align: left;
    width: 100%;
  }
  .btn.btn--primary.btn-general {
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 9px;
    padding-top: 12px;
  }
  .btn-general.icon, .btn-general.icon:hover, .btn-general.icon:focus {
    background: var(--color-white);
  }
  .btn-general.icon:hover, .btn-general.icon:focus, .btn-general.icon-whatsapp:hover {
    background: var(--color-white);
    color: var(--color-primary) !important;
  }
  .btn-general.icon-whatsapp {
    background: transparent;
    color: #8d8d8d;
    margin-top: 0;
    padding-left: 14px;
  }
  .btn-general.icon-whatsapp::before {
    font-size: 17px;
    margin-right: 13px;
    vertical-align: middle;
  }
}
.applicationimage {
  max-width: 400px;
}

@media only screen and (min-width: 768px) {
  .applicationimage {
    max-width: 500px;
  }
}
.leitbildwrapper {
  position: relative;
  text-align: center;
}

.leitbildimage {
  height: 377px;
  width: auto;
  z-index: 2;
  max-width: unset;
}

@media only screen and (min-width: 1200px) {
  .leitbildwrapper {
    text-align: left;
  }
  .leitbildimage {
    height: 550px;
    left: 15px;
    position: absolute;
    top: 30px;
    width: auto;
  }
}
.location_back {
  color: var(--color-grey);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.location_back::before {
  content: "j";
  font-family: "kcs";
  font-size: 24px;
  text-transform: lowercase;
  vertical-align: bottom;
}

.locationwrapper {
  max-width: 624px;
}

.locationimage {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  border-radius: var(--border-radius);
}

/* -------------------------------------------------------------
//  Modal
// -----------------------------------------------------------*/
.modal-open {
  overflow: hidden;
}

.modal {
  /*position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  left: 0;
  display: none;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
   */
  overflow-x: hidden;
  overflow-y: auto;
  width: 100vw;
  display: none;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modalwrapper {
  height: auto;
  min-height: 100%;
  width: 100vw;
  padding: 20px 10px;
  background: var(--color-white) url(../img/kcs_bg_modal.svg) no-repeat right bottom;
  background-size: 100% auto;
  border-radius: 5px;
  position: relative;
  -webkit-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.closemodal {
  color: var(--color-grey);
  cursor: pointer;
  font-family: "kcs";
  font-size: 28px;
  position: absolute;
  top: 21px;
  right: 22px;
  z-index: 5;
}

.modalicon {
  font-size: 56px;
  margin-bottom: 20px;
  display: block;
}

.modalphone {
  color: var(--color-primary);
  font-size: 30px;
}

@media only screen and (min-width: 992px) {
  .modalwrapper {
    /*padding: 100px 40px;
    width: 980px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    height: auto;*/
    padding: 100px 40px;
    width: 980px;
    display: flex;
    margin: 1.75rem auto;
    transform: translate(0, 0);
    align-items: center;
    min-height: auto;
    position: relative;
  }
}
/* -------------------------------------------------------------
//  Searchform
// -----------------------------------------------------------*/
.form-group {
  position: relative;
}

.searchformlabel {
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 2px;
}

.searchforminput {
  border: none;
  border-radius: var(--border-radius);
  font-size: 20px;
  font-weight: 400;
  height: auto;
  margin-bottom: 25px;
  padding: 11px 12px 10px 12px;
}

select.searchforminput::-ms-expand {
  display: none;
}

select.searchforminput {
  background: #ffffff url("/assets/kcs/img/kcs_arrow_down.svg") no-repeat center right 15px;
  background-size: 24px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-word-break: normal;
  word-break: normal;
  padding: 11px 12px 10px 12px;
  position: relative;
  font-family: "Ubuntu", Verdana, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.searchformsubmit {
  color: var(--color-white);
  text-transform: uppercase;
}

.jobsearch {
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 50px;
  margin-top: 20px;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .searchforminput {
    margin-bottom: 32px;
  }
  .jobsearch {
    margin-top: 39px;
    padding-top: 13px;
    padding-bottom: 14px;
  }
}
@media only screen and (min-width: 1200px) {
  .searchformsubmit {
    float: right;
  }
}
@media only screen and (min-width: 768px) {
  .searchform--stage {
    margin-bottom: 56px;
  }
}
@media only screen and (min-width: 1200px) {
  .searchform--stage {
    margin-bottom: 100px;
  }
}

/* -------------------------------------------------------------
//  FI
// -----------------------------------------------------------*/
.fi_wrapper {
  background: transparent url("../img/kcs_bg_line_mobile.svg") no-repeat 59px 4px;
  margin-top: 50px;
}

.fi_wrapper .col-12:last-of-type {
  background-color: var(--color-secondary--light);
}

.fi_stepitem {
  margin-bottom: 120px;
}

.fi_stepitem span {
  color: var(--color-grey);
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding-left: 90px;
  padding-top: 10px;
  position: relative;
}

.fi_stepitem span::before {
  background: transparent url("/assets/kcs/img/kcs_fi_numbers.png") no-repeat 0 0;
  background-size: 265px;
  content: "";
  display: block;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
}

.fi_stepitem--2 span::before {
  background-position: -102px -2px;
}

.fi_stepitem--3 span::before {
  background-position: -195px 0;
}

.fi_stepitem--4 span::before {
  background-position: 0px -101px;
}

.fi_stepitem--5 span::before {
  background-position: -102px -97px;
}

.fi_stepitem--6 span::before {
  background-position: -195px -96px;
}

.fi_stepitem--7 span::before {
  background-position: -2px -196px;
}

@media only screen and (min-width: 768px) {
  .fi_wrapper {
    background: transparent url("../img/kcs_bg_line_desktop.svg") no-repeat 120px 30px;
    margin-top: 70px;
  }
  .fi_wrapper .col-12:nth-child(even) {
    margin-left: 256px;
  }
  .fi_stepitem {
    height: 254px;
    margin-bottom: 0px;
  }
  .fi_stepitem span {
    padding-left: 110px;
  }
}
@media only screen and (min-width: 992px) {
  .fi_wrapper {
    background-position: 274px 30px;
    margin-top: 100px;
  }
  .fi_wrapper .col-12:nth-child(odd) {
    margin-left: 220px;
  }
  .fi_wrapper .col-12:nth-child(even) {
    margin-left: 413px;
  }
}
/* -------------------------------------------------------------
//  Autocomplete
// -----------------------------------------------------------*/
.bootstrap-autocomplete.dropdown-menu, .ac_wrapper {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  border: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  color: var(--color-grey);
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  z-index: 4;
}

.ac_list, .ac_list_item {
  margin: 0;
  padding: 0;
}

.dropdown-item, .ac_list_item {
  background-color: var(--color-white);
  color: var(--color-grey);
  cursor: pointer;
  font-size: 20px;
  list-style-type: none;
  padding: 4px 12px;
  width: 100%;
}

.dropdown-item:hover, .ac_list_item:hover, .ac_list_item:active, .ac_list_item:focus {
  background-color: var(--color-secondary--light);
  border: none;
}

.dropdown-item span, .ac_list_item span {
  color: var(--color-primary);
}

/* -------------------------------------------------------------
//  Ergebnisse
// -----------------------------------------------------------*/
.sorting {
  display: flex;
  justify-content: space-between;
}

.sortingwrapper {
  color: var(--color-white);
  cursor: pointer;
  font-weight: 500;
  text-transform: uppercase;
}

.sortingwrapper::before {
  font-size: 24px;
  vertical-align: bottom;
  margin-right: 6px;
}

.sortingwrapper .icon::before {
  font-size: 24px;
  padding-right: 4px;
  vertical-align: middle;
}

.results {
  color: var(--color-white);
  font-weight: 500;
  text-align: right;
}

.searchresults {
  margin: 0;
  margin-top: -137px;
  padding: 0;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #ffffff;
  opacity: 0.5;
}

.resultitem {
  background-color: var(--color-white);
  margin: 0;
  margin-bottom: 10px;
  padding: 20px;
  padding-top: 17px;
  padding-bottom: 19px;
  position: relative;
  list-style-type: none;
}

.resultitem.first {
  border-radius: 7px 7px 0 0;
}

.resultitem.last {
  border-radius: 0 0 7px 7px;
}

.resultlink, .resultlink:hover, .resultlink:focus {
  color: var(--color-grey);
}

.resultname {
  display: block;
  font-weight: 500;
  margin-bottom: 12px;
}

.resultlocation {
  display: block;
  font-weight: 400;
  margin-bottom: 19px;
}

.resultdate {
  display: block;
  font-weight: 400;
}

.resultlocation::before, .resultdate::before {
  color: var(--color-primary);
  font-size: 19px;
  margin-right: 10px;
  vertical-align: text-top;
}

.resultdate::before {
  font-size: 23px;
  vertical-align: middle;
}

.resultjob {
  display: none;
}

.resultitem.new .resultdate::after {
  background-color: var(--color-primary);
  border-radius: 3px;
  color: var(--color-white);
  content: "NEU!";
  padding: 1px 4px 2px;
  margin-left: 35px;
}

@media only screen and (min-width: 768px) {
  .sorting {
    margin-top: 11px;
  }
  .sortingwrapper {
    font-size: 16px;
    padding-top: 8px;
  }
  .sortingwrapper::before {
    font-size: 28px;
    vertical-align: bottom;
  }
  .sortingwrapper .icon::before {
    font-size: 27px;
    padding-right: 3px;
  }
  .results {
    font-size: 32px;
  }
  .resultitem {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    padding: 29px;
    padding-top: 15px;
    padding-bottom: 16px;
    position: relative;
    -webkit-transition: box-shadow var(--transition--fast);
    -moz-transition: box-shadow var(--transition--fast);
    -ms-transition: box-shadow var(--transition--fast);
    -o-transition: box-shadow var(--transition--fast);
    transition: box-shadow var(--transition--fast);
  }
  .resultitem:hover, .resultitem:focus {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.22);
  }
  /* .resultitem:hover::after,
  .resultitem:focus::after {
    content:"k";
    font-family: 'kcs';
    font-size: 27px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  } */
  .resultname {
    text-transform: uppercase;
    margin-bottom: 7px;
  }
  .resultlocation, .resultdate, .resultjob {
    display: inline-block;
    font-size: 16px;
  }
  .resultlocation {
    margin-right: 34px;
    margin-bottom: 0;
  }
  .resultjob {
    font-weight: 400;
    float: right;
  }
}
@media only screen and (min-width: 992px) {
  .sorting {
    position: relative;
  }
  .sortingwrapper {
    background-color: transparent;
    border-radius: var(--border-radius);
    display: none;
    margin-left: -12px;
    margin-top: -3px;
    padding: 7px 12px 7px 12px;
    -webkit-transition: all var(--transition--fast);
    -moz-transition: all var(--transition--fast);
    -ms-transition: all var(--transition--fast);
    -o-transition: all var(--transition--fast);
    transition: all var(--transition--fast);
  }
  .sortingwrapper:hover, .sortingwrapper:focus {
    background-color: var(--color-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    color: var(--color-grey);
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .sorting {
    margin-top: 36px;
    margin-bottom: 7px;
  }
  .searchresults {
    margin-top: -148px;
  }
}
.resultdetails {
  background-color: var(--color-white);
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}

.resultdetails::before {
  background: transparent url("/assets/kcs/img/kcs_wave.svg") center top no-repeat;
  background-size: 100% auto;
  content: "";
  height: 40px;
  position: absolute;
  top: -39px;
  left: 0;
  width: 100%;
  z-index: 1;
  transform: rotate(180deg);
}

.resultdetails::after {
  background: #ffffff url("/assets/kcs/img/kcs_linie.svg") center center no-repeat;
  background-size: 100% auto;
  content: "";
  height: 20px;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  z-index: 1;
}

.resultcategory {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
}

.resultdetailitem {
  font-size: 16px;
  margin-bottom: 20px;
  position: relative;
}

.resultdetailitem .icon::before {
  display: none;
}

.resultdetailitem.new::after {
  background-color: var(--color-primary);
  border-radius: 3px;
  color: var(--color-white);
  content: "NEU!";
  padding: 1px 4px 2px;
  margin-left: 35px;
}

.jobdetailintro {
  font-weight: 500;
  margin-bottom: 4.5em;
}

@media only screen and (max-width: 767px) {
  .resultdetailitem::before {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .col-row-1 {
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 35%;
  }
  .col-row-2 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
  }
  .col-row-3 {
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 35%;
  }
  .resultdetails {
    background: transparent;
    min-height: 140px;
    padding-top: 0;
  }
  .resultdetails::before {
    top: auto;
    bottom: -20px;
    height: 40%;
    background-position: center bottom;
  }
  .resultdetailitem {
    color: var(--color-white);
    padding-left: 45px;
    white-space: nowrap;
  }
  .resultdetailitem.icon::before {
    position: absolute;
    font-size: 34px;
    top: 10px;
    left: 0;
  }
  .resultdetailitem.icon.icon-navigation-location-drop-pin::before {
    font-size: 28px;
  }
  .resultdetailitem.icon.icon-time-watch-clock::before {
    font-size: 28px;
  }
  .resultcategory {
    line-height: 1em;
    padding-top: 9px;
  }
  .resultdetailitem.new::after {
    background-color: var(--color-white);
    border-radius: 3px;
    color: var(--color-primary);
    content: "NEU!";
    font-weight: 500;
    padding: 1px 8px 2px;
    margin-left: 35px;
  }
  .resultdetails::after {
    display: none;
  }
  .jobdetailintro {
    margin-bottom: 2.5em;
  }
}
@media only screen and (min-width: 1200px) {
  .col-row-1 {
    -ms-flex: 0 0 22%;
    flex: 0 0 22%;
    max-width: 22%;
  }
  .col-row-2 {
    -ms-flex: 0 0 16%;
    flex: 0 0 16%;
    max-width: 16%;
  }
  .col-row-3 {
    -ms-flex: 0 0 27%;
    flex: 0 0 27%;
    max-width: 27%;
  }
  .col-row-4 {
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 35%;
    position: relative;
  }
  .resultdetailimage {
    margin-top: -300px;
    height: 470px;
    width: auto;
  }
}
@media only screen and (max-width: 991px) {
  .sortingoverlay {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    left: 0;
    display: none;
    z-index: -1;
    background: rgba(0, 0, 0, 0);
  }
  .sortingoverlay.active {
    display: block;
    z-index: 100;
    animation: showoverlay 0.3s ease-out forwards;
  }
  @keyframes showoverlay {
    to {
      background: rgba(0, 0, 0, 0.5);
    }
  }
  .sortingoverlaywrapper {
    background-color: var(--color-secondary--light);
    border-radius: 5px 5px 0 0;
    bottom: -120%;
    left: 0;
    padding: 25px 20px;
    position: absolute;
    width: 100%;
  }
  .sortingoverlay.active .sortingoverlaywrapper {
    animation: bottom-0 0.5s ease-out forwards;
  }
  @keyframes bottom-0 {
    0% {
      bottom: -120%;
    }
    50% {
      bottom: -100%;
    }
    100% {
      bottom: 0;
    }
  }
  .sortingoverlayheadline {
    display: block;
    font-weight: 500;
    padding-bottom: 7px;
    padding-left: 4px;
    text-transform: uppercase;
  }
  .sortingoverlaylist {
    border-top: 1px solid var(--color-grey--light);
    margin: 0;
    padding: 0;
  }
  .sortingoverlaylistitem {
    border-bottom: 1px solid var(--color-grey--light);
    font-size: 0.8em;
    margin: 0;
    padding: 8px 4px;
    list-style-type: none;
  }
  .sortingoverlaylistitem:hover, .sortingoverlaylistitem:focus {
    color: var(--color-primary--hover);
  }
}
@media only screen and (min-width: 992px) {
  .sortingoverlay {
    display: block;
    margin-top: 10px;
    width: auto;
  }
  .sortingoverlay.active {
    display: block;
  }
  .sortingoverlaywrapper {
    background: white;
    border-radius: 7px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
    padding: 7px 32px 7px 12px;
    display: flex;
    font-size: 16px;
  }
  .sortingoverlaylist {
    margin-bottom: 0;
    padding: 0;
    padding-right: 10px;
  }
  .sortingoverlaylistitem {
    display: inline;
    font-weight: 500;
    padding-left: 37px;
  }
  .sortingoverlaylistitem:hover, .sortingoverlaylistitem:focus {
    color: var(--color-primary--hover);
    cursor: pointer;
  }
  .sortingoverlayheadline {
    text-transform: uppercase;
    font-weight: 500;
  }
  .sortingoverlayheadline::before {
    font-family: "kcs" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "l";
    font-size: 24px;
    padding-right: 4px;
    vertical-align: middle;
    font-size: 27px;
    padding-right: 3px;
  }
}
/* -------------------------------------------------------------
//  Bewerbung
// -----------------------------------------------------------*/
.applicationwrapper {
  background: var(--color-white);
  bottom: 0;
  color: var(--color-grey);
  left: 0;
  overflow-x: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20000;
  display: none;
}

.application {
  padding-top: 33px;
  padding-bottom: 60px;
}

.application fieldset {
  padding: 9px 0;
}

.applicationintro {
  color: var(--color-primary);
  display: block;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 17px;
}

.applicationheadline {
  color: var(--color-grey);
  display: block;
  font-size: 1rem;
  line-height: 1.3em;
  text-transform: uppercase;
  margin-bottom: 37px;
}

.close-application {
  color: var(--color-grey);
  cursor: pointer;
  font-family: "kcs";
  font-size: 28px;
  position: fixed;
  top: 7px;
  right: 31px;
}

.checkcontainer {
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 5px;
  margin-bottom: 12px;
  padding-left: 54px;
  padding-top: 8px;
  position: relative;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkcontainer.half {
  display: inline-block;
  max-width: 200px;
  width: 49%;
}

.checkcontainer.height {
  min-height: 51px;
}

.checkcontainer input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.checkmark {
  background-color: var(--color-secondary--light);
  border-radius: 5px;
  height: 36px;
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
}

.checkcontainer:hover input ~ .checkmark {
  background-color: var(--color-secondary--light);
}

.checkcontainer input:checked ~ .checkmark {
  background-color: var(--color-secondary--light);
}

.section--primary-light .checkmark, .section--primary-light .checkcontainer:hover input ~ .checkmark, .section--primary-light .checkcontainer input:checked ~ .checkmark {
  background-color: var(--color-white);
}

.page--normal .checkmark, .page--normal .checkcontainer:hover input ~ .checkmark, .page--normal .checkcontainer input:checked ~ .checkmark {
  background-color: var(--color-white);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

.checkcontainer .checkmark:after {
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--color-primary);
}

label, .label {
  display: block;
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 5px;
  width: 100%;
}

input, .input {
  background-color: var(--color-secondary--light);
  border-radius: 5px;
  border: none;
  color: var(--color-grey);
  font-size: 16px;
  font-weight: 400;
  padding: 13px 10px;
  width: 100%;
}

.contact-form input, .contact-form .input {
  background-color: var(--color-white);
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #495057;
  opacity: 1 !important;
}

::-moz-placeholder {
  color: #495057;
  opacity: 1 !important;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #495057;
  opacity: 1 !important;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #495057;
  opacity: 1 !important;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #495057;
  opacity: 1 !important;
}

.ap-nachricht {
  min-height: 260px;
}

.ap-dropzone {
  font-size: 1.2em;
}

.ap-categorywrapper {
  display: flex;
}

.ap-category {
  font-size: 1rem;
  position: relative;
  padding-left: 40px;
  line-height: 1.2em;
  padding-top: 8px;
}

.ap-category::before {
  position: absolute;
}

.ap-category-1 {
  width: 200px;
}

.ap-category-2 {
  width: 220px;
}

.ap-category-3 {
  width: 250px;
}

.ap-category.icon-navigation-location-drop-pin::before {
  top: 10px;
  left: -2px;
  font-size: 31px;
}

.ap-category.icon-thin-0479-rocket-space-nasa::before {
  top: 4px;
  left: -10px;
  font-size: 39px;
}

.ap-category.icon-time-watch-clock::before {
  top: 10px;
  left: -2px;
  font-size: 26px;
}

.ap-category span {
  display: block;
}

.notify {
  font-size: 16px;
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  .applicationheadline {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  div.wave {
    background-color: var(--color-white);
    border-radius: 0 20px 20px 20px;
    bottom: 50px;
    height: 40px;
    padding-top: 3px;
    position: relative;
    text-align: center;
    width: 105px;
  }
  .wave .dot {
    background: var(--color-grey--light);
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    margin-right: 3px;
    width: 12px;
    animation: wave 1.3s linear infinite;
  }
  .dot:nth-child(2) {
    animation-delay: -1.1s;
  }
  .dot:nth-child(3) {
    animation-delay: -0.9s;
  }
  @keyframes wave {
    0%, 60%, 100% {
      transform: initial;
    }
    30% {
      transform: translateY(-5px);
    }
  }
  .desktopform {
    background-color: var(--color-secondary--light);
    margin-top: 60px;
    padding-top: 165px;
  }
  .applicationwrapper {
    background-color: var(--color-secondary--light);
  }
  .application {
    background-color: var(--color-white);
    padding-top: 60px;
    padding-bottom: 0;
    border-bottom: 100px solid var(--color-secondary--light);
  }
  .applicationintro {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .applicationheadline {
    font-size: 32px;
  }
  .close-application {
    font-size: 46px;
    top: 37px;
    right: 12px;
  }
  .chattime {
    font-size: 16px;
    line-height: 1.2em;
    margin-bottom: 12px;
  }
  .chat {
    color: var(--color-white);
    display: inline-block;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .chat--margin {
    margin-bottom: 50px;
  }
  .chat--orange {
    background-color: var(--color-primary);
    border-radius: 0 24px 24px 24px;
    padding: 25px 31px 23px 31px;
  }
  .chat--grey {
    border-radius: 24px;
    background-color: var(--color-grey);
    cursor: pointer;
    padding: 25px 31px 23px 31px;
    -webkit-transition: all var(--transition--fast);
    -moz-transition: all var(--transition--fast);
    -ms-transition: all var(--transition--fast);
    -o-transition: all var(--transition--fast);
    transition: all var(--transition--fast);
  }
  .chat--grey:hover, .chat--grey.active {
    background-color: var(--color-white);
    color: var(--color-grey);
  }
  .chat--white, .chat--white-2 {
    background-color: var(--color-white);
    border-radius: 24px 24px 0 24px;
    padding: 36px 41px 23px 41px;
    margin-left: 16.666667%;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    width: 100%;
  }
  .chat--white-2 {
    margin-left: 8.333333%;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
    margin-bottom: 0;
  }
  .chat--white label, .chat--white .label, .chat--white-2 label, .chat--white-2 .label {
    color: var(--color-grey);
    font-size: 20px;
  }
  .ap-fieldset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ap-fieldset fieldset {
    width: 47%;
  }
  .btn--submit {
    width: 250px;
  }
  .smile::after {
    background: transparent url("/assets/kcs/img/kcs_icon-smile.png") no-repeat center center;
    background-size: 100%;
    content: "";
    display: inline-block;
    height: 20px;
    margin-left: 4px;
    vertical-align: text-bottom;
    width: 20px;
  }
  .ap-checkboxitem {
    text-align: right;
  }
  .ap-checkbox .checkcontainer.height {
    border-radius: 24px;
    background-color: var(--color-grey);
    color: var(--color-white);
    display: inline-block;
    height: auto;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
    padding: 28px 39px 26px 42px;
    width: auto;
  }
  .ap-checkbox .checkcontainer.height.active {
    background-color: var(--color-white);
    color: var(--color-grey);
  }
  .ap-checkbox .checkcontainer.height .checkmark {
    display: none !important;
  }
  .ap-dropzone, .ap-dropzonedesc {
    color: var(--color-grey);
  }
  .step {
    display: none;
  }
}
@media only screen and (min-width: 1200px) {
  input, .input {
    font-size: 16px;
    padding: 9px 10px;
  }
  .ap-fieldset-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ap-fieldset-2 fieldset.fieldset-left {
    width: 63%;
  }
  .ap-fieldset-2 fieldset.fieldset-right {
    width: 31%;
  }
  .ap-dropzonedesc {
    font-size: 16px;
    line-height: 18px;
  }
  .dropzone {
    min-height: 260px;
  }
}
.contact-form fieldset, .initiativ-form fieldset {
  padding: 9px 0;
}

.msg-success {
  background-color: var(--color-primary);
  border-radius: 0 5px 5px 5px;
  color: var(--color-white);
  padding: 10px;
  position: relative;
}

.msg-success h3 {
  margin-bottom: 0.3em;
}

@media only screen and (min-width: 768px) {
  .msg-success {
    padding: 30px 20px 10px 20px;
  }
}
@media only screen and (min-width: 992px) {
  .msg-success {
    border-radius: 0 25px 25px 25px;
    padding: 30px 20px 10px 20px;
    max-width: 1196px;
  }
}
@media only screen and (min-width: 1200px) {
  .msg-success {
    padding: 61px 353px 29px 42px;
  }
  .msg-success::after {
    background: transparent url("/assets/kcs/img/kcs_icon-check.svg") no-repeat center;
    background-size: 100%;
    content: "";
    display: inline-block;
    height: 148px;
    position: absolute;
    top: 27px;
    left: 880px;
    width: 148px;
  }
}
.error, .error .ap-dropzone {
  color: #e8093c !important;
}

.error input[type=text], .error input[type=email], .error input[type=tel], .error textarea, .error .checkmark, .error .dropzone {
  border: 2px solid #e8093c;
}

.msg_error {
  color: #e8094e;
  display: none;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
}

.error .msg_error {
  display: block;
}

@media only screen and (min-width: 768px) {
  .msg_error {
    display: none;
    margin-left: 10px;
  }
  .error .msg_error {
    display: inline;
  }
}
/* -------------------------------------------------------------
//  Cards
// -----------------------------------------------------------*/
.location_card_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px 0px;
  margin: 0 -15px;
}

.location_card_wrapper > div {
  margin: 0px 15px;
  width: calc(100% - 25px);
}

.location_card {
  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  margin: 0 auto 25px;
  padding: 23px;
  padding-bottom: 40px;
  text-align: center;
  max-width: 400px;
}

.location_name {
  color: var(--color-grey) !important;
  display: block;
  font-size: 24px;
  text-transform: uppercase;
}

.location_card_link {
  color: var(--color-grey) !important;
}

.location_image {
  height: 130px;
  margin-bottom: 21px;
  width: auto;
}

@media only screen and (min-width: 768px) {
  .location_card_wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 1024px) {
  .location_card_wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* -------------------------------------------------------------
//  Logobar
// -----------------------------------------------------------*/
.logolist {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5%;
}

.logolist__item {
  margin: 0 4%;
  margin-top: 20px;
  width: 42%;
}

/* -------------------------------------------------------------
//  Slider
// -----------------------------------------------------------*/
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: 0;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-list, .slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:after, .slick-track:before {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: flex;
  justify-content: center;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-list {
  padding-top: 120px;
}

.slick-arrow {
  background-color: var(--color-primary);
  border: none;
  bottom: 0;
  color: var(--color-white) !important;
  font-size: 0;
  height: 67px;
  left: 50%;
  line-height: 0;
  margin: 0;
  outline: none;
  padding: 0;
  position: absolute;
  text-indent: -999em;
  width: 67px;
  z-index: 2;
  -webkit-transition: background-color var(--transition--fast);
  -moz-transition: background-color var(--transition--fast);
  -ms-transition: background-color var(--transition--fast);
  -o-transition: background-color var(--transition--fast);
  transition: background-color var(--transition--fast);
}

.slick-arrow:focus {
  outline: none;
}

.slick-arrow::before {
  color: var(--color-white) !important;
  display: block;
  font-family: "kcs";
  font-size: 50px;
}

.slick-arrow:hover, .slick-arrow:focus {
  background-color: var(--color-primary--hover);
}

.slick-prev {
  border-radius: var(--border-radius--large) var(--border-radius--large) 0 var(--border-radius--large);
  margin-left: -78px;
}

.slick-next {
  border-radius: var(--border-radius--large) var(--border-radius--large) var(--border-radius--large) 0;
  margin-left: 12px;
}

.slick-next::before {
  content: "k";
}

.slick-prev::before {
  content: "j";
}

.slider--testimonial .slider__item {
  margin-bottom: 97px;
}

.sliderwrapper {
  background-color: var(--color-white);
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.14);
  height: auto;
  max-width: 400px;
  margin: 0 23px;
  margin-bottom: 120px;
  padding: 64px 20px 20px 20px;
  position: relative;
  text-align: center;
}

.slidershadow {
  display: none !important;
}

.sliderimage {
  border-radius: 50%;
  height: 172px;
  width: 172px;
  position: absolute;
  left: 50%;
  margin-left: -86px;
  top: -117px;
  transform: scale(0);
  -webkit-transition: all var(--transition--slow);
  -moz-transition: all var(--transition--slow);
  -ms-transition: all var(--transition--slow);
  -o-transition: all var(--transition--slow);
  transition: all var(--transition--fast);
}

.slick-current.slick-active .sliderimage {
  transform: scale(1);
}

.slidername {
  display: block;
  font-size: 26px;
  font-weight: 500;
  padding-bottom: 3px;
}

.sliderlocation {
  color: var(--color-primary);
  display: block;
  font-size: 20px;
  padding-bottom: 4px;
}

@media only screen and (min-width: 446px) {
  .sliderwrapper {
    margin: 0 auto;
    margin-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) {
  .slick-list {
    padding-top: 141px;
  }
  .slider--testimonial .slider__item {
    margin-bottom: 100px;
  }
  .sliderwrapper {
    max-width: 624px;
    margin-bottom: 140px;
    padding: 140px 40px 45px 40px;
  }
  .sliderimage {
    height: 240px;
    width: 240px;
    margin-left: -120px;
    top: -136px;
  }
  .slidername {
    font-size: 32px;
    padding-bottom: 9px;
  }
  .sliderlocation {
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .slick-list {
    padding-top: 201px;
  }
  .slider--testimonial .slider__item {
    margin-bottom: 88px;
  }
  .slick-prev {
    margin-left: 284px;
  }
  .slick-next {
    margin-left: 375px;
  }
  .sliderwrapper {
    text-align: left;
    margin-bottom: 210px;
    max-width: 704px;
    padding: 70px 140px 62px 55px;
  }
  .slidershadow {
    display: block !important;
    position: absolute;
    left: -110px;
    top: -100px;
    width: 770px;
    z-index: -1;
  }
  .sliderimage {
    height: 340px;
    margin-left: 88px;
    top: -196px;
    width: 340px;
  }
  .slidername {
    padding-bottom: 6px;
  }
  .sliderlocation {
    padding-bottom: 11px;
  }
}
.slider--stage .slick-list {
  padding: 0;
}

/* -------------------------------------------------------------
//  Navigation
// -----------------------------------------------------------*/
.navbar {
  display: block;
  min-height: 60px;
  padding: 0;
  padding-top: 8px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  -webkit-transition: background-color var(--transition--slow);
  -moz-transition: background-color var(--transition--slow);
  -ms-transition: background-color var(--transition--slow);
  -o-transition: background-color var(--transition--slow);
  transition: background-color var(--transition--slow);
}

.navbar .container {
  justify-content: flex-end;
}

.navlist {
  margin: 0;
  padding: 0;
}

.navlist__item {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media only screen and (min-width: 1200px) {
  .navlist__item.startseite {
    display: none;
  }
}

.navlist__link, .navlist__link:hover, .navlist__link:focus, .navlist__link:visited {
  color: var(--color-white);
  font-weight: 400;
}

.logowrapper {
  margin-right: auto;
}

.navbar.scroll {
  background-color: var(--color-white);
  color: var(--color-grey);
}

.corporate__logo {
  background: transparent url("/assets/kcs/img/kcs_logo_white.svg") no-repeat center;
  background-size: contain;
  display: inline-block;
  height: 25px;
  font-size: 0;
  line-height: 0;
  width: 93px;
}

.page--normal .corporate__logo {
  background: transparent url("/assets/kcs/img/kcs_logo_color.svg") no-repeat center;
  background-size: contain;
}

.navbar.scroll .corporate__logo {
  background: transparent url("/assets/kcs/img/kcs_logo_color.svg") no-repeat center;
  background-size: contain;
}

.link--footer {
  color: var(--color-white);
  cursor: pointer;
  font-size: 20px;
  line-height: 42px;
  text-align: left;
}

a.nav_jobsearch {
  background-color: var(--color-primary);
  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
  border-bottom: none;
  color: var(--color-white) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1em;
  margin-left: 4px;
  padding: 13px 55px 14px !important;
  text-transform: uppercase;
  -webkit-transition: background-color var(--transition--slow);
  -moz-transition: background-color var(--transition--slow);
  -ms-transition: background-color var(--transition--slow);
  -o-transition: background-color var(--transition--slow);
  transition: background-color var(--transition--slow);
}
@media only screen and (max-width: 1199px) {
  a.nav_jobsearch {
    text-transform: none;
    font-size: 20px;
    font-weight: 400 !important;
  }
}

a.nav_jobsearch.active,
a.nav_jobsearch:hover,
a.nav_jobsearch:focus {
  border: none !important;
  background-color: var(--color-primary--hover) !important;
  font-weight: 500 !important;
}
@media only screen and (max-width: 1199px) {
  a.nav_jobsearch.active,
  a.nav_jobsearch:hover,
  a.nav_jobsearch:focus {
    font-weight: 400 !important;
  }
}

.navbar.scroll a.nav_jobsearch {
  color: var(--color-white) !important;
}

.navbar.scroll a.nav_jobsearch,
.navbar.scroll a.nav_jobsearch:hover,
.navbar.scroll a.nav_jobsearch:focus,
.navbar.scroll a.nav_jobsearch:visited,
.page--normal .navbar a.nav_jobsearch,
.page--normal .navbar a.nav_jobsearch:hover,
.page--normal .navbar a.nav_jobsearch:focus,
.page--normal .navbar a.nav_jobsearch:visited {
  border: none !important;
  color: var(--color-white) !important;
  font-weight: 500 !important;
}

@media only screen and (max-width: 1199px) {
  .navwrapper {
    -webkit-transition: opacity var(--transition--slow);
    -moz-transition: opacity var(--transition--slow);
    -ms-transition: opacity var(--transition--slow);
    -o-transition: opacity var(--transition--slow);
    transition: opacity var(--transition--slow);
    height: 0;
    position: fixed;
    left: 0;
    right: 0;
    background: #fff;
    top: 0;
    opacity: 0;
  }
  .navwrapper.active {
    height: 100vh;
    -webkit-transition: opacity var(--transition--fast);
    -moz-transition: opacity var(--transition--fast);
    -ms-transition: opacity var(--transition--fast);
    -o-transition: opacity var(--transition--fast);
    transition: opacity var(--transition--fast);
    opacity: 1;
  }
  .navwrapper::before {
    background-color: var(--color-primary);
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    left: 50%;
    opacity: 0;
    margin-left: -5px;
    position: absolute;
    top: 40px;
    width: 10px;
    z-index: -1;
    transform: scale(0.1);
  }
  .navwrapper.active::before {
    animation: bounce 0.5s 1 0.2s normal forwards cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  @keyframes bounce {
    0% {
      transform: scale(0.1);
      opacity: 1;
    }
    95% {
      transform: scale(76);
      opacity: 1;
    }
    100% {
      transform: scale(72);
      opacity: 1;
    }
  }
  .navlist {
    display: none;
    position: relative;
    padding-top: 40px;
  }
  .navwrapper.active .navlist {
    display: block;
  }
  /*.navlist::before {
    content: "MENÜ";
    color: var(--color-white);
    display: block;
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 6px;
    text-align: center;
  }*/
  .navlist__item {
    font-size: 20px;
    text-align: center;
    line-height: 53px;
    opacity: 0;
  }
  .navwrapper.active .navlist__item:first-of-type {
    animation: fadein 0.3s 1 0.4s normal forwards;
  }
  .navwrapper.active .navlist__item:nth-of-type(2) {
    animation: fadein 0.3s 1 0.5s normal forwards;
  }
  .navwrapper.active .navlist__item:nth-of-type(3) {
    animation: fadein 0.3s 1 0.6s normal forwards;
  }
  .navwrapper.active .navlist__item:nth-of-type(4) {
    animation: fadein 0.3s 1 0.7s normal forwards;
  }
  .navwrapper.active .navlist__item:nth-of-type(5) {
    animation: fadein 0.3s 1 0.8s normal forwards;
  }
  .navwrapper.active .navlist__item:nth-of-type(6) {
    animation: fadein 0.3s 1 0.9s normal forwards;
  }
  @keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
@media only screen and (min-width: 768px) {
  .navbar {
    min-height: 70px;
    padding-top: 16px;
  }
  .corporate__logo {
    height: 40px;
    width: 148px;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar {
    min-height: 80px;
  }
  .navlist {
    padding-top: 0;
  }
  .navlist__item {
    display: inline;
    margin-left: 18px;
  }
  .navlist__link {
    color: var(--color-white) !important;
    font-weight: 500;
    padding: 0 3px 6px 3px;
  }
  .navlist__link.active,
  .navlist__link.trail,
  .navlist__link:hover,
  .navlist__link:focus {
    border-bottom: 2px solid #fff;
    font-weight: 500;
  }
  .navbar.scroll .navlist__link,
  .navbar.scroll .navlist__link.trail,
  .navbar.scroll .navlist__link.active,
  .navbar.scroll .navlist__link:hover,
  .navbar.scroll .navlist__link:focus {
    color: var(--color-grey) !important;
  }
  .navbar.scroll .navlist__link.trail,
  .navbar.scroll .navlist__link.active,
  .navbar.scroll .navlist__link:hover,
  .navbar.scroll .navlist__link:focus {
    border-bottom: 2px solid var(--color-grey);
  }
  .page--normal .navbar .navlist__link.active,
  .page--normal .navbar .navlist__link.trail,
  .page--normal .navbar .navlist__link:hover,
  .page--normal .navbar .navlist__link:focus {
    border-bottom: 2px solid var(--color-grey);
    font-weight: 500;
  }
  .page--normal .navbar .navlist__link,
  .page--normal .navbar .navlist__link:hover,
  .page--normal .navbar .navlist__link:focus,
  .page--normal .navbar .navlist__link:visited {
    color: var(--color-grey) !important;
  }
}
@media only screen and (min-width: 1024px) {
  .link--footer {
    padding: 0 3px 6px 3px;
  }
  .link--footer:hover, .link--footer:focus {
    border-bottom: 2px solid #fff;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar {
    min-height: 105px;
    padding-top: 36px;
  }
  .navlist__item {
    margin-left: 25px;
  }
}
.navlist--footer {
  display: block;
  padding-top: 0;
}

.navlist--footer::before {
  display: none;
}

.navlist--footer .navlist__item {
  opacity: 1;
  font-size: 20px;
  line-height: 42px;
  text-align: left;
}

.navlist--footer .navlist__item .navlist__link {
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  .navlist--footer {
    padding-top: 13px;
  }
  .navlist--footer .navlist__item {
    display: block;
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .navlist--footer .navlist__item {
    line-height: 40px;
  }
}
/* -------------------------------------------------------------
//  Footer
// -----------------------------------------------------------*/
footer {
  background-color: #434343;
}

.footernavigation {
  /* background: #5A5A5A url('/assets/kcs/img/kcs_wave_footer.svg') no-repeat center top; */
  background: #5A5A5A;
  background-size: 112%;
  padding-top: 12.5vw;
  padding-bottom: 223px;
}

.footernavigation--neutral {
  /* background: #5A5A5A url('/assets/kcs/img/kcs_wave_neutral_footer.svg') no-repeat center top; */
  background: #5A5A5A;
  background-size: 112%;
}

.footercopyright {
  color: var(--color-white);
  font-size: 20px;
  padding-bottom: 60px;
  padding-top: 150px;
  position: relative;
}

.footerlogo {
  margin-bottom: 41px;
  width: 163px;
}

.kununu {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  margin: 0 auto;
  margin-top: -250px;
  margin-bottom: 40px;
  max-width: 270px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.oekostrom_logo {
  margin-bottom: 15px;
  width: 51px;
}

.fairplay_logo {
  margin-bottom: 15px;
  width: 51px;
}

.kununu_logo {
  width: 198px;
}

.ihk_logo {
  height: 70px;
  margin-top: 20px;
  width: auto;
}

.footer-lp {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  line-height: 42px;
}

@media only screen and (min-width: 768px) {
  .footernavigation {
    padding-bottom: 153px;
  }
  .footerlogo {
    margin-bottom: 7px;
    width: 274px;
  }
  .kununu {
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: -225px;
    max-width: 670px;
  }
  .oekostrom_logo {
    margin-bottom: 0;
  }
  .fairplay_logo {
    margin-bottom: 0;
  }
  .kununu_logo {
    width: 372px;
  }
  .ihk_logo {
    margin-top: 0px;
  }
  .footer-lp {
    flex-direction: row;
  }
  .footer-lp a,
  .footer-lp span {
    margin-right: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-lp {
    padding-top: 25px;
  }
}
@media only screen and (min-width: 1200px) {
  /* .footernavigation {
    padding-top: 103px;
  } */
  .footercopyright {
    padding-bottom: 0px;
    padding-top: 147px;
    padding-left: 30px;
  }
  .footerlogo {
    margin-top: 23px;
    width: 204px;
  }
  .kununu {
    margin-top: -230px;
    margin-left: 408px;
    margin-bottom: 0;
    max-width: 710px;
  }
  .footer-lp {
    padding-top: 35px;
    margin-left: -40px;
  }
}
/* -------------------------------------------------------------
//  Accordion
// -----------------------------------------------------------*/
.accordionlist {
  margin-top: -65px;
}

.ce_accordion {
  background-color: var(--color-white);
  border-radius: 7px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  margin: 0;
  margin-bottom: 10px;
  padding-top: 27px;
  padding-bottom: 26px;
  padding-left: 71px;
  padding-right: 20px;
  position: relative;
  -webkit-transition: box-shadow var(--transition--fast);
  -moz-transition: box-shadow var(--transition--fast);
  -ms-transition: box-shadow var(--transition--fast);
  -o-transition: box-shadow var(--transition--fast);
  transition: box-shadow var(--transition--fast);
}

.toggler {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

.toggler::before {
  background-color: var(--color-primary);
  border-radius: 50%;
  content: "c";
  color: var(--color-white);
  display: block;
  font-family: "kcs";
  font-size: 22px;
  height: 36px;
  transform: rotate(45deg);
  padding-top: 7px;
  padding-left: 7px;
  position: absolute;
  top: -3px;
  left: -55px;
  line-height: 22px;
  width: 36px;
  -webkit-transition: transform var(--transition--fast);
  -moz-transition: transform var(--transition--fast);
  -ms-transition: transform var(--transition--fast);
  -o-transition: transform var(--transition--fast);
  transition: transform var(--transition--fast);
}

.toggler.active::before {
  transform: rotate(90deg);
}

.accordion {
  padding-top: 16px;
}

@media only screen and (min-width: 768px) {
  .accordionlist {
    margin-top: -105px;
  }
  .ce_accordion:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.22);
  }
  .toggler {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .ce_accordion {
    padding-top: 34px;
    padding-bottom: 36px;
    padding-left: 145px;
    padding-right: 110px;
  }
  .toggler {
    font-size: 20px;
  }
  .toggler::before {
    font-size: 30px;
    height: 50px;
    padding-top: 14px;
    padding-left: 10px;
    top: -9px;
    left: -98px;
    line-height: 22px;
    width: 50px;
  }
  .accordion {
    padding-bottom: 42px;
  }
}
@media only screen and (min-width: 1024px) {
  .accordionlist {
    margin-top: -135px;
  }
}
/* -------------------------------------------------------------
//  Accordeon
// -----------------------------------------------------------*/
.Accordion {
  margin: 0;
  padding: 0;
}

.Accordion h3 {
  margin: 0;
  padding: 0;
}

.Accordion.focus {
  border-color: #ecf3fb;
}

.Accordion-trigger {
  background: none;
  border-style: none;
  color: #000000;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  padding-right: 40px;
  position: relative;
  text-align: left;
  width: 100%;
  outline: none !important;
}

.Accordion-trigger:focus, .Accordion-trigger:hover {
  background: #ecf3fb;
}

.Accordion button::-moz-focus-inner {
  border: 0;
}

.Accordion-title {
  display: block;
  pointer-events: none;
  border: transparent 2px solid;
  border-radius: 5px;
  padding: 0.25em;
  outline: none;
}

.Accordion-trigger:focus .Accordion-title {
  /*border-color: hsl(216, 94%, 73%);*/
}

.Accordion-icon {
  background: transparent url(../img/plus_circle.svg) no-repeat center center;
  background-size: 24px 24px;
  height: 24px;
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 3px;
  width: 24px;
  speak: none;
}

.Accordion-trigger:focus .Accordion-icon, .Accordion-trigger:hover .Accordion-icon {
  border-color: hsl(216, 94%, 73%);
}

.Accordion-trigger[aria-expanded=true] .Accordion-icon {
  background: transparent url(../img/minus_circle.svg) no-repeat center center;
  background-size: 24px 24px;
  speak: none;
}

.Accordion-panel {
  margin: 0;
  padding: 0 0 0 45px;
}

/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
.Accordion-panel[hidden] {
  display: none;
}

.Accordion-panel ul li {
  background: transparent url(../img/checkcircle.svg) no-repeat -6px -4px;
  background-size: 32px 32px;
  margin-bottom: 1em;
  padding-left: 30px;
}

@media only screen and (min-width: 576px) {
  .Accordion {
    margin: 0;
  }
  .Accordion-icon {
    top: 3px;
  }
}
/* -------------------------------------------------------------
//  Cookielayer
// -----------------------------------------------------------*/
.cookie-layer {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  margin: 0;
  padding: 10px 20px;
  left: 0;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 1000;
  overflow-y: scroll;
  overflow-x: hidden;
}

.cookie-layer.is-hidden {
  display: none;
}

.cookie-layer__body {
  background-color: var(--color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14);
  padding: 20px 20px 0 20px;
  height: calc(100% - 0px);
  overflow-x: hidden;
}

.cookie-layer__wrapper {
  height: calc(100% - 20px);
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}

.cookiewelcome.hide {
  display: none;
}

.cookieselection {
  display: none;
}

.cookieselection.show {
  display: block;
}

.close-coockie {
  background: var(--color-white);
  border: none;
  color: var(--color-secondary);
  cursor: pointer;
  font-family: "kcs";
  font-size: 25px;
  height: 25px;
  line-height: 21px;
  padding: 0;
  position: absolute;
  top: 0px;
  right: -5px;
  width: 25px;
}

.trackingheadline {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 0.5em;
}

.trackingcopy {
  font-size: 16px !important;
}

.cookiefieldset {
  border: 0 none;
  padding-left: 0;
}

.cookielist {
  display: block;
  margin: 0;
  padding: 0;
}

.cookiebuttons {
  padding-top: 20px;
  text-align: left;
}

.cookiebuttons .btn--secondary {
  margin-right: 25px;
}

.cookielist__item {
  text-align: left;
  margin-right: 20px;
  margin-bottom: 10px;
  list-style-type: none;
}

.cookielista__label {
  display: inline;
  width: auto;
}

.checkbox--cookie {
  margin-right: 10px;
  width: auto;
}

.accordion--cookie {
  background-color: var(--color-white) !important;
  padding-left: 0;
}

.accordion--cookie h3 {
  font-size: 18px;
}

.accordion--cookie {
  margin: 0;
}

.accordion-icon--cookie {
  left: 0;
  right: auto;
}

.accordion-panel--cookie {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.coockieradio {
  display: flex;
  justify-content: space-between;
}

.cookie-layer__wrapper .Accordion-icon {
  top: 4px !important;
}

.cookie-layer__wrapper .accordion--cookie {
  border: none;
  padding: 0;
}

.cookie-layer__wrapper .Accordion.accordion--cookie {
  margin-bottom: 15px;
}

.cookie-layer__wrapper .Accordion > * + * {
  border-top: 0px solid hsl(0, 0%, 82%);
}

.cookielist__item {
  cursor: pointer;
  display: block;
  font-size: 1rem;
  line-height: 1.2em;
  margin-bottom: 12px;
  padding-left: 40px;
  padding-top: 4px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cookielist__item.half {
  display: inline-block;
  max-width: 200px;
  width: 49%;
}

.cookielist__item .checkbox--cookie {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.checkmark--cookie {
  background-color: var(--color-secondary--light);
  border-radius: 5px;
  height: 26px;
  position: absolute;
  top: 6px;
  left: 0;
  width: 26px;
}

.cookielist__item:hover .checkbox--cookie ~ .checkmark--cookie {
  background-color: var(--color-secondary--light);
}

.cookielist__item .checkbox--cookie:checked ~ .checkmark--cookie {
  background-color: var(--color-secondary--light);
}

.checkmark--cookie:after {
  content: "";
  position: absolute;
  display: none;
}

.cookielist__item .checkbox--cookie:checked ~ .checkmark--cookie:after {
  display: block;
}

.cookielist__item .checkmark--cookie:after {
  top: 8px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--color-primary);
}

.cookielist__item .checkbox--cookie:disabled ~ .checkmark--cookie:after {
  background-color: var(--color-grey--light);
}

.cookielista__label {
  cursor: pointer;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
}

.cookienamelist {
  margin: 0;
  padding: 0;
}

.cookienamelist li {
  font-size: 16px !important;
  margin: 0;
  padding: 0;
  padding-left: 0 !important;
  margin-left: 16px;
}

input, .input {
  background-color: var(--color-secondary--light);
  border-radius: 5px;
  border: none;
  color: var(--color-grey);
  padding: 13px 10px;
  width: 100%;
}

.section--primary-light input, .section--primary-light .input {
  background-color: var(--color-white);
}

@media only screen and (min-width: 450px) {
  .cookielist {
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .cookie-layer, .cookie-layer__wrapper {
    overflow-y: hidden;
  }
  .cookie-layer {
    background: transparent;
    bottom: 0;
    height: auto;
    top: auto;
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);
  }
  .cookie-layer__body {
    border: 7px solid var(--color-primary--light);
    height: auto;
    overflow-y: hidden;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 15px 0 15px;
  }
  .cookiebuttons {
    text-align: right;
    padding-top: 0;
  }
  .cookiefieldset {
    padding: 0;
  }
}
/* -------------------------------------------------------------
//  Helper
// -----------------------------------------------------------*/
.invisible {
  display: none;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.block {
  display: block;
}

.width100 {
  width: 100%;
}

.spacer {
  height: 3em;
}

.spacer-line {
  padding: 40px 0;
}

.center-medium {
  text-align: center;
}

.center-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.center-copy {
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
}

.medium {
  font-weight: 500;
}

.orange {
  color: var(--color-primary);
}

.uppercase {
  text-transform: uppercase;
}

.no-margin {
  margin: 0;
}

@media only screen and (max-width: 575px) {
  .center-mobile {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .spacer-line {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 1024px) {
  .spacer-line {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .center-medium {
    text-align: left;
  }
  .center-vertical {
    align-items: baseline;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .spacer-line {
    padding: 100px 0;
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  position: relative;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 120px;
  margin: 0.5em;
}

.dropzone .dz-preview .dz-progress {
  display: block;
  height: 15px;
  border: 1px solid #aaa;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  display: block;
  height: 100%;
  width: 0;
  background: green;
}

.dropzone .dz-preview .dz-error-message {
  color: red;
  display: none;
}

.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block;
}

.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  width: 54px;
  height: 58px;
  left: 50%;
  margin-left: -27px;
}

.dz-default.dz-message {
  background: transparent url("/assets/kcs/img/kcs_icon-upload.svg") no-repeat center center;
  background-size: 62px;
  min-height: 150px;
}

@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  padding: 0;
  background-color: var(--color-secondary--light);
  border-radius: 5px;
  border: none;
  color: var(--color-grey);
  min-height: 150px;
  padding: 13px 10px;
  width: 100%;
}

.section--primary-light .dropzone {
  background-color: var(--color-white);
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-message .dz-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: transparent;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 0px;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 32px;
  left: 50%;
  margin-left: -27px;
  margin-top: 0;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 150px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

/* Landingpage */
.bottom-wave {
  position: absolute;
  width: 100%;
  transform: rotate(180deg);
  bottom: -1px;
  line-height: 0;
  font-size: 0;
}

.lp_image {
  margin-bottom: -10px;
}

@media only screen and (min-width: 992px) {
  .lp_image {
    margin-top: -50px;
    position: absolute;
    width: 350px;
  }
}
@media only screen and (min-width: 1200px) {
  .lp_image {
    margin-top: -120px;
    width: 441px;
  }
}
/* HIDE JOBPAL */
.btn--zoe,
.chatbot,
.btn--chatbot,
.whatsapp--desktop,
.whatsapp--mobile,
.MuiScopedCssBaseline-root {
  /*display: none !important;*/
}

.chatbot {
  /*display: none !important;*/
}

.whatsapp--desktop + .d-none.d-lg-block {
  /*display: none !important;*/
}

/* -------------------------------------------------------------
//  NEW CHAT
// -----------------------------------------------------------*/
/* button */
.bc-mp4 {
  -webkit-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.bc-mp4.hide {
  display: block;
  right: -330px !important;
}

.MuiScopedCssBaseline-root {
  display: none;
}

@media only screen and (min-width: 992px) {
  .MuiScopedCssBaseline-root {
    display: block;
  }
}
.bc-mp12 {
  width: 567px !important;
  border-radius: 8px !important;
  box-shadow: 0px 13px 45px -1px rgba(0, 0, 0, 0.15) !important;
}

/* powered by mp */
.bc-mp12 > div > div:last-child {
  display: none;
}

/* HEADER */
.bc-MuiPaper-elevation4 {
  box-shadow: none !important;
}

.bc-mp14 {
  border-radius: 8px 8px 0 0 !important;
}

header .bc-MuiToolbar-dense {
  min-height: 60px !important;
}

.bc-mp14 {
  background: var(--color-primary) !important;
}

/* */
.bc-mp54 {
  display: none !important;
}

.bc-mp8 {
  background: var(--color-white) !important;
}

.bc-mp38 {
  margin: 0 !important;
}

/* chat messages container */
.bc-mp21 .bc-mp22 {
  height: calc(80vh - 195px);
}

@media only screen and (min-height: 768px) {
  .bc-mp21 .bc-mp22 {
    height: 460px;
  }
}
.bc-mp21 .bc-MuiToolbar-dense {
  min-height: 72px !important;
  padding: 0 !important;
}

/* upload button container */
.bc-mp21 .bc-MuiToolbar-dense > div:first-child {
  margin-left: 24px;
  margin-right: 24px;
}

/*text input container*/
.bc-mp21 .bc-MuiToolbar-dense > .bc-MuiBox-root:last-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bc-MuiOutlinedInput-notchedOutline {
  border: none !important;
}

.bc-MuiOutlinedInput-multiline.bc-MuiOutlinedInput-marginDense {
  height: 100% !important;
  display: block !important;
  margin: 0 0px !important;
  padding: 0 41px 0 0 !important;
}

/* upload close */
.bc-MuiPaper-elevation1 .bc-MuiToolbar-dense {
  padding: 0px 24px 0 24px !important;
}

/* upload button */
.bc-MuiPaper-elevation1 .bc-MuiButtonBase-root:not(.bc-MuiIconButton-edgeStart) {
  margin: 0;
  right: 24px !important;
}

/* */
.bc-MuiFab-root {
  background-color: var(--color-primary) !important;
  border-radius: 24px 24px 0 24px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14) !important;
  bottom: 25px !important;
  color: var(--color-white) !important;
  display: block !important;
  height: 64px !important;
  margin-left: -32px !important;
  margin-bottom: 0 !important;
  position: fixed !important;
  right: 50px !important;
  width: 64px !important;
  z-index: 3 !important;
  text-transform: none !important;
  -webkit-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  -moz-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  -ms-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  -o-transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: border-radius 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), right 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.25s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

@media only screen and (min-height: 768px) {
  .bc-MuiFab-root {
    bottom: 50px !important;
  }
}
.bc-mp15 {
  height: 36px !important;
}

.bc-MuiSpeedDialIcon-icon {
  position: relative;
}

.bc-MuiSpeedDialIcon-icon:after {
  font-family: "kcs" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "m";
}

.bc-mp5 {
  right: 50px !important;
  padding: 0 !important;
  bottom: 135px !important;
  z-index: 6 !important;
}

li.bc-MuiListItem-gutters {
  padding-left: 24px;
  padding-right: 24px;
}

li.bc-MuiListItem-root .bc-MuiListItemText-root {
  margin-bottom: 10px;
}

li.bc-MuiListItem-root .bc-MuiListItemText-root .bc-MuiTypography-root .bc-MuiBox-root > div {
  border-radius: 24px;
  padding: 15px 18px 15px 20px;
}

li.bc-MuiListItem-root .bc-MuiListItemText-root .bc-MuiTypography-root .bc-MuiBox-root > div:before {
  display: none;
}

.bc-MuiTypography-body1 {
  font-size: 16px;
  font-family: "Ubuntu", Verdana, sans-serif;
  font-weight: 500 !important;
}

/* -------------------------------------------------------------
//  Social Media
// -----------------------------------------------------------*/
.sm_wrapper {
  margin-top: 15px;
}

.sm_link {
  display: inline-block;
  margin-right: 15px;
}

.sm_image {
  height: 55px;
}

/* -------------------------------------------------------------
//  Cookiebot
// -----------------------------------------------------------*/
#CybotCookiebotDialog {
  border-radius: 0 !important;
  border: 7px solid var(--color-primary--light) !important;
  top: auto !important;
  bottom: 0 !important;
  transform: translate(-50%, -10px) !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  padding: 10px 28px 10px 28px !important;
  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0 !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-family: "Ubuntu", Verdana, sans-serif !important;
  display: inline-block !important;
  width: auto !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline {
  padding: 8px 26px 8px 26px !important;
}

CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  border: none !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotDialogHide {
  display: none !important;
}

#CybotCookiebotDialogPoweredByText {
  display: none !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
  padding: 1.8em 1em 1em 1em !important;
}

#CybotCookiebotDialog .CybotCookiebotScrollContainer,
#CybotCookiebotDialog #CybotCookiebotDialogBody .CybotCookiebotScrollContainer,
#CybotCookiebotDialogNav,
#CybotCookiebotDialogHeader {
  border: none !important;
}

#CybotCookiebotDialogHeader {
  display: none !important;
}

/* -------------------------------------------------------------
//  Standorte
// -----------------------------------------------------------*/
.alle-standorte:before {
  content: "";
  top: -530px;
  right: auto;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  background: transparent url(/assets/kcs/img/bubble_bg.svg) no-repeat;
  background-position: top center;
  background-size: 1310px;
}
@media only screen and (min-width: 768px) {
  .alle-standorte:before {
    top: -29%;
    background-size: 2000px;
  }
}
@media only screen and (min-width: 1024px) {
  .alle-standorte:before {
    top: -240px;
    right: -26vw;
    background-size: 100%;
  }
}
.alle-standorte .container {
  z-index: 1;
  position: relative;
}
.alle-standorte .stage--normal:after {
  display: none;
}
.alle-standorte .section.bg-color-white {
  padding-top: 0;
}

/* -------------------------------------------------------------
//  Shop
// -----------------------------------------------------------*/
.product_list {
  display: grid;
  align-items: stretch;
  justify-content: start;
  justify-items: start;
  column-gap: 64px;
  row-gap: 64px;
  grid-template-columns: 1fr 1fr 1fr;
}
.product_list .product {
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.14);
  height: auto;
  -webkit-transition: box-shadow var(--transition--fast);
  -moz-transition: box-shadow var(--transition--fast);
  -ms-transition: box-shadow var(--transition--fast);
  -o-transition: box-shadow var(--transition--fast);
  transition: box-shadow var(--transition--fast);
  width: 100%;
  overflow: hidden;
}
.product_list .product__inner {
  padding: 20px;
}
.product_list .product .details {
  color: var(--color-primary) !important;
  display: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 15px;
  padding-top: 19px;
}
.product_list .product .sku {
  display: none;
}
.product_list .product .quantity_container {
  margin-bottom: 30px;
}
.product_list .product .quantity_container .add_to_cart {
  margin-bottom: 0;
}

.mod_iso_productreader .product .product-cnt {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
}
.mod_iso_productreader .product .product-details {
  width: 66%;
  margin-left: 70px;
}
.mod_iso_productreader .product .product-details h3 {
  margin-bottom: 0;
}
.mod_iso_productreader .product .product-details .offer {
  display: none;
}
.mod_iso_productreader .product .product-details .sku {
  margin-bottom: 20px;
  font-size: 16px;
}
.mod_iso_productreader .product .product-details .quantity_container {
  margin-bottom: 30px;
}
.mod_iso_productreader .product .product-details .quantity_container label {
  display: none;
}
.mod_iso_productreader .product .product-details .stock {
  margin-bottom: 30px;
  color: #FF0000;
}
.mod_iso_productreader .product .product-details .stock.in-stock {
  color: #00A000;
}
.mod_iso_productreader .product .product-details .submit_container {
  max-width: 273px;
}

.mod_iso_messages .iso_info {
  color: #ff0000;
}

.mod_iso_cart table {
  width: 100%;
}
.mod_iso_cart table tbody tr.product td.image {
  width: 100px;
}
.mod_iso_cart table tbody tr.product td.price {
  display: none;
}
.mod_iso_cart table tbody tr.product td.name {
  padding: 0 30px;
}
.mod_iso_cart table tbody tr.product td.quantity {
  width: 273px;
}
.mod_iso_cart table tbody tr.product td.actions {
  text-align: right;
  padding: 0 1px;
  width: 80px;
}
.mod_iso_cart table tfoot {
  display: none;
}
.mod_iso_cart .submit_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: nowrap;
  margin-top: 50px;
  padding-top: 50px;
  border-top: 2px solid var(--color-grey);
}
.mod_iso_cart .submit_container .submit {
  max-width: 273px;
}
.mod_iso_cart .image_container {
  width: 100px;
  height: auto;
  margin: 0;
}

.mod_iso_checkout .steps {
  display: none;
}
.mod_iso_checkout .orderconditions {
  margin-bottom: 50px;
}
.mod_iso_checkout .orderconditions .widget-text,
.mod_iso_checkout .orderconditions .widget-textarea {
  margin-bottom: 30px;
}
.mod_iso_checkout .orderconditions .widget-text label,
.mod_iso_checkout .orderconditions .widget-textarea label {
  margin-bottom: 0;
}
.mod_iso_checkout .shipping_method {
  display: none;
}
.mod_iso_checkout .orderproducts table {
  width: 100%;
}
.mod_iso_checkout .orderproducts table tbody tr.product td.image {
  width: 100px;
}
.mod_iso_checkout .orderproducts table tbody tr.product td.image .image_container {
  margin: 0;
}
.mod_iso_checkout .orderproducts table tbody tr.product td.name {
  padding: 0 30px;
}
.mod_iso_checkout .orderproducts table tbody tr.product td.quantity {
  width: 200px;
  text-align: right;
}
.mod_iso_checkout .submit_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: nowrap;
  margin-top: 50px;
  padding-top: 50px;
  border-top: 2px solid var(--color-grey);
}
.mod_iso_checkout .submit_container .submit {
  max-width: 273px;
}
.cart {
  margin-left: 25px;
}
.cart__link {
  width: 30px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  background: transparent url(/assets/kcs/img/cart.svg) no-repeat center;
  height: 30px;
}
.cart__quantity {
  position: absolute;
  top: -13px;
  background: #f1851A;
  border-radius: 50px;
  height: 20px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  min-width: 20px;
  padding: 0 3px;
  right: -11px;
}

.mod_login .widget-text,
.mod_login .widget-password,
.mod_login .widget-checkbox {
  margin-bottom: 30px;
}
.mod_login .widget-text label,
.mod_login .widget-password label {
  margin-bottom: 0;
}
.mod_login .widget-checkbox .checkcontainer .checkmark,
.mod_login .widget-checkbox .checkcontainer input:checked ~ .checkmark,
.mod_login .widget-checkbox .checkcontainer input:hover ~ .checkmark {
  background-color: var(--color-secondary--light);
}

.category {
  display: grid;
  align-items: stretch;
  justify-content: start;
  justify-items: start;
  column-gap: 64px;
  row-gap: 64px;
  grid-template-columns: 1fr 1fr 1fr;
}
.category__item {
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.14);
  height: auto;
  -webkit-transition: box-shadow var(--transition--fast);
  -moz-transition: box-shadow var(--transition--fast);
  -ms-transition: box-shadow var(--transition--fast);
  -o-transition: box-shadow var(--transition--fast);
  transition: box-shadow var(--transition--fast);
  width: 100%;
  overflow: hidden;
}
.category__inner {
  padding: 20px;
}
.category__title {
  margin-bottom: 0;
}

.pagination {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
}
.pagination ul {
  display: flex;
  list-style: none;
  flex-direction: row;
}
.pagination a, .pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin: 0 3px;
  text-decoration: none;
  border-radius: 9px;
  font-size: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.pagination strong.active {
  background-color: var(--color-primary) !important;
  color: white;
}
.pagination a.previous,
.pagination a.next {
  color: #8d8d8d;
  font-size: 20px;
  background: none;
  width: auto;
}
.pagination a.previous:hover,
.pagination a.next:hover {
  color: #fa851e;
  background: none !important;
}

.employee_stories {
  flex-direction: column-reverse;
}
@media only screen and (min-width: 1200px) {
  .employee_stories {
    flex-direction: row;
  }
}
.employee_stories > .col-12.col-md-10.offset-md-1.center-medium.col-xl-6.offset-xl-0:not(.employee_stories__text) {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .employee_stories > .col-12.col-md-10.offset-md-1.center-medium.col-xl-6.offset-xl-0:not(.employee_stories__text) {
    padding: 24px;
  }
}
@media only screen and (min-width: 1024px) {
  .employee_stories > .col-12.col-md-10.offset-md-1.center-medium.col-xl-6.offset-xl-0:not(.employee_stories__text) {
    padding: 32px;
  }
}
.employee_stories__buble-bg {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .employee_stories__buble-bg {
    width: 360px;
    transform: rotate(-15deg);
    left: 50%;
    margin-left: -180px;
  }
}
@media only screen and (min-width: 1200px) {
  .employee_stories__buble-bg {
    width: 299px;
    left: auto;
    margin-left: 0;
  }
}
.employee_stories__phone-bg {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .employee_stories__phone-bg {
    width: 360px;
  }
}
@media only screen and (min-width: 1200px) {
  .employee_stories__phone-bg {
    margin-left: 100px;
    margin-bottom: 13px;
    width: 299px;
    margin-top: 21px;
  }
}
.employee_stories__phone-bg:after {
  display: none;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .employee_stories__phone-bg:after {
    display: block;
    position: absolute;
    background: url("/files/bilder/home/video_smartphone_bg.svg") no-repeat;
    top: -38px;
    left: -22px;
    content: "";
    /* background: red; */
    height: calc(100% + 101px);
    width: calc(100% + 197px);
  }
}
.employee_stories__phone-bg .single-video-player {
  position: relative;
  width: 100%;
  margin-top: 36px;
}
@media only screen and (min-width: 768px) {
  .employee_stories__phone-bg .single-video-player {
    width: 360px;
    height: 640px;
  }
}
@media only screen and (min-width: 1200px) {
  .employee_stories__phone-bg .single-video-player {
    width: 299px;
    height: 532px;
  }
}
.employee_stories__phone-bg .single-video-player video {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 9/16;
}
.play-pause-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border: none;
  background: none;
  cursor: pointer;
  width: 70px;
  height: 64px;
  outline: none !important;
}

/* PLAY-Dreieck (Icon) */
.play-pause-button--play:hover::before {
  border-left: 55px solid rgba(255, 255, 255, 0.7);
}
.play-pause-button--play:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 55px solid rgba(255, 255, 255, 0.4);
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}

/* PAUSE-Symbol (zwei Balken) */
.play-pause-button--pause:before, .play-pause-button--pause:after {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.4);
  top: 50%;
  transform: translateY(-50%);
}
.play-pause-button--pause:before {
  left: 25%;
}
.play-pause-button--pause:after {
  left: 51%;
}
.play-pause-button--pause:hover::before, .play-pause-button--pause:hover:after {
  background-color: rgba(255, 255, 255, 0.7);
}

.cat-headline--desktop {
  display: none;
}
.cat-headline--mobile {
  position: absolute;
  bottom: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 13px;
}
.cat-headline__img {
  max-width: 440px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .cat-headline--desktop {
    display: block;
  }
  .cat-headline--mobile {
    display: none;
  }
  .cat-headline__img {
    margin-bottom: 34px;
    margin-left: -9px;
    height: 222px;
    max-width: none;
    width: auto;
  }
  .cat-headline__img--soziales_padagogik {
    height: 157px;
  }
}
@media only screen and (min-width: 1200px) {
  .cat-headline__img--soziales_padagogik {
    height: 197px;
  }
}

.headlinewrapper {
  position: absolute;
  height: auto;
  z-index: 1;
  bottom: 120px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .headlinewrapper {
    position: relative;
    bottom: auto;
    text-align: left;
    margin-bottom: 40px;
    margin-top: 84px;
  }
}
.headlinewrapper__headline {
  height: 104px;
  /* text-align: left; */
  margin-bottom: 14px;
  margin-left: -80px;
}
@media only screen and (min-width: 768px) {
  .headlinewrapper__headline {
    margin-left: -13px;
    height: 188px;
    margin-bottom: 48px;
  }
}
@media only screen and (min-width: 1200px) {
  .headlinewrapper__headline {
    height: 259px;
    margin-bottom: 60px;
  }
}
.headlinewrapper__subline {
  margin-bottom: 0;
  font-size: 29px;
  color: var(--color-white);
  width: 100%;
  text-shadow: 0 0 40px #000000, 0 0 30px #000000, 0 0 20px #000000;
}
@media only screen and (min-width: 768px) {
  .headlinewrapper__subline {
    font-size: 48px;
    text-shadow: none;
  }
}
.headlinewrapper__subline .break {
  display: block;
}
@media only screen and (min-width: 1200px) {
  .headlinewrapper__subline .break {
    display: inline;
  }
}

@media only screen and (min-width: 768px) {
  .home-header-buttons {
    margin-bottom: 150px;
  }
}

@media only screen and (min-width: 768px) {
  .home-animation-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 88%;
    height: 88%;
    padding: 0;
    max-width: 600px;
  }
}
@media only screen and (min-width: 1200px) {
  .home-animation-wrapper {
    width: 100%;
    height: 100%;
    max-width: 700px;
  }
}
.home-animation-wrapper .sliderstagewrapper {
  margin-top: 0 !important;
}

.home-animation-slider .stagesliderimage picture {
  width: 100% !important;
}
.home-animation-slider .stagesliderimage picture img {
  width: 100% !important;
}
@media only screen and (min-width: 768px) {
  .home-animation-slider .stagesliderimage {
    zoom: 1;
  }
}