/* ------------------------- */
/* --- Color Customizing --- */
/* ------------------------- */
html {
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-style: normal;
	color:black;
	background-color:white;
	background-color:#e8eee8;
}

body {
	color: #040440; /* very dark blue */
	/* background: #FFFCFC; slightly warm white */
	background-color:#e8eee8; /* very light grey-blue, outer border */	
}

header {
	color:white;
	background-color:#006400;
}

section {
	color:inherit;
	background-color:#e8eee8;
}

.flex-container { display:flex; flex-direction:column; }
.flex-item { flex: auto; }
@media all and (min-width: 414px) { .flex-container { flex-direction: row; } }

/* ----------------------------------------------------- */
@media only screen {
	article {
		color: #040440; /* very dark blue */
		background: #FFFCFC; /* warm white */
	}
	h2 {
		color: #105800;
		background: inherit;
	}
	h3 {
		color: white;
		background: #105800;
	}
	.room {
		height:2em;
	}

}
/* ----------------------------------------------------- */
/* literally */
.lit {
	font-style: italic;
}
/* underlined */
.uld {
	text-decoration: underline;
}
/* bold */
.bd {
	font-weight:bold;
}
.shownone {
	display: none;
}

/* ------------------------- */
/* --- Navigation Colors --- */
/* ------------------------- */

/* Navigation button (only mobile) */
.nav-button, .nav-close {
	background: transparent; /* #336199; 003a80; */
	color: silver;
}
/* menu unfolded (mobile) */
.nav {
	background: transparent;
	color: silver;	
}
/* menu background (no mouseover) */
.nav ul {
	border-radius: 0 0 0 0;	
	background: #105800;
}
/* sub menu background (no mouseover) */
.nav ul ul {
	background: #105800;
}
/* sub sub menu background (no mouseover) */
.nav ul ul ul {
	background: #105800;
}
/* sub sub sub menu background (no mouseover) */
.nav ul ul ul ul {
	background: #105800;
}
/* sub sub sub sub menu background (no mouseover) */
.nav ul ul ul ul ul {
	background: #105800;
}
/* horizontal line between menu items */
.nav li {
	border-top: 1px solid silver;
}

.nav li:hover > a,
.nav li.nav-active > a {
	color: white;
	background: transparent; 
}

.nav a,
.nav a:hover,
.nav a:active,
.nav a:visited {
	color: Gainsboro;
}
/* ----------------------------------------------------- */


/* ---------------------------------- */
/* Minimal Resolution 320 px - 480 px */
/* Smartphone Mode                    */
/* ---------------------------------- */
html {
	font-size: 62.5%;
}

body {
		margin-top:0rem;
		margin-left:0rem;
		margin-right:0rem;
		margin-bottom:1rem;
		padding-top: 0rem;
}

.canvas {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:0rem;
}

header {
	position:fixed;
	top:0;
	left:auto;
	right:auto;
	width:100%;
}

h1 {
	font-size: 2.4rem;
	line-height:3rem;	
}

.nav {
	position:fixed;
	top:0;
	left:auto;
	right:auto;
	width:100%;
}

.nav-button {
	position:fixed;		
	left:auto;
	right:auto;
	width:100%;
	padding-left:90%;
}

.nav ul { 
	width:26rem;
	margin-left: auto;
	margin-right:2rem;
}

article {
	padding-top: 4rem;
	left: auto;
	right: auto;
}

h2 {
	font-size: 2.4rem; /* sonst 3rem */
	font-weight:bold;
	margin-left:3%; /* linker, weißer Rand */
}	

section {
	margin-left:3%; /* linker, weißer Rand */
	margin-right:5%; /* rechter, weißer Rand */
	margin-bottom:1rem;
	padding-bottom:1rem;
}

h3 {
	font-weight:initial;
	font-size: 2rem;		/* sonst 2rem */
	line-height:3rem;	/* sonst 3rem */
	margin-top:0;		/* kein Abstand zum oberen Rand */
	padding-left:2rem;
}

.txtbox {
	margin-left:0;
	margin-right:0;
	padding-left:2rem;
	padding-right:2rem;
}

