html, body {
  width: 100%;
  position: relative;
}

main {
  max-width: 100%;
  overflow-clip-margin: content-box;
}


.servicebild {
  width: 115vw;
  height: 30vh;
  transform: translate(-10%, 0%);
  object-fit: cover; /* Sorgt dafür, dass das Bild nicht verzerrt wird */
}
.servicetextgros {
  font-size: 26px;
}
.servicetextklein {
  font-size: 18px;
}
.service-text {
  position: absolute;
  top: 220px;
  z-index: 100;
  margin-left: 14vw;
  padding-right: 4px;
}
.serviceeinleitungcontainer{
  margin: 40px 10vw 0px 14vw;
  color: #000;
}

.serviceeinleitung {
  font-size: 16px;
}

@media (max-width: 500px) {
  .service-text {
    position: absolute;
    top: 230px;
    z-index: 100;
    margin-left: 14vw;
  }
  .servicebild {
    width: 150vw;
    transform: translateX(-15%);
  }
  .servicetextklein {
    font-size: 14px;
  }
  .serviceeinleitungcontainer{
    margin: 40px 8vw 0px 8vw;
    color: #000;
  }
  .serviceeinleitung {
    font-size: 14px;
  }
}



/* Für den Container und das allgemeine Layout */
.service-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: 14%;
  padding-right: 14%;
}

/* Media Query für Bildschirme unter 500px */
@media (max-width: 500px) {
  .service-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}


/* Für den Container und das allgemeine Layout */
.service-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #111;
}

/* Box-Styling */
.service-box {
  flex: 0 1 calc(50% - 10px); /* Zwei Boxen nebeneinander */
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-box img {
  width: calc(100% - 10px);
  height: auto;
  padding: 5px;
  border: solid 1px #ddd;
  margin: 20px 0px 20px;
}

.service-text-bold {
  font-weight: 450;
  font-size: 14px;
  color: #9a0000;
  margin-top: 10px;
  padding-left: 3px;
  padding-right: 3px;

}

.service-text-large {
  font-size: 20px;
  margin-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
}

.service-text-normal {
  color: #222;
  margin-top: 5px;
  font-size: 14px;
  padding-left: 3px;
  padding-right: 3px;
}

.service-text-red {
  color: #9a0000;
  margin-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
}

/* Media Query für Bildschirme unter 500px */
@media (max-width: 700px) {
  .service-box {
    flex: 0 1 100%; /* Boxen untereinander auf kleineren Bildschirmen */
    margin-bottom: 20px;
  }
}






.porsche-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 14vw;
  padding-right: 10vw;
  margin-top: 50px;
}

.porsche-image {
  flex-basis: 40%;
  margin-right: 30px;
  margin-bottom: 15px;
}

.porsche-image img {
  width: 100%;
  height: auto;
}

.porsche-text {
  flex-basis: 60%;
  color: #111;
}



.porsche-list {
  display: flex;
  justify-content: space-between;
}

.porsche-list ul {
  list-style: none;
  padding-left: 0;
}

.porsche-list ul li {
  color: #9a0000;
  margin-bottom: 5px;
  font-size: 14px;
}

.porsche-text p {
  margin-top: 20px;
  color: #666;
}

.porschetextunten {
  padding-left: 14vw;
  padding-right: 14vw;
  color: #444;
  font-size: 12px;
}

