/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

:root {
  --black: #000000;
  --white: #ffffff;
  --grey: #B5B3AE;
  --green: #969F9A;
  --blue: #545D66;
  --orange: #B97145;
  --brown: #8D855D;
  --gold: #C7AD5A;
  --background: #F5F5F5;
  color-scheme: only light;
}

@font-face {
    font-family: 'NNNouvelleGrotesk-BlackDiagonal';
    src: url('fonts/NNNouvelleGrotesk-BlackDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-BlackDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-BlackDiagonal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-Bold';
    src: url('fonts/NNNouvelleGrotesk-Bold.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-Bold.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-BoldDiagonal';
    src: url('fonts/NNNouvelleGrotesk-BoldDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-BoldDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-BoldDiagonal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-Fat';
    src: url('fonts/NNNouvelleGrotesk-Fat.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-Fat.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-Fat.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-FatDiagonal';
    src: url('fonts/NNNouvelleGrotesk-FatDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-FatDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-FatDiagonal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-Light';
    src: url('fonts/NNNouvelleGrotesk-Light.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-Light.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-LightDiagonal';
    src: url('fonts/NNNouvelleGrotesk-LightDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-LightDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-LightDiagonal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-Medium';
    src: url('fonts/NNNouvelleGrotesk-Medium.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-Medium.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-MediumDiagonal';
    src: url('fonts/NNNouvelleGrotesk-MediumDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-MediumDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-MediumDiagonal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-Normal';
    src: url('fonts/NNNouvelleGrotesk-Normal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-Normal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-Normal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-NormalDiagonal';
    src: url('fonts/NNNouvelleGrotesk-NormalDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-NormalDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-NormalDiagonal.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-Thin';
    src: url('fonts/NNNouvelleGrotesk-Thin.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-Thin.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'NNNouvelleGrotesk-ThinDiagonal';
    src: url('fonts/NNNouvelleGrotesk-ThinDiagonal.otf') format('opentype'),
         url('fonts/NNNouvelleGrotesk-ThinDiagonal.woff') format('woff'),
         url('fonts/NNNouvelleGrotesk-ThinDiagonal.woff2') format('woff2');
}

/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/

html {
    scroll-behavior: smooth;
}

body {
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--text-color);
  font-size: 18px;
  line-height: 24px;
}

@media print {
    body {
        width: 1200px;
        height: 1024px;
        margin: 0 auto;
    }
    .dmx-animate-inview {
      opacity: 1!important;
    }
    .hero {
      height: 100%!important;
    }
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

.img-fill {
  width: 100%!important;
  height: auto!important;
}

.abstandcontainer {
  padding-left: 64px;
  padding-right: 64px;
}

.abstandpadding-hero {
    padding-top: 64px;
    padding-bottom: 64px;
}

.abstandpadding {
    padding-top: 120px;
    padding-bottom: 120px;
}

.abstandpadding-large {
    padding-top: 300px;
    padding-bottom: 300px;
}

.abstand-80-64 {
  margin-bottom: 80px;
}

@media (max-width: 1199px) {
.abstandpadding-large {
    padding-top: 200px;
    padding-bottom: 200px;
}
}

@media (max-width: 991px) {
.abstandcontainer {
  padding-left: 24px;
  padding-right: 24px;
}
.abstandpadding-hero {
    padding-top: 160px;
    padding-bottom: 64px;
}
.abstandlg {
    margin-bottom: 40px;
}
.abstandpadding-large {
    padding-top: 120px;
    padding-bottom: 120px;
}
.abstand-80-64 {
  margin-bottom: 64px;
}
.abstand-80-64-lg {
  margin-bottom: 64px;
}
}

@media (max-width: 767px) {
.abstandmd {
    margin-bottom: 40px;
}
}

@media (min-width: 1600px) {
    .d-xxl-block {
        display: block !important;
    }
}

.slidescroller {
  padding-top: 100px;
  margin-top: -100px;
}

/*--------------------------------------------------------------
# Backgrounds
--------------------------------------------------------------*/

.hero {
    width: 100%;
    height: 100vh;
}

@media (max-width: 991px) {
.hero {
    height: 100vh;
    margin-bottom: 40px;
}
}

@media (max-width: 767px) and (max-height: 700px) {
  .hero {
    height: 700px;
  }
}

@media (min-width: 768px) and (max-width: 992px) and (max-height: 700px) {
  .hero {
    height: 700px;
  }
}


@media (min-width: 992px) and (max-height: 620px) {
  .hero {
    height: 620px;
  }
}

.bg-grey {
  background-color: var(--grey);
}

.bg-black {
  background-color: var(--black);
}

/*--------------------------------------------------------------
# Typografie
--------------------------------------------------------------*/

a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a:not(.btn):not(.buttonslg):not(.link-white):not(.sidebar-link):not(.referenzen-controls):not(.link-white-cursor):not(.filter_referenzen) {
  color: var(--black);
}

a:focus, a:hover {
  color: var(--black);
  text-decoration: none;
}

a.link-white,
a.link-white-cursor {
  color: var(--white);
}

@media (min-width: 992px) {
    .cursor {
      position: fixed;
      top: -16px;
      left: -16px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      pointer-events: none;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 2000;
      opacity: 0; /* Initially hidden */
      -webkit-transition: opacity 0.15s ease-out, border-color 0.15s ease-out, -webkit-transform 0.15s ease-out;
      transition: opacity 0.15s ease-out, border-color 0.15s ease-out, -webkit-transform 0.15s ease-out;
      transition: opacity 0.15s ease-out, transform 0.15s ease-out, border-color 0.15s ease-out;
      transition: opacity 0.15s ease-out, transform 0.15s ease-out, border-color 0.15s ease-out, -webkit-transform 0.15s ease-out;
    }
}

a:focus.link-white, a:hover.link-white {
  opacity: 0.5;
  color: var(--white);
}

h1 {
  font-size: 104px;
  font-family: NNNouvelleGrotesk-Medium, sans-serif;
  line-height: 100px;
}

h1.h3 {
  font-size: 32px;
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
}

h2 {
  font-size: 24px;
  font-family: NNNouvelleGrotesk-Medium, sans-serif;
}

h2.light {
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
}

h3 {
  font-size: 32px;
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
}

h3.h3stellen {
  font-size: 24px;
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
}

span.auflistung-xl {
  font-size: 40px;
  margin-left: 24px;
  margin-right: 32px;
  line-height: 60px;
}

p.auflistung-xl {
  font-size: 40px;
  margin-left: 24px;
  margin-right: 32px;
  line-height: 60px;
}

@media (min-width: 1600px) {
p.auflistung-xl {
  font-size: 60px;
  margin-left: 24px;
  margin-right: 32px;
  line-height: 80px;
}
}

p.small {
  font-size: 16px;
  line-height: 20px;
}

strong, .strong {
  font-family: NNNouvelleGrotesk-Medium, sans-serif!important;
  font-weight: normal;
}

@media (max-width: 1599px) {
h1 {
  font-size: 80px;
}
}

@media (max-width: 1399px) {
h1 {
  font-size: 60px;
  line-height: 60px;
}
h3 {
  font-size: 28px;
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
}
h1.h3 {
  font-size: 28px;
  font-family: NNNouvelleGrotesk-Normal, sans-serif;
}
}

@media (max-width: 991px) {
h1 {
  font-size: 48px;
  line-height: 48px;
}
h1.h3 {
  font-size: 24px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 24px;
}
body {
    font-size: 16px;
    line-height: 20px;
}
span.auflistung-xl {
  font-size: 32px;
  line-height: 50px;
  margin-left: 0;
  margin-right: 24px;
}
p.auflistung-xl {
  font-size: 32px;
  line-height: 50px;
  margin-left: 0;
  margin-right: 24px;
}
}


@media (max-width: 767px) {
  h1 {
  font-size: 42px;
  line-height: 42px;
}
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.btn {
    padding: 0.5rem 1.25rem;
    border-radius: 1.5rem;
    outline: none!important;
    -webkit-box-shadow: none!important;
            box-shadow: none!important;
}

.btn-main {
  color: var(--black);
  background-color: var(--white);
  border-color: var(--black);
}

.btn-main:hover {
  color: var(--white);
  background-color: var(--black);
  border-color: var(--black);
}

.btn-main-black {
  color: var(--white)!important;
  background-color: var(--black)!important;
  border-color: var(--black)!important;
}

.btn-main-second {
  color: var(--grey);
  background-color: var(--white);
  border-color: var(--grey);
}

.btn-main-second:hover {
  color: var(--white);
  background-color: var(--grey);
  border-color: var(--grey);
}

.btn-main-white-outline {
  color: var(--white);
  border-color: var(--white);
}

.btn-main-white-outline:hover {
  color: var(--black);
  background-color: var(--white);
  border-color: var(--white);
}

.btn-main-white {
  color: var(--black);
  background-color: var(--white);
  border-color: var(--white);
}

.btn-main-arrow::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:black" d="M300,136.1v26.1c-39.8,1.6-83.3,45-92.5,92.9h-32.6c8.4-39.8,33.8-74.4,67.6-93.3H0v-23.7h242.5 c-33.8-17.3-59.1-49.1-67.6-93.3h33C217.2,92.7,260.2,134.1,300,136.1z"%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 18px;
    margin-top: -3px;
    vertical-align: middle;
}

.btn-main-arrow:hover::after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:white" d="M300,136.1v26.1c-39.8,1.6-83.3,45-92.5,92.9h-32.6c8.4-39.8,33.8-74.4,67.6-93.3H0v-23.7h242.5 c-33.8-17.3-59.1-49.1-67.6-93.3h33C217.2,92.7,260.2,134.1,300,136.1z"%3E%3C/path%3E%3C/svg%3E');
}

.btn-main-white-outline.btn-main-arrow::after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:white" d="M300,136.1v26.1c-39.8,1.6-83.3,45-92.5,92.9h-32.6c8.4-39.8,33.8-74.4,67.6-93.3H0v-23.7h242.5 c-33.8-17.3-59.1-49.1-67.6-93.3h33C217.2,92.7,260.2,134.1,300,136.1z"%3E%3C/path%3E%3C/svg%3E');
}

.btn-main-white-outline.btn-main-arrow:hover::after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:black" d="M300,136.1v26.1c-39.8,1.6-83.3,45-92.5,92.9h-32.6c8.4-39.8,33.8-74.4,67.6-93.3H0v-23.7h242.5 c-33.8-17.3-59.1-49.1-67.6-93.3h33C217.2,92.7,260.2,134.1,300,136.1z"%3E%3C/path%3E%3C/svg%3E');
}

.btn-main-arrow-down::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:black" d="M255.2,174.9v33c-47.9,8.8-91.3,52.3-93.3,92.1h-26.1c-1.6-39.8-43-82.8-90.9-92.1v-33 c43.8,8.4,76,33.8,93.3,67.6V0h23.3v243.3C180.4,208.7,214.9,183.4,255.2,174.9z"%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 18px;
    margin-top: -3px;
    vertical-align: middle;
}

.btn-main-arrow-down:hover::after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:white" d="M255.2,174.9v33c-47.9,8.8-91.3,52.3-93.3,92.1h-26.1c-1.6-39.8-43-82.8-90.9-92.1v-33 c43.8,8.4,76,33.8,93.3,67.6V0h23.3v243.3C180.4,208.7,214.9,183.4,255.2,174.9z"%3E%3C/path%3E%3C/svg%3E');
}


.arrow-down-left::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:black" d="M255.2,174.9v33c-47.9,8.8-91.3,52.3-93.3,92.1h-26.1c-1.6-39.8-43-82.8-90.9-92.1v-33 c43.8,8.4,76,33.8,93.3,67.6V0h23.3v243.3C180.4,208.7,214.9,183.4,255.2,174.9z"%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 18px;
    margin-top: -3px;
    vertical-align: middle;
}

.arrow-down-left:hover::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath style="fill:black" d="M255.2,174.9v33c-47.9,8.8-91.3,52.3-93.3,92.1h-26.1c-1.6-39.8-43-82.8-90.9-92.1v-33 c43.8,8.4,76,33.8,93.3,67.6V0h23.3v243.3C180.4,208.7,214.9,183.4,255.2,174.9z"%3E%3C/path%3E%3C/svg%3E');
}

.arrow-right-up-left::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"%3E%3Cpath style="fill:black" d="M246.3,34.1l18.5,18.5c-27,29.3-27,90.7,0.3,131.1l-23,23c-22.2-34.1-28.7-76.5-18.2-113.7L52.3,264.5l-16.8-16.8L207,76.2 C170.9,87.9,130.5,83.3,93.3,58l23.3-23.3C157,62,216.7,60.9,246.3,34.1z" /%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 18px;
    margin-top: -3px;
    vertical-align: middle;
}

.arrow-right-up-left:hover::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"%3E%3Cpath style="fill:black" d="M246.3,34.1l18.5,18.5c-27,29.3-27,90.7,0.3,131.1l-23,23c-22.2-34.1-28.7-76.5-18.2-113.7L52.3,264.5l-16.8-16.8L207,76.2 C170.9,87.9,130.5,83.3,93.3,58l23.3-23.3C157,62,216.7,60.9,246.3,34.1z" /%3E%3C/svg%3E');
}

.text-grey {
  color: #A3A29F!important;
}


/* FAQ Styling ohne Cards */
.custom-faq .faq-item {
    border-top: 1px solid #dee2e6;
}

.custom-faq .faq-item:last-child {
    border-bottom: 1px solid #dee2e6;
}

.faq-btn {
    color: #000000;
    text-decoration: none !important;
    padding: 0.75rem 0;
    position: relative;
}

.faq-question {
    font-size: 1.1rem;
    padding-right: 30px;
}

.faq-icon {
    width: 20px;
    height: 20px;
    position: relative;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.faq-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000000;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.faq-icon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: #000000;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}

.faq-btn:not(.collapsed) .faq-icon::after {
    -webkit-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.card {
  border: none;
  border-radius: 0;
}

.card-img-top {
  border-radius: 0;
}

.card-footer {
  background-color: inherit;
  border: none;
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-radius: 0!important;
}

.arrow-right {
   height: 16px;
   width: 16px;
   margin-right: 10px;
   margin-top: -4px;
}

.arrow-right-lg {
   height: 32px;
   width: 32px;
}

.video-container {
  width: 100%;
  max-width: 800px;
  position: relative;
}

video {
  width: 100%;
  height: auto;
}

hr.hr-leistungen {
  border-color: var(--grey);
  margin-top: 10px;
  margin-bottom: 10px;
}

hr.hr-kernangebot {
  border-color: var(--grey);
  margin-top: 10px;
  margin-bottom: 10px;
}

hr.hr-referenz {
  border-color: var(--white);
  opacity: 0.5;
  margin-top: 10px;
  margin-bottom: 10px;
}

a:hover.link-leistungen span {
  color: var(--grey);
}

a:hover.link-leistungen .arrow-right-lg path {
  fill: var(--grey)!important;
}

/* Define the fadeIn animation */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Initially hide the elements */
.dmx-animate-inview {
  opacity: 0;
  -webkit-transition: opacity 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out; /* duration of 800ms */
}

/* Apply the fadeIn animation when the element is in view */
.dmx-animate-inview.in-view {
  opacity: 1;
}

    .content-image-1 {
        position: relative;
        top: 40px;
        left: 0;
        width: 75%;
        z-index: 1;
    }

    .content-image-2 {
        position: absolute;
        left: 80px;
        width: 75%;
        z-index: 2;
    }

    .image-container-content {
        position: relative;
    }

.form-control {
    color: #000000 !important;
    background: none !important;
    border-bottom: 1px solid #000000 !important;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    padding: 0;
    font-size: inherit;
    outline: none!important;
    font-family: NNNouvelleGrotesk-Normal, sans-serif!important;
}

.form-control::-webkit-input-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control:-moz-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control::-moz-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control:-ms-input-placeholder {  
  color: #000000;
  opacity: 0.75;
}

.form-control::input-placeholder {  
  color: #000000;
  opacity: 0.75;
}

.form-control::-webkit-input-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control::-moz-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control:-ms-input-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control::-ms-input-placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control::placeholder {
  color: #000000;
  opacity: 0.75;
}

.form-control-white {
    color: #ffffff !important;
    background: none !important;
    border-bottom: 1px solid #ffffff !important;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    padding: 0;
    font-size: inherit;
    outline: none!important;
    font-family: NNNouvelleGrotesk-Normal, sans-serif!important;
}

.form-control-white::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white:-moz-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white::-moz-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white:-ms-input-placeholder {  
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white::input-placeholder {  
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white::-moz-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white:-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white::-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.75;
}

.form-control-white::placeholder {
  color: #ffffff;
  opacity: 0.75;
}

ul.auflistung {
  -webkit-padding-start: 15px;
  padding-inline-start: 15px;
}

ul.auflistung li {
  list-style-type: '–  ';
}

.custom-control-label {
    cursor: pointer !important;
    padding-left: 30px;
}

.custom-control-label::after {
    display: none!important;
}

.custom-control-label::before {
    background-color: var(--white);
    border: 1px solid var(--black);
    border-radius: 10px;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    cursor: pointer;
    padding-left: 10px;
    left: 0;
}
.custom-control-input:checked~.custom-control-label::before {
    border-color: black;
    background-color: black;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #dc3545!important;
}

.invalid-feedback {
    display: none!important;
}

.custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label {
  color: black!important;
}

.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    border-color: black!important;
    background-color: black!important;
}

.custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
    border-color: black!important;
}

.filter_referenzen {
    border: 1px solid var(--black);
    box-shadow: none !important;
    cursor: pointer;
    font-size: 18px;
    font-family: NNNouvelleGrotesk-Normal, sans-serif;
    padding: 0.5rem 1.25rem;
    border-radius: 1.5rem;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}

.filter_referenzen.small {
    font-size: 12px;
    padding: 0.4rem 1.05rem;
}

@media (max-width: 991px) {
    .filter_referenzen {
        font-size: 16px;
    }
}

.filter_referenzen:hover {
    color: var(--white) !important;
    background-color: var(--black);
    border-color: var(--black);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.filter_referenzen.active {
    color: var(--white) !important;
    background-color: var(--black);
    border-color: var(--black);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.dropdown-item.active {
    background-color: var(--black);
}

/*--------------------------------------------------------------
# Referenzen und offene Stellen
--------------------------------------------------------------*/

    .card-referenzen {
        aspect-ratio: 4 / 5;
        height: auto;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .card-referenzen::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: inherit;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        -webkit-transition: -webkit-transform 0.3s ease-in-out;
        transition: -webkit-transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        -webkit-transform-origin: center center;
                transform-origin: center center;
    }

    .card-referenzen:hover::before {
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
    }

    .card-referenzen.hovered::before {
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
    }

    .card-referenzen:not(.card-leistungen) .card-body,
    .card-stellen .card-body {
        padding: 40px;
        height: 100%;
        position: relative;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.15);
    }

    .card-leistungen .card-body {
        padding: 40px;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    .card-stellen .card-body {
      padding: 24px;
    }

    @media (max-width: 1199px) {
        .card-referenzen .card-body,
        .card-stellen .card-body {
            padding: 24px;
        }
    }

    a.referenzen-controls:not(.disabled) {
        cursor: pointer !important;
    }

    .referenzen-controls.disabled {
        opacity: 0.5;
    }

    .referenzen-controls:not(.disabled):hover {
        opacity: 0.5;
    }

    .scrolling-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrolling-wrapper {
        overflow-x: scroll;
    }

.card-stellen {
    position: relative;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), to(rgba(181,179,174,1)));
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(181,179,174,1) 100%);
    aspect-ratio: 4 / 5;
    height: auto;
    width: 100%;
    overflow: hidden; /* Ensure the overlay doesn't overflow the card */
}

.overlaystellen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.card-stellen:hover .overlaystellen {
    opacity: 1;
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.abstandnavbar {
  padding: 64px;
}

@media (max-width: 991px) {
.abstandnavbar {
  padding: 40px 24px;
}
}

#scrollNav {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  z-index: 1002;
  background: white;
}

#scrollNav.fixed-nav-referenzen {
  background: var(--grey);
}

#scrollNav.bg-black {
  background: none;
}

@media (max-width: 991px) {
#scrollNav.bg-black {
  background: black;
}
}

