/*
## Ersteller: Udo Kasper
## Erstelldatum: 2020-10-28
## Beschreibung: Formatierung der Homepage
##
## Änderungshistorie
## Datum      Änderer    Änderung
## ---------- ---------- -----------------------------------------------------------------------
## 2021-03-13 Udo Kasper Kleine Anpassungen
## 2020-12-26 Udo Kasper Auch für das große Format (PC) werden passive Links grau
## 2020-12-22 Udo Kasper Neuen Hintergrund formatieren
## 2020-11-20 Udo Kasper Alert-Box korrigieren
*/

/*
## Die nachfolgenden Formatierungen sind an 4 Größen ausgerichtet
##    - Handy hochkant (ganzklein: <=400)
##    - Handy quer (klein: 401-700)
##    - Tablet (mittel: 701-1200)
##    - PC-Monitor (gross: >=1201)
##
## Fürs Handy (sowohl bei hochkant als auch bei quer) werden alle Blöcke hintereinander gelegt und die Navigation muss eingeblendet werden (Hamburger-Button)
## Beim Tablet ist die Navigation fest über dem Darstellungsbereich
## Beim PC liegt die Navigation senkrecht neben Kopf und Content
##
## Es werden möglichst keine Anwendungsspezifische Formatierungen verwendet.
## Stattdessen werden eine ganze Reihe von Formatierungen zur Verwendung in den Anwendungen
## in einem extra File (bk-css) angeboten
##
*/                 

/*
** Der neue Hintergrund
*/
#bgUnderlay {
	position					: fixed;						/* Sit on top of the page content */
	width						: 100%;							/* Full width (cover the whole page) */
	height						: calc(100vh);     		        /* Full height (cover the whole page) */
	top							: 0;
	left						: 0;
	right						: 0;
	bottom						: 0;
	background-color			: rgba(0,0,0,0.5);				/* Black background with opacity */
	background-image			: url('../menu/bgPicture.jpg');
	background-size				: cover;
	z-index						: -999;							/* Specify a stack order in case you're using a different order for other elements */
	}

/*
** Der Hamburger-Button
*/
#hamburger {
	/*
	xposition: -webkit-sticky;
	xposition: sticky;
	xtop: 0;
	xz-index: 5;
	xleft: calc(100% - 45px);
	xtop: 5px;
	*/
	width: 30px;
	-webkit-tap-highlight-color: transparent;
	background-color: rgba(255,255,255,0.6);
	padding:3px;
	}
#menutxt {
	font-family: var(--schriftArt);
	font-size: 10px;
	display: block;
	width: 30px;
	text-align: center;
	margin-top: 2px;
	}
#buttonname {
	font-size: 0;
	}
.c-hamburger {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 30px;
	height: 28px;
	border: none;
	cursor: pointer;
	transition: background .3s;
	}
.c-hamburger:focus{
	outline: 0;
	}
.c-hamburger span{
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 6px;
	background: #555;
	}
