* { 
	text-decoration: none; /* Unterstreichung entfernen */
	margin: 0;
	padding: 0;
	box-sizing: content-box; 
}

html, body { /* betrifft den Body */
	font-size: 100%; /* Schriftgröße */
   	height: 100%; /* macht Vollbild vom linken bis zum rechten Bildschirmrand */
   	margin: 0;
}

header { /* betrifft den Header */
   	height: 100vh; /* macht Vollbild auf Startseite vom oberen bis zum unteren Bildschirmrand */
   	width: 100%; /* macht Vollbild auf Startseite vom linken bis zum rechten bildschirmrand */
	background: transparent url(bilder/mix_fullhd_schwarz.jpg) no-repeat center top; /* Hintergrundbild, horizontal zentriert */
   	background-size: cover; /* für Vollbild auf Startseite */
   	text-align: center; /* zentriert Inhalte im Header (Logo) */
   	display: table;
   	position:relative;
}

header #divlogo { /* Logo - Ausrichtung */	
	vertical-align: middle; /* vertikale Ausrichtung des # im Feld */
	display: table-cell;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
} 

header #imglogo { /* fluide Logo-Größe */	
	vertical-align: middle; /* vertikale Ausrichtung des # im Feld */
	display: table-cell;
	margin-left: auto;
	margin-right: auto; 
	width: 100%; /* relative Breite des Bildes */
	max-width: 1500px; /* Maximalbreite (sollte der tatsächlichen Breite des Bildes entsprechen) */
} 

/* ARTIKELABSÄTZE */

/* "Flexbox" - zur Anordnung von Bereichen */

article {
	display: flex; /*ermöglicht flexibles Layout für "body". Alle flexiblen Kind-Elemente werden zu Flex-Items */
	flex-direction: row; /*Anordnung der Flex-Items in Reihen oder Spalten (row/column)*/
	flex-flow: row wrap; /*ermöglicht Umbrüche der Flex-Item-Reihen bei kleineren Bildschirmen*/
    font-family: 'linux-libertine-regular', 'verdana', 'sans-serif'; /* Schriftart */
	font-size: 150%;
	letter-spacing: 0.0rem; /* Buchstabenabstand */
	word-spacing: 0.0rem; /*Abstand der Wörter */
}

/* A R T I K E L A B S A T Z   1  -  Nur Text, in Spalten, über ganze Fensterbreite */

.container1 { /* Aritkelabsatz */
	flex-direction: row; /* Anordnung der Elemente (Bild + Text) nebeneinander */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/* background:lightblue; */ 
}

.container1 > div:first-child { /* erste "Box" im Artikelabsatz (ganz links) */
	width: 100%;	/* Breite der Box im Absatz */
	background:lightskyblue; /**/
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

#box1_1 { /* Text im Aritkelabsatz */
	flex: 1 1 80%;
	margin: 4%; /* Abstand um den Text */
	-moz-column-width: 20em; /*maximale Spaltenbreite (befehl für Mozilla Firefox)*/
	-webkit-column-width: 20em; /*maximale Spaltenbreite (befehl für Chrome, Safari)*/
	column-width: 20em; /*maximale Spaltenbreite*/
/*    font-family: 'arcamajora3_heavy', 'verdana', 'sans-serif'; /* Schriftart */
}

/* A R T I K E L A B S A T Z   2  -  Vollbild */

.container2 { /* Aritkelabsatz */
	flex-direction: row; /* Anordnung der Elemente (Bild + Text) nebeneinander */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/* background:lightblue; */ 
}

.container2 > div:first-child { /* erste "Box" im Artikelabsatz (ganz links) */
	width: 100%;	/* Breite der Box im Absatz */
	/* background:yellow; */
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

#box2_1 { /* Bild im Artikelabsatz */
	flex: 1 1 80%;
	margin-left: auto; /*box im container horizontal zentrieren*/
	margin-right: auto; /*box im container horizontal zentrieren*/
	width: 100%;
	vertical-align:bottom; /* vertikale Ausrichtung des # im Feld - verhindert ungewollten Abstand zum nächsten Absatz aufgrund Buchstabenunterlängen */
}

/* A R T I K E L A B S A T Z   3  -  links Bild, rechts Bild */

.container3 { /* Aritkelabsatz */
	flex-direction: row; /* Anordnung der Elemente (Bild + Text) nebeneinander */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/* background:lightblue; */ 
}