#scrollNav .navbar-logo-schwarz {
  display: block;
}

#scrollNav.bg-black .navbar-logo-schwarz {
  display: none;
}

#scrollNav .navbar-logo-weiss {
  display: none;
}

#scrollNav.bg-black .navbar-logo-weiss {
  display: block;
}

#staticNav .navbar-logo-schwarz {
  display: block;
}

#staticNav.showlogo .navbar-logo-schwarz {
  display: none;
}

#staticNav .navbar-logo-weiss {
  display: none;
}

#staticNav.showlogo .navbar-logo-weiss {
  display: block;
}

.navbar-brand {
  padding: 0!important;
}

.navbar-logo {
  width: 200px;
  margin-top: 10px;
}

/*--------------------------------------------------------------
# Navigation Weiss
--------------------------------------------------------------*/
.static-nav .menu-icon {
  position: relative;
  width: 40px;
  height: 40px;
}

.static-nav .menu-icon .menu-icon__cheeckbox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  -webkit-touch-callout: none;
  position: absolute;
  opacity: 0;
  -moz-appearance: none;
       appearance: none; /* Ensures it is hidden in Safari */
  -webkit-appearance: none; /* Ensures it is hidden in Safari */
}

.static-nav .menu-icon div {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 12px;
}

.static-nav .menu-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  border-radius: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
  transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}

