:root {
  --background-color-hinten: #fff;
  --background-color-mitte: #333;
  --background-color-vorne: #000;
  --text-color-hinten: #eee;
  --text-color-mitte: #eee;
  --text-color-vorne: #eee;
}

/* Allgemeine Stile für die Tabelle */
#data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
    color: #eee;
    margin: 10px 0px 0px;
    padding: 10px;
    border: solid black 10px;
}

th, td {
    padding: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: normal; /* Entfernt fettgedruckte Schrift */
    border: none; /* Entfernt die individuelle Zell-Border */
}

thead tr:first-child th {
    border-bottom: none; /* Keine Linie unter der Überschrift */
    padding-bottom: 20px; /* Abstand zwischen Überschrift und nächster Zeile */
}

.grun {
  color: green;
  font-weight: bold;
}

select {
  outline: none; /* Entfernt den Standard-Umriss */
  border: 1px solid #666; /* Optional: eigener Rand */
}

select:focus {
  outline: none; /* Verhindert den orangefarbenen Rand beim Fokussieren */
  border-color: #666; /* Optional: Beibehaltung der Randfarbe beim Fokus */
}


tbody tr:last-child {
    border-bottom: none; /* Keine Linie unter der letzten Zeile */
}

.trborderunten {
  border-bottom: 1px solid #666; /* Linie unter der gesamten Zeile */
}

/* Anpassungen für Bildschirme unter 700px */
@media (max-width: 700px) {
    table {
        padding: 8px;
        margin-left: 0%;
        margin-right: 0%;
    }
}

/* Anpassungen für größere Bildschirme */
@media (min-width: 701px) {
    table {
        padding: 10px;
        margin-left: 0%;
        margin-right: 10%;
    }
}





.fahrzeugauswahlcontainer {
  margin: 8px 0px 0px;
  padding: 5px;
  background-color: #444;
  color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fahrzeugauswahlcontainer label {
  font-size: 14px;
  margin-right: 2px;
}

.fahrzeugauswahlcontainer select {
  width: 170px;
  height: 25px;
  padding: 0px 0px 0px 3px;
}


html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100%;
}

