/*ALLGEMEIN*/
body {
    font-family: Verdana, sans-serif;
    margin: 0;
    /* Reset the default margin */
    border: solid 8px #FF5500;

    /* Adjust the px value to the thickness you want */
    min-height: 100vh;
    /* Ensure at least full viewport height */
    box-sizing: border-box;
    /* Include border in the width and height calculations */
}

html {
    width: 100vw;
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
}

@media (max-width: 1000px) {
    body {
        border: solid 4px #FF5500;
    }
}

/*ALLGEMEIN END*/


/*HEADER*/
/* Header container */
.header {
    display: flex;
    /* Use flexbox for layout */
    flex-direction: column;
    /* Stack the header-extra and header-main vertically */
    align-items: center;
    /* Center align the child elements */
    width: 100%;
    padding-top: 0;
    /* Remove padding above the header-logo */
}

.header-extra {
    width: 100%;
    background-color: #d3d3d3;
    /* Light grey background */
    padding: 10px 0;
    /* Top and bottom padding */
    text-align: center;
    /* Center the links */
}

.header-extra a {
    color: black;
    /* Text color for the links */
    margin: 0 50px;
    /* Spacing between links */
    padding: 5px 10px;
    /* Padding inside the links */
    text-decoration: none;
    /* Remove underline from links */
    display: inline-block;
    /* To apply padding and margin correctly */
    border-radius: 15px;
    /* Rounded corners */
    transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
    /* Smooth transition for hover effects */
}

.header-extra a:hover {
    background-color: black;
    /* Background color on hover */
    color: white;
    /* Text color on hover */
    font-weight: bold;
    /* Bold font weight on hover */
    text-decoration: none;
    /* Ensure underline is removed on hover */
}