.static-nav-black .menu-icon span {
  background-color: var(--black);
}

.static-nav .menu-icon span:first-of-type {
  top: 0;
}

.static-nav .menu-icon span:last-of-type {
  bottom: 0;
}

.static-nav .menu-icon__cheeckbox:checked + div span:first-of-type {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 5px;
  background-color: var(--white);
}

.static-nav .menu-icon__cheeckbox:checked + div span:last-of-type {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom: 5px;
  background-color: var(--white);
}

.static-nav .menu-icon.active:hover span:first-of-type,
.static-nav .menu-icon.active:hover span:last-of-type,
.static-nav .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type,
.static-nav .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {
  width: 40px;
}

.static-nav .menu-icon:hover span:first-of-type {
      width: 40px;
    }

.static-nav .menu-icon:hover span:last-of-type {
      width: 40px;
    }


/*--------------------------------------------------------------
# Navigation Schwarz
--------------------------------------------------------------*/

.link-black:hover {
  opacity: 0.5;
}

.fixed-nav .menu-icon {
  position: relative;
  width: 40px;
  height: 40px;
}

.fixed-nav .menu-icon .menu-icon__cheeckbox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
    z-index: 2;
  -webkit-touch-callout: none;
  position: absolute;
  opacity: 0;
  -moz-appearance: none;
       appearance: none; /* Ensures it is hidden in Safari */
  -webkit-appearance: none; /* Ensures it is hidden in Safari */
}