.c-hamburger span::after,.c-hamburger span::before{position:absolute;display:block;left:0;width:100%;height:6px;background-color:#555;content:""}
.c-hamburger--htx,.c-hamburger--htx.is-active{background-color:transparent}.c-hamburger span::before{top:-10px}
.c-hamburger span::after{bottom:-10px}.c-hamburger--htx span{transition:background 0s .3s}
.c-hamburger--htx span::after,.c-hamburger--htx span::before{transition-duration:.3s,.3s;transition-delay:.3s,0s}
.c-hamburger--htx span::before{transition-property:top,transform}
.c-hamburger--htx span::after{transition-property:bottom,transform}
.c-hamburger--htx.is-active span{background:0 0}
.c-hamburger--htx.is-active span::before{top:0;transform:rotate(45deg)}
.c-hamburger--htx.is-active span::after{bottom:0;transform:rotate(-45deg)}
.c-hamburger--htx.is-active span::after,.c-hamburger--htx.is-active span::before{transition-delay:0s,.3s}

/*
** Die Alert-Box
*/
#alert-wrap{
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100vw;
	height				: 100vh;
	display				: none;
	background			: rgb(0,0,0,0.2);
	display				: none;
}
#alert-background{
	position			: absolute;
	top					: calc(50vh - 100px);
	left				: calc(50vw - 100px);
	margin				: 0 auto;
	padding				: 0;
	background			: #EEEEEE;
	border				: 1px solid #003366;
}
#alert-title{
	display				: flex;
	justify-content		: space-between;
	width				: 100%;
	height				: 26px;
	background			: #607D8B;
	margin				: 0 auto;
	padding				: 0;
}
#alert-title-text{
	padding				: 4px 0px 0px 10px;
	color				: #EFEFEF;
	font-family			: Arial;
	font-size			: 12px;
	font-weight			: bold; 
	text-align			: left;
}
#alert-close{
	padding				: 2px 2px 0px 0px;
	background			: #FF0000;
	height				: 22px;
	width				: 22px;
	color				: #FFFFFF; 
	text-align			: center;
	font-family			: Arial;
	font-size			: 16px;
	font-weight			: bold; 
	cursor				: pointer; 
	border-left			: 2px solid #FF0000;
	border-bottom		: 2px solid #FF0000;
}
#alert-time{
	text-align			: left;
	padding-left		: 10px;
	color				: #000000; 
	font-family			: Arial;
	font-size			: 12px;
	border-bottom		: 1px solid #000000;
	}
#alert-content{
	height				: 200px;
	width				: 200px;
	color				: #000000; 
	font-family			: Arial;
	font-size			: 15px;
	background-image	: url('Logogross.png');
	background-repeat	: no-repeat;
	background-size		: cover;
	}
#alert-opac{
	align-items			: center;
	height				: 100%;
	background-color	: rgb(255,255,255,0.95);
	overflow			: scroll;
	padding-top			: 10px;
	padding-left		: 10px;
	}

/*
** Der Inhaltsbereich muss von den einzelnen Anwendungen strukturiert werden
*/
#cont {
	display				: block;
	padding				: 5px;
	font-family			: var(--schriftArt);
	font-size			: var(--schriftGroesseNormal);	}

/*
** Formatierung des Bereichs mit den Daten
*/
input:focus ,
textarea:focus {
	background-color	: #EEEEFF;
	}

/*
** Formatierung der Links
*/
#cont a {
	display				: inline;
	font-size			: 15px;
	text-shadow			: 0px 0px 0px;
	color				: #1D506D;
	font-weight			: normal;
	text-decoration		: none;
}



/*
##
## Definitionen für alle Formate
##
*/
body {
	background-size: cover;
	margin: 0;
	padding: 0;
	}
#cont {
	background-color: var(--hintergrundFarbeDialog);
	overflow-y: visible;
	height: auto;
}
#kopf {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: var(--schriftArt);
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 1px 0px 0px #444444
			   , 0px 1px 0px #444444
			   , -1px 0px 0px #444444
			   , 0px -1px 0px #444444
			   , 3px 3px 2px #222222;
	}

/*
##
## Die Media-Queries sind so formuliert, dass das jeweilige Device ausschließlich die für es bestimmten Regeln liest (und nicht die anderen auch noch)
##
## Dadurch können im spezifischen Anwendungs-CSS bei Tabellen alle Felder ohne Media-Query definiert, weil hier in diesm CSS dann die nicht zu dem jeweiligen Gerät passenden Elemente ausgeblendet werden.
## Beispiel1: Für das quer gehaltene Handy werden alle Elemente der Klassen mittel und groß ausgeblendet. Dadurch bleiben nur die Elemente der Klassen ganzklein und klein sichtbar.
## Beispiel2: Für das quergehaltene Handy werden die Klassen nur_ganzklein, nur_mittel und nur:gross ausgeblendet.
## D.h. dass jede Spalte das Attribut ganzklein, klein, mittel oder gross haben sollte, jenachdem auf welchem Device des Feld erscheinen soll.
## Dabei erscheinen z.B. die Elemente der Klasse mittel auch auf dem PC, aber nicht auf dem Handy.
##
*/

