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

h1{
	font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
	text-align: center;
}
h2{
	font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
	text-align: center
}
h5{
	font font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
	text-align: center; /* Text-Ausrichtung */
}

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%
}

.portfolio { /* Abstände, Ausrichtung, etc. definieren */
   	width: 90%;
   	height: 100%;
   	margin-left: auto;
   	margin-right: auto;
    font-family: 'linux-libertine-regular', 'verdana', 'sans-serif'; /* Schriftart */
}

/* "Flexbox" - zur Anordnung der Portfolio-Bilder */

.portfolio-gruppe { /* ganzer Block mit allen Projekten */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.portfolio-projekt { /* einzelne Projekte */
	width: 300px; /* Bildgröße - wie echt */
	height: 1100px; /* Bildgröße - wie echt */
	margin: 60px; /* Abstand ums Bild auf allen Seiten */
}

.portfolio-projekt p { /* Beschriftung Portfoliobilder */
	position: relative;
	bottom: -0,3px; /* Abstand der Schrift von unten */
	text-align: left; /* Text-Ausrichtung */
	color: #808080;  /* Textfarbe (#FFFFFF = weiß) */
	margin: 0;
	font-size: 14px; /* Schriftgröße - festgelegt für ältere Browser */
	font-size: 1.2rem; /* Schriftgröße - relativ. 1rem = Standardschriftgröße des Browsers (i. d. R. 16px), sofern im Elternelement für Schriftgröße 100% eingestellt ist */
} 

.box1 p{
    font-family: 'arca-majora2-heavy', 'verdana', 'sans-serif'; /* Schriftart */
	letter-spacing: 0.1rem; /* Buchstabenabstand */
	word-spacing: 0.4rem; /*Abstand der Wörter */
	font-size: 200%;
	text-align: center; 
	background: 'bilder/werkplatz_porzellan_schmall.jpg';
}



/* 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-face {  
    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-face {
    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-face {
    font-family: 'linux-libertine-regular';
    src: 	url('schriften/linlibertine_r.woff') format('woff');
}