@media screen and (max-width:576px){
    
   #place1, #place2, #place3, #place4 {
    background-position: center center;
    height: 200px;
    }
    
     /* ======= Contact =======*/
    
    .form{
        width: 100%;
    }
    
    
    /* ======= Location,about =======*/
    .text-box-1 img{
        margin-right: 0px;
        box-sizing: content-box;
        padding-left: 20px;
    }
}

@media screen and (max-width:768px){
    /* ===== Main =====*/
    
    .archiv,.pics{
        display: none;
    }
    
    .row{
        padding: 15px;
    }
    
    .pic_loc,.pic_current,.pic_cam,.pic_sat,
    .pic_about,.pic_tec,.pic_form,.pic_dsgvo{
        height: 200px;
    }
    
    .background,.bg-current{
        background-size: cover;
        background-attachment: scroll;
        height: 300px;
        z-index: 0;
    }
    
    .layer p{
        position: relative;
        top: 0%;
        text-align: justify;
        padding: 30px;
        z-index: 99;
    }
    
    /* ===== Index =====*/

    
    #place1, #place2, #place3, #place4 {
    background-position: center center;
    max-height: 400px;
    }
    
    h1{
        margin-top: 0px;
        text-align: left;
        font-size: 24px;
        margin-bottom: 40px;
    }
    
    .welc p{
        text-align: left;
    }
    
    .card-index{
        width:14rem !important;
    }
    
    .text-box-circle-left, .text-box-circle-mid,
    .text-box-circle-right{
        margin: 25px;
    } 
    
     /* ======= current =======*/
    
    .custom{
        display: none;
    }
    
    .sensor{
        padding: 10px;
    }
    
    .custom-mobile{
        display: block;
    }
    
    .custom-mobile td{
        text-align: left;
        padding: 4px 10px;
    }
    
    .wind{
        margin: 0px;
    }
    
    .current p,.current-wind p{
        text-align: justify;
    }
    
    .current-wind img,.line-top img,.line-mid img,.line-bottom img{
        width: 100%;
    }
    
    .windyty{
        display: none;
    }
    
    
       /* ===== Cam =====*/
    
    .webcam-p p{
        text-align: justify;
    }
    
    .webcam{
        padding: 0px;
        text-align: center;
    }
    
    .webcam-box-left,.webcam-box-right{
        height: auto;
        padding-bottom: 10px;
    }
    
    .webcam img{
        width: 100%;
        height: auto;
        margin: 0px;
    }
    
    .imker{
        display: none;
    }
    
    
     /* ======= Tec =======*/
    
    .tec-text p{
        text-align: justify;
    }
    
    /* ======= Location =======*/
    .text-box-1,.text-box-2{
        text-align: justify;
    }
    
    .text-box-2{
        padding:15px;
    }
    
    .text-box-1 img{
        width: 100px; 
    }
    
    
    
    /* ======= Footer =======*/
    
    .footer-left,.footer-mid,.footer-info,.footer-right{
        width: 100%;
        border-bottom: #fff solid 3px;
        margin-bottom: 20px;
        text-align: left;
    }
    
    .footer-right{
        border-bottom: none;
        margin-bottom: 0px;
    }
    
    .footer-right-inside{
        margin-right: auto;
        margin-left: inherit;
    }
    
    .toeline{
        font-size: 10px;
    }
}