html {
    padding-top: 0px !important;
	margin-top: 0px !important;
}

#vt-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.vt-main-start .vt-categories-container {
    padding-top: 20px !important;
}

/* Lade-Spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Positioniert den Spinner relativ zum Viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparenter Hintergrund */
    z-index: 1000; /* Hoch genug, um über anderen Elementen zu sein */
}

.spinner {
    border: 5px solid #f3f3f3; /* Hellgrauer Rand */
    border-top: 5px solid #3498db; /* Blauer Rand oben */
    border-radius: 50%; /* Kreisform */
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite; /* Rotationseffekt */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Stil für die Breadcrumb-Navigation */
.vt-breadcrumb {
    background-color: #f5f5f5;
    padding: 10px 0;
    height: 80px;
    line-height: 80px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Stellt sicher, dass die Breadcrumb über anderen Elementen bleibt */
}

.vt-breadcrumb a, .vt-breadcrumb span {
    color: #333;
    text-decoration: none;
    padding: 0 30px;
	padding-left: 50px;
    font-size: 20px;
    position: relative;
    background-color: #e0e0e0;
    margin-right: -10px;
	outline: 0;
}

.vt-breadcrumb span {
	color: #fff;
}

/* Pfeil-Trenner-Stil */
.vt-breadcrumb a::after, .vt-breadcrumb span::before {
    content: '';
    position: absolute;
    top: 0;
    right: -18px;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
}

.vt-breadcrumb a::after {
    border-left: 20px solid #e0e0e0; /* Farbe des Pfeils */
    z-index: 1;
}

/* Stil für den ersten Link (Startseite) */
.vt-breadcrumb a:first-child {
    background-color: #d6d6d6;
}

.vt-breadcrumb a:first-child::after {
    border-left-color: #d6d6d6;
}

/* Entfernen des Trenners am Ende des letzten Elements */
.vt-breadcrumb span::before {
    display: none;
}

/* Stil für das letzte Element in der Breadcrumb-Navigation */
.vt-breadcrumb a:last-child, .vt-breadcrumb span:last-child {
    /* Ihre speziellen Stilregeln hier */
    /* Beispiel: Hintergrundfarbe für das letzte Element ändern */
    background-color: #c0c0c0;
}

/* Pfeil-Stil nur für das letzte Element hinzufügen */
.vt-breadcrumb a:last-child::after, .vt-breadcrumb span:last-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -18px;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #c0c0c0; /* Passen Sie die Farbe entsprechend an */
}


.vt-categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Passt die Anzahl der Spalten automatisch an */
    gap: 20px; /* Abstand zwischen den Kacheln */
    padding-top: 100px;
    padding-bottom: 20px;
    box-sizing: border-box; /* Bezieht Padding in die Gesamtbreite mit ein */
    width: calc(100% - 40px); /* Berechnet die Breite unter Berücksichtigung des Paddings */
    margin: 0 auto; /* Zentriert den Container, falls weniger als 100% Breite */
}

.vt-category-tile {
	position: relative;
    background-color: #f5f5f5; /* Hellgrauer Hintergrund */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box; /* Bezieht Padding und Border in die Gesamtbreite mit ein */
}

.vt-category-count, .vt-category-name {
    display: block;
    margin: 5px 0; /* Vertikaler Abstand */
}

.vt-category-count {
    position: absolute; /* Positioniert .vt-category-count absolut innerhalb von .vt-category-tile */
    top: 5px; /* Setzt den Abstand von der oberen Kante der Kachel */
    left: 0; /* Startet am linken Rand */
    width: 100%; /* Streckt sich über die gesamte Breite der Kachel */
    text-align: center; /* Zentriert den Text */
    /* Ihr bestehender Code für .vt-category-count */
}

.vt-category-name {
    position: absolute; /* Positioniert .vt-category-name absolut innerhalb von .vt-category-tile */
    bottom: 5px; /* Setzt den Abstand von der unteren Kante der Kachel */
    left: 0; /* Startet am linken Rand */
    width: 100%; /* Streckt sich über die gesamte Breite der Kachel */
    text-align: center; /* Zentriert den Text */
    /* Ihr bestehender Code für .vt-category-name */
}

.vt-category-image {
    width: 35%; /* 35% der Kachelgröße */
    margin: 0 auto; /* Zentrieren des Bildes */
	padding-top:26px;
	padding-bottom:26px;
}

