.lieblingsstueck-container {
            position: relative;
            max-width: 300px;
            margin: auto;
            background-size: cover; /* Hintergrundbild anpassen */
            background-position: center; /* Hintergrundbild zentrieren */
            height: 400px; /* Höhe anpassen, um das T-Shirt gut darzustellen */
        }
        .lieblingsstueck {
            width: 100%;
            position: absolute; /* Positionierung des Lieblingsstücks */
            top: 0;
            left: 0;
            z-index: 1; /* Lieblingsstück über dem Hintergrund */
        }
        .option {
            position: absolute; /* Positionierung der Optionen */
            z-index: 2; /* Über dem Lieblingsstück */
            width: 100%; /* Breite anpassen */
            height: 100%; /* Höhe anpassen */
            pointer-events: none; /* Verhindert, dass die Optionen den Klick auf das Lieblingsstück blockieren */
        }
        .fabric-swatch, .option-swatch {
            width: 100px;
            height: 100px;
            margin: 5px;
            display: inline-block;
            cursor: pointer;
            border: 2px solid transparent;
        }
        .fabric-swatch:hover, .option-swatch:hover {
            border-color: #007BFF;
        }
        .json-output {
            margin-top: 20px;
        }
		
		.mini-thumb {
    width: 30px;      /* Setzt die Breite auf 30 Pixel */
    height: 30px;     /* Setzt die Höhe auf 30 Pixel */
    object-fit: cover; /* Stellt sicher, dass das Bild das gesamte Element ausfüllt */
    border: 2px solid transparent; /* Optional: Rahmen, der beim Hover sichtbar wird */
    transition: border-color 0.3s; /* Sanfter Übergang für den Rahmen */
	}


.musterkarten-thumb {
    width: 180px;      /* Setzt die Breite auf 30 Pixel */
    height: 255px;     /* Setzt die Höhe auf 30 Pixel */
    object-fit: cover; /* Stellt sicher, dass das Bild das gesamte Element ausfüllt */
    border: 2px solid transparent; /* Optional: Rahmen, der beim Hover sichtbar wird */
    transition: border-color 0.3s; /* Sanfter Übergang für den Rahmen */
	}
	
	
	
	.mini-thumb:hover {
		border-color: #007BFF; /* Rahmenfarbe beim Hover */
	}


.image-caption {
    font-size: 0.75em; /* Mini-Schriftgröße */
    color: #333; /* Textfarbe */
    text-align: center; /* Zentriert die Bildunterschrift */
    margin-top: 5px; /* Abstand zum Bild */
}
 
 
 .error-message {
    background-color: red; /* Roter Hintergrund */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand */
    margin-top: 10px; /* Abstand nach oben */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettdruck */
}