/*
########################################
##
## Das Handy hochkant (ganzklein)
##
########################################
*/
@media only screen and (max-width:400px) {
	.nur_klein,
	.nur_mittel,
	.nur_gross,
	.klein,
	.mittel,
	.gross {
		display			: none;
	}

	#navi .passiv {
		color: #AAAAAA;
		}
	#navi a {
		display: inline-block;
		width: 140px;
		text-decoration: none; 
		color: white;
		text-align: center;
		padding-top: 7px;
		padding-bottom: 7px;
		border: 1px solid #FFFFFF;
		border-radius: 5px;
		margin-left: 5px;
		margin-top: 5px;
		font-weight: bold;
		font-size: 16px;
		text-shadow:  1px  0px 0px #444444
				   ,  0px  1px 0px #444444
				   , -1px  0px 0px #444444
				   ,  0px -1px 0px #444444
				   ,  3px  3px 2px #222222;
		transition: all ease 1s;
		}
	#navi a:hover,
	#navi a:active {
		background: white;
		color: #000000;
		text-shadow:  0px  0px 0px #000000;
		}
	#navi2 a {
		font-size: 12px;
		font-weight: normal;
		}

	#container {
		display: block;
		}
	#kopftext {
		width: calc(100vw - 60px);
		}
	#navi img {
		display: none;
		}
	#navi {
		display: none;
		padding-top: 10px;
		font-family: var(--schriftArt);
	}
	#navi1 {
		display: inline;
		padding-top: 30px;
	}
	#navi2 {
		padding-top: 60px;
		padding-bottom: 10px;
	}
	#fuss { 
		background: #AA0000; 
		}
}



/*
########################################
##
## Das Handy quer (klein)
##
########################################
*/
@media only screen and (min-width:401px) and (max-width:700px) {
	.nur_ganzklein,
	.nur_mittel,
	.nur_gross,
	.mittel,
	.gross {
		display			: none;
	}

	#navi .passiv {
		color: #AAAAAA;
		}
	#navi a {
		display: inline-block;
		width: 140px;
		text-decoration: none; 
		color: white;
		text-align: center;
		padding-top: 7px;
		padding-bottom: 7px;
		border: 1px solid #FFFFFF;
		border-radius: 5px;
		margin-left: 5px;
		margin-top: 5px;
		font-weight: bold;
		font-size: 16px;
		text-shadow:  1px  0px 0px #444444
				   ,  0px  1px 0px #444444
				   , -1px  0px 0px #444444
				   ,  0px -1px 0px #444444
				   ,  3px  3px 2px #222222;
		transition: all ease 1s;
		}
	#navi a:hover,
	#navi a:active {
		background: white;
		color: #000000;
		text-shadow:  0px  0px 0px #000000;
		}
	#navi2 a {
		font-size: 12px;
		font-weight: normal;
		}

	#container {
		display: block;
		}
	#kopftext {
		width: calc(100vw - 60px);
		}
	#navi img {
		display: none;
		}
	#navi {
		display: none;
		padding-top: 10px;
		font-family: var(--schriftArt);
	}
	#navi1 {
		display: inline;
		padding-top: 30px;
	}
	#navi2 {
		padding-top: 60px;
		padding-bottom: 10px;
	}
	#fuss { 
		background: #AA0000; 
		}
}


