/* Stil für den Text im Banner */
#banner {
  background-color:  #ffc107;
  text-align: center;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
}

.cartColumn{
  border: 1px solid lightgray; 
  border-radius:10px;
  padding: 5px; 
  margin-top: 10px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
}

.cartColumnContent{
  display: flex; 
  align-items: center;
}
 
p .cartPrice{
  text-align: right; 
  font-size: 18px;
}

 /*Slideshow for productsimages */
 .slideshow-container{
  position: relative;
  max-width: 500px;
  margin: auto;
}

.slideshow-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* Zentriert das Bild horizontal */
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.shxrt-img{
  border: 1px solid lightgray; 
  border-radius:10px;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Stil für den Bereich (Schienenteil) des Range-Elements */
input[type="range"] {
  width: 100%;
  height: 0px;
  background-color: #ccc; /* Hintergrundfarbe des Bereichs */
  -webkit-appearance: none; /* WebKit: Standard-Styling deaktivieren */
}

/* Stil für den Punkt (Daumen) des Range-Elements */
input[type="range"]::-webkit-slider-thumb {
  background-color: #ffc107; /* Hintergrundfarbe des Daumens */
  width: 20px; /* Breite des Daumens */
  height: 20px; /* Höhe des Daumens */
  border: none; /* Kein Rand um den Daumen */
  border-radius: 50%; /* Runde Form für den Daumen */
  cursor: pointer; /* Zeiger-Cursor beim Überfahren des Daumens */
}

/* Stil für den Punkt (Daumen) des Range-Elements in Firefox */
input[type="range"]::-moz-range-thumb {
  background-color: #ffc107; /* Hintergrundfarbe des Daumens --bs-warning*/
  width: 20px; /* Breite des Daumens */
  height: 20px; /* Höhe des Daumens */
  border: none; /* Kein Rand um den Daumen */
  border-radius: 50%; /* Runde Form für den Daumen */
  cursor: pointer; /* Zeiger-Cursor beim Überfahren des Daumens */
}

/* Ändere die Farbe des Fokus-Stils für Bootstrap-Elemente */
.btn:focus,
.input:focus,
.custom-select:focus,
.form-control:focus {
  box-shadow: 0 0 5px 2px #fd7e14; /* Ändere die Farbe auf Rot */
  /* Weitere Anpassungen, falls gewünscht */
}


/* Entfernen des Schatten-Effekts beim Klicken auf den Range-Balken */
.form-range::-webkit-slider-thumb:active {
  background-color: #fd7e14;
}
.form-range::-moz-range-thumb:active {
  background-color: #fd7e14;
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem #fd7e14;
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem #fd7e14;
}

/* CSS-Regel, um den Hover-Effekt von Bootstrap-Buttons zu entfernen */
.btn-no-hover:hover {
  /* Hier kannst du die Eigenschaften definieren, die du ändern möchtest.
     Zum Entfernen des Hover-Effekts kannst du beispielsweise die Hintergrundfarbe transparent machen. */
  background-color: transparent !important;
  /* Wenn du den Hover-Effekt für den Rahmen (Border) entfernen möchtest: */
  box-shadow: none !important;
  color: currentColor;
}
.btn-no-hover:focus {
    /* Wenn du den Hover-Effekt für den Rahmen (Border) entfernen möchtest: */
  box-shadow: none !important;
  color: currentColor;
}