h4 { 
	font-size:2.0rem;
	/* line-height:2rem; */
	padding-left:0rem;
	margin-top:3rem;
	margin-bottom:1rem;
}

.citebox {
	color:inherit;
	background:transparent;
	font-size:1.6rem;
	font-style: italic;
	text-align:left;
	margin-left:1.0rem;
	padding-left:1rem;
	padding-right:1rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	width:94%;
	box-shadow: -0.05rem 0.2rem 0.4rem 0rem grey;
}

.point {
	list-style-type: disc;
	padding-left:2rem;
}
/* ----------------------------------------------------- */


/* ----------------------------------------------------- */
 @media only screen and (min-width: 481px) {
	html { font-size: 64%; }
	.canvas { width:92%; }
	header { width:92%; }
	.nav { width:92%; }
	.nav-button {
		width:92%;
		padding-left:80%;
	}
}

/* --------------------- */
/* screen: 961 - 1278 px */
/* --------------------- */
@media only screen and (min-width: 960px) {
	html { font-size:66%; }
	.canvas { width:84rem; }
	header {
		width:84rem;
		color: white;
		background: #105800;
	}
	.nav { 
		top:4.3rem;
		width:84rem;
		font-size:1.8rem;
	}
	.nav ul { 
		width:initial;
		margin-left:initial;
		margin-right:initial;
	}
	article { margin-top:5.6rem; }
	h2 { margin-left:4rem; }
	section {
		margin-left:4rem; /* linker, weißer Rand */
		margin-right:6rem; /* rechter, weißer Rand */
		margin-bottom:2rem;
		padding-bottom:1rem;
	}
}

/* --------------------- */
/* screen: 1279 - xxx px */
/* --------------------- */
@media only screen and (min-width: 1279px) {
	html { font-size:70%; }
	.canvas { width:92rem; }
	header { width:92rem; }
	.nav { width:92rem; }
	h2 { margin-left:5rem; }
	section {
		margin-left:5rem; /* linker, weißer Rand */
		margin-right:8rem; /* rechter, weißer Rand */
		padding-bottom:1rem;
	}
	h3 { padding-left:3rem; }
	.txtbox {
		padding-left:3rem;
		padding-right:3rem;
	}
}

/* ----------------------------------------------------- */
/* print */
@media print {
	html {
		font-family:Calibri,Helvetica, Arial, "Sans Serif";
		text-align:justify;
		color:black;
		background:white;
	}

	body {
		margin-top:0;
		padding-left:2rem;
		padding-right:2rem;
	}

	header h1:before {
		content:initial;
	}

	body, header, article, section, h1, h2, h3, h4, p {
		color:black;
		background:white;
	}
	header {
		display:none;
	}
	h1.p { display: initial;}
	.nav-button, nav {
		display:none;
	}
	.responsiveimg, .responsiveimgright, .responsiveimgleft {
		max-width: 50%;
	}
	.room {
		height:0em;
	}
}
/* ----------------------------------------------------- */


.curmnu {
	font-weight:bold;
	color:white;
	background:transparent;
}

header h1:before {
	/* content: initial; */
}

article {
	font-size: 1.6rem;
	line-height: 2.2rem;
	text-align:left;
	padding-bottom:1rem;
}

.nav {
	padding-left:0;
	padding-right:0;
}

.nav-button {
	position:fixed;
	top:0;
}

.nav ul ul {
	width:32rem;
	margin-left:0;
	padding-left:1rem;
}

.point {
	list-style-type: disc;
}

/* Bilder, automatische Größe */
.responsivemaximg {
	width: 100%;
	height: auto;
}

.responsiveimg {
	display: block;
	max-width: 100%;
	height:auto;
	width:100%;
}

.responsiveimgright {
	max-width: 100%;
	box-sizing:border-box;
	height: auto;
	float:left;
	margin-left: 0;
	margin-right: 0.5em;
}

.responsiveimgleft {
	max-width: 100%;
	box-sizing:border-box;
	height: auto;
	float:right;
	margin-left: 0.5em;
	margin-right: 0; 
}