/* WAS ERLEDIGT WERDEN MUSS:
	▸ Fonts in den einzelnen Klammern überprüfen, mit @font-face "verarbeiten"
	▸ Warum lässt sich index.html in der Mobil-Ansicht horizontal verschieben?
*/
@font-face{
	font-family: "Calibri"; 				src: url("fonts/calibri.ttf") 	format("truetype");
	font-family: "Calibri Light"; 			src: url("fonts/calibril.ttf")	format("truetype");
	font-family: "Calibri Bold"; 			src: url("fonts/calibrib.ttf")	format("truetype");
	font-family: "Calibri Bold Italic"; 	src: url("fonts/calibriz.ttf")	format("truetype");
	font-family: "Calibri Italic"; 			src: url("fonts/calibrii.ttf")	format("truetype");
	font-family: "Calibri Light Italic";	src: url("fonts/calibrili.ttf")	format("truetype");
}
*{
	font-family: "Calibri Light", Helvetica, "Samsung Sans", "Open Sans", Arial;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}
html{
	background-color: #272727;
}
html,body{
	height: 100%;
}
body{
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
header{
	height: 210px;
	background-color: #131313;
	top: 2.5%;
}
header table.header{
	width: 100%;
	height: 100%;
}
header table.header tr.logo{
	height: 51%;
}
header table.header tr.titel{
	height: 29%;
	vertical-align: bottom;
}
header table.header tr.titel h1{
	padding-bottom: 15px;
	font-family: "Calibri Light", Helvetica, "Open Sans";
	font-size: 26pt;
	font-weight: bold;
}
header table tr.logo img.cabLogo{
	height: 65px;
	width: 65px;
}
header table.header tr.untertitel{
	min-height: 20%;
	vertical-align: top;
}
header table.header tr td p{
	font-size: 14pt;
	color: lightgrey;
	padding-bottom: 15px;
}
header table.header tr td p.vers{/*
	font-family: "Calibri Light Italic";*/
	font-style: italic;
}
div.table{
	margin-bottom: 17.5px;
	margin-top: 10px;
	border-radius: 3px;
	background-color: #9f9f9f;
	padding: 10px 0 0 0;
	box-shadow: 3px 3px 3px black;
}
div.table *{
	color: black;
	text-align: left;
	border-collapse: collapse;
	padding: 2px;
}
div.table table{
	width: 97.5%;
	margin:0 auto;
	margin-bottom: 5px;
	margin-top: 5px;
}
div.table tr td{
	vertical-align: top;
}

.centerDiv {
	width: 100%; /*100% wegen mittiger Ausrichtung?*/
	/*position: absolute;*/
	/*
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);*/
}
.centerText{
	width: 95%;
	max-width: 1000px;
	padding-top: 25px;
	margin: 0 auto;
	margin-bottom: 50px;
	font-size: 14pt;
	line-height: 150%;
}
.centerText p{
	padding-bottom: 10px;
}
.centerText p a{
	text-decoration: underline;
}
.centerText p a:hover{
	text-decoration: none;
}
.menup{
	min-width: 145px;
	float: left;
	padding: 25px;
	font-size: 18pt;
}
.menup:hover{
	background-color: #333;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
}.menup:active{
	background-color: rgba(0,0,0,0);
	-o-transition:.05s;
	-ms-transition:.05s;
	-moz-transition:.05s;
	-webkit-transition:.05s;
}
#inhalt{
	width: 97%;
	max-width: 800px;
	padding: 5px;
	text-align: left;
	font-size: 13pt;
	padding-bottom: 35px;

	/*Horizontale Zentrierung*/
	margin:0 auto;
	/*position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);*/

}
#inhalt *{
	text-align: left;
	line-height: 1.5;
}
#inhalt h1{
	padding: 10px;
	text-align: center;
}
#inhalt h3{
	padding-top: 10px;
}
#inhalt ul{
	padding-left: 20px;
	list-style-type: square;
}
/*.menup:hover *{
	-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}*/
