/*
 * Eigene Ergänzungen zum Webflow-Stylesheet (webflow.css).
 * Entspricht dem Custom Code, der in Webflow im <head> bzw. vor </body> hinterlegt war.
 * Muss nach webflow.css geladen werden.
 */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  padding-top: 112px;
}

/* ---------- Kopfbereich: fixiert, Seiten-Umschalter fährt beim Scrollen ein ---------- */

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
}

#header-inner {
  transition: transform 0.35s ease;
}

#header.is-compact #header-inner {
  transform: translateY(calc(-1 * var(--pageswitch-height)));
}

@media screen and (max-width: 991px) {
  #header-inner {
    transform: none !important;
  }
}

.navbar-wrapper.w-container:before,
.navbar-wrapper.w-container:after {
  display: none;
}

.radius-outside:after {
  display: block;
  width: 100%;
  height: 100%;
  background: #001e33;
  content: '';
  border-bottom-right-radius: 8px;
}

.cta.switch-link.active .radius-outside,
.cta.switch-link:hover .radius-outside {
  opacity: 1;
}

.lang-dd:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 9px;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 1rem;
  height: 1rem;
  background: var(--primary--color-primary-80);
}

/* ---------- Text auf feste Zeilenzahl kürzen ---------- */

.text-clamp-2,
.text-clamp-3,
.text-clamp-4,
.text-clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-2 { -webkit-line-clamp: 2; }
.text-clamp-3 { -webkit-line-clamp: 3; }
.text-clamp-4 { -webkit-line-clamp: 4; }
.text-clamp-5 { -webkit-line-clamp: 5; }

/* ---------- Hero auf kleinen Bildschirmen: Video über dem Text ---------- */

@media screen and (max-width: 767px) {
  .hero video {
    position: static;
  }

  .hero .color-white {
    color: var(--primary--color-primary-100);
  }
}

/* ---------- Standorte / Karte ---------- */

.location-btn.active {
  background-color: var(--primary--color-primary-100);
  color: var(--neutral--color-neutral-0);
}

.location-item.active {
  z-index: 10;
}

.location-item.active .location-popup {
  display: block;
  transform: rotate(+7deg) scale(0.6669);
  margin-bottom: -50%;
  margin-left: 8%;
}

.location-item.active .map-pin {
  background-image: url(../img/pin-active.svg);
}

@media screen and (min-width: 992px) {
  .world-container {
    transform: rotate(0deg) scale(1);
    transform-origin: center center;
    transition:
      bottom 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .world-container.active {
    bottom: 18%;
    right: 3%;
    transform: rotate(-7deg) scale(1.5);
  }
}

@media screen and (max-width: 1439px) {
  .location-item.active .location-popup {
    margin-bottom: -55%;
    margin-left: 85%;
  }

  .world-container.active {
    bottom: -5%;
    right: 0%;
  }
}

@media screen and (max-width: 991px) {
  .location-item.active .location-popup {
    margin: 0;
    display: block;
    transform: none;
  }
}

@media only screen and (max-width: 1440px) and (min-width: 992px) {
  .section.map-locations:before {
    content: '';
    display: block;
    width: 100%;
    height: 45%;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.86) 75.48%, rgba(255, 255, 255, 0.00) 100%);
    position: absolute;
    left: 0;
    z-index: 2;
  }
}

/* ---------- Aktuelles: Karten sind unsichtbar, bis das Raster (site.js) sie angeordnet hat ---------- */

.w-mod-js .news-grid .box-artikel.news {
  opacity: 0;
}

/* ---------- Fokus nach Sprung zu einem Anker nicht umranden ---------- */

.wf-force-outline-none[tabindex="-1"]:focus {
  outline: none;
}