/*html>body nav,
html>body header{  /* nur fuer moderne Browser! */
 /*position: fixed;
 }
*/

header {	
display: flex;
align-items: flex-end; 
margin-left: 200px;  
margin-right: 200px;			
		}
header nav {
margin-top: 0px; 
text-align: left; 
line-height: normal; 
justify-content: flex-end; 
margin-left: auto;
}
header p {
text-align: left; 
line-height: normal;
background-color: aqua; 
margin-top: 0px;
}
header div {
margin-top: 125px; 
font-family: "JetBrains Mono", monospace;
font-size: 45px; 
font-weight: 800; 
letter-spacing: 10%; 
line-height: normal;
text-align: bottom;
text-transform: uppercase; 
margin-top: 60px;
}

/*
header p{
 margin-top: 125px; 
 font-family: "JetBrains Mono", monospace;
 font-size: 45px; 
 font-weight: 800; 
 letter-spacing: 15%; 
 text-align: center;
 text-transform: uppercase; 
 margin-top: 60px;
 }
nav{
 margin-left: 200px;  
 margin-right: 200px;
 margin-top: 60px;
 width: auto;
 }	*/

main{
 margin-top: 125px;
 margin-left: 200px;  
 margin-right: 200px;
 }
section, .box{
 display: flex;
 flex-direction: row; /*Elemente werden nach rechts gereiht */
 flex-wrap: wrap; /* Elemente die zu breit bzw. zu viel sind rutschen runter */
 }
.case{
 align-items: normal;
 margin: 0; 
 margin-bottom: 30px;
 margin-top: 125px;
}
article{
 -webkit-flex: 3 1 0%;
 flex: 3 1 0%;
 margin: 0px;
 }
article.textright{
 margin-left: 100px; 	 	 
}
article.textleft{
 margin-right: 100px; 	 	 
}
aside {
 -webkit-flex: 1.7 1 0%;
 flex-grow: 5;
 flex-shrink: 1; 
 flex-basis: 0%;
 margin: 0px;
 }
.text-container {
 display: flex;
 align-items: baseline; /* Richtet die Wörter an ihrer Textlinie unten aus */
 gap: 20px; /* Abstand zwischen den Wörtern */
 margin-top: 45px;
 vertical-align: middle;
}
img{
 width: 100%;
 height: auto;
 }
.box p{
 flex: 1.1 1 0%;
 margin-right: 30px;
 }
.box p + p{
 margin-right: 0;
 }
.box p img{
 height: auto;
 }
.spalten-2{
 -webkit-flex: 1.5 1 42%;
 flex: 1.5 1 42%;
 margin: 30px;
 }
/*
Flex Elemente
*/
.spalten-3{
 flex-grow: 1;
 flex-basis: 30%;
 margin: 20px;
}
.spalten-4, ul.referenz li{
 flex-grow: 1;
 flex-basis: 20%;
 margin: 10px;
}
/* ### Typografie für Textboxen ### */
section h1, section h2 {
 flex-basis: 100%;
 }
.abstand-links{
 margin-left: 100px;
 }

/* ### Footer ### */
footer{
 text-align: center;
 }
footer p{
 text-align: center;
 }
@media (max-width: 1800px) {
header{
 left: 9%;
 right: 9%
 }
main, nav, header{
 margin-left: 5%; 
 margin-right: 5%; 
 }
}
@media (max-width: 1400px) {
header{
 left: 4%;
 right: 4%
 }
main{
 margin-left: 4%; 
 margin-right: 4%; 
 }
.text-container {
 display: block;
 flex: none;
 }
}
@media all and (max-width: 1200px) {
html>body nav,
html>body header{  /* nur fuer moderne Browser! */
 position: relative;
 left: auto;
 top: auto;
 }		 
html>body header{  /* nur fuer moderne Browser! */
 left: 0;
 right: 0;
 }
section, aside, article{
 display: block;
 flex: none;
 }
.abstand-links{
 margin-left: 0px;
 }
.case article {
 margin-left: 0;
 margin-top: 30px;
}	
.case aside{
 width: auto;
}	
.case article.left {
 flex: none none none; 
 margin:0; 
 margin-left: 0px;
 margin-right: 75px;
}
ul.referenz, .box{
 flex-direction: row;
 flex-wrap: wrap;	
 }
.order-1{
 order: 2;
 }
.order-2{
 order: 1;
 }
.spalten-4, ul.referenz li{
 flex-grow: 1;
 flex-basis: 40%;
 flex-shrink: 1;
 margin: 10px;
 height: 100%;
 max-width: 100%	
 }
 }
@media all and (max-width: 700px) {
header {	
display: block;
	}
nav{	
margin: 0;
padding: 0%;
}
header nav {
margin-top: 30px; 
}
.spalten-2{
 margin: 5px;
 }
}