.bg-grey, .bg-color-grey {
    background-color: var(--grey-200) !important;
}

.scrollable-sidebar-nav {
	height: 80vh; /* fester, stabiler Wert statt calc() */
	overflow-y: auto;
	padding-right: 10px;

	/* Scrollbar-Styling für Firefox */
	scrollbar-width: thin;
	scrollbar-color: #888 #f0f0f0;

	/* Scrollbar-Styling für Chrome/Safari/Edge */
	backface-visibility: hidden;
	transform: translateZ(0);
}

@media (prefers-color-scheme: dark) {
	.scrollable-sidebar-nav {
		scrollbar-color: #666 #222;
	}
}

.scrollable-sidebar-nav::-webkit-scrollbar {
	width: 6px;
}

.scrollable-sidebar-nav::-webkit-scrollbar-thumb {
	background-color: #006e2e;
	border-radius: 3px;
}

.product-box-container {
    margin-bottom: 20px;
}

.product-box {
    display: flex;
    align-items: stretch; /* Stellt sicher, dass alle Elemente die gleiche Höhe haben */
    border-radius: 10px; /* Border-Radius für die gesamte Box */
    background-color: #f7f7f7;
    margin-bottom: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    position: relative; /* Wichtig für die Positionierung des Rankings */
}

.product-info {
    flex-grow: 1;
    padding-right: 60px; /* Rechter Innenabstand, angepasst an die Breite des Rankings */
}

.product-ranking {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px; /* Feste Breite des Rankings */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #006e2e;
    color: #fff;
    font-size: 24px;
	font-weight:bold;
    border-radius: 0 10px 10px 0;
}

.product-ranking .ranking-number {
    background-color: #fff; /* Weißer Hintergrund */
    color: #006e2e; /* Standard-Bootstrap-Blau */
    border-radius: 50%; /* Kreisform */
    width: 40px; /* Breite des Kreises */
    height: 40px; /* Höhe des Kreises */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Anpassung der Schriftgröße, falls erforderlich */
    font-weight: bold; /* Optional: Fettschrift */
    line-height: 1; /* Für eine zentrierte Ausrichtung der Nummer */
    position: absolute; /* Positionierung innerhalb des Rankings */
    left: 50%; /* Zentrierung auf der horizontalen Achse */
    top: 50%; /* Zentrierung auf der vertikalen Achse */
    transform: translate(-50%, -50%); /* Ausgleich der Verschiebung */
}

.ranking-number {
    margin: 0;
}

.product-box:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.product-box .product-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 15px;
}

.product-box .product-info {
    flex-grow: 1;
}

.product-box .product-info h2 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #333;
}

.product-box .product-info p {
    font-size: 14px;
    margin-bottom: 10px;
}

.product-box .btn-primary {
    background-color: #007bff;
    border: none;
    padding: 8px 16px;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.1s ease-in-out;
}

.product-box .btn-primary:hover {
    background-color: #159B2C;
}

/* Stil für die Shop-Auflistung */
.shop-listing {
    margin: 20px 0;
    text-align: center;
}

.section-title {
    font-size: 24px;
    margin-bottom: 30px;
}

.shop-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.shop-card {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shop-image {
    width: 100%; /* Setzt die Breite des Bildes auf die volle Breite der Box */
    height: 180px; /* Festgelegte Höhe für alle Bilder */
    object-fit: contain; /* Passt das Bild an, sodass es komplett sichtbar ist */
    object-position: center; /* Zentriert das Bild in der Box */
    border-bottom: 1px solid #ddd; /* Optional: Fügt eine Trennlinie zwischen Bild und Text hinzu */
    padding:20px;
}

.shop-info {
    padding: 15px;
	box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2); /* Innerer Schatten */
    transition: box-shadow 0.3s ease-in-out; /* Optional: Sanfter Übergang für den Schatten-Effekt */
}

.shop-info h3 {
    margin: 10px 0;
    color: #006e2e;
}

.shop-card .shop-info h3{
	font-weight:bold;
	color:#333;
}

.shop-info p {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
}

.shop-link {
    display: inline-block;
    background-color: #006e2e;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.1s;
}

.shop-link:hover {
    background-color: #159B2C;
	color:#fff;
	text-decoration:none;
}

.table-wrapper {
        overflow-x: auto;
      }
      .table thead {
        background-color: #006e2e;
        color: white;
      }
      .table tbody tr:hover {
        background-color: rgba(0, 110, 46, 0.1);
}

.page-header.page-header-modern.page-header-md{
	padding:25px 0 !important;
}

@media (max-width: 767.98px) {
    h2.overlay-responsive {
        font-size: 1.5rem !important;
		line-height: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    h2.overlay-responsive {
        font-size: 1.3rem !important;
		line-height: 1.75rem !important;
    }
}