/********************************************************************************/
/*                                import all styles                             */
/********************************************************************************/

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Jura');
@import url('https://fonts.googleapis.com/css?family=Radley');
/* W3.CSS framework */
@import url('https://www.w3schools.com/w3css/5/w3.css');

/********************************************************************************/
/*                                     colors                                   */
/********************************************************************************/

/* background colors */
.wk-background {
  background-color: #F5F5F5;
}

/* white */
.wk-white, .wk-hover-white:hover {
    background-color: #FFFFFF !important;
}

.wk-border-white, .wk-hover-border-white:hover {
    border-color: #FFFFFF !important;
}

.wk-text-white, .wk-hover-text-white:hover {
    color: #FFFFFF !important;
}

.wk-red, .wk-hover-red:hover,
.wk-black, .wk-hover-black:hover,
.wk-petrol, .wk-hover-petrol:hover {
    color: #FFFFFF !important;
}

/* red */
.wk-red, .wk-hover-red:hover {
    background-color: #C9242F !important;
}

.wk-border-red, .wk-hover-border-red:hover {
    border-color: #C9242F !important;
}

h1, h2, h3, h4,
.wk-text-red, .wk-hover-text-red:hover {
    color: #C9242F !important;
}

/* black */
.wk-black, .wk-hover-black:hover {
    background-color: #000000 !important;
}

.wk-border-black {
    border-color: #000000 !important;
}

.wk-text-black, .wk-hover-text-black:hover {
    color: #000000 !important;
}

.wk-white, .wk-hover-white:hover,
.wk-pink, .wk-hover-pink:hover,
.wk-dark-pink, .wk-hover-dark-pink:hover,
.wk-mist, .wk-hover-mist:hover {
    color: #000000;
}

/* petrol */
.wk-petrol, .wk-hover-petrol:hover {
    background-color: #3D6A67 !important;
}

.wk-border-petrol, .wk-hover-border-petrol:hover {
    border-color: #3D6A67 !important;
}

.wk-text-petrol, .wk-hover-text-petrol:hover {
    color: #3D6A67 !important;
}

/* pink */
.wk-pink, .wk-hover-pink:hover {
    background-color: #FBE1E6 !important;
}

.wk-border-pink {
    border-color: #FBE1E6 !important;
}

.wk-text-pink, .wk-hover-text-pink:hover {
    color: #FBE1E6 !important;
}

/* dark-pink */
.wk-dark-pink, .wk-hover-dark-pink:hover {
    background-color: #E4BFB5 !important;
}

.wk-border-dark-pink {
    border-color: #E4BFB5 !important;
}

.wk-text-dark-pink, .wk-hover-text-dark-pink:hover {
    color: #E4BFB5 !important;
}

/* mist */
.wk-mist, .wk-hover-mist:hover {
    background-color: #EEF1EF !important;
}

.wk-border-mist, .wk-hover-border-mist:hover {
    border-color: #EEF1EF !important;
}

.wk-text-mist, .wk-hover-text-mist:hover {
    color: #EEF1EF !important;
}

/********************************************************************************/
/*                                     fonts                                    */
/********************************************************************************/

/* normal text */
.wk-normal-font,
a, p {
  font-family: 'Jura', sans-serif !important;       /* Assuming you're using Jura Regular */
  font-weight: 400;                      /* Regular weight */
  font-size: 16px;                       /* Font size */
  line-height: 1.5;                      /* "Regular" in Figma often means 150% */
  letter-spacing: 0;                     /* 0% letter spacing */
}

.wk-button-font {
  text-decoration: none;
  text-transform: uppercase !important;
  font-family: 'Jura', sans-serif !important;
  font-weight: 600; /* SemiBold */
  font-size: 14px;
  line-height: 100%; /* or 14px */
  letter-spacing: 2.8px; /* 20% of 14px */
}

.wk-top-menu-font {
  font-family: 'Jura', sans-serif;     /* Jura font */
  font-weight: 500;                    /* Medium weight */
  font-size: 15px;                     /* Font size */
  line-height: 1.5;                    /* 150% of font size */
  letter-spacing: 0.15em;              /* 10% of font size = 15px × 0.10 */
}

