* { 
	margin: 0;
	padding: 0;
	box-sizing: content-box; 
}

html, body { /* betrifft den Body */
	font-size: 100%; /* Schriftgröße */
	height: 100%;
	margin: 0;
	letter-spacing: 0.1rem; /* Buchstabenabstand */
	word-spacing: 0.3rem; /*Abstand der Wörter */
}

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/lili_kontakt.jpg) no-repeat center top; /* Hintergrundbild auf Startseite, horizontal zentriert */
   	background-size: cover; /* für Vollbild auf Startseite */
   	text-align: left; /* Bündigkeit & Anordnung: linksbündiger Text & angeordnet links im Feld */
    font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
    color: #33ccff; /* Schriftfarbe */
   	margin-bottom: 0px; /* Abstand unterm Header */
   	display: table; /*enth. tabellar. angeordnete Kindelemente und erzeugt e neue Zeile */
   	position: relative;
   	/* background: green; */
}

header #kontaktdaten { /* schrift ausrichten */
	vertical-align: middle; /* vertikale Ausrichtung des # im Feld */
	display: table-cell;
	margin-left: auto;
	margin-right: auto;
	/* padding-left: 30%; */ /* Abstand um den Text - um ihn, wenn linksbündig, ein Stück vom Rand weg zu bekommen. Text align center muss dann hier ausgeschalten werden. */
	max-width: 100%;
	height: auto;
	text-align: center; /* richtet den text mittig aus - zentriert & mittig platziert. */
	/* background: orange; */

	/* padding: 5%; /* Innenabstand - also Schrift bis Boxrand */
	/* background: green; */

} 

footer { /* betrifft den Footer */
    background: black; */
}

@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. */
}