* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }

    header {
        display: flex;
        justify-content: right;
        align-items: center;
        padding: 20px 40px;
        background: #212121;
    }

    header nav a {
        color: white;
        text-decoration: none;
        margin-left: 20px;
        font-size: 16px;
    }

    .logo {
        height: 200px;
        position: absolute;
        float: left;
        left: 50px;
        bottom: 85%;
    }

    h1 {

        text-align: center;
    }

    header nav a:hover {
        text-decoration: underline;
    }

    .background {
        width: 100%;
        height: auto;
        display: block;
    }


    main {
        padding: 60px 40px;
        background-color: white;
    }

    .angebot {

        margin-bottom: 50px;

    }

    .angebot h1 {
        text-align: center;
        margin-bottom: 40px;
        color: #111;
        text-decoration: none;
    }

    .bild1 {

        width: 100px;
        height: 100px;

    }

    .bild2 {

        width: 100px;
        height: 100px;

    }

    .bild3 {

        width: 100px;
        height: 100px;

    }

    .aboutus {
        width: 100%;
        color: #212121;
        height: 600px;
        padding-top: 20px;
        text-align: center;
        height: auto;
    }

    .angebote h1 {
        text-align: center;
        margin-bottom: 40px;
        color: #111;
        text-decoration: none;
    }

    .icon-row2 {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        text-align: center;
        max-width: 950px;
        margin: auto;
        div{
            width: 300px;
        }
    }

    .produkt_bild {
        background-color: #ff484b;
        border-radius: 10px;
    }
    .produkt_bild2 {
        background-color: #4e6eff;
        border-radius: 10px;
    }

    .produkt_bild3 {
        background-color: #2c53ff;
        border-radius: 10px;
    }
    
    .produkt_bild4 {
        background-color: #3bc559;
        border-radius: 10px;
    }

    .produkt_bild5 {
        background-color: #c5953b;
        border-radius: 10px;
    }

    .produkt_bild6 {
        background-color: #3bc59c;
        border-radius: 10px;
    }

    .produkt_bild:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }
    .produkt_bild2:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }
    .produkt_bild3:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }
    .produkt_bild4:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }
    .produkt_bild5:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }
    .produkt_bild6:hover {
        transform: scale(1.03);
        opacity: 0.9;
    }
    
    .consolen_bild {
        width: 36px;
        height: 36px;
        background-color: whitesmoke;
        box-shadow: #666;
        border-radius: 10px;
    }
    .consolen_bild:hover {
        transform: scale(1.01);
        opacity: 0.9;
    }
    .icon-item2 img {
        width: 100%;
        height: auto;
    }

    .icon-row {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .icon-item {
        text-align: center;
        max-width: 200px;
    }

    .icon-item img {
        width: 100%;
        max-width: 120px;
        height: auto;
    }

    .icon-text {
        margin-top: 10px;
        font-size: 15px;
        text-align: center;
        color: black;
    }

    .icon-text1 {
        margin-top: 10px;
        font-size: 15px;
        color: #00A4E8;

    }

    #contact {
        min-height: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    
    #contact h1 {
        text-align: center;
        margin-top: 40px;
        color: #111;
        text-decoration: none;
    }

    footer {
        background: #212121;
        color: #fff;
        text-align: center;
        padding: 20px;
            margin-top: 368px;
    }

    footer a {
        color: #fff;
        margin: 0 10px;
        text-decoration: none;
    }

    .impressum-section {
        min-height: 100vh;
        padding: 120px 20px 60px;
        background: white;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .impressum-container {
        max-width: 600px;
        background: rgba(255, 255, 255, 0.95);
        line-height: 1.7;
    }

    .impressum-container h1 {
        margin-bottom: 25px;
        font-size: 32px;
        color: #111;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
    }

    .impressum-container p {
        margin-bottom: 18px;
        color: #333;
    }

    .impressum-container strong {
        color: #000;
    }

    .impressum-note {
        font-size: 14px;
        color: #666;
        margin-top: 30px;
    }

/* =========================
   📱 RESPONSIVE BREAKPOINTS
========================= */

/* Tablets */
@media (max-width: 900px) {
    header {
        flex-direction: column;
        gap: 10px;
    }

    main {
        padding: 40px 20px;
    }

    .icon-row {
        gap: 30px;
    }
}

/* Smartphones */
@media (max-width: 600px) {
    header nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    header{
        padding: 0px;
        display: block;
        margin: auto;
    }

    header nav a {
        margin: 0;
    }
    .logo {
        visibility: hidden;
    }

    .icon-row {
        flex-direction: column;
        align-items: center;
    }

    .icon-item {
        max-width: 100%;
    }

    .icon-item img {
        max-width: 100px;
    }
    .reviews{
        width: 100%;
    }

    footer {
        font-size: 14px;
    }

    label {
            display: block;
            width: 100%;
            text-align: center;
            background-color: #212121;
            padding-top: 10px;
            padding-bottom: 10px;

            input {
                visibility: hidden;
                position: absolute;
             }
        }
    
    i{
        color: white;
}
    .sub_menu {
        display: none;
}

    label:has(input:checked) ~ .sub_menu  {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #212121;
        strong:last-of-type{
            padding-bottom: 20px;
        }
    }
}
@media (width > 600px){
        label {
            display: none;
        }
}