h1 {
  font-family: 'Radley', serif;
  font-weight: 400; /* Regular */
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.03em; /* -3% von der Schriftgröße */
}

h2 {
  text-transform: uppercase !important;
  font-family: 'Jura', sans-serif;
  font-weight: 700;              /* Bold */
  font-size: 16px;
  line-height: 16px;             /* 100% von 16px */
  letter-spacing: 3.2px;         /* 20% von 16px = 0.2 × 16 = 3.2px */
}

h3 {
    font-family: 'Radley', serif;
    font-weight: 400; /* Regular */
    font-size: 30px;
    line-height: 30px;
    letter-spacing: -0.9px; /* -3% of 30px */
}

h4 {
  text-transform: uppercase !important;
  font-family: 'Jura', sans-serif;
  font-weight: 600; /* Semibold */
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.2em; /* 20% von Schriftgröße */
  margin: 0;
}

.wk-text-decoration-none {
    text-decoration: none;
}

/********************************************************************************/
/*                                     sizes                                    */
/********************************************************************************/

.wk-content {
  /* min-width:344px; */
  max-width:1440px;
}

.wk-button {
  padding: 14px 24px;
}

h2 {
    padding-top: 10px;
}

.wk-button-vertical-spacer {
  height: 10px !important;
}

.wk-padding-left {
    padding-left: 16px !important;
    padding-right: 0 !important;
}

.wk-padding-right {
    padding-left: 0 !important;
    padding-right: 16px !important;
}