/*HEADER EXTRA MOBILE*/
@media (max-width: 1000px) {
    .header-extra {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-extra a {
        flex: 0 0 calc(50% - 20px);
        /* Adjust margin as needed */
        margin: 10px;
        /* Adjust margin as needed */
        box-sizing: border-box;
        /* Include padding and border in the element's total width and height */
        text-align: center;
        width: 100%;
        /* This will make sure the content within the link is not squeezed */
    }
}





/* The main header with logo and navigation */
.header-main {
    display: flex;
    flex-direction: column;
    /* Stack logo and navigation vertically */
    width: 80%;
    /* Adjust the width of the main header content */
    max-width: 1140px;
    /* Max width can be set as per design requirements */
    margin: 0 auto;
    /* Center the main header content */
}

/* Logo style */
.header-logo {
    width: 100%;
    /* Full width */
    display: flex;
    justify-content: center;
    /* Center the logo horizontally */
    align-items: center;
    /* Center the logo vertically */
    padding: 0;
    /* No padding */
}

.header-logo img {
    width: 100%;
    /* Full width of its container */
    height: auto;
    /* Maintain aspect ratio */
    max-width: none;
    /* Override any max-width */
}

/* Header Navigation Style */
.header-nav {
    width: 100%;
    /* Span across the whole width */
    background-color: #d3d3d3;
    /* Grey background */
    padding: 10px 0;
    /* Padding above and below the navigation */
}

.header-nav ul {
    padding: 0;
    margin: 0 auto;
    /* Center the navigation content */
    display: flex;
    justify-content: center;
    /* Center the items horizontally */
    flex-wrap: wrap;
    /* Wrap to next line on small screens */
    list-style: none;
    /* Remove list styling */
    width: 80%;
    /* Set the preferred width or max-width if needed */
    max-width: 1140px;
    /* Adjust according to your layout's max width */
}

.header-nav li {
    padding: 10px 15px;
    /* Padding inside the list items */
    margin: 15px;
    /* Margin around list items */
    background-color: white;
    /* White background for each item */
    border-radius: 15px;
    /* Rounded corners for each item */
    transition: background-color 0.3s ease;
}

.header-nav a {
    color: black;
    /* Text color */
    font-weight: bold;
    /* Makes the text bold */
    text-decoration: none;
    /* Removes underline */
    display: inline-block;
    /* or block if you prefer */
    padding: 1px 1px;
    /* Adjust padding to your preference */
    border-radius: 15px;
    /* Keep the rounded corners */
}

.header-nav li:hover {
    background-color: black;
    /* White background for each item */
}

.header-nav li:hover a {
    color: white;
    /* Changes the text color of the <a> to white on hover */
}

/*HEADER END*


/*TOPSELLER START*/
.topseller-caption h1 {
    text-align: center;
    color: black;
    font-weight: bold;
    margin-bottom: 20px;
    /* Space below the caption, adjust as needed */
}

body>.topseller-section>.topseller-item a {
    text-decoration: none;
}

.topseller-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Creates 4 columns */
    grid-template-rows: repeat(2, auto);
    /* Creates 2 rows */
    gap: 20px;
    /* Space between grid items */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.topseller-item {
    border: 2px solid #d3d3d3;
    /* Slightly thicker light grey border */
    border-radius: 15px;
    /* Rounded corners for each item */
    padding: 10px;
    /* Padding inside the items */
    text-align: center;
    /* Centering text within the item */
    background: #fff;
    /* White background for each item */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Space distribution inside the item */
    transition: transform 0.3s, filter 0.3s;
}

.topseller-item a {
    text-decoration: none;
}

.topseller-item:hover {
    transform: scale(1.05);
    /* Enlarge item */
    filter: opacity(80%);
    /* Make the item brighter */
}


.topseller-item img {
    max-width: 100%;
    /* Make the image fill the container width */
    max-height: 150px;
    /* Set a maximum height for images */
    object-fit: contain;
    /* Contain the image within the element's box */
    margin-bottom: 10px;
    /* Space below image */
}

.topseller-item p {
    font-size: 1em;
    /* Adjust the font size as needed */
    color: black;
    /* Black text for the name */
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit text to two lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.topseller-item span {
    color: #ff5500;
    /* Orange color for the price */
    font-weight: bold;
    /* Bold font for the price */
    margin-bottom: 5px;
    /* Space below price */
    text-decoration: none;
}


/*TOPSELLER MOBILE*/
@media (max-width: 1000px) {
    .topseller-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for smaller screens */
        gap: 20px;
        /* Space between items */
        padding: 10px;
        /* Padding around the entire section */
    }

    .topseller-item {
        width: 70%;
        /* Adjusts item width to be 80% of its container's width */
        margin: 0 auto;
        /* Centers the item within its container */
        aspect-ratio: 1 / 1;
        /* Maintains a 1:1 aspect ratio */
    }

    .topseller-item img {
        width: 100%;
        /* Ensures the image covers the width of its container */
        height: auto;
        /* Adjusts height to maintain aspect ratio */
        object-fit: contain;
        /* Ensures the image covers the area, may crop if necessary */
        aspect-ratio: 1 / 1;
        /* Forces the image to maintain a 1:1 aspect ratio */
    }
}


/*TOPSELLER END*/



/*MAIN START*/

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

.listing-content {
    width: 90%;
    margin-bottom: 20px;
}

.main .listing-content p {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

.listing-content h1 {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin: 20px 0;
}

.main-image-container {
    display: flex;
    width: 90%;
    /* Adjust this as needed */
    margin: auto;
    /* Center the container if it's less than 100% width */
    gap: 20px;
    /* Space between main image and gallery */
}

.main-image-display {
    flex: 2;
    /* Allows the main image to take twice as much space as the gallery */
    max-width: 60%;
    /* Adjust the max width as needed */
}

.main-image-display img {
    width: 100%;
    /* Scale the image to the width of the container */
    height: auto;
    /* Maintain the aspect ratio */
    object-fit: contain;
    /* Ensure the entire image fits within the container without stretching */
    border: 2px solid #d3d3d3;
    border-radius: 15px;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Create two columns */
    grid-template-rows: auto auto;
    /* Two rows, size as needed */
    gap: 20px;
    /* Space between images */
    justify-content: center;
    /* Center the grid within the image-gallery container */
    align-items: start;
    /* Align items to the start of the container */
    flex: 1;
    /* Takes up remaining space */
}

.image-gallery img {
    aspect-ratio: 1/1;
    width: 100%;
    /* Each image will fill its cell in the grid */
    height: auto;
    /* Maintain aspect ratio */
    object-fit: contain;
    /* Ensures the image fits within the cell without stretching */
    border: 2px solid #d3d3d3;
    border-radius: 15px;
    transition: all 0.3s ease;

}

.image-gallery img:hover {
    z-index: 995;

    scale: 1.5;
    background-color: white;

}

.description {
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
    margin: 20px auto;
}

/*MAIN MOBILE*/
@media (max-width: 768px) {
    .main-image-container {
        flex-direction: column;
        align-items: center;
    }

    .main-image-display {
        width: 100%;
        max-width: 100%;
        /* Adjust the max-width to control the size of the main image */
    }

    .image-gallery {
        grid-template-columns: repeat(2, 1fr);
        /* Adjusts to a 2x2 grid for gallery images */
        width: 100%;
        /* Ensures gallery uses full width available */
    }

    .image-gallery img {
        width: auto;
        /* Adjusts width automatically */
        height: auto;
        /* Maintains aspect ratio */
        max-height: 150px;
        /* Example to control size, adjust as needed */
        object-fit: contain;
        /* Ensures images cover the space nicely */
    }

}

/*MAIN END*/

/*AUSZEICHNUNG START*/

.auszeichnung-section {
    padding-top: 0.2%;
    background-color: #f2f2f2;
    /* Light grey background */
    text-align: center;
    /* Center the text */
    padding-bottom: 20px;
    /* Padding at the bottom */
}

.auszeichnung-container {
    display: flex;
    justify-content: space-around;
    /* Evenly spaces the items horizontally */
    flex-wrap: wrap;
    /* Allows items to wrap on smaller screens */
    max-width: 80%;
    /* Maximum width of the container */
    margin: auto;
    /* Centers the container */
    gap: 10px;
    /* Spacing between items */
}

.auszeichnung-item {
    background-color: white;
    /* White background for the items */
    border-radius: 15px;
    /* Rounded corners for items */
    padding: 10px;
    /* Padding inside items */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /* subtle shadow for depth */
    flex: 1;
    /* Flex-grow to take available space */
    margin-bottom: 10px;
    /* Spacing below each item */
}


.kauf-item {
    background-color: white;
    /* White background for the kauf-item */
    border-radius: 15px;
    /* Rounded corners for kauf-item */
    padding: 10px;
    /* Padding inside kauf-item */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /* subtle shadow for depth */
    width: 100%;
    /* Width of the kauf-item */
    margin: 20px auto;
    /* Centers the kauf-item and adds vertical spacing */
}

/* For headings and paragraphs inside the auszeichnung-item */
.auszeichnung-item h3,
.kauf-item h3 {
    color: #333;
    /* Dark text for headings */
    margin-bottom: 5px;
    /* Spacing below headings */
}

.auszeichnung-item p,
.kauf-item p {
    color: #666;
    /* Lighter text for paragraphs */
    font-size: 0.9em;
    /* Slightly smaller font size for paragraphs */
}


/*AUSZEICHNUNG END*/

/*FOOTER START*/

.footer {
    background-color: #f2f2f2;
    /* Light grey background */
    padding: 20px 0;
    /* Padding top and bottom */
    display: flex;
    /* Flex container for inline elements */
    justify-content: center;
    /* Center items horizontally */
    align-items: center;
    /* Vertically center items */
    flex-wrap: wrap;
    /* Wrap items on smaller screens */
    border-radius: 15px;
    /* Rounded corners for the footer */
    width: 80%;
    /* Footer width */
    margin: 0 auto;
    /* Center the footer */
}

.footer-links,
.footer-subscribe,
.footer-branding {
    display: flex;
    /* Inline elements */
    gap: 20px;
    /* Space between links */
    flex: 1;
    /* Each section takes equal width */
    justify-content: center;
    /* Center links within each section */
}

.footer a {
    text-decoration: none;
    /* No underline on links */
    color: black;
    /* Black text color */
    transition: all 0.3s ease;
    /* Smooth transition for hover effect */
}

.footer a:hover {
    background-color: black;
    /* Black background on hover */
    color: white;
    /* White text on hover */
    font-weight: bold;
    /* Bold text on hover */
    border-radius: 15px;
    /* Rounded corners on hover */
    padding: 5px 10px;
    /* Padding for background on hover */
}

.footer-branding img {
    max-width: 250px;
    /* Limit logo size */
}

.footer-branding p {
    color: black;
    /* Black text color */
    font-weight: bold;
    /* Bold text */
}

/* Additional styles for equally spaced elements */
.footer>* {
    flex-basis: calc(33.333% - 40px);
    /* Subtract the total gap size from the width */
    text-align: center;
    /* Center text */
}

/*FOOTER MOBILE*/
@media (max-width: 1000px) {

    .footer-links,
    .footer-subscribe {
        justify-content: space-around;
    }

    .footer-links div,
    .footer-subscribe div {
        width: 45%;
        /* Adjusts for 2x2 grid layout */
    }

    .footer-branding {
        margin-top: 20px;
        /* Adds space above the logo */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/*FOOTER END*/