/* Animation für den Text */
@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Stil für den Scroll-Container */
.card-header {
    overflow: hidden; /* Versteckt alles, was aus dem Header herausscrollt */
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
}

/* Stil für den animierten Text */
.scroll-text {
    display: inline-block; /* Muss ein Inline-Block sein, damit die Animation funktioniert */
    padding-left: 50%; /* Startet außerhalb des sichtbaren Bereichs */
    animation: marquee 15s linear infinite; /* 15s Geschwindigkeit, linearer Ablauf, Endlosschleife */
}

/* Stil für den Marquee-Text bei :hover */
.scroll-text:hover {
    animation-play-state: paused; /* Die Animation pausiert, wenn man mit der Maus darüber fährt */
}


strong {
font-weight:550; /*normal;*/
}
/* CSS für die Bildzentrierung und -größe im Carousel */
.carousel-img-fixed-height {
  max-height: 80vh; 
  width: 100% !important;
  object-fit: contain;
  margin: auto;
}

/* CSS für den transparent-schwarzen Hintergrund des Modals */
#imageModal .modal-content {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border: none;
}

/* WICHTIG: Diese Regel entfernt den Standard-Padding im Modal-Body auf schmalen Bildschirmen */
@media (max-width: 768px) {
    #imageModal .modal-body {
        padding: 0;
    }
}


/* Standard-Breite für die Buttons in allen Sprachen (DE, EN, RU) */
.nav-link.sales-link,
.nav-link.new-products-link {
    width: 120px !important;
    text-align: center;
}

/* Spezielle Breite für Spanisch (überschreibt die Standard-Regel) */
html[lang="es"] .nav-link.sales-link,
html[lang="es"] .nav-link.new-products-link {
    width: 150px !important;
}

/* Spezieller Stil für die Button-Links, damit sie den ganzen Platz ausfüllen */
.navbar-nav .nav-item .nav-link.sales-link,
.navbar-nav .nav-item .nav-link.new-products-link {
    width: 100% !important; /* Der Button füllt jetzt die gesamte Breite des li-Elements aus */
    text-align: center;
}

/* Genereller Stil für alle Menüpunkte, die keine speziellen Klassen haben */
.nav-link {
    /* Textfarbe des Links */
    color: #4a4a4a !important; 
    
    /* Leichter Grauton, der sich vom Hintergrund abhebt */
    font-weight: 500 !important; 
    
    /* Abstand oben und unten verringern, um Einheitlichkeit zu den Buttons zu schaffen */
    padding: 1px 7px !important;
    
    /* Sanfter Übergangseffekt für Hover und Fokus */
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover-Effekt: Ändert die Farbe oder den Hintergrund, wenn der Nutzer mit der Maus darüberfährt */
.nav-link:hover {
    color: #000000 !important;
    background-color: #f1f1f1 !important; /* Sehr dezenter, heller Hintergrund */
    border-radius: 5px;
}

/* Aktiver Menüpunkt: Hebt den aktuell besuchten Link hervor */
.nav-link.active {
    color: #000000 !important;
    background-color: #e0e0e0 !important; 
    border-radius: 5px;
    font-weight: 600 !important;
}

/* Wenn Sie eine subtile Unterstreichung für den aktiven Menüpunkt bevorzugen */
.nav-link.active-underline {
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 3px !important; /* Passt den Abstand an, damit die Linie sichtbar ist */
}


/* Style für den Navigations-Link SALES*/
.nav-item .nav-link.sales-link {
  /* Hintergrundfarbe: Eine auffällige Akzentfarbe */
  background-color: #e53935 !important;
  
  /* Textfarbe: Weiß, um einen guten Kontrast zu schaffen */
  color: #ffffff !important;
  
  /* Innenabstand (Padding), um den Button größer zu machen */
  padding: 1px 7px !important;
  
  /* Abgerundete Ecken für ein weicheres Erscheinungsbild */
  border-radius: 5px !important;
  
  /* Schriftgewicht, um den Text dicker zu machen */
  font-weight: bold !important;
  
  /* Übergangseffekt für Hover-Animationen */
  transition: all 0.3s ease !important;
}

/* Hover-Effekt: Ändert die Hintergrundfarbe und hebt den Button hervor */
.nav-item .nav-link.sales-link:hover {
  background-color: #c62828 !important; /* Eine dunklere Rot-Nuance beim Überfahren */
  transform: translateY(-2px) !important; /* Hebt den Button leicht an */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Fügt einen Schatten hinzu */
}

/* Optional: Kennzeichnen Sie den Link mit einem "Sale"-Label */
.nav-item .nav-link.sales-link::before {
  content: '⚡'; /* Ein Blitz-Emoji oder ein anderes Icon */
  margin-right: 5px;
}

/* Style für den Navigations-Link "New" */
.nav-item .nav-link.new-products-link {
  /* Hintergrundfarbe: Eine helle, frische Akzentfarbe */
  background-color: #26a69a !important; /* Türkis */
  
  /* Textfarbe: Weiß, um einen guten Kontrast zu schaffen */
  color: #ffffff !important;
  
  /* Innenabstand (Padding) anpassen */
  padding: 1px 7px !important;
  
  /* Abgerundete Ecken für ein weicheres Erscheinungsbild */
  border-radius: 5px !important;
  
  /* Schriftgewicht, um den Text dicker zu machen */
  font-weight: bold !important;
  
  /* Übergangseffekt für Hover-Animationen */
  transition: all 0.3s ease !important;
  
  /* Optional: Leichter Schatten, um den Button hervorzuheben */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover-Effekt: Ändert die Hintergrundfarbe und hebt den Button leicht hervor */
.nav-item .nav-link.new-products-link:hover {
  background-color: #00796b !important; /* Eine dunklere Türkis-Nuance beim Überfahren */
  transform: translateY(-1px) !important; /* Hebt den Button leicht an */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Fügt einen stärkeren Schatten hinzu */
}





.my-row {
  align-items: center;

}
.my-button {
  padding-top:0px;
  padding-bottom:5px;
}



#cartItems .cartitem{
  border-bottom: 1px solid #DDD;
  padding-top:15px;
  padding-bottom: 15px}
#cartItems .cartitem .ProductPicture{
  width:100%;
  heigt:auto}

