body
{
background-color: lightgray;
margin: 0;
font-family:Verdana, Arial, sans-serif;
}
.header
{
}
.header img
{
width:100vw;
}
.header-text
{
color:silver;
font-size:5em;
width:100%;
position:absolute;
top:0px;
text-align:center;
}
.leftside
{
padding:0 0 1em 0;
display:flex;
flex-flow: row wrap;
}
.text
{
max-width:25vw;
padding:1em 2em;
font-size:0.9em;
}
.text a
{
text-decoration:none;
font-size:0.8em;
color:black;
}
.text img
{
width:50%;
margin: 1em 0 0 0 ;
border-radius:20px;
}
.fig
{
width:25%;
max-width:40%;
margin:0 10px 10px 10px;
font-size: 0.8em;
flex: 1 0 33%;
}
.fig img
{
width:100%;
}
.screenshots
{
max-width:45vw;
<!-- display:flex; -->
flex-flow: row wrap;
}
.fig-screenshots, .fig-screenshots figure
{
margin: 1em 0 0 0 ;
}
.fig-screenshots img
{
max-width:100%;
}
.werkzeuge
{
align-content:flex-start;
max-width:20vw;
display:flex;
flex-flow: row wrap;
padding: 1em 0 0 1em;
}
.adresse
{
padding:0.5em 0;
background-color:darkgrey;
font-size:0.7em;
font-weight:bold;
clear:both;
text-align:center;
}

@media only screen and (max-width:950px)
{
.header-text
{
font-size:3em;
top:15px;
}

}
@media only screen and (max-width:700px)
{
.header-text
{
font-size:2em;
top:25px;
}
.werkzeuge
{
max-width:60vw;
}
}