body {
font-family: Arial;
background-color: rgb(208, 239, 214);
margin:0;/*rand entfernen*/
padding:0;/*Innenabstand von allen elementen in body auf 0 setzen */
white-space: normal;
}

header {
background: url(../images/logo.png) no-repeat center;
background-color: white;
height: 0px; /*height auf 100 um ihn einzublenden*/

position: relative;/*damit z-index angewendet werden kann*/
z-index: -1;/*ebene verschieben, damit der schatten über der section ist*/
}

nav{/*navigationsleiste*/
margin-top:0px;
font-size:0;/*leerzeichen zwischen elementen entfernen*/
text-align:center;/*text mittig*/

width:100%;/*nav container über gesamte breite*/
background:#4C0;

box-shadow: 0px -10px 20px 10px black;
/*box-shadow: 0px 5px 20px 0px hsl(0, 0%, 50%);*/

position: relative;/*damit z-index angewendet werden kann*/
z-index: 1;/*ebene verschieben, damit der schatten über der section ist*/
}



nav a { 
padding:10px 10px 10px 10px;/*oben links unten rechts*/
display:inline-block;/*nebeneinander und als block damit man breite einstellen kann*/
width:100px;
font-size:20px;
color:black;/*schrift schwarz*/
text-decoration:none;/*nicht unterstrichen*/
transition:background .2s;
}

nav a:hover {/*beim drüberfahren mit der maus*/
background:#4E0;
}

nav a:active {/*beim ankliken mit der maus*/
transition:background 0s;
background:#4D0;
}

nav a.mark, nav a:focus:not(:active) {/*aktuelle seite*/
background:#0A0;
}

section{

/*kleine, mittlere und grosse ansicht*/
padding:20px 10px 20px 10px;/*oben links unten rechts*/
left: 0%;/*position in der mitte*/

}


/*ungenutzt*/
.img-float{
float:left;/*text umfließen*/
margin:5px 15px 0px 2px;

}

.block:first-of-type,.card:first-of-type{
margin-top:30px;/*erste karte/block 30 abstand*/
}

.block,.card{
margin-top:20px;/*jede weitere 20*/
padding:15px;
clear: left; display: block;
}

.block h1,.card h1{
margin-top:0px;
margin-bottom:20px;
}

.card{
box-shadow: 0px 0px 10px 0px hsl(0, 0%, 50%);
border-radius: 5px;
background-color:white;
opacity:0.7;
transition: opacity 750ms;
}

.card:hover{
opacity:1;
}

.card  a{/*verknüpfungen in carten blau und rechts ausrichten*/
float:right;
color:blue;
margin-left:1em;
}


span.clear { clear: left; display: block; }
.box{

display: block;
float: left;

box-shadow: 0px 0px 10px 0px hsl(0, 0%, 50%);
border-radius: 5px;
overflow: hidden;

width:calc((100% / 3) - 30.5px);/*0.5 für rundungsfehler*/
margin:15px;

text-align:center;
padding-bottom:5px;
background:hsl(0, 0%, 95%);
filter: brightness(100%);
transition:filter .2s;
}

.box img{
width:100%;
}

.box a{
display:block;
color:black;
text-decoration:none;
}

.box a:focus{
	outline: none;
}

.box:hover{
filter: brightness(95%);
}

.box:active{
transition:filter 0s;
filter: brightness(85%);
}

@media (max-width: 700px) {/*zwei zeilen*/
.box{
width:calc(50% - 30px);
}
}
@media (max-width: 500px) {/*eine zeilen*/
.box{
width:calc(100% - 0px);
margin:0px;
margin-bottom:30px;
}
}


@media (min-width: 400px) {/*bei über 400px folgendes anwenden*/
section{
padding:20px;/*oben links unten rechts*/
}
.block,.card{
padding:20px;

}
}

@media (min-width: 1040px) {/*bei über 1000px folgendes anwenden*/
body {background-color: rgb(212, 253, 245);}
section{
	/*mittlere und grosse ansicht*/
left: 50%;/*position in der mitte*/
box-shadow: 0px 0px 50px 0px hsl(0, 0%, 50%);
position:absolute;
	
/*grosse ansicht*/
margin-left: -520px;
width:1000px;
min-height: 600px;


background-color: rgb(208, 239, 214);
/*animation*/
transform: translateY(-1200px);
animation: slidein 600ms forwards;
transition-timing-function: linear;
}

section.slideout{
animation: slideout 600ms;
transform: translateY(0px)
}
@keyframes slidein {
    100% { transform: translateY(0px); }
}

@keyframes slideout {
    100% { transform: translateY(-1200px); }
}


}
}

@media (min-width: 360px) and (max-width: 500px){/*für 4 elemente zeilenumbruch nach 2 elementen*/
nav a:nth-of-type(2n-1){ 
margin-left:50px;
}
nav a:nth-of-type(2n){ 
margin-right:50px;
}

}