#cartItems .price{
  font-weight:bold;
  color:red}

  #cartItems .cartItemHeader {
    border-bottom: 1px solid #DDD;
}


.nav-tabs .nav-link:not(.active) {
    border: 1px solid #dee2e6; /* Dünner Rahmen für inaktive Tabs */
    border-bottom-color: transparent; /* Verhindert eine doppelte Linie am unteren Rand */
    margin-right: -1px; /* Hilft bei der Ausrichtung und Vermeidung von Lücken */
    border-radius: .25rem .25rem 0 0; /* Abgerundete Ecken oben */
}

.nav-tabs .nav-link:not(.active):hover {
    border-color: #dee2e6; /* Behält den Rahmen auch beim Hover bei */
    background-color: #e9ecef; /* Leicht grauer Hintergrund beim Hover */
}

/* Optional: Anpassung für den aktiven Tab, falls der untere Rahmen nicht bündig ist */
.nav-tabs .nav-link.active {
    border-color: #dee2e6 #dee2e6 #fff; /* Gleicher Rahmen oben/rechts/links, unten weiß */
    background-color: #fff;
}




.jumbotron{
  padding-top:30px;
  padding-bottom:30px;
  margin-bottom:30px;
  color:inherit;
  background-color:#eee}
.jumbotron .h1,.jumbotron h1{
  color:inherit}
.jumbotron p{
  margin-bottom:15px;
  font-size:21px;
  font-weight:200}
.jumbotron>hr{
  border-top-color:#d5d5d5}
.container .jumbotron,.container-fluid .jumbotron{
  padding-right:15px;
  padding-left:15px;
  border-radius:6px}
.jumbotron .container{
  max-width:100%}
@media screen and (min-width:768px){
  .jumbotron{
    padding-top:48px;
    padding-bottom:48px}
  .container .jumbotron,.container-fluid .jumbotron{
    padding-right:60px;
    padding-left:60px}
  .jumbotron .h1,.jumbotron h1{
    font-size:63px}
  }
.text-left{
  text-align:left}
.text-right{
  text-align:right}
.text-center{
  text-align:center}
.text-justify{
  text-align:justify}
.text-nowrap{
  white-space:nowrap}
.text-lowercase{
  text-transform:lowercase}
.text-uppercase{
  text-transform:uppercase}
.text-capitalize{
  text-transform:capitalize}
.text-muted{
  color:#777}
.text-primary{
  color:#337ab7}





.ecommerce-gallery .lightbox{position:relative;overflow:hidden}.ecommerce-gallery .lightbox img{height:450px;object-fit:contain}@media(max-width: 768px){.ecommerce-gallery .lightbox img{height:150px}}.ecommerce-gallery .lightbox img.animating{position:absolute;left:0;top:0;z-index:-1;width:100%}.ecommerce-gallery img:not(.ecommerce-disabled):not(.ecommerce-gallery-main-img){cursor:zoom-in;border-bottom:2px solid rgba(0,0,0,0)}.ecommerce-gallery img:not(.ecommerce-disabled):not(.ecommerce-gallery-main-img).active{border-color:orange}.ecommerce-gallery .ecommerce-gallery-main-img{display:none;transition:all .3s;transform-origin:center center}.ecommerce-gallery .ecommerce-gallery-main-img.active{display:block;transition:none}@media(max-width: 768px){.ecommerce-gallery .multi-carousel:not(.vertical) .multi-carousel-inner .multi-carousel-item img{max-height:50px}}.ecommerce-gallery.vertical .lightbox{height:100%;display:flex;justify-content:center;align-items:center}.ecommerce-gallery.vertical .lightbox img{height:350px}@media(max-width: 768px){.ecommerce-gallery.vertical .lightbox img{height:100px}}@media(max-width: 768px){.ecommerce-gallery.vertical .multi-carousel.vertical{height:100px}}/*# sourceMappingURL=ecommerce-gallery.min.css.map */