.vt-buttons-container {
	position: fixed;
	bottom: 20px;
    display: flex;
    justify-content: space-between; /* Dies sorgt für gleichmäßigen Abstand */
    gap: 20px; /* Abstand zwischen den Buttons */
    padding: 0 20px; /* Gleicher seitlicher Abstand wie bei den Kacheln */
    box-sizing: border-box; /* Bezieht Padding in die Gesamtbreite mit ein */
    width: 100%; /* Volle Breite der Seite */
}

.vt-button {
    background-color: #f5f5f5; /* Hellgrauer Hintergrund */
    width: calc(50%); /* Anpassung für den Abstand zwischen den Buttons */
    text-align: center;
    display: block;
    padding: 10px;
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    color: #333; /* Dunkle Schriftfarbe */
    box-sizing: border-box; /* Bezieht Padding und Border in die Gesamtbreite mit ein */
	font-size: 1.5em; /* Vergrößert die Schrift */
	line-height:2em;
	box-shadow: 0 0 0 20px #ffffff; /* Fügt eine weiße Kontur hinzu */
}

/* Responsive-Anpassungen */
@media (max-width: 767px) {
    .vt-buttons-container {
        flex-direction: column;
        padding: 20px;
		bottom: 0px;
    }
    .vt-button {
        width: 100%;
		box-shadow: 0 0 0 20px #ffffff;
    }
}

/* Produkt-Listen-Ansicht */
.vt-products-container {
	width:100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 80px;
}

.vt-products-container .vt-product {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Stile für den Produktname und Eigenschaften */
.vt-product-details {
    flex: 0 0 100px; 
}

/* Stile für das Eingabefeld für die Anzahl */
.vt-product-quantity {
    /* Ihre spezifischen Stile hier */
}

/* Stile für den Preis */
.vt-product-price {
    flex: 0 0 100px; 
	font-size: 1.6em;
	font-weight: bold;
	padding-top: 14px;
}

/* Stile für den Add-to-Cart Button */
.vt-product-add-to-cart {
    /* Ihre spezifischen Stile hier */
}

.vt-product {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.vt-product-info {
    display: flex;
    flex-direction: column;
	flex-grow: 1;
	padding: 0 10px;
}

.vt-product-checkbox {
    flex: 0 0 50px;
    height: 50px; /* Höhe der Checkbox auf 50px setzen */
    margin-right: 10px; /* Etwas Abstand zur nächsten Spalte */
    cursor: pointer;
    background-color: #fff;
    border: 2px solid #ccc;
    position: relative;
}

.vt-product-checkbox.checked::after {
    content: '✓';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: green;
}

.vt-product-details {
}

.vt-product-details-button {
    /* Button-Styling */
}

.vt-product-details-content {
    /* Stilisierung für die lange Produktbeschreibung */
    margin-top: 10px;
	padding-bottom: 20px;
	padding-left: 80px;
    width: 100%; /* Stellt sicher, dass es die volle Breite einnimmt */
    clear: both; /* Stellt sicher, dass es unter allen vorherigen Elementen erscheint */
    border-bottom: 1px solid #eee;
}


/*  Produktvergleich */
.vt-product-compare-container {
    width: 100%;
    overflow-x: auto;
}

.vt-product-compare-container table, .vt-product-compare-container table th, .vt-product-compare-container table td {
    border: 0;
	font-size: 1.1em;
	line-height: 1.1em;
}

.vt-product-compare-container table th {
    background-color: #fff;
	font-size: 1.3em;
}

td.check-symbol {
	font-size: 2.0em !important;
	border-left: 10px solid #fff !important;
}

.vt-product-compare-container table tr {
    border-bottom: 5px solid #fff;
	background-color: #f5f5f5;
}

.vt-compare-table {
    width: 100%;
    border-collapse: collapse;
}

.vt-compare-table th, .vt-compare-table td {
    text-align: center;
    padding: 8px;
}

.vt-attribute-title td {
	font-weight: bold;
	text-align: left !important;
	background-color: #fff;
}

.attribute-name {
	text-align: left !important;
}

td.compare-price {
	font-size: 1.6em !important;
	font-weight: bold;
}

tr.compare-price-col {
	background-color: #fff !important;
}

tr.cart-col {
	background-color: #fff !important;
}