body {
  padding-left: 130px;
  padding-right: 130px;
}

@media (max-width: 1300px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}

nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li a {
  text-decoration: none;
  color: black;
  font-size: 18px;
}


@media (max-width: 1000px) {
nav li a {
  text-decoration: none;
  color: black;
  font-size: 20px;
}
}

.logo-img img {
  width: 50px; /* gleiche Größe wie der Container */
  object-fit: contain; /* verhindert Verzerrung */
  display: block;
}

.custom_btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FB8E26;
  color: white; 
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none; /* nur bei <a> wichtig */
  font-size: 16px;
}

.custom_btn,
.custom_btn a {
  text-decoration: none;
}

.custom_btn:hover {
  background-color: #ffb55a; /* Beispiel: helleres Orange */
  color: #fff;               /* Beispiel: weißer Text */
  box-shadow: 0 2px 8px rgba(251,142,38,0.2); /* Optional: leichter Schatten */
  text-decoration: none;
}


.btn {
  padding: 10px 20px;
  background-color: #c12929;
  color: #fff; /* Text jetzt weiß */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none; /* nur bei <a> wichtig */
  font-size: 16px;
  transition: background-color 0.3s ease;
}

button:hover,
.btn:hover {
  background-color: #555;
}

#hero {
  display: flex;
  align-items: center; /* Zentriert den Inhalt vertikal */
  justify-content: space-between; /* Abstand zwischen Text und Bild */
}

@media (min-width: 800px) {
  .gestaltung-erneuerung-symbol-container {
  	width: 631px;
  	position: relative;
  	font-size: 50px;
  	font-family: Poppins;
  	color: #000;
  	text-align: left;
  	display: inline-block;
      margin-right: 50px;

}
}

@media (max-width:800) {
  .gestaltung-erneuerung-symbol-container {
  	position: relative;
    min-width: 300px;
  	font-size: 30px;
  	font-family: Poppins;
  	color: #000;
  	text-align: left;
  	display: inline-block;
    line-height: 1;
    margin-right: 50px;
}
}

@media (min-width:800px) {
#height-spacer-hero-text {
  height: 50px; /* Platz für den Abstand */
}}

@media (max-width:800px) {
#height-spacer-hero-text {
  height: 10px; /* Platz für den Abstand */
}}

#spacer {
  width: 50px; /* Platz für den Abstand */
}


#hero-img {
  width: 100%; /* Bild passt sich an die Breite des Containers an */
  min-width: 160px;
  height: auto; /* Höhe bleibt proportional */
  object-fit: contain; /* Verhindert Verzerrung */
  border-radius: 24px; /* Abgerundete Ecken */
}

.leistungsliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 100px 30px; /* 100px zwischen Reihen, 30px zwischen Spalten */
  margin-top: 30px;
}

.leistung {
  background-color: #ffe9d6;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.leistung:hover {
  transform: translateY(-5px);
}

.leistung img {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.leistung p {
  font-size: 14px;
  color: #444;
}

.leistung img {
    height: 70px;
      object-fit: contain; /* Verhindert Verzerrung */

  margin-bottom: 20;
}

.icon-box {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 15px auto;
}

.icon-box img {
  position: relative;
  top: -130%;
  left: -7%;
  width: 80px;
  height: 80px;
  z-index: 2;
}

.icon-bg {
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 50px;
  background-color: white;
  border-radius: 15px;
  z-index: 1;
}


#benefits-spacer {
  height: 50px; /* Platz für den Abstand */
}





.glider-prev,
.glider-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
}

.glider-prev { left: -30px; }
.glider-next { right: -30px; }

.dots {
  text-align: center;
  margin-top: 10px;
}
.dots button {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: none;
  background: #ddd;
  margin: 5px;
  cursor: pointer;
}
.dots .glider-dot.active {
  background: orange;
}

.glider-img-wrapper {

  margin-right: 10px;
}

.glider-img-wrapper img {
  width: auto;
  height: auto; /* Entweder auf auto oder auf ner festen zahl, abhängig davon ob alle die selbe höhe haben sollen aber dann abgeschnitten sind, oder ob sie unterschiedliche höhen habensollen aber dafür in der vollen breite sichtbar sein sollen */
  object-fit: cover; 
  border-radius: 16px;
  display: block;
}

.glider-container {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
}



button.submit-button {
  background-color: #FB8E26;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.left-contact-form {
  background-color: #FEEBD8;
  padding: 20px;
  color: #333;
}


.img-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}
.img-modal-content {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  background: #fff;
}
.img-modal-close {
  position: absolute;
  top: 30px;
  right: 50px;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 1100;
  text-shadow: 0 2px 8px #000;
}




.about-container {
  padding: 60px 15px;
}
.about-img {
  max-width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: contain;
}
footer{
  margin-top: 60px;
  padding: 20px 0;
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
}


footer div a{
  color: #000;
  text-decoration: none;
  margin: 0 10px;
}