/* ---------Icons --------------- */ 
.icons-tools{
  height: 5%;
  margin: 2rem auto; /* Zentriert die Section */
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10em;
  background-color: #e3c080;
}

.icons-tools {
  gap: 5em;
}

.icons-tools img {
  width: 2em;
}

@media (max-width: 768px) {
  .icons-tools {
    gap: 2em;
  }

  .icons-tools img {
    width: 1.5em;
  }
}

/* ---------Angebot --------------- */

.leistungen-title{
  margin-top: 2em;
}

.alle-leistungen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  padding: 0 1em;
  text-align: center;
}

@media (max-width: 768px) {
  .alle-leistungen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* Kein Zeilenumbruch */
    overflow-x: auto;   /* Horizontal scrollen */
    gap: 1em;
    padding: 1em;
    scroll-snap-type: x mandatory; /* Optional: Snap beim Scrollen */
  }
}

.leistungs-container {
  display: flex;              /* Aktiviert Flexbox */
  gap: 0;                  /* Abstand zwischen den Spalten */
  justify-content: space-between;
  align-items: flex-start;
  margin: 3em 0 3em 0;
  padding-left: 3em;
  flex: 0 0 80; /* Jede Box nimmt 80% der Breite ein */
  scroll-snap-align: start; /* Snap-Punkt */
}

.spatle1,
.spalte2 {
  flex: 1;                    /* Beide Spalten nehmen gleich viel Platz ein */
  min-width: 250px;           /* Mindestbreite, gut für mobile Darstellung */
  box-sizing: border-box;
}
.spatle1 {
  border-right: 2px solid #e3c080;
}

.schwerpunkt,
.preis {
  font-weight: bold;
  margin-bottom: 10px;
}
.schwerpunkt {
  border-bottom: 2px solid #e3c080;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* Horizontaler Rahmen in Spalte 2 */
.preis {
  border-bottom: 2px solid #e3c080;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.schwerpunkt-füllung ul,
.preis-füllung ul {
  list-style-type: none;
  padding: 0.5em;
  margin-bottom: 1em;
}

.schwerpunkt-füllung li, .preis-füllung li {
  margin-bottom: 1em;
}

.kontakt-leistungen{
  color: #e3c080;
}