:root {
  --mt-grey: #706f6f;
  --mt-light: #f8f9fa;
  --mt-white: rgb(251,251,251); /* Wert in Hex: #fbfbfb */
  --mt-white-transparent: rgba(251,251,251,0.8); /* Wert in Hex: #fbfbfb */
  --mt-light-grey: rgb(30,48,56); /* Wert in Hex: #1e3038 */
  --mt-green: rgb(132,191,92); /* Wert in Hex: #84bf5c */
  --mt-dark: rgb(22,35,43); /* Wert in Hex: #16232b */
  --mt-dark-green: rgb(22,35,43); /* Wert in Hex: #16232b */
  --mt-orange: rgb(234, 89, 45); /* Wert in Hex: #ea592d */
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card-height {
  height:400px;
}

.navbar-mt {
  background: var(--mt-dark-green);
}

.navbar-mt .nav-link {
  color: var(--mt-white) !important;
}


.flip-card {
  position: relative;
  background-color: transparent;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  border-radius: 10px;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}


.font-mt-green {
  color: var(--mt-green);
}

.font-mt-grey {
  color: var(--mt-grey);
}

.font-mt-orange {
  color: var(--mt-orange);
}

.font-mt-white {
  color: var(--mt-white);
}

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

.mt-green {
  background-color: var(--mt-green);
}

.mt-dark {
  background-color: var(--mt-dark);
}

section.section {
  padding: 50px 0;
  min-height: 350px;
}

.mr-2 {
  margin-right: 0.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.img-container {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.rotate-right {
  transform: rotate(3deg);
}
.rotate-left {
  transform: rotate(-3deg);
}

.img-container-rotating {
  position: relative;
  overflow: hidden;
  height: 400px; /* Höhe der Bilder */
  width: 100%;
  margin-bottom: 20px;
}

.img-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.img-container-rotating img {
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.img-container-rotating img.active {
  opacity: 1;
}

.text-container {
  background: var(--mt-white);
  padding: 20px;
  box-shadow: 0 4px 8px var(--mt-grey);
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 100%;
}

/*text container mit leicht transparentem Hintergrund */
.text-container.transparent {
  background: var(--mt-white-transparent); 
}

.divider-shadow {
  height: 2px;
  background: var(--mt-green);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

.main {
  text-align: center;
  font-size: large;
  font-weight: bold;
}

.heartbeat-line {
  width: 80%;
  margin: 0 auto; /* Zentriert die Linie horizontal */
}

.heartbeat-line svg {
  width: 100%;
  height: auto;
  margin-top: -18%;
  margin-bottom: 25px;
}

.grayscale {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.grayscale:hover {
    filter: grayscale(0%);
}

.d-flex.overflow-auto {
    animation: scroll-left 20s linear infinite;
}

.reference-img {
  max-height: 100px; /* Begrenze die Höhe der Bilder */
  object-fit: contain; /* Skaliert das Bild, um in den Container zu passen */
  background-color: transparent; /* Hintergrund transparent machen */
}

.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted var(--mt-green);
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted var(--mt-green);
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
}

.timeline-steps .timeline-content {
    width: 10rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mt-green);
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: var(--mt-green);
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

.custom-heading {
  font-size: 4em;
}
@media (max-width: 1200px) {
  .custom-heading {
      font-size: 3.5em; /* Größe für mittlere Bildschirme */
  }
}

@media (max-width: 768px) {
  .custom-heading {
      font-size: 2.5em; /* Größe für kleine Bildschirme */
  }
}

@media (max-width: 576px) {
  .custom-heading {
      font-size: 2em; /* Größe für sehr kleine Bildschirme */
  }
}

.section.mt-dark p,
.section.mt-dark ul{
  color: var(--mt-white); /* Setzt die Schriftfarbe auf weiß */
}

.section.mt-dark h1,
.section.mt-dark h2,
.section.mt-dark h3,
.section.mt-dark h4,
.section.mt-dark a {
  color: var(--mt-orange);
}

ul.custom-list {
  list-style: none; /* Entfernt die Standard-Bulletpoints */
  padding-left: 0; /* Optional: Entfernt die Einrückung */
}

ul.custom-list li::before {
  content: "✓"; /* Fügt das Symbol vor jedem Listenelement hinzu */
  color: green; /* Optional: Farbe des Symbols */
  font-weight: bold; /* Optional: Stil des Symbols */
  margin-right: 8px; /* Abstand zwischen Symbol und Text */
}

.div.text-container h1,
.div.text-container h2,
.div.text-container h3,
.div.text-container h4 {
  color: var(--mt-dark-green);
}

.section.mt-dark .text-container p {
  color: var(--mt-dark); /* Setzt die Schriftfarbe auf dunkel */
}

/* Carousel Container: Höhe orientiert sich an Bild, nicht fix */
#myCarousel {
  transition: all 0.4s ease;
  overflow: hidden;
  height: auto;
  margin-bottom: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#myCarousel img {
  width: 100%;
  height: auto;
  display: block;
}
/* Banner auf Unterseiten: ca. 200px hoch (statt 120px) */
#myCarousel.small-banner {
  max-height: 300px !important;
  height: 300px !important;
  transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1);
}
#myCarousel.small-banner img {
  max-height: 300px !important;
  height: 300px !important;
  object-fit: cover;
  transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Carousel Controls und Indikatoren immer mittig/auf dem Bild */
#myCarousel .carousel-control-prev,
#myCarousel .carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  position: absolute;
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  color: #fff;
}
#myCarousel .carousel-control-prev {
  left: 10px;
  right: auto;
}
#myCarousel .carousel-control-next {
  right: 10px;
  left: auto;
}
#myCarousel .carousel-indicators {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 11;
  margin-bottom: 0;
  justify-content: center;
  display: flex;
}
#myCarousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  margin: 0 3px;
}

@media (max-width: 768px) {
  #myCarousel {
    height: auto;
    max-height: 200px;
    margin-bottom: -2.5em;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1);
  }
  #myCarousel.small-banner {
    height: 130px !important;
    max-height: 130px !important;
    margin-bottom: 0;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1);
  }
  #myCarousel.small-banner img {
    height: 130px !important;
    max-height: 130px !important;
    object-fit: cover;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1);
  }
  #myCarousel .carousel-control-prev,
  #myCarousel .carousel-control-next {
    width: 32px;
    height: 32px;
    font-size: 1.2em;
  }
  #myCarousel .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    margin: 0 2px;
  }
  /* Reduziere das Padding im Überschriften-Container auf Mobilgeräten */
  .container.text-center.text-white.py-5 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Controls nur auf sehr kleinen Geräten ausblenden, falls gewünscht */
@media (max-width: 480px) {
  #myCarousel .carousel-control-prev,
  #myCarousel .carousel-control-next {
    display: flex;
  }
}

.page-headline-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 5;
  text-align: center;
}

.page-headline-overlay.show {
  opacity: 1;
}

.page-headline-overlay h1 {
  font-size: 3rem;
  color: var(--mt-orange);
  text-shadow:
    2px 2px 6px rgba(0, 0, 0, 1),
    -2px -2px 6px rgba(0, 0, 0, 1);
  margin: 0 auto;
  padding: 0.2em 0.6em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

@media (max-width: 768px) {
  .page-headline-overlay h1 {
    font-size: 2rem;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 1.5em;
    height: 100%;
  }
}

.page-headline-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  z-index: -1;
}

.d-none {
  display: none !important;
}

/* Abstand nach dem Header für die Hauptinhalte reduzieren */
main, .main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}