body {
  font-family: "Roboto", serif;
  background-color: #f06813;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.background-video {
  position: absolute; /* Absolut positioniert, um im Fluss zu bleiben */
  top: 0;
  left: 0;
  width: 100%; /* Nimmt die gesamte Breite ein */
  height: 400px; /* Schmale Höhe für das Video */
  object-fit: cover; /* Füllt den Container, schneidet ggf. Ränder ab */
  z-index: -1; /* Im Hintergrund */
}

img {
  width: 15%;
  padding-top: 30px;
  padding-left: 50px;
  border-radius: 35%;
  transform: rotate(17deg);
}

#leftmenu {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #363439;
  background-color: #A0A4A3;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
#leftmenu2 {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
  background-color: #A0A4A3;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.icons {
  display: flex;
  justify-content: center; /* Zentriert die Bilder horizontal */
  margin: 0;
  padding: 0;
  gap: 60px;
  width: 54%; /* Stellt sicher, dass das li-Element die gesamte Breite einnimmt */
}

.icons img {
  position: relative;
  z-index: 2; /* Zentriert die Bilder horizontal */
  margin-bottom: 20px;
  border-radius: 0;
  width: 200%;  /* Skaliert die Bilder auf 70% der Breite ihres Containers */
  transform: scale(1.1);  /* Vergrößert die Bilder um den Faktor 1.1 */
}
.icons a:hover {
  transform: scale(1.1); /* Vergrößert nur das Bild, über dem der Mauszeiger ist */
}

#leftmenu li a {
  text-decoration: none;
  color: #060606;
  padding: 15px 20px;
  display: block; /* Klickbarer Bereich wird blockiert */
}

#leftmenu li {
  border-bottom: 1px solid #060606;
}

#leftmenu li:last-child {
  border: none;
}

#leftmenu li a:hover {
  color: #fff;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.custom-width-2 {
  width: 600px; /* Beispielwert, kannst du anpassen */
  padding-bottom: 20px;
}

.dropdown-menu li {
  margin: 0;
  color: white;
}

.dropdown-menu a {
  padding: 10px 15px;
  display: block;
  color: white;
}
.dropdown-menu p {
  padding: 10px 15px;
  display: block;
  color: white;
}

.dropdown-menu a:hover {
  background-color: #555;
}


/* Standard-Submenu unsichtbar */
.dropdown-submenu .submenu {
  display: none;
  position: absolute;
  left: 100%; /* Rechts neben dem Hauptmenü anzeigen */
  top: 0;
  margin-top: 0;
  z-index: 1050; /* Sicherstellen, dass es über anderen Inhalten angezeigt wird */
}

/* Submenu nur bei Hover auf 'Bekleidung' anzeigen */
.dropdown-submenu:hover .submenu {
  display: block;
}

#left {
  margin-top: 150px;
  margin-left: 20px;
  width: 15%; /* Flexible Breite für kleinere Bildschirme */
  font-size: 2vw; /* Dynamische Schriftgröße */
  float: left;
}
#left2 {
  margin-top: 100px;
  margin-bottom: 200px;
  margin-left: 20px;
  width: 15%; /* Flexible Breite für kleinere Bildschirme */
  font-size: 2vw; /* Dynamische Schriftgröße */
  float: left;
}
#right {
  margin-top: 100px;
  font-size: 1.2vw;
  margin-right: 20px;
  width: 80%; /* Anpassbar an Bildschirmgröße */
  float: right;
  padding-bottom: 60px;
}
#abo {
  margin-right: 500px;
  background-color: #A0A4A3;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
#abo h1 {
  text-align: center;
  font-size: 5vw;
}
#abo p {
  margin-left: 10px;
}
#right2 {
  margin-top: 100px;
  font-size: 1.5vw;
  margin-right: 20px;
  width: 54%; /* Anpassbar an Bildschirmgröße */
  float: right;
  padding-bottom: 60px;
}

#right2 a {
  font-size: 1vw;
  margin-left: 25px;
}

#right2 p {
  margin-left: 25px;
}

#right3 {
  display: flex;
  flex-direction:column;
  align-items: center; /* Zentriert die Inhalte horizontal */
  gap: 20px; /* Abstand zwischen den Containern */
  width: 50%; /* Breite des Containers */
  margin: 0 auto; /* Zentriert den gesamten Bereich */
  padding-bottom: 60px;
  padding-top: 100px;
}

#right3 a {
  text-decoration: none;
  color: #272729;
}

#right3 a:hover {
  text-decoration: underline;
}

.motorrad-container {
  text-align: left; /* Zentriert Bild und Text */
  padding-bottom: 50px;
}
.motorrad-container img:hover {
  transform: scale(1.1); /* Vergrößerung beim Hover */
}
.helm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
  gap: 20px; /* Abstand zwischen den Elementen */
  justify-items: center; /* Zentriert die Inhalte horizontal */
  padding: 20px;
  padding-bottom: 120px;
}