/*
########################################
##
## Das Tablet (mittel)
##
########################################
*/
@media only screen and (min-width:701px) and (max-width:1200px) {
	.nur_ganzklein,
	.nur_klein,
	.nur_gross,
	.gross {
		display			: none;
	}

	#navi .passiv {
		color: #AAAAAA;
		}
	#navi a {
		border: 0px solid #FFFFFF;
		display: block;
		width: 130px;
		text-decoration: none; 
		color: white;
		text-align: center;
		padding-top: 0px;
		padding-bottom: 0px;
		border-radius: 5px;
		margin-left: 0px;
		margin-top: 0px;
		font-weight: bold;
		font-size: 16px;
		text-shadow:  1px  0px 0px #444444
				   ,  0px  1px 0px #444444
				   , -1px  0px 0px #444444
				   ,  0px -1px 0px #444444
				   ,  3px  3px 2px #222222;
		transition: all ease 1s;
		font-family			: Arial;			/* 2021-03-13 */
		}
	#navi a:hover,
	#navi a:active {
		background: white;
		color: #000000;
		text-shadow:  0px  0px 0px #000000;
		}
	#navi2 a {
		font-size: 12px;
		font-weight: normal;
		}
	#container {
		display: grid;
		grid-template-rows: 50px 70px 1fr;
		grid-template-columns: 1fr 700px 1fr;					/* Anpassung 20200210 */
		grid-template-areas:
			" . kopf . "
			" . navi . "
			" . cont . "
		;
		}
	#kopf { grid-area: kopf;}
	#navi { grid-area: navi;}
	#cont { grid-area: cont;}
	#kopf {
		font-size: 36px;
		padding-bottom: 0px;
		padding-top: 0px;
		}
	#kopftext {
		width: calc(100vw - 60px);
		}
	#navi img {
		display: none;
		}
	#navi {
		display: block;
		width: 700px;
		}
	#navi1 {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-top: 0px;
		}
	#navi2 {
		display: flex;
		padding-top: 0px;
		}
	#cont {
		overflow-y: scroll;
		height: calc(100vh - 140px);
		width: 700px;
		}
	#hamburger {
		display: none;
		}

}



/*
########################################
##
## Der PC (gross)
##
########################################
*/
@media only screen and (min-width:1201px) {
	.nur_ganzklein,
	.nur_klein,
	.nur_mittel {
		display			: none;
	}

	a {
		width: 160px;
		}
	#container {
		display: grid;
		grid-template-rows: 80px 1fr;
		grid-template-columns: 1fr 190px 1010px  2fr;				/* Anpassung 20200210 */
		grid-template-areas:
			" . navi kopf . "
			" . navi cont . "
		;
		}
	#kopf { grid-area: kopf;}
	#navi { grid-area: navi;}
	#cont { grid-area: cont;}
	#kopf {
		font-size: 36px;
		padding-top: 20px;
		}
	#kopftext {
		width: 100%;
		}
	#navi img {
		display: inline;
		width: 130px;
		filter: drop-shadow(0px 0px 10px #FFFFFF);
		}
	#navi, #navi1, #navi2 {
		display: block;
		text-align: center;
		width: 190px;
		}
	#navi {							/* 2021-03-13 */
		padding-top: 10px;
		}
	#navi1, #navi2 {
		padding-top: 30px;
	}
	#navi .passiv {
		color: #AAAAAA;
		}
	#navi a {
		border: 0px solid #FFFFFF;
		display: block;
		width: 130px;
		text-decoration: none; 
		color: white;
		text-align: center;
		padding-top: 0px;
		padding-bottom: 0px;
		border-radius: 5px;
		margin-left: 0px;
		margin-top: 0px;
		font-weight: bold;
		font-size: 16px;
		text-shadow:  1px  0px 0px #444444
				   ,  0px  1px 0px #444444
				   , -1px  0px 0px #444444
				   ,  0px -1px 0px #444444
				   ,  3px  3px 2px #222222;
		transition: all ease 1s;
		}
	#navi a {
		padding-top: 5px;
		padding-bottom: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		width: 190px;
		font-family			: Arial;			/* 2021-03-13 */
	}
	#navi a:hover,
	#navi a:active {
		background: white;
		color: #000000;
		text-shadow:  0px  0px 0px #000000;
		}
	#navi2 a {
		font-size: 12px;
		font-weight: normal;
		}
	#cont {
		overflow-y: scroll;
		height: calc(100vh - 100px);
		width: 1010px;
		}
	#hamburger {
		display: none;
		}
}