.container3 > div:first-child { /* erste "Box" im Artikelabsatz (ganz links) */
	width: 50%;	/* Breite der Box im Absatz */
	/* background:yellow; */
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

.container3 > div { /* zweite Box im Artikelabsatz - (rechts neben der ersten) */
	width: 50%; /* Breite der Box im Absatz */
	/* background: green; */
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

#box3_1 { /* Bild im Artikelabsatz */
	flex: 1 1 80%;
	margin-left: auto; /*box im container horizontal zentrieren*/
	margin-right: auto; /*box im container horizontal zentrieren*/
	width: 100%;
	vertical-align:bottom; /* vertikale Ausrichtung des # im Feld - verhindert ungewollten Abstand zum nächsten Absatz aufgrund Buchstabenunterlängen */
}

#box3_2 { /* Bild im Aritkelabsatz */
	flex: 1 1 80%;
	margin-left: auto; /*box im container horizontal zentrieren*/
	margin-right: auto; /*box im container horizontal zentrieren*/
	width: 100%;
	vertical-align:bottom; /* vertikale Ausrichtung des # im Feld - verhindert ungewollten Abstand zum nächsten Absatz aufgrund Buchstabenunterlängen */
    /* background: orange; */
}

/* A R T I K E L A B S A T Z   4  -  Nur Text, in Spalten, über ganze Fensterbreite */

.container4 { /* Aritkelabsatz */
	flex-direction: row; /* Anordnung der Elemente (Bild + Text) nebeneinander */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/* background:lightblue; */ 
}

.container4 > div:first-child { /* erste "Box" im Artikelabsatz (ganz links) */
	width: 100%;	/* Breite der Box im Absatz */
	background:lightskyblue; /**/
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

#box4_1 { /* Text im Aritkelabsatz */
	flex: 1 1 80%;
	margin: 4%; /* Abstand um den Text */
	-moz-column-width: 20em; /*maximale Spaltenbreite (befehl für Mozilla Firefox)*/
	-webkit-column-width: 20em; /*maximale Spaltenbreite (befehl für Chrome, Safari)*/
	column-width: 20em; /*maximale Spaltenbreite*/
/*    font-family: 'arcamajora3_heavy', 'verdana', 'sans-serif'; /* Schriftart */
}

/* A R T I K E L A B S A T Z   5  -  links Text, rechts Bild*/

.container5 { /* Aritkelabsatz */
	flex-direction: row; /* Anordnung der Elemente (Bild + Text) nebeneinander */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background-color: black;
	color: white;
}

.container5 > div:first-child { /* erste "Box" im Artikelabsatz (ganz links) */
	width: 50%;	/* Breite der Box im Absatz */
	/* background:yellow; */
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

.container5 > div { /* zweite Box im Artikelabsatz - (rechts neben der ersten) */
	width: 50%; /* Breite der Box im Absatz */
	/* background: green; */
	margin: auto; /* zentriert inhalte horizontal und vertikal */
}

#box5_1 { /* Text im Aritkelabsatz */
	flex: 1 1 80%;
	margin: 20%; /* Abstand um den Text */
}

#box5_2 { /* Bild im Artikelabsatz */
	flex: 1 1 80%;
	margin-left: auto; /*box im container horizontal zentrieren*/
	margin-right: auto; /*box im container horizontal zentrieren*/
	width: 100%;
}

/* Einbindung der Schrift */

@font-face { /* einbinden einer eigenen Schrift */
  	font-family: 'arca-majora2-heavy'; /* Name der Schrift */
  	src: url('schriften/arcamajora2_heavy_webfont.eot#') format('eot'),
    	 url('schriften/arcamajora2_heavy_webfont.woff') format('woff'),
         url('schriften/arcamajora2_heavy_webfont.woff2') format('woff2'),
         url('schriften/arcamajora2_heavy_webfont.ttf') format('truetype'),
         url('schriften/arcamajora2_heavy_webfont.svg#arca-majora2-heavy') format('svg'); /* Links zu den Schrift-Dateien in verschiedenen Formaten. Nach der eot steht ein #, so daß der Internet-Explorer nur dieses Format ließt und nicht weiter ließt. */
    font-family: 'arca-majora3-heavy';
    src: url('schriften/arcamajora3_heavy.eot#') format('eot'),
    	 url('schriften/arcamajora3_heavy.woff') format('woff'),
         url('schriften/arcamajora3_heavy.woff2') format('woff2');
    font-family: 'arca-majora3-bold';
    src: url('schriften/arcamajora3_bold.eot#') format('eot'),
    	 url('schriften/arcamajora3_bold.woff') format('woff'),
         url('schriften/arcamajora3_bold.woff2') format('woff2');
    font-family: 'linux-libertine-regular';
    src: url('schriften/linlibertine_r.woff') format('woff');
}