/*  ./static/indexMainAside.css  */

/* Mobile First, hier werden die Elemente für mobile Geräte definiert */
/* 568px - 767px, Mindestweite für die Ansicht ist 568px */

main {
    .main-background {

        aside {
            display: none;
            /* bei mobil */
            width: 250px;
            flex-direction: column;
            justify-content: left;
            align-items: flex-start;
            gap: 16px;
            margin: 16px 0;

            .aside-box {
                width: 250px;
            }

            .aside-box>.box-content {
                padding: 10px;
            }

            .container_beratung_u_kundenservice {
                display: flex;
                flex-direction: column;
                row-gap: 10px;
                font-size: 13px;

                .persoenlich {
                    margin-bottom: 12px;
                }

                .container_messanger {
                    display: flex;
                    flex-direction: row;
                    gap: 10px;

                    .messanger-icon {
                        width: 25px;
                        height: 25px;
                    }

                    .messanger {
                        width: 183px;
                        font-size: 14px;
                        margin: auto 0;

                        a {
                            text-decoration: none;
                            color: #000000;

                            &:hover {
                                color: var(--hoverBlau);
                            }
                        }
                    }
                }

                .servicezeiten {
                    margin-top: 12px;
                    margin-bottom: 12px;

                    .servicezeiten-titel {
                        color: #006599;
                        font-weight: 700;
                        font-size: 14px;
                        margin-bottom: 5px;
                    }

                    .servicezeiten-text {
                        line-height: 21px;
                    }
                }

                a {
                    margin: 0 auto;

                    img {
                        width: 210px;
                        height: 75px;
                    }
                }
            }

            .container_sozial-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-top: 20px;
                padding-bottom: 10px;

                a {
                    .sozial {
                        width: 200px;
                        height: 75px;
                    }
                }
            }

            .container_kundenmeinungen {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-top: 10px;
                padding-bottom: 10px;

                #provenexpert {
                    background-position: -665px -280px;
                    width: 195px;
                    height: 195px;
                }

            }

            #logo-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .auszeichnungen {
                .bewertung-logos {

                    .logo {
                        display: block;
                        width: 195px;
                        margin-bottom: 20px;
                        margin-left: 10px;
                        background-image: url(../images/bewertung-logos.webp);
                        background-repeat: no-repeat;
                        font-size: 0;
                        line-height: 0;
                    }

                    .logo-top-empfehlung {
                        height: 179px;
                        background-position: 0 -1px;
                        margin-top: 0px;
                    }

                    .logo-top-dienstleister {
                        height: 175px;
                        background-position: 0 -184px;
                    }

                    .logo-kunden-empfohlen {
                        height: 181px;
                        background-position: 0 -362px;
                    }

                    .logo-welt {
                        height: 166px;
                        background-position: 0 -550px;
                    }

                    .logo-werkenntdenbesten {
                        height: 162px;
                        background-position: 0 -733px;
                    }

                    .logo-goyellow {
                        height: 158px;
                        background-position: 0 -916px;
                    }

                    .logo-provenexpert {
                        height: 164px;
                        background-position: 0 -1094px;
                    }

                    .logo-webwiki {
                        height: 150px;
                        background-position: 0 -1282px;
                    }

                }
            }
        }
    }
}

@media (min-width: 768px) {

    /* Hier werden die Elemente für Tablets definiert */
    /* 768px - 1239px */
    main {
        .main-background {

            aside {
                display: flex;
                flex-direction: column;
            }
        }
    }
}

@media (min-width: 1240px) {

    /* Hier werden die Elemente für Desktop definiert */
    /* Ab 1240px */
    main {
        .main-background {

            aside {
                display: flex;
                flex-direction: column;
            }
        }
    }
}