/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

/* Bildschirmgrösse 1420 px */
/* ------------------------ */
@media screen and (max-width:1420px){
    .zeile1{width:80%;}
    .zeile2{
        width:65%;
        margin-left: 30%;
    }
    .zeile3{
        width:60%;
        margin-left: 30%;
    }
}
/* Bildschirmgrösse 1300 px */
/* ------------------------ */
@media screen and (max-width:1300px){
    .zeile1{
        width:100%;

    }
    .zeile2{
        width:78%;
        margin-left: 20%;
    }
    .zeile3{
        width:68%;
        margin-left: 30%;
    }

    .artikelwiki1{
        width:100%;
    }

}
/* Bildschirmgrösse 1200 px */
/* ------------------------ */
@media screen and (max-width:1200px){
    .zeile1{
        width:100%;

    }
    .zeile2{
        width:75%;
        margin-left: 20%;
    }
    .zeile3{
        width:60%;
        margin-left: 30%;
    }
    .wiki2abstand{margin-left: 0;}
    .kontakt{
        max-width: 78%;
    }
}



/* Bildschirmgrösse 1100 px */
/* ------------------------ */
@media screen and (max-width:1100px){
    /* nav{top:110px;} */
    .artikelwiki2{
        width:90%;
        margin-left: 5%;
    }
    .lastrow,
    .lastrow1,
    .lastrow2{
        margin-left: 5px;
        width:100%;
    }
    .urheber{
        margin-left: 0px;
    }
    .quellen{margin-left: 30%;}

    .hersteller .artikelH{margin-left: 5px;}
}
/* Bildschirmgrösse 980 px */
/* ------------------------ */
@media screen and (max-width:980px){
    .gestaltung .col-40{width:100%}
    .gestaltung img{width:50%}
}



/* Bildschirmgrösse 950 px */
/* ------------------------ */
@media screen and (max-width:950px){
    footer .col-33,
    footer .col-66{width:100%}
    .quellen{margin-left:0px;}


}

/* Bildschirmgrösse 915 px */
/* ------------------------ */
@media screen and (max-width:915px){
    
    .kontakt{
        margin: 0px 5px 100px 10px;
        max-width: 86%;
    }

}

/* Bildschirmgrösse 900 px */
/* ------------------------ */
@media screen and (max-width:900px){
    /* nav{top:90px;} */
    h1  { 
        --h1size:76px;
        text-align: right;
    }

    .zeile2{
        width:100%;
        margin-left: 10px;
    }
    .artikelwiki1 h2{
        max-width: 400px;
    }
    .impressum{
        margin-left: 30px;
    }
}

/* Bildschirmgrösse 830 px */
/* ------------------------ */
@media screen and (max-width:830px){

    .kontakt,
    .formular{
        margin: 0px;
        width: 100%;
    } 
    .umbruch .col-66{width:100%}
    .umbruch .col-33{width:100%}
    .ust{min-width:600px}

    #userNeu{
        width:100%;
    }
    
}



@media screen and (max-width:780px){
    .lieferbed{margin-left: 0px;}

    .zeile1,
    .zeile2{
        width:100%;
        padding-right: 10px;
    }
    .abstand30{ margin-left: 10px;}
    p{margin-right:10px;}
    .zeile3 .floatR{float:none}

    .artikelwiki3{
        width:100%;
        margin-left: 5%;
    }

    footer{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .lastrow2,
    .lastrow1
    .lastrow{
        margin-left: 5px;
        width:100%;
    }
    .tmg{min-width:600px}

    .herstellerLogos{margin-left: 5px;}

    .mediaKunde,
    .mediaProd{
        width:100%;
    }
    .mediaAuto{
        margin-top: 20px;
        margin-left: 40px;
    }
    .mediaMenge{
        margin-top: 5px;
        margin-left: 10px;
    }
}

@media screen and (max-width:720px){
    h1  { 
        --h1size:64px;
    }
}

@media screen and (max-width:675px){
    .artikelwiki3{
        margin-left:10px;
        width:100%;
    }

}

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

    wrapper{
        margin-left: 10px;
    }
}



@media screen and (max-width:635px){
    .zeile3{
        margin-left:10px;
        width:100%;
    }
    .aboutArtikel1{
        width:90%;
        margin-left: 10px;  
        margin-top: 30px;     
    }

}

/* --------------------------------------------
Navigation umstellen in Rechteck neben Logo */
@media screen and (max-width:620px){
    /* nav{width:120px} */
    /* Spalten Auflösen */
    /* nav ul{
      display:block;
      width:100px;
    } */
    /* 2. ebene wieder anzeigen*/
    /* nav li ul{
      position:static;
    } */

    /* Liste ausblenden*/
    nav>ul{
      display:none;
      
    }

    /* Basistechnik show/hide*/
    /* öffnen Link anzeigen*/
    .open{
        display:inline-block;
        margin-left:18px;
    }
    .open:hover:before{
        position:absolute;
        margin-left: 55px;
        content:"Menu ";
    }
    .open:hover,
    .open:focus-within{
      color:var(--navcolor);
      background:var(--navcolor);
    }
    .close{
      
        margin: 5px;
        margin-left:20px;
    }
    .close:hover:before{
        position:absolute;
        margin-left:55px;
        content:"hide";
        color:var(--NavRot);
    }
    
    .close:hover,
    .close:focus-within{
      color:white;
    }

    /* Navigationsliste wieder anzeigen wenn open angeklickt wurde*/
    .open:target ~ ul{display:block;}
    /* Offnen verstecken wenn navi ausgeklappt */
    .open:target{display:none;}
    /* schließen link anzeigen*/
    .open:target~.close{display:inline-block;} 

    /* Untermenu verstecken*/
      nav li ul{
          position:absolute;
          left:-9999em;
      }
      /* Einblenden */
      nav li:hover ul,nav li:focus-within ul{
          left:122px;
          top:134px;
          padding: 2px;
      }

  }


  @media screen and (max-width:500px){
    header{
        flex-direction: column;
    }
    header h1{ margin-top: 0px;}

    h1{
        width:100%;
        line-height: 100%;
    }
}



@media screen and (max-width:420px){
    .floatR,
    .floatL{float: none;}
}