@charset "utf-8";
*{
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
	font-size: 100.1%;
	color: white;
	font-family: arial, sans-serif;
	}

#infobox{
position: fixed;
top: 10px;
left: 10px;
min-width: 30px;
min-height: 20px;
padding: 5px;
background-color: white;
z-index:1000;
color: black;
}

/* ******************************************************* */
/* Default-Einstellungen für tags                          */
/* ******************************************************* */
html, body {
	min-height:100%;
	} 
body{background-color: black;}
header{
	position: relative;
	background-color: black;
	text-align: center;
	}
h1{
	font-size: 130%;
	margin-bottom: 0.4vH;
	}
h2{
	font-size: 110%;
	margin-top: 0.2vH;
	}
aside{
	margin-bottom: 20px;
	white-space: normal;
	}
aside h3{
	text-align: left;
	}
aside p{
	text-align: left;
	}
p{
	margin-bottom: 10px;
	}

/* ******************************************************* */
/* Menü-Sichtbarkeit                                       */
/* ******************************************************* */
article[data-menu='Messer']{
	height: 0px;
	}	
article[data-menu='Schmiede']{
	height: 0px;
	}	
article[data-menu='Robin']{
	height: 0px;
	}	
article[data-menu='Kontakt']{
	height: 0px;
	}
article[data-menu='Philosophie']{
	height: 0px;
	}	

article[data-menu='Impressum']{
	height: 0px;
	}
article[data-menu='Galerie']{
	height: 0px;
	}	

/* ******************************************************* */
/* Struktur                                                */
/* ******************************************************* */
#website{
	background-color: black;
	margin-left: auto;
	margin-right: auto;
	min-height: 100vH;
	height: 100vH;
	}

/* ******************************************************* */
/* Kopf                                                    */
/* ******************************************************* */
header .logo{
	width: 100%;
	}
header .kopf1{
	position: absolute;
	top: 5%;
	left: 5%;
	color: gold;
	font-size: 7vW;
	font-style: italic;
	font-weight: bold;
	}	
header .kopf2{
	position: absolute;
	bottom: 5%;
	right: 5%;
	color: gold;
	font-size: 7vW;
	font-style: italic;
	font-weight: bold;
	}	

/* ******************************************************* */
/* Menü                                                    */
/* ******************************************************* */
nav.menu{
	border: 1px solid gold;
	margin: 5px;
	font-size: 2.7vH;
	cursor: pointer;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content:center;	
	}
nav.menu table{
	width: 100%;
	height: 100%;
	}
nav.menu .galnavmenu{
	background-size: 50px 80%;
	background-position: center center;
	background-repeat: no-repeat;
	}	
nav.menu .navmenuonleft{
	background-image: url("bilder/left.png");
	}
nav.menu .navmenuonright{
	background-image: url("bilder/right.png");
	}
#galnavmenu{
	width: 80%;
	text-align: center;
	}

/* ******************************************************* */
/* Content                                                 */
/* ******************************************************* */
article.content{
	padding: 0px 10px 0px 10px;
	overflow: hidden;
	width: 100%;
	}
article.content img{
	width: 100%;
	}
article.content .bildinfo{
	font-style: italic;
	}
article.content .smallpic-r{
	width: 45%;
	border-radius: 10px;
	float: right;
	margin-left: 5px;
	}
article.content .smallpic-l{
	width: 45%;
	border-radius: 10px;
	float: left;
	margin-right: 5px;
	}
article.content .smallpic-q{
	width: 100%;
	border-radius: 10px;
	}
article.content div.impressum{
	margin-bottom: 20px;
	}
article.content p.clear{
	clear: right;
	}

/* ******************************************************* */
/* Galerie                                                */
/* ******************************************************* */
#gallery {
	position: relative;
	max-width: 100%;
	margin: auto;
	overflow: hidden;
	}
#gallery div.picbox {
	width: 100%;
	display: none;
	}
#gallery div.pic {
	width: 100%;
	position: relative;
	}
#gallery img {
	width: 100%;
	}
#gallery div.pictext {
	text-align: left;
	}
#gallery div.pictext td {
	vertical-align: top;
	}
#gallery .visible {
	display: block !important;
	}
#gallery div.galnav{
	position: absolute;
	top: 40%;
	height:50px;
	width: 10%;
	background-size: 50px 100%;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	}
#gallery div.galleft{
	left: 1%;
	background-image: url("bilder/left.png");
	}
#gallery div.galright{
	right: 1%;
	background-image: url("bilder/right.png");
	}

