@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meinerschrift.ttf') format('truetype'); }

body{
    background-color: #eff4ee;
    font-family: 'Dosis', sans-serif;
}

.medium{
font-weight: bold;
}

#text{
margin-top: 1em;
font-size: 1.3em;
}
#foto{
margin-top: 1.5em;
width: 780px;
height: 300px;
background-color: lightblue;

}
#header{
width: 100%;
height: 2.2em;
background-color: #313133;
color: #ffffff;
text-align: center;
padding-top:0.5em;
font-size: 2.5em;

}
#seite{
width: 780px;
margin-bottom: 3em;
margin-left: auto;
margin-right: auto;
}


#linie1
{
width: 156px;
height: 3em;
float: left;
text-align: center;
padding-top: 1em;
font-size: 1.2em;
background-color:#313133;
margin-top: 0.1em;
color: #FFFFFF;

}
#linie3
{
width: 156px;
height: 3em;
float: left;
text-align: center;
padding-top: 1em;
font-size: 1.2em;
background-color: #3fa033;
margin-top: 0.1em;
color: #ffffff;
}

#linie4
{
width: 156px;
height: 3em;
float: left;
text-align: center;
padding-top: 1em;
font-size: 1.2em;
background-color: pink;
margin-top: 0.1em;
color: #ffffff;
background-color: #c76c28;
}
#linie2,  #linie5 
{
width: 156px;
height: 3em;
float: left;
text-align: center;
padding-top: 1em;
font-size: 1.2em;
background-color: #b3002d;
margin-top: 0.1em;
color: #ffffff;

}

#bild{
    
width: 780px;
height: 600px;
margin-left: auto;
margin-right: auto;
background-image: url(logo.svg);
background-repeat: no-repeat;
float: left;

}
#anzeige{

float: left;
color: white;
font-size: 2em;
/*
border-style: solid;
border-color: #b3002d;
border-width: 0.12em;
*/
color: #eff4ee;
background-image: url(schrift.svg);
background-repeat: no-repeat;
width: 780px;
height: 175px;
}
#lavie 
{
margin-top: 2em;
width: 260px;
height: 100px;
float: left;
background-image: url(lavie.svg);
background-repeat: no-repeat;
}

#axon{
margin-top: 2em;
width: 260px;
height: 100px;
float: left;
background-image: url(axon.svg);
background-repeat: no-repeat;
}
#streif{
margin-top: 2em;
width: 260px;
height: 100px;
float: left;
background-image: url(streif.svg);
background-repeat: no-repeat;
}

#impressum a{
color: #c76c28;
}
#linie1 a, #linie2 a, #linie3 a, #linie4 a, #linie5 a{
color: #ffffff;
text-decoration: none;
}

#impressum{
width: 100%;
text-align: center;
float: left;
margin-top: 0.3em;
margin-bottom: 3em;

border: none; 
border-top: 0.2em solid #c76c28; 
color: #c76c28;
height: 1px;
padding-top: 1em;
font-size: 1.3em;
}
#impressum2{
width: 100%;
text-align: center;
float: left;
}


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


{

    
#linie1, #linie2, #linie3, #linie4, #linie5, #impressum, #seite{clear: both; width: 100%; 
    margin-top: 0.2em;font-size: 1.4em; }
 #bild {width: 100%; background-size: 80%; margin-left: auto; margin-right: auto;}
#lavie, #axon, #streif{clear: both; width: 100%; height: 355px; background-size: 100%;}
     #anzeige   {font-size: 1.8em; clear: both; height: 250px; width: 100%;background-size: 100%;  }

}


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

    
#linie1, #linie2, #linie3, #linie4, #linie5, #impressum, #seite {clear: both; width: 100%; margin-top: 0.2em; font-size: 1.4em;}
 #bild  { width: 100%; ; background-size: 100%; }
#lavie, #axon, #streif{clear: both; height: 262px; width: 100%;}
         #anzeige   {font-size: 1.8em; clear: both; height: 180px; width: 100%;background-size: 100%;  }


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

    
#linie1, #linie2, #linie3, #linie4, #linie5, #impressum, #seite {margin-top: 0.2em; clear: both; width: 100%; font-size: 1.4em; }
 #bild  {width: 100%; ; background-size: 100%; height: 340px;}
#lavie, #axon, #streif{clear: both; width: 100%; background-size: 100%; height: 165px;  }
 #anzeige   { font-size: 1.5em; clear: both; width: 90%;background-size: 100%;} 
}