.nav-tabs {
	--bs-nav-tabs-border-width: 1px;
	--bs-nav-tabs-border-color: #dee2e6;
	--bs-nav-tabs-border-radius: 0.375rem;
	--bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
	--bs-nav-tabs-link-active-color: #495057;
	--bs-nav-tabs-link-active-bg: #fff;
	--bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
	border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)
}

.nav-tabs .nav-link {
    position: relative; /* notwendig für das Pseudo-Element */
    /* optional: Übergang der Textfarbe */
    transition: color 0.3s ease;
    padding: 26px 26px 10px;
  }

  .nav-tabs li.nav-item {
    margin-bottom: 16px;
}
  
  /* Pseudo-Element für die Unterstreichung */
  .nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Abstand von unten – ggf. anpassen */
    left: 50%;    /* Start: Mitte, damit es unsichtbar ist */
    width: 0;
    height: 2px;  /* Höhe der Linie */
    background-color: white; /* Farbe der Linie – anpassen falls gewünscht */
    transition: width 0.3s ease, left 0.3s ease;
  }
  
  /* Für den aktiven Tab (oder beim Hover) soll die Linie über die volle Breite animiert einblenden */
  .nav-tabs .nav-link.active::after,
  .nav-tabs .nav-link:hover::after {
    left: 0;
    width: 100%;
  }
  

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
	isolation: isolate;
	border-color: var(--bs-nav-tabs-link-hover-border-color)
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled {
	color: var(--bs-nav-link-disabled-color);
	background-color: transparent;
	border-color: transparent
}

/* .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: var(--bs-nav-tabs-link-active-color);
	background-color: var(--bs-nav-tabs-link-active-bg);
	border-color: var(--bs-nav-tabs-link-active-border-color)
} */

.nav-tabs .dropdown-menu {
	margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.tab-content>.tab-pane {
	display: none
}

.tab-content>.active {
	display: block
}

ul#productTab {
    background-color: var(--shop-color);
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

div#productTabContent {
    margin-bottom: 50px;
}

@media (max-width: 768px) {

  ul#productTab {
    max-width: 100%;
  }

}