#gallery div.pictitel{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	z-index: 10;
	padding: 10px;
	}

#gallery div.pictitel h1{
	cursor: pointer;
	font-size: 5.5vW;
	}
#gallery div.pictitel p{
	margin-bottom: 0px;
	display: none;
	font-size: 4vW;
	}
.visible{
	display: block;
	}



/* ******************************************************* */
/* Kontakt                                                 */
/* ******************************************************* */
#kontakt fieldset{
	padding: 10px;
	margin-bottom: 20px;
	}

#kontakt legend{
	padding: 0px 5px 0px 5px;
	font-weight: bold;
	}
#kontakt li{
	margin-left: 0px;
	list-style-type: none;
	margin-bottom: 20px;
	}
#kontakt input, #kontakt select, #kontakt textarea{
	padding: 5px;
	color: black;
	background-color: white;
	width: 60%;
	}
#kontakt label{
	width: 30%;
	display: inline-block;
	text-align: right;
	padding: 0px 5px 0px 0px;
	}
#kontakt textarea{
	width: 60%;
	height: 100px;
	}
#kontakt .error{
	background-color: lightsalmon;
	border: 2px solid red;
	}
#kontakt .hinweis{
	background-color: lightsalmon;
	padding: 10px;
	text-align: center;
	margin-bottom: 10px;
	}
#kontakt .ok{
	background-color: darkgreen;
	padding: 10px;
	text-align: center;
	margin-bottom: 10px;
	}

/* ******************************************************* */
/* Responsive                                              */
/* ******************************************************* */

/* Breakpoints 
Smartphone: <400px default
iPad: <800px 
Monitor: <1200px;
Monitor: >1200px
*/


/* Breakpoint 400 - 799 */
@media screen and (min-width: 400px) and (max-width: 799px) {
	
	}
/* Breakpoint 800 - 1199 */
@media screen and (min-width: 800px) {
	#gallery div.pictext{
		font-size: 2vW;
		}
	article div.col2{
		column-count: 2;
		column-gap: 30px;
		column-rule: 1px solid black;
		margin-bottom: 5px;
		}	
	article.content{
		font-size: 2vH;
		}
#gallery div.pictitel{
	}
#gallery div.pictitel h1{
	font-size: 4.5vW;
	cursor: pointer;
	}
#gallery div.pictitel p{
	font-size: 3vW;
	display: block;
	}



		

	}
/* Breakpoint ab 1200 */
@media screen and (min-width: 1200px) {
	#website{
		max-width: 1200px;
		}
	header .kopf1{
		font-size: 550%;
		}	
	header .kopf2{
		font-size: 550%;
		}	
	#gallery div.pictext{
		}
#gallery div.pictitel h1{
	font-size: 2.5vW;
	cursor: pointer;
	}
#gallery div.pictitel p{
	font-size: 2vW;
	display: block;
	}
	article div.col2{
		column-count: 2;
		column-gap: 30px;
		column-rule: 1px solid black;
		margin-bottom: 5px;
		}
	nav.menu{
		
		}
	article.content{
		font-size: 2vH;
		}

	}


/* Zweispaltige Darstellung */
/*
@media screen and (min-width: 800px) and (max-width: 1200px) {
	.flex-container {
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
		align-content: space-around;
		}
	.flex-item{
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 45%;
		max-height: 600px;
		}
	.flex-item {
		}
	.flex-1 {
		order: 1;
		}
	.flex-2 {
		order: 2;
		}
	.flex-3 {
		order: 4;
		}
	.flex-4 {
		order: 3;
		flex-basis: 90%;
		}
	.flex-5 {
		order: 5;
		}
	.flex-6 {
		order: 6;
		}
	.galpic{
		max-width: 100%;
		max-height:600px;
		}
	}
*/
/* Dreispaltige Darstellung */
/*
@media screen and (min-width: 1200px) {
	#website{
		max-width: 1400px !important;
		}
	.flex-container {
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
		align-content: space-around;
		}
	.flex-item{
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 60%;
		max-height: 600px;
		overflow-y:scroll;
		}
	.flex-item {
		}
	.flex-1 {
		order: 1;
		}
	.flex-2 {
		order: 2;
		}
	.flex-3 {
		order: 3;
		}
	.flex-4 {
		order: 4;
		}
	.flex-5 {
		order: 5;
		}
	.flex-6 {
		order: 6;
		}
	nav.menu{
		border: 1px solid gold;
		}
	}
*/