#leistungen {
  max-width: 1200px;
    padding: 100px 0px 50px; /* nach oben viel Platz, unten etwas weniger */
  margin: 0 auto;
  padding: 60px 30px;
  font-family: Arial, sans-serif;
}

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px 80px; /* ↑ mehr vertikaler Abstand (erste Zahl = Zeilenabstand, zweite = Spaltenabstand) */
}
.leistung-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #004080; /* Blau statt Rot */
  margin-bottom: 8px;
  text-transform: uppercase;
  text-decoration: none; /* Kein Unterstrich */
}

.leistung-item p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  text-align: left;
}

/* Mobile Ansicht */
@media (max-width: 900px) {
  .leistungen-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .leistungen-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}.leistungen-grid {
  display: grid;
  gap: 1.5rem;
}

.leistung-item h3 {
  text-align: left;        /* Überschrift linksbündig */
  margin-bottom: 0.25rem;  /* kleiner Abstand zum Text */
  font-weight: 600;        /* optional: etwas betonter */
  margin-left: 0;          /* sicherstellen, dass sie bündig ist */
}

.leistung-item p {
  text-align: left;        /* Fließtext ebenfalls linksbündig */
  margin: 0;
}.leistungen-grid {
  display: grid;
  gap: 1.5rem;
}

.leistung-item h3 {
  text-align: left;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.leistung-item p {
  text-align: left;
  margin: 0;
}







.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 80px;   /* ← Abstand zwischen den Zeilen */
  column-gap: 80px; /* ← Abstand zwischen den Spalten */
}

.leistung-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E73BE; /* dein Rotton aus dem Screenshot */
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: left;
}

.leistung-item p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  text-align: left;
}

#leistungen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 30px 60px; /* mehr Platz oben, leicht weniger unten */
  font-family: Arial, sans-serif;
}

#leistungen h2 {

  margin-bottom: 70px; /* Abstand zwischen Titel und Grid */
  position: relative;
}





#leistungen {
  padding: 2rem 1rem;
}

.leistungen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Tablet: 2 Spalten */
@media (min-width: 640px) {
  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 Spalten */
@media (min-width: 1024px) {
  .leistungen-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Optionale leichte Optimierung beim Abstand */
.leistung-item {
  padding: 1rem;
}



@media (min-width: 1024px) {
  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 2000px; /* breiter am PC */
  }
}

@media (min-width: 1440px) {
  .leistungen-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}






/* Boxen leicht größer */
.leistung-item {
  padding: 1.75rem;    /* vorher 1.25–1.5rem → jetzt etwas größer */
}

/* Überschriften leicht größer */
.leistung-item h3 {
  font-size: 1.15rem;  /* vorher 1rem */
  margin-bottom: 0.5rem;
}

/* Text leicht größer */
.leistung-item p {
  font-size: 0.95rem;  /* vorher 0.9rem */
  line-height: 1.55;
}

/* Abstände etwas großzügiger, aber weiterhin kompakt */
.leistungen-grid {
  gap: 1.5rem;         /* vorher 1–1.25rem */
}

/* Tablet */
@media (min-width: 640px) {
  .leistungen-grid {
    gap: 1.75rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .leistungen-grid {
    gap: 2rem;         /* moderates, sauberes Layout */
  }

  .leistung-item {
    padding: 2rem;     /* früher 1.5rem */
  }
}



.leistung-item h3 {
  position: relative;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

/* Blauer kurzer Strich links */
.leistung-item h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 45px;
  height: 3px;
  background-color: #1E73BE; /* Blau */
}

/* Grauer langer Strich rechts daneben */
.leistung-item h3::before {
  content: "";
  position: absolute;
  left: 55px;      /* Abstand nach dem blauen Strich */
  bottom: 1px;     /* minimal höher für perfekte Optik */
  right: 0;

  height: 1px;
  background-color: #d5d5d5; /* hellgrau wie im Screenshot */
}