.fixed-nav .menu-icon div {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 12px;
}

.fixed-nav .menu-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--black);
  border-radius: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
  transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}

.fixed-nav-referenzen .menu-icon span {
  background-color: var(--white);
}

.fixed-nav .menu-icon span:first-of-type {
  top: 0;
}

.fixed-nav .menu-icon span:last-of-type {
  bottom: 0;
}

.fixed-nav .menu-icon__cheeckbox:checked + div span:first-of-type {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 5px;
  background-color: var(--white);
}

.fixed-nav .menu-icon__cheeckbox:checked + div span:last-of-type {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom: 5px;
  background-color: var(--white);
}

.fixed-nav .menu-icon.active:hover span:first-of-type,
.fixed-nav .menu-icon.active:hover span:last-of-type,
.fixed-nav .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type,
.fixed-nav .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {
  width: 40px;
}

.fixed-nav .menu-icon:hover span:first-of-type {
      width: 40px;
    }

.fixed-nav .menu-icon:hover span:last-of-type {
      width: 40px;
    }

@media (min-width: 992px) {
.menu-icon:hover {
  opacity: 0.5;
}
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
}

.overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.navbar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100%;
    background-color: black;
    color: white;
    display: block;
    -webkit-transition: right 0.6s ease-in-out, width 0.6s ease-in-out;
    transition: right 0.6s ease-in-out, width 0.6s ease-in-out;
    z-index: 1000;
    padding-top: 169px;
    padding-right: 64px;
    padding-left: 120px;
    overflow-y: hidden;
}