.wk-no-padding,
.wk-no-padding-horizontal {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.wk-padding-horizontal,
.wk-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.wk-no-padding,
.wk-no-padding-vertical,
.wk-no-space-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wk-no-space-top,
.wk-no-space-vertical,
.wk-no-margin-vertical {
    margin-top: 0 !important;
}

.wk-no-space-bottom,
.wk-no-space-vertical,
.wk-no-margin-vertical {
    margin-bottom: 0 !important;
}

.wk-padding-bottom-large {
    padding-bottom: 16px;
}

.wk-margin-right {
    margin-right: 16px;
}

.wk-margin-top {
    margin-top: 16px;
}

.wk-margin-bottom {
    margin-bottom: 16px;
}

.wk-padding-vertical,
.wk-padding {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.wk-wave-space {
    height: calc((100vw/1440) * 59);
}

.wk-top-space,
.wk-bottom-space {
    height: 54px;
}

.wk-header-space {
    height: 23px !important;
}

.wk-header-space.wk-button-vertical-spacer {
    height: 37px !important;
}

.wk-wunderkind-table {
    max-width: 600px !important;
    margin: 0 auto !important;
}

.wk-wunderkind-height-compensation {
    height: 10px !important;
}

.wk-icon-16 {
    width: 16px;
    height: 16px;
}

.wk-icon-19 {
    width: 19px;
    height: 19px;
}

/********************************************************************************/
/*                                   top menu                                   */
/********************************************************************************/

.wk-top-menu-lang-drop-down-button {
  width: 68px;
}

.wk-top-menu-drop-down-item-spacer {
  width: 69px;
}

.wk-top-menu-lang-drop-down {
  position: relative !important;
}

.wk-top-menu-lang-drop-down:hover .wk-top-menu-dropdown-content{
  display: inline-block;
}

.wk-top-menu-lang-drop-down-button {
  display: flex;
  align-items: center;
}

.wk-top-menu-drop-down-content {
  right: -1px;
  min-width: unset !important;
}

.wk-top-menu-drop-down-country-selector {
  display: flex !important;
  align-items: center !important;
  padding: 0!important;
}

.wk-top-menu-burger-separator {
    height: 2px;
    margin-bottom: 30px;
    width: 80%;
}

.wk-top-menu-burger-content {
      height: calc(100vh - 101px - 200px);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
}

.wk-top-menu-burger-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wk-top-menu-burger-social-media {
    margin-bottom: 20px;
}

.wk-top-menu-burger-social-media a {
    width: 50px;
}

/* menu items toggle with burger menu at 1036px */
@media (max-width: 1036px) {
  .wk-hide-menu-item {
    display: none !important;
  }
}

@media (min-width: 1037px) {
  .wk-top-menu-hide-burger { 
    display: none !important;
  }
}

/* large and mobile screens toggle at 670px */
@media (max-width: 670px) {
  .wk-large-screen {
    display: none !important;
  }
  .wk-top-menu-responsive-size {
    height: 50px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .wk-top-menu-burger-content {
      height: calc(100vh - 50px - 158px);
  }
}

@media (min-width: 671px) {
  .wk-small-screen {
    display: none !important;
  }
  .wk-top-menu-responsive-size {
    height: 101px;
    padding-left: 41px !important;
    padding-right: 41px !important;
  }

  .wk-top-menu-burger-content {
      height: calc(100vh - 101px - 158px);
  }
}

/********************************************************************************/
/*                                    footer                                    */
/********************************************************************************/

.wk-footer-horizontal-padding {
    padding-left: 103px !important;
    padding-right: 103px !important;
}

.wk-footer-br{
    display: none;
}

/* wide footer toggles with small footer at 845px */
@media (max-width: 845px) {
    .wk-hide-wide-footer {
        display: none !important;
    }
    .wk-footer-padding-vertical-responsive {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}

@media (min-width: 846px) {
    .wk-hide-small-footer {
        display: none !important;
    }
    .wk-footer-padding-vertical-responsive {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}

@media (max-width: 780px) {
    .wk-footer-or {
        display: none !important;
    }
    .wk-footer-br {
        display: block !important;
    }
}

@media (max-width: 528px) {
    .wk-footer-horizontal-padding {
        padding-left: 16px !important;
        padding-right: 116px !important;
    }
}

/********************************************************************************/
/*                               standard elements                              */
/********************************************************************************/

.wk-body {
    height:100vh;
    margin:0;
    display:flex;
    flex-direction:column;
}

/********************************************************************************/
/*                                 element styles                               */
/********************************************************************************/

.wk-content {
    margin:0 auto;
    padding:0;
}

.wk-splash-screen-image {
  width: 100%;
  height: auto;
  position: relative;
}

.wk-splash-sceen-button {
  position:absolute;
  top: 73%;
}

.wk-service-box {
    flex: 1 1 363px;
    max-width: 380px;
    padding: 16px;
}

.wk-service-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 117px;
}

.wk-service-p {
    text-indent: -40px;
    padding-left: 40px;
}

.wk-service-arrow-forward {
    padding-right: 11px;
}
.wk-team-name {
    display: none;
}

.wk-team-name.active {
    display: block;
}

.wk-team-seperator {
    padding-top: 48px; 
    padding-bottom: 48px;
}

.wk-team-seperator img {
    max-width:100%;
    height:auto;
    display:block; 
    margin: 0 auto;
}

.wk-team-slide-background {
    background-image: url('/img/TeamBackground.svg');
    background-repeat: no-repeat;
    background-position: left -29px top -89px;
    background-size: auto;
}

.wk-team-slide {
    display: none;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}

.wk-team-slide.wk-team-slide-active {
    display: flex;
}

.wk-team-slide-inner {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.wk-team-nav-column-padding-left {
    padding-left: 40px !important;
}

.wk-team-nav-column-padding-right {
    padding-right: 40px !important;
}

.wk-team-nav-column.desktop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-team-nav-column.mobile {
    display: none;
}

.wk-team-slider-backward {
    background: url('/img/SliderBackwardPetrol.svg') no-repeat center center;
}

.wk-team-slider-forward {
    background: url('/img/SliderForwardPetrol.svg') no-repeat center center;
}

.wk-team-slider-backward:hover {
    background-image: url('/img/SliderBackwardRed.svg');
}

.wk-team-slider-forward:hover {
    background-image: url('/img/SliderForwardRed.svg');
}

.wk-team-slider-backward:hover,
.wk-team-slider-forward:hover {
    background-color: transparent !important;
}

.wk-team-slider-backward,
.wk-team-slider-forward {
    width: 29px !important;
    height: 29px !important;
    padding: 0;
    border: none;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

.wk-team-image-wrapper {
    flex: 0 0 496px;
    max-width: 496px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.wk-team-image-wrapper img {
    width: 100%;
    height: auto;
}

.wk-team-text-wrapper {
    flex: 1;
    padding-left: 56px;
    padding-right: 0px;
    box-sizing: border-box;
}

.wk-team-text-wrapper p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/********************************************************************************/
/*                                miscellanious                                 */
/********************************************************************************/

/* waves */
.wk-top-wave-petrol-center {
  background: url('/img/TopWavePetrol.svg') no-repeat center / auto;
}

.wk-top-wave-petrol-page-width {
  /* background: url('/img/TopWavePetrol.svg') repeat center / auto; */
  background: url('/img/TopWavePetrol.svg') repeat center / cover;
}

.wk-bottom-wave-petrol-center {
  background: url('/img/BottomWavePetrol.svg') no-repeat center / auto;
}

.wk-bottom-wave-petrol-page-width {
  /* background: url('/img/BottomWavePetrol.svg') repeat center / auto; */
  background: url('/img/BottomWavePetrol.svg') repeat center / cover;
}

.wk-bottom-wave-pink-center {
  background: url('/img/BottomWavePink.svg') no-repeat center / auto;
}

.wk-bottom-wave-pink-page-width {
  /* background: url('/img/BottomWavePink.svg') repeat center / auto; */
  background: url('/img/BottomWavePink.svg') repeat center / cover;
}

.wk-top-wave-pink-center {
  background: url('/img/TopWavePink.svg') no-repeat center / auto;
}

.wk-top-wave-pink-page-width {
  /* background: url('/img/TopWavePink.svg') repeat center / auto; */
  background: url('/img/TopWavePink.svg') repeat center / cover;
}

.wk-bottom-wave-mist-center {
  background: url('/img/BottomWaveMist.svg') no-repeat center / auto;
}

.wk-bottom-wave-mist-page-width {
  /* background: url('/img/BottomWaveMist.svg') repeat center / auto; */
  background: url('/img/BottomWaveMist.svg') repeat center / cover;
}

.wk-top-wave-mist-center {
  background: url('/img/TopWaveMist.svg') no-repeat center / auto;
}

.wk-top-wave-mist-page-width {
  /* background: url('/img/TopWaveMist.svg') repeat center / auto; */
  background: url('/img/TopWaveMist.svg') repeat center / cover;
}

/* other */
.wk-nowrap {
  white-space: nowrap;
}

/********************************************************************************/
/*                                 media queries                                */
/********************************************************************************/

/* wunderkind section has two colums which are responsive at 956px */
@media (max-width: 956px) {
    .wk-wunderkind-two-column-responsive {
    width: 99.99999%;
    }
    .wk-wunderkind-responsive-horizpntal-padding {
        padding-left: 16px;
        padding-right: 16px;
    }
    .wk-wunderkind-hide-small {
        display: none !important;
    }
}

@media (min-width: 957px) {
    .wk-wunderkind-two-column-responsive {
        width: 49.99999%;
    }
    .wk-wunderkind-hide-large {
        display: none !important;
    }
}


@media (max-width: 422px) {
    .wk-wunderkind-e-mail-button {
        letter-spacing: normal;
    }
}

/* team breaks at 1175px */
@media (max-width: 1175px) {  /* not smaller than 945px */
    .wk-team-name {
        display: block;
    }

    .wk-team-name.active {
        display: none;
    }

    .wk-team-seperator {
        padding-top: 40px; 
        padding-bottom: 40px;
    }

    .wk-team-slide-background {
        background-image: none;
    }

    .wk-team-slide {
        flex-direction: column;
    }

    .wk-team-slide-inner {
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    .wk-team-nav-column.desktop {
        display: none;
    }

    .wk-team-nav-column.mobile {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wk-team-nav-column-padding-left {
        padding-left: 16px !important;
    }

    .wk-team-nav-column-padding-right {
        padding-right: 16px !important;
    }

    .wk-team-image-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .wk-team-image-wrapper {
        flex: 1;
        width: 496px;
        max-width: 496px;
    }

    .wk-team-text-wrapper {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/********************************************************************************/
/*                                    new stuff                                 */
/********************************************************************************/