/* Grundlegendes Styling der Helm-Items */
.helm-item {
  position: relative;
  display: inline-block;
  margin: 20px;
  text-align: center;
}

/* Das Overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.7); /* Dunkler transparent-farbiger Hintergrund */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  border-radius: 20px;
}

/* Overlay anzeigen, wenn Maus über das Bild fährt */
.helm-item:hover .overlay {
  opacity: 1;
  visibility: visible;
}

/* Styling der Buttons und Texte im Overlay */
.overlay p {
  margin: 10px 0;
  font-size: 16px;
}

.overlay a.btn {
  color: rgb(1, 1, 1);
  background-color:#f06813;
  border: 2px solid rgb(17, 15, 15);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.3vw;
  padding: 10px;
  cursor: pointer;
  border-radius: 20px;
  margin-top: 20px;
}

.overlay a.btn:hover {
  color: #fff;
  text-decoration: none; 
}

.helm-item img {
  margin-top: 50px;
  width: 300px; /* Breite der Helm-Bilder */
  height: 300px;
  transform: rotate(0);
  border-radius: 0;
}

.helm-item h2 {
  margin-top: 20px;
  margin-left: 40px;
  font-size: 1.2vw;
}

#right3 img {
  width: 80%; /* Passt die Bildgröße an */
  max-width: 600px; /* Begrenzung der maximalen Breite */
  margin-bottom: 20px; /* Abstand zwischen Bild und Beschreibung */
  border-radius: 0;
}
#right h2 {
  text-align: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  position: relative;
}

.header img {
  padding-top: 10px;
  padding-left: 20px;
  flex: 0 0 auto; /* Fixiere die Breite des Bildes */
  margin-right: 30px; /* Abstand zwischen Bild und Überschrift */
}

.header h1 {
  flex: 1; /* Überschrift nimmt den verbleibenden Platz ein */
  text-align: center; /* Text innerhalb der Überschrift zentrieren */
  font-size: 4vw;
  margin: 0; /* Entfernt zusätzlichen Rand um die Überschrift */
  color:white;
  background: #333;
  padding: 110px;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

#footer {
  position: relative;
  clear: both;
  width: 100%;
  height: 100px;
  background: #333;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 30px;
}

#copyright {
  font-size: 0.9rem;
  margin-top: 20px;
}

#copyright a {
  text-decoration: none;
  color: #fff;
}

#copyright a:hover {
  text-decoration: underline;
}

.text-center img{
  margin-top: 20px;
  width: 4%;
  border-radius: 0;
  transform: rotate(0);
}

@media (max-width: 2000px) {
  .header img {
    width: 18%;
  }
  .text-center img{
    width: 5%;
  }
}

@media (max-width: 1400px) {
  #right {
    margin-top: 150px;
  }
}

/* Media Queries für Responsivität */
@media (max-width: 1100px) {
  .header h1 {
    font-size: 4vw; /* Verkleinere die Schriftgröße im Header */
    padding: 75px;
  }

  .header img {
    width: 20%;
  }

  #left {
    font-size: 2vw;
    width: 20%; /* Linkes Menü nimmt weniger Platz ein */
  }

  #left2 {
    font-size: 2vw;
    width: 20%; /* Linkes Menü nimmt weniger Platz ein */
  }

  #right {
    font-size: 1.5vw;
    margin-top: 150px;
    width: 75%;
  }

  #right2 {
    padding-left: 0;
    font-size: 1.5vw;
  }

  #right2 a {
    font-size: 1.5vw;
  }

  #right2 input[type="text"] {
    width: 60%;
  }
  #right2 input[type="email"] {
    width: 60%;
  }
  #right2 input[type="password"] {
    width: 60%;
  }
  #right2 textarea {
    width: 60%;
  }

  #right3 {
    font-size: 1.5vw;
    width: 75%;
  }

  .background-video {
    height: 350px; /* Verkleinere die Höhe des Videos */
  }

  #abo {
    margin-right: 300px;
  }

  #abo h1 {
    font-size: 3vw;
  }

  #abo p {
    font-size: 1.5vw;
  }

  .text-center img{
    margin-top: 20px;
    width: 8%;
    border-radius: 0;
    transform: rotate(0);
  }

  .helm-item h2 {
    margin-top: 20px;
    margin-left: 40px;
    font-size: 2vw;
  }

  #right3 .motorrad-container img {
    margin-left: 100px;
  }
}