.navbar-menu.open {
    right: 0;
}

.navbar-content {
    opacity: 0;
    height: 100%;
    -webkit-transition: opacity 0.6s ease-in-out 0.6s;
    transition: opacity 0.6s ease-in-out 0.6s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    z-index: 3;
    overflow-y: auto;
    overflow-x: hidden;
}

.navbar-menu.open .navbar-content {
    opacity: 1;
    -webkit-transition: opacity 0.6s ease-in-out 0.6s;
    transition: opacity 0.6s ease-in-out 0.6s;
}

.navbar-menu.closed .navbar-content {
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
}

.navbar-content a.nav-item {
    color: var(--white) !important;
    font-size: 70px;
    line-height: 80px;
}

@media (max-width: 1599px) {
.navbar-content a.nav-item {
    font-size: 36px;
    line-height: 36px;
}
}

.navbar-content a:hover.nav-item {
    opacity: 0.5;
}

.footer-navbar {
    padding-bottom: 64px;
}

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

.footer-navbar a:hover {
    opacity: 0.5;
}

@media (min-width: 1600px) {
.col-navbar-1 {
    max-width: 250px;
}
}

@media (max-width: 1599px) {
.col-navbar-1 {
    min-width: 100%;
    margin-bottom: .25rem !important;
}
}

