*/* Grundlegende Stile für das Layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #ccecff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150vh;
    flex-wrap: wrap;
}

.container {
    display: flex;
    gap: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Stile für die Produktansicht */
.product-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-image {
    width: 200px; /* Erhöhte Bildgröße */
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Stile für die Produktdetails */
.product-details {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Mehr Abstand zwischen den Elementen */
    max-width: 200px; /* Begrenze die Breite für eine bessere Lesbarkeit */
}

h1 {
    font-size: 28px; /* Größere Schriftgröße für den Titel */
    color: #333;
}

.price {
    font-size: 22px; /* Größere Schriftgröße für den Preis */
    color: #444;
}

/* Stile für die Beschreibung */
.description-container {
    background-color: #f9f9f9; /* Heller Hintergrund für den Beschreibungskasten */
    border: 1px solid #ddd; /* Dünner Rand um den Kasten */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 15px; /* Innenabstand für den Kasten */
}

.description {
    font-size: 18px; /* Größere Schriftgröße für die Beschreibung */
    color: #666;
    line-height: 1.5; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}

label {
    font-size: 16px; /* Größere Schriftgröße für Labels */
    color: #555;
    margin-bottom: 5px;
}

.colors {
    display: flex;
    gap: 10px; /* Mehr Abstand zwischen den Farboptionen */
}

.color {
    width: 30px; /* Größere Farbfelder */
    height: 30px;
    border-radius: 50%;
    border: 1px solid #000000;
    cursor: pointer;
}

select {
    padding: 10px; /* Mehr Padding für bessere Benutzererfahrung */
    font-size: 16px; /* Größere Schriftgröße für das Dropdown */
}

.add-to-cart {
    background-color: #000;
    color: #fff;
    padding: 15px; /* Größeres Padding für den Button */
    font-size: 18px; /* Größere Schriftgröße für den Button */
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.payment-options {
    display: flex;
    gap: 15px; /* Mehr Abstand zwischen den Zahlungsmethoden */
}

.payment-options img {
    width: 60px; /* Größere Icons für Zahlungsmethoden */
}