body

{
  

}


@media all {

    .nav
    {
        background:                     #3b4986;
        position:                       fixed;
        top:                            100px;
        left:                           0px;
    }
    
    .headerSkyline
    {
        height:                         100px;
        width:                          100%;
        background-color:               #ffffff;
        position:                       fixed;
        top:                            0px;
        left:                           0px;
        z-index:                        1;
        box-sizing:                     border-box;
    }

    .headerSkylineLeft
    {
        float:                          left;        
        box-sizing:                     border-box;
    }

    .headerSkylineLeft img
    {
        height:                         100%;
        width:                          auto;
        max-height:                     100px;
    }

    .headerSkylineRight
    {
        float:                          right;
        padding:                        10px;
        box-sizing:                     border-box;
    }

    .headerSkylineRight img
    {
        height:                         100%;
        width:                          auto;
        max-height:                     80px;
    }

    .wrapper
    {
        margin-top:                     150px;
    }

    .nav > .nav-links > ul li
    {
        margin-left:                    10px;
        margin-right:                   10px;
    }

    .nav > .nav-links > ul li ul li
    {
        margin:                         0px;
        background:                     #3b4986;
    }

    .event-list-item
    {
        padding:                        20px 10px;
        box-sizing:                     border-box;
        font-weight:                    500;
    }

    .event-list-item:hover
    {
        background:                   #e7e7e7;  
    }

    .event-title
    {
        font-weight:                    600;
    }

    .news-list-view
    {
        font-weight:                    500;
    }

    .news-list-title
    {
        font-weight:                    600;
    }

    .listArticle:hover
    {
        background:                     #f0ece9;
    }

    .navImg img 
    {
        height:                         20px;
        width:                          20px;
        margin-right:                   10px;
    }

    .contact .columnItem
    {
        margin:                         10px;
        width:                          calc(33.3333333333% - 22px);
        box-shadow:					    0 3px 10px rgb(0 0 0 / 25%);
        border:                         1px solid #cccccc;
    }

    .vorstand .columnItem
    {
        margin:                         10px;
        width:                          calc(50% - 22px);
        box-shadow:					    0 3px 10px rgb(0 0 0 / 25%);
        border:                         1px solid #cccccc;
        padding:                        20px;
    }

    .listText p strong
    {
        background:                     #ececec;
        padding:                        5px;
        display:                        block;
    }

    .news-list-columns .listItem img 
    {
        margin-top:                     10px;
        margin-bottom:                  10px;
    }

    .konzert a
    {
        text-decoration:                none;
        color:                          inherit;
    }

    .konzert a:before 
    {
        content:                        "\2023";
        margin-right:                   5px;
        transform:                      rotate(90deg);
        font-size:                      20px;
    }

    .konzert a:hover 
    {
        text-decoration:                underline;
    }

    .konzert .listArticle:hover 
    {
        background:                     none;
    }

    .banner h1 
    {
        margin:                         0px;
        background:                     #3b4986;
        color:                          #ffffff;
        padding:                        10px;
        display:                        inline;
        width:                          100%;
    }

    .banner h2
    {
        margin:                         0px;
        color:                           #3b4986;
        background:                     #ffffff;
        padding:                        10px;
        display:                        inline;
        width:                          100%;
    }

    .banner .w-100
    {
        display:                        flex;
        flex-wrap:                      wrap;
        width:                          50%;
    }

    .footer .text-1 a 
    {
        line-height:                    30px;
        color:                          #ffffff;
        text-decoration:                none;
    }       

    .footer .text-1 a:hover 
    {
        text-decoration:                underline;
    }       


}



@media screen and (max-width:1280px)
{  

    .newsListLeft img
    {
        aspect-ratio:                   1/1;
    }

    .contact .columnItem
    {
        width:                          calc(100% - 22px);
    }

    .vorstand .columnItem
    {
        width:                          calc(100% - 22px);
    }

    .contact .columnItem h2
    {
        padding-top:                    1rem;
    }

}

@media screen and (max-width:1024px)

{  


    .nav
    {
        top:                            60px;
    }
    
    .headerSkyline
    {
        height:                         60px;
    }

    .headerSkylineLeft
    {
        padding-top:                    20px;
    }

    .headerSkylineLeft img
    {
        max-height:                     40px;
    }

    .headerSkylineRight img
    {
        max-height:                     40px;
    }

    .wrapper
    {
        margin-top:                     110px;
    }

    .nav > .nav-links
    {
        background:                     #3b4986;
    }
    
    .nav > .nav-links > ul li ul, .nav > .nav-links > ul li ul li
    {
        background:                     #364485;
    }

    .nav .nav-links ul li a:hover + ul, .nav .nav-links ul li ul:hover
    {
        background:                     #364485;
    }

    .nav > .nav-btn > label:hover, .nav #nav-check:checked ~ .nav-btn > label
    {
        background-color:               #3b4986;
    }    

    .nav > .nav-links > ul li a {
        padding:                        8px 10px 8px 10px;
        font-size:                      0.9rem;
        line-height:                    1.2rem;

    }

    .banner .w-100
    {
        width:                          100%;
    }

}



@media screen and (max-width:800px)

{

   

}



@media screen and (max-width:600px)

{

    .newsListLeft
    {
        width:                          100%;
        float:                          none;
        margin:                         0px;
        padding:                        0px;
    }

    .newsListRight
    {
        width:                          100%;
        float:                          none;
        margin:                         0px;
        padding:                        10px 0px 0px 0px;
    }

    .newsListLeft img
    {
        aspect-ratio:                   3/2;
    }


}