body{
    background-color: #1d606d;
}
@media ( min-width: 40em){
.grid-container{
    display: grid;
   
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 600px auto 200px;
   /* grid-auto-rows:minmax(100px,auto);*/
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow:column; 
   /* grid-auto-columns: 200px;*/
    grid-template-areas: 
    "header header header"
    "main-eins main-zwei main-drei"
    "fuss   fuss   fuss"
}
}
/*@media ( max-width: 40em){
    .grid-container{
        display: grid;
        margin-left:auto;
    margin-right:auto;
}
}*/
.cls-1 {
    stroke-linejoin: round;
  }

  .cls-1, .cls-2 {
    fill: none;
    stroke: #cfcea2;
    stroke-width: 4px;
    filter: url('#blur');
    
  }

  .cls-2 {
    stroke-miterlimit: 10;
  
  }
  .draw {
    animation-delay:2s;
    margin-left: auto;
    margin-right:auto;
    padding-top:50px;

    width:100%;
    stroke-dasharray: 2156.360;
    stroke-dashoffset: 0;
    animation: dash 4s linear ;
    justify-self:center;
  }
  
  @keyframes dash {
    from { stroke-dashoffset: -2156.360;}
    to { stroke-dashoffset: 0;}
  }
  
.header{
    grid-area: header;
    margin-left: auto;
    margin-right:auto;
}
#lens{
  background-color:green;
  width:500px;
  height:100px;
}
.main-1{
   grid-area: main-eins;
   justify-self: center;
   margin-top:100px;

    background-image: url ("img/produkt-praesentation.jpg")
    
}

.main-2{
    grid-area: main-zwei;
    background-color:#ffffff;
}
.footer{
    grid-area: fuss;
}