body {
	color:#000000;
	background-color:#FFF;
	font-family:"Century Gothic",Arial,"Sans Serif";
	font-size: large;
	font-weight: 400;
	text-align: justify;
	line-height:1.5;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
}

    a  { color:#A41C1C; font-weight:bolder;}
    a:visited { color:#A41C1C; }
    a:hover { color:#FF0000; text-decoration:underline;}
    a:active { color:#A41C1C; }
    /* Don't underline links */
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    
  h1 {font-size:xx-large; font-weight:bold; text-transform:uppercase;}
  h2 {font-size:x-large; font-weight:bold;  }
  h3 {font-size:medium; font-weight:bold;}
  h4 {font-size:medium; font-weight:bold;}
  
  .kleiner {font-size:smaller; }
  .groesser {font-size:large; }
  .links {text-align: left; }

   #head {
	max-width: 15em;
     } 

  #zitat {
    top: 1em; 
    margin: 1% 0% 0% 1%;
    padding: 1% 2%;
    text-align: right;
    font-size:smaller;
	line-height:1.2;
  }
  #zitat i {font-size:medium;}

  /* Associated items */
.associated-items {
    background-color: #fef1e7;
    width: 100%;
}
.associated-items-checkbox {
    display: none;
}
.associated-items-header {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
    user-select: none;
}
.associated-items-header-text {
    padding: 0% 2% 0% 3%;
}

.associated-items-list {
    background-color: #fef1e7;
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0% 2% 0% 7%;
}
.associated-item {
	font-size:medium;
    height: 0px;
    margin-bottom: 0px;
    transition: padding 0s, height 0.2s;
    -moz-transition: padding 0s, height 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0s, height 0.2s; /* Safari and Chrome */
    -o-transition: padding 0s, height 0.2s; /* Opera */
}
.associated-items-checkbox:checked ~ .associated-items-list .associated-item {
    height: auto;
}
.associated-items-checkbox:checked ~ .associated-items-list .associated-item:last-child {
    border-bottom: none;
}  

  
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header,
article,
aside,
vid,
footer {
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

header {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	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;
}

article {
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
}

aside {
	background: #fef1e7;
	min-width: 18em;
    padding: 0% 0.5% 0% 1%;
}
vid {
	background: #D90000;
	min-width: 18em;
    padding: 0% 0.5% 0% 1%;
}
footer a {
	padding: 10px;
}

footer ul,
footer li {
	padding: 0;
}

footer ul {
	background-color: #fef1e7;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}

footer li {
	list-style-type: none;
	-webkit-flex: 1 1 content;
	flex: 1 1 content;
}

footer a {
	display: inline-block;
	width: 100%;
	text-decoration: none;
	text-align: left;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {
	
	header img {
		margin-right: 50px;
	}
	article {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		
		-webkit-flex: 3 1 0%;
		-webkit-order: 3;
		order: 3;
		flex: 3 1 0%;
	}
	#news {
		-webkit-flex: 1 1 0%;
		-webkit-order: 2;
		-webkit-align-self: top;
		flex: 1 1 0%;
		order: 2;
		align-self: top;
	}
	aside {
		-webkit-order: 2;
		order: 2;
		-webkit-flex: 2 1 0%;
		flex: 2 1 0%;
	}
	vid {
		-webkit-order: 2;
		order: 2;
		-webkit-flex: 2 1 0%;
		flex: 2 1 0%;
	}

	footer {
		webkit-order: 5;
		order: 5;
		-webkit-flex-direction: row;
		flex-direction: row;
		justify-content: space-between;
	flex: 1 1 content;
	}
		footer ul {
		-webkit-flex-direction: row;
		flex-direction: row;
		justify-content: space-between;
	}
		footer li {
		margin: 0 1.5em;
		-webkit-flex: 1 1 content;
		flex: 1 1 content;
	}
}


/* Large screens */
@media all and (min-width: 50em) {
 	body {
		background: url(r-d-m_rot_vert_transp.gif) right no-repeat fixed;
		margin: 1% 10% 0% 2%;
	}	
	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: top;
		flex: 2 1 0%;
		order: 2;
		align-self: top;
	}

}