* { 
	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;
   	background:#000000;
}

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/albert_01.jpg) no-repeat center top; /* Hintergrundbild, horizontal zentriert */
   	background-size: cover; /* für Vollbild auf Startseite */
   	margin-bottom: 0px; /* Abstand unterm Header */
   	display: table;
   	position:relative;
}

h1{
	flex: 1 1 80%;
	margin: 4%; /* Abstand um den Text */
	letter-spacing: 0.4rem; /* Buchstabenabstand */
    font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
}

h1 {/* schrift ausrichten */
  color: #fff; /* schriftarbe Weiß */
  font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
  margin:10pt;
  width: 50%; /* breite der Überschrift sind 50% der kompletten weite */
  margin-left: 25%;
}

p { /* schrift ausrichten */
  color: #fff; /* schriftarbe Weiß */
  font-family: 'linux-libertine-regular', 'verdana', 'sans-serif'; /* Schriftart */
  margin:12pt;
  width: 50%;
  margin-left: 25%;
  font-size: 130%
}

body #gallery {  /* Betrifft die Gallerie */
  padding: 6%; /* Innenabstand */
  height: 100%; /* macht Vollbild vom linken bis zum rechten Bildschirmrand */
}

/* 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 */
	letter-spacing: 0.1rem; /* Buchstabenabstand */
	word-spacing: 0.3rem; /*Abstand der Wörter */
  font-size: 130%
}

video{
	vertical-align: middle; /* vertikale Ausrichtung des # im Feld */
	display: table-cell;
	margin-left: 25%;
	margin-right: 25%; 
}



/* Einbindung der Schrift */

@font-face { /* einbinden einer eigenen Schrift */
font-family: genome-thin; /* Name der Schrift */
src: url(schriften/genome-thin.otf); /* Link zur 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: 'linux-libertine-regular';
  src: url('schriften/linlibertine_r.woff') format('woff');
}