@charset "UTF-8";
@font-face {
  font-family: "OpenSans-Regular";
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Oswald-Bold";
  src: url("../fonts/Oswald-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans-ExtraBold";
  src: url("../fonts/OpenSans-ExtraBold.ttf") format("truetype");
}
.h2-outline {
  font-family: Oswald-Bold, sans-serif;
  font-size: 58px;
  text-transform: uppercase;
  /* hide the fill */
  color: transparent; /* ↓ Safari/Chrome/Edge/Firefox */
  -webkit-text-fill-color: transparent;
  /* draw the stroke */
  -webkit-text-stroke: 1px #47DAB1; /* prefixed for reliability   */
  text-stroke: 1px #47DAB1; /* future-proof, spec name   */
}

.h3-osw-bold-outline {
  font-family: Oswald-Bold, sans-serif;
  font-size: 58px;
  text-transform: uppercase;
  /* hide the fill */
  color: transparent; /* ↓ Safari/Chrome/Edge/Firefox */
  -webkit-text-fill-color: transparent;
  /* draw the stroke */
  /* prefixed for reliability   */
  text-stroke: 1px #47DAB1; /* future-proof, spec name   */
}

.h3-osw-bold {
  font-family: Oswald-Bold, sans-serif;
  font-size: clamp(30px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.y-video iframe {
  width: 100%; /* span the full width that’s available   */
  height: auto; /* let the browser calculate the height   */
  aspect-ratio: 16/9; /* ↖︎ new magic: keeps the 16 : 9 shape   */
  display: block; /* removes the small default inline gap   */
}

.jump-marks {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: clamp(50px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
}
.jump-marks a {
  color: #000000;
  text-decoration: none;
}
.jump-marks a:hover {
  color: #D20054;
}

.ancor-jump-point {
  margin-top: clamp(50px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
}
.ancor-jump-point .h2-outline {
  font-size: clamp(40px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
}
@media (max-width: 575px) {
  .ancor-jump-point .h2-outline {
    font-size: clamp(25px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
  }
}

.pdf-link {
  text-transform: uppercase;
  color: black;
  text-decoration: none;
}

.slider-wrapper {
  margin-top: 50px;
}

/* 1. Turn the track into a flex container */
.hero-slider .slick-track {
  display: flex; /* children (=slides) stretch to the tallest */
  gap: 16px; /* ← the magic 16-pixel gutter */
  align-items: stretch; /* <- this is the default, just being explicit */
}

/* 2. Let each slide auto-size and become a flex item too
      (handy if you want to centre content later) */
.hero-slider .slick-slide {
  height: auto; /* override Slick’s inline height */
  display: flex; /* optional but useful for centring */
}

/* 3. Make the element *inside* the slide fill the space */
.hero-slider .slick-slide > .my-slide {
  flex: 1 1 auto; /* grow/shrink as needed */
  height: 100%; /* 100 % of the slide = full track height */
}

.slide_typ_1 h2 {
  font-family: Oswald-Bold, sans-serif;
  font-size: clamp(25px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
  text-transform: uppercase;
  line-height: clamp(30px, max(0px, 0.0694444444 * (100vw - 360px)), 75px);
  letter-spacing: -1.25px;
}
.slide_typ_1 p {
  font-size: clamp(12px, max(0px, 0.0537037037 * (100vw - 360px)), 16px);
}
.slide_typ_1 .overlay {
  bottom: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
  left: clamp(10px, max(0px, 0.0694444444 * (100vw - 360px)), 75px);
}
.slide_typ_1 image {
  object-fit: cover;
}

.slide_typ_2 {
  max-width: 530px;
  width: 100%;
}
.slide_typ_2 img {
  position: absolute;
  max-height: 200px;
  max-width: 200px;
}
@media (max-width: 575px) {
  .slide_typ_2 img {
    position: relative;
    margin-left: 20px;
    margin-top: 30px;
  }
}

.slide_typ_3 {
  max-width: 760px;
  width: 100%;
}
.slide_typ_3 h3 {
  position: absolute;
  bottom: 16px;
  right: 16px;
}
@media (max-width: 767px) {
  .slide_typ_3 h3 {
    font-size: clamp(30px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
    margin-left: 20px;
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  .slide_typ_3 h3 {
    position: relative;
    font-size: clamp(30px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
    margin-left: 20px;
    margin-top: 30px;
  }
}

.slide_typ_4 {
  max-width: 982px;
  width: 100%;
}
@media (max-width: 575px) {
  .slide_typ_4 iframe {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

.slick-dots {
  display: flex;
  padding-left: 0;
}

/* 0. Make the button completely invisible */
.slick-dots li button {
  background: transparent; /* no grey rectangle */
  border: none; /* no border */
  padding: 0;
  font-size: 0; /* hides the “1 2 3…” text Slick prints inside */
}

/* 1. Kill Slick’s built-in dot */
.slick-dots li button:before {
  display: none; /* or content:''; either works */
}

/* 2. Draw one single dash — use :after so it doesn’t clash with :before */
.slick-dots li button:after {
  content: "";
  display: block;
  width: 22px; /* dash length  */
  height: 3px; /* dash thickness */
  background: #555;
  border-radius: 0; /* square ends; raise for pill-shape */
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

/* 3. Highlight the current slide */
.slick-dots li.slick-active button:after {
  opacity: 1; /* solid dash for the active slide */
}

/* 4. (Optional) tighten spacing */
.slick-dots li {
  margin: 0 6px;
  list-style: none; /* remove browser bullets */
}

/* 2️⃣  Re-order the children */
.slick-prev {
  order: 1;
}

/*   ← left arrow   */
.slick-dots { /*   • • • • •      */
  order: 2;
  display: flex !important; /* keep dots inline */
  gap: 0.5rem;
  margin-left: 2rem;
  margin-right: 2rem;
}

.slick-next {
  order: 3;
}

/*   → right arrow  */
.slider-wrapper-header {
  position: relative;
  /* 2. Draw one single dash — use :after so it doesn’t clash with :before */
  /* 3. Highlight the current slide */
}
@media (max-width: 575px) {
  .slider-wrapper-header .normal {
    object-fit: cover;
    object-position: center;
    height: 150px;
  }
  .slider-wrapper-header .startseite {
    object-fit: cover;
    object-position: center;
    height: 400px;
  }
}
.slider-wrapper-header .slick-dots li button:after {
  content: "";
  display: block;
  width: 22px; /* dash length  */
  height: 3px; /* dash thickness */
  background: #ffffff;
  border-radius: 0; /* square ends; raise for pill-shape */
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.slider-wrapper-header .slick-dots li.slick-active button:after {
  opacity: 1; /* solid dash for the active slide */
}
.slider-wrapper-header .hero-slider-controls {
  position: absolute;
  bottom: 10px;
}

.level-up {
  border: 1px solid #000000;
  height: 44px;
  width: 44px;
  cursor: pointer;
  padding: 8px;
}
.level-up img {
  width: 100%;
}

.text-image-typ-1 {
  margin-top: clamp(50px, max(0px, 0.2777777778 * (100vw - 360px)), 300px);
}
.text-image-typ-1 .border-wrapper {
  border-right: 2px solid #000000;
}
@media (max-width: 767px) {
  .text-image-typ-1 .border-wrapper {
    border-right: unset;
  }
}
.text-image-typ-1 .text-wrapper {
  padding-top: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-bottom: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-left: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
  padding-right: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
}
.text-image-typ-1 .image-wrapper {
  position: relative;
  z-index: -1;
  transform: translate(-110px, -70px) scale(1.35);
}
@media (max-width: 991.98px) {
  .text-image-typ-1 .image-wrapper {
    transform: translate(0px, 0px) scale(1);
  }
}

.text-image-typ-1Right {
  margin-top: clamp(50px, max(0px, 0.2777777778 * (100vw - 360px)), 300px);
}
.text-image-typ-1Right .border-wrapper {
  border-left: 2px solid #000000;
}
@media (max-width: 767px) {
  .text-image-typ-1Right .border-wrapper {
    border-right: unset;
  }
}
.text-image-typ-1Right .text-wrapper {
  padding-top: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-bottom: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-left: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
  padding-right: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
}
.text-image-typ-1Right .image-wrapper {
  position: relative;
  z-index: -1;
  transform: translate(110px, -70px) scale(1.35);
}
@media (max-width: 991.98px) {
  .text-image-typ-1Right .image-wrapper {
    transform: translate(0px, 0px) scale(1);
  }
}

.text-image-typ-2 {
  margin-top: clamp(50px, max(0px, 0.2777777778 * (100vw - 360px)), 300px);
}
.text-image-typ-2 .border-wrapper {
  border-right: 2px solid #000000;
}
@media (max-width: 767px) {
  .text-image-typ-2 .border-wrapper {
    border-right: unset;
  }
}
.text-image-typ-2 .text-wrapper {
  padding-top: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-bottom: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-left: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
  padding-right: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
}
.text-image-typ-2 .image-wrapper {
  position: relative;
  z-index: -1;
  transform: translate(-75px, -70px) scale(1.35);
}
@media (max-width: 767px) {
  .text-image-typ-2 .image-wrapper {
    transform: translate(0px, 0px) scale(1);
  }
}

.text-image-typ-2Right {
  margin-top: clamp(50px, max(0px, 0.2777777778 * (100vw - 360px)), 300px);
}
.text-image-typ-2Right .border-wrapper {
  border-left: 2px solid #000000;
}
@media (max-width: 767px) {
  .text-image-typ-2Right .border-wrapper {
    border-left: unset;
  }
}
.text-image-typ-2Right .text-wrapper {
  padding-top: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-bottom: clamp(10px, max(0px, 0.0444444444 * (100vw - 360px)), 48px);
  padding-left: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
  padding-right: clamp(10px, max(0px, 0.1111111111 * (100vw - 360px)), 120px);
}
.text-image-typ-2Right .image-wrapper {
  position: relative;
  z-index: -1;
  transform: translate(75px, -70px) scale(1.35);
}
@media (max-width: 767px) {
  .text-image-typ-2Right .image-wrapper {
    transform: translate(0px, 0px) scale(1);
  }
}

html {
  scroll-behavior: smooth; /* Works in all modern browsers except Safari <16 */
}
@media (max-width: 575px) {
  html {
    overflow-x: hidden;
    /* Optional: also make sure the content can’t grow wider than viewport */
    max-width: 100%;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: OpenSans-Regular, sans-serif;
  font-size: 16px;
}
@media (max-width: 575px) {
  body {
    overflow-x: hidden;
    /* Optional: also make sure the content can’t grow wider than viewport */
    max-width: 100%;
  }
}

.content {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.content .c-wrapper {
  padding-left: clamp(10px, max(0px, 0.0555555556 * (100vw - 360px)), 60px);
  padding-right: clamp(10px, max(0px, 0.0555555556 * (100vw - 360px)), 60px);
}

.header .header-menu {
  padding-left: clamp(10px, max(0px, 0.0555555556 * (100vw - 360px)), 60px);
  padding-right: clamp(10px, max(0px, 0.0555555556 * (100vw - 360px)), 60px);
  text-transform: uppercase;
  min-height: clamp(10px, max(0px, 0.162962963 * (100vw - 360px)), 176px);
  border-bottom: 1px solid #000000;
}
.header .header-menu .header-links {
  color: #58877A;
}
.header .header-menu .header-links.is-active {
  color: #47DAB1;
}
.header .header-menu .header-links:hover {
  color: #D20054;
}
.header .header-menu #logo-stm-header:hover #logo-stm-header-path {
  fill: #58877A;
}
.header .header-menu .container-fluid {
  margin: 0;
  padding: 0;
}
.header .header-menu .search {
  position: relative;
}
.header .header-menu .search input {
  border: 1px solid #000000;
  height: 30px;
}
.header .header-menu .search .search-input::placeholder { /* centres the placeholder itself */
  text-align: center;
  color: #CFCDCD;
}
.header .header-menu .search .result {
  display: none;
  border: 1px solid #000000;
  margin-top: 20px;
  width: max-content;
  min-width: 534px;
  right: 0;
  position: absolute;
  background-color: #CFCDCD;
  padding-bottom: 30px;
}
.header .header-menu .search .result .close-button {
  cursor: pointer;
}
.header .header-menu .search .result.show {
  display: block;
}
.header .header-menu .search .result a {
  color: black;
  text-decoration: none;
}
.header .header-menu .search .result a:hover {
  color: #D20054;
}
@media (max-width: 991.98px) {
  .header .header-menu .search .result {
    position: relative;
    width: 100%;
    min-width: unset;
  }
  .header .header-menu .search .result a {
    margin-bottom: 30px;
  }
}
.header .header-menu .search-icon {
  max-width: 30px;
  width: 30px;
  max-height: 30px;
  height: 30px;
  background-color: #000000;
  color: #ffffff;
}

.footer {
  margin-top: clamp(50px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
  padding-left: clamp(10px, max(0px, 0.0555555556 * (100vw - 360px)), 60px);
  padding-right: clamp(10px, max(0px, 0.0555555556 * (100vw - 360px)), 60px);
  background-color: #000000;
  color: #ffffff;
  min-height: 240px;
}
@media (max-width: 991.98px) {
  .footer {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.footer a {
  color: #ffffff;
  text-decoration: none;
  font-size: 19px;
  text-transform: uppercase;
}
.footer .footer-links:hover {
  color: #D20054;
}
.footer .footer-links.is-active {
  color: #47DAB1;
}
.footer .ext-stm-link {
  color: #47DAB1;
}
.footer .ext-stm-link:hover {
  color: #D20054;
}

.archiv-overview {
  text-transform: uppercase;
  font-family: OpenSans-Regular, sans-serif;
  font-size: 19px;
  line-height: 29px;
  letter-spacing: 2px;
}
.archiv-overview a {
  text-decoration: none;
  color: #000000;
}

.startseite-headline {
  margin-top: 100px;
  color: #C49C48;
  font-family: OpenSans-Regular, sans-serif;
  font-size: clamp(20px, max(0px, 0.037037037 * (100vw - 360px)), 40px);
  line-height: 8px;
  letter-spacing: 2px;
}
.startseite-headline strong {
  font-family: Oswald-Bold, sans-serif;
  font-size: clamp(30px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
  line-height: clamp(30px, max(0px, 0.0694444444 * (100vw - 360px)), 75px);
  letter-spacing: -1.25px;
}

.textWysiwygSection {
  margin-top: clamp(50px, max(0px, 0.0925925926 * (100vw - 360px)), 100px);
}
.textWysiwygSection h2 {
  font-family: Oswald-Bold, sans-serif;
  font-size: clamp(30px, max(0px, 0.0537037037 * (100vw - 360px)), 58px);
  line-height: clamp(30px, max(0px, 0.0694444444 * (100vw - 360px)), 75px);
  letter-spacing: -1.25px;
  text-transform: uppercase;
}
.textWysiwygSection .textWysiwygSection-outer {
  border-left: 2px solid #000000;
  padding-left: 20px;
  margin-left: clamp(0px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
  margin-right: 30px;
  margin-top: 50px;
}
.textWysiwygSection .textWysiwygSection-outer .textWysiwygSection-inner {
  font-family: OpenSans-Regular, sans-serif;
  font-size: 16px;
  line-height: 28px;
}
.textWysiwygSection .textWysiwygSection-outer .textWysiwygSection-inner strong {
  font-family: OpenSans-ExtraBold, sans-serif;
  font-size: 16px;
  line-height: 28px;
  text-transform: uppercase;
  font-weight: unset;
}
.textWysiwygSection .textWysiwygSection-outer .textWysiwygSection-inner a {
  color: #58877A;
  text-decoration: none;
  text-transform: uppercase;
  font-family: OpenSans-Regular, sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
}
.textWysiwygSection .textWysiwygSection-outer .textWysiwygSection-inner a:hover {
  color: #D20054;
}

.akkordeon {
  margin-top: clamp(50px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
}
.akkordeon .akkordeon-title {
  margin-left: clamp(0px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
  font-family: OpenSans-Regular, sans-serif;
  font-size: 19px;
  line-height: 29px;
  letter-spacing: 2px;
  text-transform: uppercase;
  max-width: 800px;
}
.akkordeon .akkordeon-outer {
  border-left: 2px solid #000000;
  padding-left: 20px;
  margin-left: clamp(0px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
  margin-right: clamp(0px, max(0px, 0.1851851852 * (100vw - 360px)), 200px);
  margin-top: 50px;
}
.akkordeon .akkordeon-outer .akkordeon-inner {
  padding-top: 20px;
  padding-bottom: 20px;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion {
  border-radius: 0 !important;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-item {
  margin-bottom: 10px;
  border-radius: 0 !important;
  border: none !important;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-item .accordion-header {
  border-radius: 0 !important;
  /* optional: turn off Bootstrap’s rotation animation, which you no longer need */
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-item .accordion-header .accordion-button {
  background-color: #CFCDCD !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  --bs-accordion-btn-icon: url("../../../images/Open-Black.svg");
  --bs-accordion-btn-icon-width: 1.25rem;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-item .accordion-header .accordion-button:hover {
  background-color: #D20054 !important;
  --bs-accordion-btn-icon: url("../../../images/Open.svg");
  color: white;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: #58877A !important;
  color: white;
  text-transform: uppercase;
  --bs-accordion-btn-active-icon: url("../../../images/Schließen.svg");
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-item .accordion-header .accordion-button::after {
  transition: none;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-body {
  font-family: OpenSans-Regular, sans-serif;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0px;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-body a {
  text-decoration: none;
  color: #58877A;
  text-transform: uppercase;
}
.akkordeon .akkordeon-outer .akkordeon-inner .accordion .accordion-body a:hover {
  color: #D20054;
}

.wysiwyg strong {
  color: #58877A;
}
.wysiwyg h2 {
  color: #58877A;
  font-family: Oswald-Bold, sans-serif;
  font-size: clamp(30px, max(0px, 0.0351851852 * (100vw - 360px)), 38px);
  text-transform: uppercase;
}

.team {
  margin-bottom: 8rem;
}
.team .team-wrapper {
  position: relative;
}
.team .team-wrapper .team-overlay {
  background-color: #CFCDCD;
  position: absolute;
  top: 60px;
  right: 0;
  max-width: clamp(250px, max(0px, 0.3935185185 * (100vw - 360px)), 425px);
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 25px;
  padding-bottom: 25px;
}
.team .team-wrapper .team-overlay h3 {
  margin-bottom: 10px !important;
}

/*# sourceMappingURL=main.css.map */