.col-navbar-2 {
    max-width: 200px;
}


@media (min-width: 1600px) {
    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
                flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 1600px) {
    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        -webkit-box-flex: 0;
                flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

@media (min-width: 992px) {
    .buttons-karriere {
        margin-top: -50px;
    }
}

@media (max-width: 991px) {
.navbar-menu {
    right: -100%;
    width: 100%;
    height: 100%;
    padding-top: 122px;
    padding-right: 24px;
    padding-left: 24px;
}
.footer-navbar {
    padding-bottom: 24px;
}
}

a.buttonslg {
  opacity: 0.5;
}

a:hover.buttonslg {
  opacity: 1;
}

a.activelg {
  opacity: 1;
}

a.bildhover {
  opacity: 1;
}

a:hover.bildhover {
  opacity: 0.8;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.footer {
  background-color: var(--black);
  color: var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.footer a {
  color: var(--white);
}

.footer .lead {
  font-size: 20px;
  line-height: 28px;
  font-family: NNNouvelleGrotesk-Regular, sans-serif;
  font-weight: normal;
}

.abstand-footer-row-2 {
  margin-top: -60px
}

@media (max-width: 1199px) {
.abstand-footer-row-2 {
  margin-top: 40px
}
}

@media (max-width: 991px) {
.footer .lead {
  font-size: 18px;
  line-height: 24px;
}
.footer-logo {
      width: 200px;
}
.footer {
  padding-top: 30px;
  padding-bottom: 40px;
}
}

@media (min-width: 992px) {
.align-footer-copyright {
  padding-bottom: 30px;
}
}

/*--------------------------------------------------------------
# Cookies
--------------------------------------------------------------*/

.disclaimer-footer {
  text-align: right;
}

@media (max-width: 768px) {
.disclaimer-footer {
  text-align: left;
}
}

/*--------------------------------------------------------------
# Tiny MCE
--------------------------------------------------------------*/

.tox-tinymce {
  top: auto!important;
  bottom: 0!important;
  position: fixed!important;
}

.tox-form__group--stretched .tox-label {
  display: none!important;
}

.tox-form__group {
  margin-bottom: 10px!important;
}