/* Media Query für Bildschirme unter 700px */
@media (max-width: 700px) {
  .porsche-container {
    flex-direction: column;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .porsche-image, .porsche-text {
    flex-basis: 100%;
  }

  .porsche-image {
    margin-right: 0px;
  }

  .porsche-list {
    flex-direction: column;
  }

  .porsche-list ul {
    margin-bottom: 20px;
  }

  .porschetextunten {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

.porsche-unten-container {
  display: flex;
  justify-content: space-between;
  padding-left: 14vw;
  padding-right: 14vw;
  flex-wrap: wrap;
  margin-top: 70px;
}

/* Bild Styling */
.porsche-unten-image {
  flex-basis: calc(33.33% - 10px); /* Jede Box nimmt etwa 33% des Containers ein */
  margin-bottom: 20px;
}

.porsche-unten-image img {
  width: 100%;
  width: calc(100% - 10px);
  height: auto;
  padding: 5px;
  border: solid 1px #ddd;
}

/* Media Query für Bildschirme unter 700px */
@media (max-width: 700px) {
  .porsche-unten-container {
    flex-direction: column;
    padding-left: 5vw;
    padding-right: 5vw;
    margin-top: 30px;
  }

  .porsche-unten-image {
    flex-basis: 100%; /* Die Bilder nehmen 100% Breite ein */
  }
}





.unternehmen-container {
  display: flex;
  justify-content: space-between;
  padding-left: 14vw;
  padding-right: 14vw;
  align-items: flex-start;
}

.unternehmen-image-slider {
  flex-basis: 40%;
  position: relative;
  margin-right: 30px;
}

.unternehmen-image-slider img {

    width: calc(100% - 10px);
    height: auto;
    padding: 5px;
    border: solid 1px #ddd;
}

.unternehmen-text-section {
  flex-basis: 60%;
  color: #222;
}

.unternehmen-oben {
  margin: 0px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
}

.unternehmen-unten {
  font-size: 20px;
  color: #9a0000;
  margin: 0px;
}

.unternehmen-normal {
  font-size: 12px;
}

.unternehmen-auszeichnen {
  color: #222;
  font-size: 16px;
  font-family: 'Orbitron', sans-serif;
}

.unternehmen-list {
  display: flex;
  justify-content: space-between;
}

.unternehmen-list ul {
  list-style: none;
  padding-left: 0;
}

.unternehmen-list ul li {
  color: #9a0000;
  margin-bottom: 5px;
  font-size: 12px;
}

.unternehmen-button {
  height: 23px;
  font-size: 15px;
  display: inline-block;
  padding: 8px 16px;
  background-color: #9a0000;
  color: white;
  text-decoration: none;
  margin-top: 45px;
  border-radius: 5px;
  margin-right: 50px;
}

.unternehmen-container2 {
  padding-left: 14vw;
  padding-right: 14vw;
}

/* Media Query für Bildschirme unter 700px */
@media (max-width: 700px) {
  .unternehmen-container {
    flex-direction: column;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .unternehmen-container2 {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .unternehmen-image-slider, .unternehmen-text-section {
    flex-basis: 100%;
  }
  .unternehmen-image-slider {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .unternehmen-list {
    display: block;
  }
  .unternehmen-button {
    margin-right: 0px;
  }
}





.unternehmen-galerie-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 13vw;
  margin-right: 13vw;
}

/* Bilder im Grid anordnen */
.unternehmen-galerie-container img {
  width: calc(25% - 10px); /* 4 Bilder nebeneinander bei mehr als 500px */
  margin-bottom: 10px;
  cursor: pointer; /* Ändert den Cursor beim Hover auf das Bild */
}

@media (max-width: 500px) {
  .unternehmen-galerie-container {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .unternehmen-galerie-container img {
    width: 100%; /* Bilder untereinander bei weniger als 500px */
  }
}

/* Overlay Styling */
.unternehmen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Dunkler Hintergrund */
  display: none; /* Standardmäßig ausgeblendet */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.unternehmen-fullscreen-img {
  max-width: 90%;
  max-height: 90%;
}







.unternehmen-karte-container {
  position: relative;
  height: 50vh;
  padding-left: 14vw;
  padding-right: 14vw;
}

#map {
  width: 100%;
  height: 100%;
}

/* Infobox Styling */
.unternehmen-karte-infobox {
  position: absolute;
  top: 10px;
  left: 16vw; /* Gleicher Abstand wie das Padding */
  background-color: white;
  padding: 10px;
  border-radius: 0px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.unternehmen-karte-infobox h3 {
  color: black;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.unternehmen-karte-infobox p {
  color: black;
  margin: 5px 0 0;
  font-size: 12px;
}

/* Media Query für Bildschirme unter 500px */
@media (max-width: 500px) {
  .unternehmen-karte-container {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .unternehmen-karte-infobox {
    left: 8vw; /* Gleicher Abstand wie das Padding bei kleinen Bildschirmen */
  }
}



.kontakt-container {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 14vw;
  padding-right: 14vw;
  color: #111;
}

.kontakt-formular {
  width: 65%;
}

.kontakt-info {
  width: 35%;
  font-size: 12px;
}

/* Styling für das Formular */
.kontakt-formular h2, .kontakt-info h2 {
  font-size: 16px;
  margin-bottom: 14px;
  color: #333;
}

.kontakt-formular label {
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
}

.kontakt-formular input, .kontakt-formular textarea {
  width: 70%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.kontakt-button {
  background-color: #9a0000;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.kontakt-button:hover {
  background-color: #8e1511;
}

/* Media Query für Bildschirme unter 500px */
@media (max-width: 700px) {
  .kontakt-container {
    flex-direction: column;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .kontakt-formular, .kontakt-info {
    width: 95%;
  }

  .kontakt-formular, .kontakt-info {
    margin-bottom: 20px;
  }
  .kontakt-formular input, .kontakt-formular textarea {
    width: 100%;
  }
}



.motor {
  width: 70%;
  margin-left: 18%;
}



.laptop-text-schief-container {
  position: relative;
  width: 80vw;
  transform: rotate(-7deg); /* 10 Grad gegen den Uhrzeigersinn gedreht */
}

/* Abstände für Bildschirme unter 700px */
@media (max-width: 600px) {
  .laptop-text-schief-container {
    top: -185px;
    left: 5vw;
    margin-bottom: -120px; /* Reduziert den zusätzlichen Platz darunter */
  }

  .laptop-text-schief-box {
    font-size: 13px; /* Schriftgröße im Handymodus */
  }
  .motor {
    width: 100%;
    margin-left: 0%;
  }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .laptop-text-schief-container {
    top: -200px;
    left: 5vw;
    width: 50vw;
    margin-bottom: -140px; /* Reduziert den zusätzlichen Platz darunter */
  }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .laptop-text-schief-container {
    top: -180px;
    left: 5vw;
    width: 50vw;
    margin-bottom: -120px; /* Reduziert den zusätzlichen Platz darunter */

  }
}

/* Abstände für Bildschirme über 700px */
@media (min-width: 1201px) {
  .laptop-text-schief-container {
    top: -270px;
    left: 5vw;
    width: 50vw;
    margin-bottom: -150px; /* Reduziert den zusätzlichen Platz darunter */

  }

  .laptop-text-schief-box {
    font-size: 20px; /* Schriftgröße auf größeren Bildschirmen */
  }
}

/* Styling für die Boxen um die einzelnen Texte */
.laptop-text-schief-box {
  background-color: rgba(170, 170, 170, 0.8); /* Hintergrund mit 0.7 Opazität */
  padding: 8px 20px;
  color: white;
  font-family: 'Orbitron', sans-serif;
  display: inline-block; /* Text-Boxen nur so breit wie der Text */
  margin: 10px 0; /* Abstand zwischen den Textzeilen */
  width: auto; /* Hintergrund geht nur über den Textinhalt */
}






.tacho {
  width: 100%;
  padding-left: 14vw;
  padding-right: 14vw;
  background-image: url('images/tacho.jpg');
  background-attachment: fixed; /* Hintergrund bleibt fixiert beim Scrollen */
  background-position: center; /* Bild bleibt immer zentriert */
  background-size: cover; /* Bild wird skaliert, um den gesamten Bereich zu füllen */
  color: #eee; /* Weißer Text */
  text-align: center; /* Text zentrieren */
  padding: 40px 0; /* Vertikales Padding für mehr Platz */
}
.untertacho {
  width: 100%;
  background-color: #2b2b2b;
  text-align: center;

}
.tuning-text2 {
  color: #eee;
  margin: 0px;
  font-size: 14px;
  padding: 25px 14vw 25px;
}

.motorgarantietext {
  font-size: 14px;
  padding-left: 14vw;
  padding-right: 14vw;
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 500px) {
  .tacho {
    padding-left: 0vw;
    padding-right: 0vw;
  }
  .tuning-text2 {
    padding: 15px 5vw 15px;
  }
  .motorgarantietext {
    font-size: 12px;
    padding-left: 5vw;
    padding-right: 5vw;
  }
}


@media (min-width: 801px) and (max-width: 1420px) {
  .tunting-auswahl {
    transform: translateY(-50px);

  }
}
@media (min-width: 1421px) {
  .tunting-auswahl {
    transform: translateY(-110px);

  }
}






@media (min-width: 501px) and (max-width: 1030px) {
  .service-text {
    position: absolute;
    top: 220px;
    z-index: 100;
    margin-left: 14vw;
  }
  .servicebild {
    width: 150vw;
    transform: translateX(-15%);
  }
  .servicetextklein {
    font-size: 14px;
  }
}