/* Responsive CSS für Bildschirmbreiten unter 600px */
@media (max-width: 600px) {
    div.msite {
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav1"
            "main"
            "left-aside"
            "right-aside"
            "low-content"
            "footer";
        max-width: 600px;
    }

    header {
        max-width: 600px;
        height: clamp(110px, 20vw, 200px);
    }

    .h1_header {
        font-size: clamp(1.3em, 4.0vw, 1.9em);
    }

    #willkomm_txt {
        display: none;
    }

    #nav1 {
        position: relative;
    }

    .nav2 {
        position: absolute;
        display: none;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 5px;
        z-index: 1;
        top: 40px;
        left: 0;
        width: 100%;
        align-items: flex-start;
        /*background-color: lightgrey; */
        padding: 5px;
    }

    .butt_menu_small {
        display: flex;
        opacity: 1;
    }

    .nav1_button {
        display: flex;
        width: 200px;
        align-items: center;
        padding: 5px;
        border-radius: 5px;
        border: 0px solid gray;
        background-color: rgba(201, 201, 201, 0.7);

        transition: all 0.5s ease;
    }

    .butt_con {
        width: 150px;
    }

    .dropdown1 {
        left: 150px;
        max-width: 150px;
    }


    #left-aside {
        grid-area: left-aside;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3px;
        align-items: center;
        height: 400px;
        min-height: 450px;
        max-width: 600px;
        padding: 5px;
        margin: 5px;
        background-color: rgba(199, 199, 199, 0.308);
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
    }

    .aside_point {
        display: flex;
        flex: 1;
        flex-direction: column;
        
        gap: 5px;
        align-items: center;
        min-height: 100px;
        height: 200px;
        padding: 5px;
        margin: 5px;
        text-align: center;
        border-radius: 10px;
    }

    .direc_row {
        display: flex;
        padding-left: 10px;
        justify-content: space-around;
        width: 100%;
        flex-direction: row;
        gap: 10px;

    }

    .img_las {
        height: 70%;
        min-height: 50px;
        max-height: 150px;
        width: auto;
        margin-top: 5px;
        margin-bottom: 0px;
        filter: drop-shadow(2px 3px 3px black);
        transition: all 0.7s ease;
    }

    .img_las1 {
        min-height: 50px;
        max-height: 100px;
        width: auto;
        margin-top: 10px;
        margin-bottom: -20px;
        transform: rotate(-25deg);
        filter: drop-shadow(2px 3px 3px black);
        transition: all 0.7s ease;
    }

    .st_text {
        font-size: clamp(15px, 2vw, 25px);
    }

    .follow_text {
        font-size: clamp(15px, 2vw, 25px);
    }
    
    #right-aside {
        grid-area: right-aside;
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        min-height: 200px;
        height: auto;

        max-width: auto;
        padding: 5px;
        margin: 5px;
        background-color: rgba(199, 199, 199, 0.308);
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
    
    }

    .direc_row_r {
        display: flex;
        padding-left: 0px;
        justify-content: space-around;
        width: 100%;
        flex-direction: row;
        gap: 0px;

    }

    .img_ras {
        height: 100px;
        min-height: 100px;
        max-height: 200px;
        width: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        filter: drop-shadow(2px 3px 3px black);
        transition: all 0.7s ease;
    }

    #low-content {
        grid-area: low-content;
        max-width: 600px;
    }

    footer {
        grid-area: footer;
        max-width: 600px;
    }
}