.contact {
  background-color: rgb(238, 238, 238);
}

.mt-7 {
  margin-top: 7rem !important;
}

.mb-7 {
  margin-bottom: 7rem !important;
}

.mt-6 {
  margin-top: 6rem !important;
}

.mb-6 {
  margin-bottom: 6rem !important;
}

.bg-waben {
  background-image: url("../images/waben.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-drawing {
background-image: url("../images/software.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  height:200px; 
}

.image-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    overflow: hidden; /* Verhindert horizontalen Scroll */
    z-index: 0;
}

.image-container-secondary {
    position: relative;
    width: 100%;
    height: calc(50vh - 70px);
    overflow: hidden;
    display: flex;           /* Flexbox aktivieren */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
}

.video-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden; /* Verhindert horizontalen Scroll */
    z-index: 0;
}

#fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 90%; 
}

/* Container */
.card-hover {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 400px;            /* anpassen */
  border-radius: .5rem;
}

/* Bild */
.card-hover img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;  /* damit z-index wirkt */
  z-index: 1;
  transition: transform .35s ease;
}

/* Overlay (unsichtbar) */
.card-hover .overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Text an der Unterkante ausrichten */
  align-items: left;
  text-align: left;
  padding: 1.25rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2; /* wichtig: über dem Bild */
}

/* Hover Effekt */
.card-hover:hover img {
  transform: scale(1.04);
}
.card-hover:hover .overlay,
.card-hover.show-overlay .overlay { /* .show-overlay für Touchgeräte (JS) */
  opacity: 1;
  transform: translateY(0);
}

.card-hover,
.card-hover img,
.card-hover .overlay {
  border-radius: 0 !important;
}

@media (min-width: 1200px) {
  .responsive-bold {
    font-weight: normal;
  }
}

@media (min-width: 768px) {
    .mb-md-7 {
        margin-bottom: 7rem !important;
    }

    .mb-md-6 {
        margin-bottom: 6rem !important;
    }

    .mt-md-6 {
      margin-top: 7rem !important;
    }

    .mt-md-7 {
      margin-top: 6rem !important;
    }

    .bg-lines {
      background-image: url("../images/wavy-lines-fine-s.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .bg-md-white {
        background-color: #fff !important;
    }
}