body {
   display:-webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   font-size: 100.0%;
 }

.left    { text-align: left; }
.right   { text-align: right; }
.center  { text-align: center; }
.justify { text-align: justify; }
.start   { text-align: start; }
.end     { text-align: end; }

.zentriert {
	margin-left: 50px;
	margin-right: 50px;
}

h1 {}

h2 {
	color: darkred;
	padding-left: 1em;
}

h3 {
	color: red;
	padding-left: 2em;
}

h4 {
	color: salmon;
	padding-left: 3em;
}

.separator {
  overflow: hidden;
  position: relative;
  text-align: center;
  color: #a20000;
  margin: 40px 0;
} 

.separator span {
  position: relative;
  padding: 0 10px;
  display: inline-block;
  max-width: 80%;
  background-color: #fff;
}

blockquote,
pre {
  position: relative;
  margin-left: 0; /* manuell 20180314 */
  margin-right: 0; /* manuell 20180314 */
  background: #e6e6e6;
  border: none;
}

blockquote {
  padding: 20px 10px 20px 40px;
  font-size: 100%;
  font-style: italic;
  line-height: 18px;
}


 /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
 header, nav, nav a, article, section, aside, footer {
   border-radius: 0px 0.5em 0.5em;
   border: 1px solid;
   padding: 10px;
   margin: 10px;
   -webkit-flex: 1 100%;
   flex: 1 100%;
 }

 header {
   background: #F1F3F4;
   border-color: #d5d5d5;
   display:-webkit-flex;
   -webkit-flex-flow: row wrap;
   display: flex;
   flex-flow: row wrap;
 }
 header * {
   -webkit-flex: 1 1 0%;
   flex: 1 1 0%;
 }
 header img {
   -webkit-flex: 0 0 150px;
   flex: 0 0 150px;
   margin-right: 20px;
 }
 header nav {
   -webkit-flex: 1 1 100%;
   flex: 1 1 100%;
 }
 nav, nav ul, nav li{
   margin: 0;
   padding:0;
   border:none;
 }
 nav ul {
   display: -webkit-flex;
   -webkit-flex-direction: column;
   display: flex;
   flex-direction: column;
 }
 nav li {
   list-style-type:none;
   margin: 1.3em 0;
   -webkit-flex: 1 1 100%;
   flex: 1 1 100%;
 }
 nav a {
   display:inline-block;
   width:95%;
   background: #fffbf0;
   border: 1px solid #dfac20;
   margin: 0;
   text-decoration: none;
   text-align: center;
 }
 nav a:hover {
   background-color: #dfac20;
 }
 section {
   background: #F1F3F4;
   border-color: slateblue;
 }
 article {
	 display:inline-block;
   background: #ffede0;
   border-color: #df6c20;
 }
 aside {
   background: #ebf5d7;
   border-color: #8db243;
 }
 footer {
   background: #e4ebf2;
   border-color: #8a9da8;
   display:-webkit-flex;
   -webkit-flex-flow: row wrap;
   display: flex;
   flex-flow: row wrap;
 }
 footer * {
   -webkit-flex: 1 1 0%;
   -webkit-justify-content: space-between;
   flex: 1 1 0%;
   justify-content: space-between;
 }
 footer p {
   text-align: right;
 }
 
 img {
	background: white;
	border: 1px solid black;
	width: 20%;
	height: auto;
}

 
 /* Smart Phones und Tablets mit mittlerer Auflösung */
 @media all and (min-width: 35em) {
 header img {
   margin-right: 50px;
 }
 nav ul {
   -webkit-flex-direction: row;
   flex-direction: row;
 }
 nav li {
   margin: 0 10px;
   -webkit-flex: 1 1 0%;
   flex: 1 1 0%;
 }
 article {
   webkit-order: 2;
   order: 2;
 }
 #news {
   -webkit-flex: 1 auto;
   -webkit-order: 3;
   flex: 1 auto;
   order: 3;
 }
 aside {
 /* durch auto werden die beiden asides in eine Zeile gesetzt */
   -webkit-flex: 1 auto;
   -webikit-order: 4;
   flex: 1 auto;
   order: 4;
 }
 footer {
   webkit-order: 5;
   order: 5;
 }
 }

/* Large screens */
@media all and (min-width: 50em) {
article {
   /* Der Article wird 2.5x so breit wie die beiden asides! */
   -webkit-flex: 5 1 0%;
   -webkit-order: 3;
   order: 3;
   flex: 5 1 0%;
 }
 aside {
   -webkit-flex: 2 1 0%;
   flex: 2 1 0%;
 }
 #news {
   -webkit-flex: 2 1 0%;
   -webkit-order: 2;
   -webkit-align-self: center;
   flex: 2 1 0%;
   order: 2;
   align-self: center;
   height: 120px;
 }
 }