* { 
	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/werkstatthintergrunddunkelsw.jpg) no-repeat center top; /* Hintergrundbild auf Startseite, horizontal zentriert */
   	background-size: cover; /* für Vollbild auf Startseite */
   	text-align: left; /* zentriert Inhalte im Header (Logo) */
    font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
    color: #33ccff; /*Textfarbe - Fließtext*/
   	margin-bottom: 0px; /* Abstand unterm Header */
   	display: table;
}

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: 800px; /* Maximalbreite (sollte der tatsächlichen Breite des Bildes entsprechen) */
}

p { /* schrift ausrichten */
	padding: 10%; /* Innenabstand - also Schrift bis Boxrand */
} 

/* 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');
}