a{
	text-decoration: none;
}
/*div.quote{
	background-color: #9f9f9f;
	padding: 7px;
	margin-bottom: 25px;
	margin-top: 25px;
	font-style: italic;
	border-radius: 3px;
}
div.quote *{
	color: #000;
	text-align: left;
}
div.quote table.ul *{
	vertical-align: top;
	font-style: normal;
}
div.quote table.ul td.two{
	font-style: italic;
}*/
/*div.bild{
	height: 150px;
	width: 200px;
	position: absolute;
}*/
div.galerie{
	width: 97.5%;
	margin: 0 auto;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 0;
	background-color: grey;
	min-height: 20px;
	border-radius: 9.5px;
}
div.galerie img{
	margin-top: 6px;
	margin-left: 4.5px;
	margin-right: -3px;
}/*
div.galerie p{
	padding: 7.5px;
}
div.galerie p a{

	color: black;
	font-weight: bolder;
}*/
img.thumbnail{
	height: 150px;
	width: 200px;
	border-radius: 8px;
	/*position: absolute;
	z-index: 1;
	top: 0;
	left: 0;*/
}/*
img.overlay{
	height: 150px;
	width: 200px;
	border-radius: 8px;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
}
img.overlay:hover{
	z-index: 2;
	-o-transition:.05s;
	-ms-transition:.05s;
	-moz-transition:.05s;
	-webkit-transition:.05s;
}*/
.button{
	padding: 15px; 
	padding-bottom: 25px;
	padding-top: 25px;
}
table tr td.langesWort{
	word-break:break-all;
	word-wrap:break-word;
}
div.cookiesHinweis{
	width: 100%;
	min-height: 20px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	bottom: 65px;
	position: fixed;
	background-color: darkred;
	color: lightgrey;
}
/*Lösung bis 14.06.2022:
.cookiesHinweis table{
	width: 97.5%;
}
.cookiesHinweis table tr td.cHinweis{
	width: 95%;
}
.cookiesHinweis table tr td.cButton{
	width: 5%;
}
.cookiesHinweis table tr td.cHinweis p{
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
}
.cookiesHinweis table tr td.cButton p{
	text-align: right;
}
*/
footer{
	margin: 0 auto;
	margin-bottom: -100px;
	text-align: center;
	font-style: italic;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 125px;
	padding: 10px;
	background-color: #232323;
	box-shadow: 0px -5px 1px #232323;
}
footer *{
	color: #aaa;
}
footer a{
	text-decoration: none;
	/*Weil <a> im Footer von bitte.php dennoch unterstrichen war*/
}
footer a:hover{
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	color: white;
	text-decoration: underline;
}
footer span.headph{
	font-style: normal;
	font-weight: bold;
	display: none;
}
@media screen and (min-width: 1000px){
	.centerDiv{	
		display: flex;
		justify-content: center;
	}
	.mobshow{
		display: none;
	}
}
@media screen and (max-width: 1000px){
	.centerDiv {/*
		width: 100%;
		position: absolute;
		top: 2.50%;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
*/
		display: all;
		justify-content: space-between;
		margin-bottom: 55px;
	}
	.menup{
		float: none;
		min-width: 80%;
		max-width: 100%;
	}
	.mobhide{
		display: none;
	}
}

/* Nachtmodus; Night-Mode
(https://www.iphone-ticker.de/mit-12-zeilen-css-dark-mode-fuer-webseiten-148596/)
@media (prefers-color-scheme: light){
	html{
		background: #F2F2F2;
	}
	header{
		background-color: #D9D9D9;
	}
	header h1, header table.header tr td p{
		color: black;
	}
	.menup{
		color: black;
	}
	.menup: hover{
		background-color: #E3E3E3;
	}
	footer{
		background-color: #E3E3E3;
	box-shadow: 0px -5px 1px #E3E3E3;
	}
}
*/
/*LIGHT MODE*/
@media (prefers-color-scheme: light){
	*{
		color: black;
	}
	html{
		background-color: #d2d2d2;
	}
	header{
		background-color: initial;
		border-bottom: darkgrey 1px solid;
	}
	header *{
		color: black;
	}
	header table.header tr td p{
		color: #222222;
	}
	.menup{
		color: black;
	}
	.menup:hover{
		background-color: #e3e3e3;
	}
	header table tr.logo img.cabLogo{
		/*border: 1px white solid;*/
		border-radius: 32.5px;
		box-shadow: 0 0 5px darkgrey;
	}
	div.table{
		border:  darkgrey 1px solid;
		box-shadow: 0 0 5px darkgrey;
		background-color: #bfbfbf;
	}
	div.galerie{
		background-color: #9f9f9f;
	}
	footer{
		background-color: #d2d2d2;
		box-shadow: none;
		border-top:  darkgrey 1px solid;
	}
	footer *{
		color: black;
	}
	footer a:hover{
		transition: unset;
		color: initial;
	}
	div.table{
		border:  darkgrey 1px solid;
		box-shadow: 0 0 5px darkgrey;
		border:  darkgrey 1px solid;
	}
}