@media (max-width: 820px) {
  .header h1 {
    font-size: 5vw;
    padding: 45px;
  }

  #left {
    font-size: 2vw;
    width: 20%;
    margin-left: 5px;
    margin-top: 120px;
  }

  #left2 {
    font-size: 2vw;
    width: 20%;
    margin-left: 5px;
    margin-top: 80px;
  }

  .icons {
    width: 40%;  /* Verkleinert die Breite des Containers bei kleinen Bildschirmen */
    gap: 20px;
  }

  .icons img {
    width: 160%; /* Reduziert die Bildgröße auf 150% des Containers */
  }

  .icons .cart-count {
    top: 8px; /* Leicht nach oben verschoben */
    right: -8px; /* Leicht nach links verschoben */
    font-size: 13px; /* Kleinere Schriftgröße */
    min-width: 20px; /* Etwas kleiner */
  }

  #right {
    font-size: 2.5vw;
    width: 70%;
    margin-top: 120px;
  }

  #right2 {
    padding-left: 0;
    font-size: 2.5vw;
  }

  #right2 a {
    font-size: 2.5vw;
  }

  #right2 input[type="text"] {
    width: 90%;
  }
  #right2 input[type="email"] {
    width: 90%;
  }
  #right2 input[type="password"] {
    width: 90%;
  }
  #right2 textarea {
    width: 90%;
  }

  #right3 {
    font-size: 2.5vw;
  }

  .background-video {
    height: 200px;
  }

  .text-center img{
    margin-top: 20px;
    width: 10%;
    border-radius: 0;
    transform: rotate(0);
  }

  .helm-item h2 {
    margin-top: 20px;
    margin-left: 40px;
    font-size: 2.5vw;
  }

  #abo {
    margin-right: 100px;
  }

  #abo h1 {
    font-size: 3.5vw;
  }

  #abo p {
    font-size: 2vw;
  }

  #right .styled-button {
    font-size: 2vw;
  }

  #right2 .styled-button {
    font-size: 2vw;
  }

  #right3 .styled-button {
    font-size: 2vw;
  }

  .overlay .styled-button {
    font-size: 2vw;
  }

  .styled-button {
    font-size: 2vw;
  }

  .motorrad-container {
    text-align: left; /* Zentriert Bild und Text */
  }

  .motorrad-container h2 {
    margin-top: 10px;
    margin-left: 100px;
  }

  #right3 .motorrad-container img {
    margin-left: 70px;
  }

  .helm-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .helm-item h2 {
    margin-top: 20px;
    margin-left: 40px;
    font-size: 3vw;
  }
  
  .overlay {
    position: absolute;
    top: 50px; /* Verschiebt das Overlay etwas nach unten */
    height: 90%;
    z-index: 0; /* Stellt sicher, dass es hinter dem Menü liegt */
  }

  #right3 table {
    max-width: 100%;  /* Maximale Breite auf 100% setzen */
    margin-top: 0;
    margin-left: 20px;
  }
  #right3 th {
      font-size: 18px;  /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */
      padding: 8px;  /* Noch weniger Padding */
  }
  #right3 td {
      font-size: 18px;  /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */
      padding: 8px;  /* Noch weniger Padding */
  }
  #right3 th, caption {
      font-size: 20px;  /* Noch kleinere Schriftgröße für Überschriften */
  }
}

