/* Basic styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9; /* Light gray background color for the body */
}

header {
    background-color: #6d7e96; /* Blue-gray background color for the header */
    padding: 10px;
}

.logo-container {
    display: flex; /* Display the logo and headline "Wolfschein" side by side */
    align-items: center; /* Center align vertically */
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    width: 300px; /* Set the logo width to 300 pixels */
    height: 300px; /* Set the logo height to 300 pixels */
}

.headline-container {
    margin-left: 20px; /* Add some spacing between the logo and the headline */
    color: #ffffff; /* White color for the headline and claim text */
}

.headline {
    font-size: 48px; /* Set a larger font size for the headline */
    margin: 0;
}

.claim {
    font-size: 24px; /* Set the font size for the claim */
    margin: 10px 0;
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.product {
    display: flex; /* Display the product description and image side by side */
    align-items: center; /* Center align vertically */
    flex-wrap: wrap; /* Wrap elements if they exceed container width */
}

.product img {
    flex: 1; /* Allow the image to grow or shrink to fit available space */
    max-width: 600px; /* Limit the image width */
    max-height: 600px; /* Adjust the height as needed */
    object-fit: contain; /* Maintain image aspect ratio while fitting inside the container */
    margin-left: 20px; /* Add some spacing between the description and the image */
}

.product-description {
    flex: 1; /* Allow the description to grow or shrink to fit available space */
    font-size: 18px;
    color: #444444; /* Dark gray color for the product description text */
}

.product-description ol, .product-description ul {
    margin-left: 20px;
}

.product-description p.age-restriction {
    font-weight: bold;
}