body {
    overscroll-behavior-x: none; /* Verhindert horizontales Scrollen bei Überlauf */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

.nachobenverschieben {
    transform: translateY(2px);
    margin-right: 5px;
}
.nachobenverschieben2 {
    transform: translateY(-2px);
}
.nachobenverschieben3 {
    transform: translateY(-3px);
}

.orbitron {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.orbitronkleiner {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px;
  font-weight: 400;
}



/*oben 1*/

.oben-1 {
  background-color: #000;
  padding-left: 13%;
  padding-right: 13%;
  display: flex;
  justify-content: space-between;
  height: 39px;
}

.oben-11 {
  background-color: #9a0000;
  width: 50%;
  padding: 8px 20px 7px;
  display: flex;
  gap: 10px;
}

.adresse {
  color: #eee;
  text-decoration: none;
}

.oben-12 {
  background-color: #444;
  width: 50%;
  padding: 8px 20px 7px;
  text-align: right;
  display: flex;
  justify-content: flex-end; /* Verschiebt alle Inhalte nach rechts */
  gap: 10px;
}

.email {
  color: #eee;
  text-decoration: none;
}

@media (max-width: 1030px) {
  .oben-1 {
    display: block;
    padding-left: 0%;
    padding-right: 0%;
    height: auto;
  }
  .oben-11 {
    width: 100%;
    padding: 8px 12px 8px;
    margin-bottom: 20px;
    background-color: #555;
  }
  .oben-12 {
    width: 100%;
    padding: 8px 12px 8px;
    text-align: left;
    display: none;
  }
}

/*oben 2*/

.oben-2 {
  padding-left: 13%;
  padding-right: 13%;
  display: flex;
  justify-content: space-between;
  height: 116px;
}

.oben-21 {
  width: 50%;
  padding: 20px 20px 20px;

}

.oben-21 {
  transition: box-shadow 0.3s ease; /* Übergang für den Schatten */
}


.oben-21-logo {
  height: 70px;
}

.oben-22 {
  width: 50%;
  padding: 10px 20px 10px;
  text-align: right;
  margin-top: 30px;
}

.telefon {
  color: #000;
  text-decoration: none;
  padding: 0px;

}

.oben-22-text {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #9a0000;
  font-size: 16px;
  padding: 0px;

}

@media (max-width: 1030px) {
  .oben-2 {
    display: block;
    padding-left: 0%;
    padding-right: 0%;
    height: auto;
  }
  .oben-21 {
    width: 100%;
    padding: 8px 12px 8px;
  }
  .oben-22 {
    width: 90%;
    padding: 8px 12px 18px;
    margin-top: 10px;
  }
  .telefon {
    font-size: 20px;
  }
  .oben-22-text {
    font-size: 12px;
  }

}

/*Handynavileiste*/

.handy-burger {
  font-size: 25px;
  color: #111;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: inline-block;
  transform: translate(-30px, -2px);
}

.handy-menu {
  flex-direction: column;
  padding: 10px;
  background-color: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  transform: translate(0px, 185px);
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);

}

.handy-menu a {
  text-decoration: none;
  color: #000;
}

.handyMenuClosed {
    display: none;
}

.handyMenuOpen {
    display: block;
}


@media (min-width: 1030px) {
  .handy-menu {
    display: none;
  }
  .handy-burger {
    display: none;
  }
}

@media (max-width: 1030px) {
  .oben-21-logo {
    height: 50px;
  }
  .oben-21 {
      width: 100%;
      display: flex;
      justify-content: space-between; /* Elemente links und rechts ausrichten */
      align-items: center; /* Elemente vertikal zentrieren, falls nötig */
      background-color: #fff;
      z-index: 10000000;
  }

}






/*oben 3*/

.oben-3 {
  padding-left: 14vw;
  padding-right: 14vw;
  display: flex;
  flex-wrap: wrap;
  background-color: #000;
  z-index: 100000000;
  font-size: 14px;
  height: 42px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  max-width: 100vw;
  overflow-x: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.oben-3 a {
  display: flex;
  align-items: center;
}


.suchbutton {
  color: #eee;
  border-right: solid 2px #9a0000;
  height: 100%;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;

}

.suchbutton:hover {
  color: #777;
}

#suchbuttonactive {
  background-color: #ddd;
  color: #666;
}

@media (max-width: 1030px) {
  .oben-3 {
    display: none;
  }
}


@media (max-width: 1030px) {
  .oben-2 {
    padding-left: 0%;
    padding-right: 0%;
  }
}


/* Hauptteil */

.rot {
  color: #9a0000;
}

.hauptteil1 {
  margin-top: 15px;
  margin-left: 14%;
  margin-right: 11%;
  display: flex;
}

.links {
  width: 75%;
  padding: 10px 20px 20px 10px;
  color: #000;
}

.rechts {
  width: 25%;
  background-color: #000;
  color: #666;
  padding: 15px;
  align-self: flex-start; /* Höhe passt sich nur dem Inhalt an */
}

.auswahlkasten {
  padding: 7px;
  background-color: #444;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kontaktanfrage {
  background-color: #9a0000;
  padding: 8px 16px;
  border-radius: 4px;
  display: inline-flex;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.kontaktanfrage:hover {
  background-color: #aa0000;
}

.kontakttext {
  padding-left: 10px;
  padding-right: 5px;
}

.kontaktemail {
  color: #eee;
  text-decoration: none;
}


@media (max-width: 800px) {
  .hauptteil1 {
    margin-left: 2%;
    margin-right: 10%;
    display: block;
  }
  .links {
    width: 100%;
    padding: 10px 14px 10px;
    color: #000;
  }

  .rechts {
    width: 100%;
    background-color: #000;
    color: #666;
    padding: 15px;
  }
  .einleitung {
    display: none;
  }
}
@media (min-width: 700px) {
  .einleitung2 {
    display: none;
  }
}



/*Unten 1*/

.unten-1 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  padding-left: 14%;
  padding-right: 14%;
}

.unten-1-spalte {
  width: 30%; /* Drei Spalten nebeneinander */
  text-align: left;
}

.unten-1-spalte img {
  width: calc(100% - 10px); /* Setzt die Breite auf 100% minus 10px */
  height: auto;
  padding: 5px;
  border: solid 1px #ddd;
}

.unten-1-schwarz {
  color: black;
}

.unten-1-rot {
  color: #9a0000;
}

.unten-1-block-text {
  text-align: justify; /* Blocktext */
  color: #777;
}

.unten-1-rechts {
  margin-top: 20px;
  text-align: right; /* Rechtsbündiger Text */
}

.unten-1-rechts a {
  font-size: 13px;
  background-color: #9a0000;
  color: white;
  padding: 8px 13px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: lighter;
}

.unten-1-rechts a:hover {
  background-color: #9a0000;
  opacity: 0.8; /* Optionaler Hover-Effekt */
}

/* Für Bildschirme unter 500px */
@media (max-width: 800px) {
  .unten-1 {
    flex-direction: column; /* Spalten untereinander anordnen */
    padding-left: 5%; /* Padding links und rechts auf 5% reduzieren */
    padding-right: 5%;
  }

  .unten-1-spalte {
    width: 100%; /* Spalten nehmen die gesamte Breite ein */
    margin-bottom: 20px; /* Optionaler Abstand zwischen den Spalten */
  }
}



/*footer*/
.footer {
  margin-top: 60px;
  background-color: #2b2b2b;
  color: #777;
  font-size: 14px;
  padding-left: 14%;
  padding-right: 14%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section {
  flex-basis: 23%;
  margin-bottom: 20px;
}

.footer h3 {
  margin-bottom: 10px;
  border-bottom: 1px solid #484848;
  padding-bottom: 10px;
}

.footer p, .footer a, .footer li {
  font-size: 14px;
  line-height: 1.5;
}

.footer-links p, .footer a {
  color:#777;
}

.footer-zeiten {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.footer-wochentag {
  text-align: left;
  width: 50%; /* Wochentag links */
}

.footer-zeit {
  text-align: right;
  width: 50%; /* Öffnungszeiten rechts */
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  color: #9a0000; /* Hover-Farbe in Rot */
}

.footer ul {
  list-style-type: none;
  padding: 0;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer-logo {
  max-width: 100px; /* Logo-Breite anpassen */
  margin-bottom: 10px;
}

.footer-social-link {
  display: inline-block;
  margin-top: 10px;
}

.footer-social-icon {
  width: 30px; /* Icon-Größe */
  height: 30px;
}

.footer-white {
  color: #fff;
}

@media (max-width: 830px) {
  .footer-section {
    flex-basis: 100%;
  }
}

@media (min-width: 830px) {
  .footer-zeit {
    padding-right: 50px;
  }

}

.auswahl-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auswahl-container select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    cursor: pointer;
    transition: border-color 0.3s;
}

.auswahl-container select:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

.auswahl-container select:hover:not(:disabled) {
    border-color: #9a0000;
}

.auswahl-container select:focus {
    outline: none;
    border-color: #9a0000;
    box-shadow: 0 0 0 2px rgba(154,0,0,0.2);
}

.result-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.result-container h3 {
    color: #9a0000;
    margin-bottom: 15px;
}

.result-container p {
    margin: 5px 0;
    line-height: 1.5;
}

/* Entfernt die Standard-Highlight-Farbe für Links auf mobilen Geräten */
* {
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  -tap-highlight-color: transparent;
}