.hero-diagonal {
  position: relative;
  min-height: 75vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-grid {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-item {
  flex: 1;
  background-size: cover;
  background-position: center;
}

/* leicht diagonale Übergänge zwischen den Bildern */
.hero-left {
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}

.hero-center {
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  background-position: 20% center;
}

.hero-right {
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}

.hero {
  min-height: 75vh;
  background: none;

  display: flex;
  align-items: center;
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
}

.hero-content {
  position: relative;
  padding-left: 6%;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.2;
  color: var(--color-text-bright);
}

.hero p {
  margin-top: 10px;
  margin-bottom: 20px;
  color: var(--color-text-dark);
}

.btn.primary.construction,
.btn.secondary.construction {
  min-width: 295px;
  max-width: 295px;
}

/* =========================================================
   TEXT-BEREICH – STYLES
========================================================= */

.text-container h2 {
  font-size: var(--fs-big);
  font-weight: 600;
  color: var(--color-text-bright);
  margin-bottom: 25px;
  text-align: center;
}

.text-container p {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-bottom: 20px;
  max-width:1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

.block {
  text-align: justify;
}

.text-container i.icon {
  color: var(--color-accent-primary);
  font-size: var(--fs-medium);
  margin-right: 15px;
  vertical-align: middle;
}

.text-container p strong {
  font-weight: 700;
  color: var(--color-text-bright);
}

.construction-h3 {
  font-size: 25px !important;
}

.service-description{
  max-width: 100% !important;
  text-align: center !important;
}

.heading-with-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.heading-with-logo h2 {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}
.made-in-germany-logo {
    height: 80px;
    width: auto;
    flex-shrink: 0;
}

@media (max-width: 900px) {
  .card-body p{
    text-align: center !important;
  }
  .text-container p {
    font-size: var(--fs-small);
    padding: 0 15px;
    text-align: left;
  }

  .text-container i.icon {
    font-size: var(--fs-medium);
  }
}

@media (max-width: 600px) {
  .heading-with-logo {
      justify-content: center;
      text-align: center;
    }
    
    .made-in-germany-logo {
        height: 60px;
    }

  .hero-left,
    .hero-right {
        display: none;
    }
    .hero-grid {
        display: block;
    }
    .hero-center {
        width: 100%;
        height: 100%;
        clip-path: none;
    }
  }