@media (max-width: 480px) {
  img:not(.text-center img, .motorrad-container img, .helm-grid img, .icons img) {
    display: none; /* Alle Bilder, die NICHT in .text-center sind, ausblenden */
  }

  .header h1 {
    color:white;
    background: #333;
    margin-top: 10px;
    font-size: 10vw;
    text-align: center;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  }

  #left {
    font-size: 3vw;
    margin-top: 200px;
    margin-left: 10px;
  }

  #left2 {
    font-size: 3vw;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 0 !important;
  }

  #leftmenu {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    position: relative; /* Stellt sicher, dass es über dem Overlay liegt */
    z-index: 1; /* Hebt das Menü über das Overlay */
    box-shadow: none;
    justify-content: space-between;
  }

  #leftmenu li {
    width: 200%;
    margin: 4px;
    border-bottom: none;
  }

  #leftmenu li a {
    display: flex; /* Flexbox für gleichmäßige Höhe */
    align-items: center; /* Zentriert den Text vertikal */
    justify-content: center; /* Optional: Zentriert den Text horizontal */
    background-color: #A0A4A3;
    border-radius: 5px;
    height: 50px; /* Einheitliche Höhe für alle Links */
    padding: 5px 15px; /* Innenabstand */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Unterstreichung entfernen */
    white-space: normal;/* Erlaubt Zeilenumbruch */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  }

  #leftmenu li ul li {
    margin-right: 140px;
    width: 45%;
    transform: translateX(-5%); /* Verschiebt das Dropdown 100% nach links */
  }

  #leftmenu ul li a {
    justify-content: left; /* Optional: Zentriert den Text horizontal */
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  #right {
    font-size: 4vw;
    width: auto;
    margin-left: 10px;
    margin-top: 20px;
  }

  #right2 {
    padding: 0;
    margin-top: 30px;
    margin-bottom: 100px;
    font-size: 4vw;
    width: 80%;
  }

  #right2 a {
    font-size: 4vw;
  }

  #right2 input[type="text"] {
    width: 90%;
  }
  #right2 input[type="email"] {
    width: 90%;
  }

  #right input[type="email"] {
    width: 65%;
  }

  #right2 input[type="password"] {
    width: 90%;
  }
  #right2 textarea {
    width: 90%;
  }

  #right3 {
    font-size: 4vw;
    margin-right: 60px;
  }

  #right3 img {
    margin-top: 50px;
  }

  #right3 h2 {
    margin-left: 30px;
    margin-top: 100px;
    margin-bottom: 100px;
  }

  #right3 table {
    max-width: 100%;  /* Maximale Breite auf 100% setzen */
    margin-top: 50px;
    margin-left: 20px;
  }
  #right3 th {
      font-size: 13px;  /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */
      padding: 4px;  /* Noch weniger Padding */
  }
  #right3 td {
      font-size: 13px;  /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */
      padding: 4px;  /* Noch weniger Padding */
  }
  #right3 th, caption {
      font-size: 15px;  /* Noch kleinere Schriftgröße für Überschriften */
  }

  #abo {
    margin-right: 100px;
  }

  #abo h1 {
    font-size: 4vw;
  }

  #abo p {
    font-size: 3vw;
  }

  .background-video {
    height: 250px;
  }

  .icons {
    display: flex;
    margin-top: 50px; /* Etwas Abstand nach oben */
    padding: 0;
    gap: 0; /* Abstand zwischen den Icons */
    width: 100%; /* Maximale Breite */
  }

  .icons img {
    position: relative;
    z-index: 2;
    border-radius: 0;
    width: 80px;  /* Verkleinerte Breite der Icons */
    height: auto; /* Verhindert Verzerrung */
  }

  .cart-icon {
    position: relative;
    display: inline-block;
    z-index: 1;  /* Warenkorb-Icon hat niedrigeren z-index */
    margin-right: 700px;
  }

  .account-icon {
    position: relative;
    display: inline-block;
    z-index: 2; /* Konto-Icon hat höheren z-index */
  }

  .icons .cart-count {
    top: 12px; /* Noch weiter nach oben */
    right: 20px; /* Direkt am Rand */
    font-size: 12px; /* Kleinere Schriftgröße */
    min-width: 18px; /* Kleinere Mindestbreite */
  }

  #copyright {
    font-size: 2.5vw;
  }

  .text-center img{
    margin-top: 20px;
    width: 20%;
    border-radius: 0;
    transform: rotate(0);
  }

  .helm-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-right: 140px;
  }

  .helm-item h2 {
    margin-top: 20px;
    margin-left: 40px;
    font-size: 5vw;
  }
  
  .helm-grid img {
    margin-top: 100px;
    margin-bottom: 10px;
  }

  .overlay {
    position: absolute;
    top: 115px; /* Verschiebt das Overlay etwas nach unten */
    height: 75%;
    z-index: 0; /* Stellt sicher, dass es hinter dem Menü liegt */
  }

  .custom-width-2 {
    width: 300px; /* Beispielwert, kannst du anpassen */
    padding-bottom: 20px;
  }

  #right .styled-button {
    font-size: 3.5vw;
  }

  #right2 .styled-button {
    font-size: 3.5vw;
  }

  #right3 .styled-button {
    font-size: 3.5vw;
  }

  .styled-button {
    font-size: 15px;
  }

  .overlay .styled-button {
    font-size: 3.5vw;
  }

  #right3 .motorrad-container img {
    width: 100%;
    margin-left: 0;
  }

  #right3 .motorrad-container h2 {
    margin-top: 0;
    margin-bottom: 0 !important;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    color: black;
    background-color:#f06813;
    width: 50%; 
    padding: 12px; 
    margin: 8px 0; 
    border: 1px solid #0f0f0f; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    font-size: 17px;
}
textarea {
    height: 200px;
}
.styled-button {
  color: rgb(1, 1, 1);
  background-color:#f06813;
  border: 2px solid rgb(17, 15, 15);
  text-decoration: none;
  margin-left: 20px;
  font-weight: 600;
  font-size: 1.3vw;
  padding: 10px;
  cursor: pointer;
  border-radius: 20px;
}
  .styled-button:hover {
  color: #fff;
  text-decoration: none; 
}

.cart-icon {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.cart-count {
  position: absolute;
  top: 10px;
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
  min-width: 22px;
  text-align: center;
}