/*
## Ersteller: Udo Kasper
## Erstelldatum: 2020-06-01
## Beschreibung: Formatierung der Homepage
##
## Änderungshistorie
## Datum      Änderer    Änderung
## ---------- ---------- -----------------------------------------------------------------------
## 2020-12-22 Udo Kasper Neuen Hintergrund formatieren
## 2020-11-02 Udo Kasper Die Section #alert-wrap muss versteckt werden
## 2020-10-11 Udo Kasper Die Klassen 'ButtonsGroup' und 'Titel' ergänzt
## 2020-10-04 Udo Kasper Klasse 'blink' ergänzt
*/

/*
## Die nachfolgenden Formatierungen sind an 3 Größen ausgerichtet
##    - Handy
##    - Tablet
##    - PC-Monitor
##
## Fürs Handy  werden alle Blöcke hintereinander gelegt
## Beim Tablet werden Kopf, Navi und Content hintereinander gelegt, und der Content hat zwei Blöcke
## Beim PC liegt die Navi senkrecht neben Kopf und Content, und der linke Content ist zweispaltig
##
## der rechte Content beinhaltet immer die Gaesteabende
##
## Im internen Bereich wird der Content nach Bedarf aufgeteilt
## 
*/

/*
** 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 */
	}

#alert-wrap {display: none;}

/*
** Der Hamburger-Button
*/
#hamburger {
	xposition: -webkit-sticky;
	xposition: sticky;
	xtop: 0;
	xz-index: 5;
	xleft: calc(100% - 45px);
	width: 30px;
	xtop: 5px;
	-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}

/*
** Tabellen
*/
.table {
	display: table
	}
.table>div ,
.tableRow {
	display: table-row;
	}
.table>div>div ,
.tableCell {
	display: table-cell;
	}
.tableRow:nth-child(even) {
	background-color	: #EEEEEE;						/* Zebra */
	}
.table>div:nth-child(even) {
	background-color	: rgb(200,200,200,0.3);			/* Zebra */
	}
.table>div:nth-child(odd) {
	background-color	: rgb(255,255,255,0.3);			/* Zebra */
	}

/*
** Überlängen
*/
.truncate {
	display				: block;						/* Überlänge durch '...' ersetzen */
	white-space			: nowrap;
	overflow			: hidden;
	text-overflow		: ellipsis;
	}
	
/*
** Blinken
*/
#cont .blink{
	animation: blinken 2s linear infinite;
	text-decoration		: blink;
	}
@keyframes blinken{
	0%		{opacity: 100%;} 
	50%		{opacity: 50%;}
	100%	{opacity: 100%;}
}

/*
** Formatierung des Bereichs mit den Buttons
.ButtonsGroup {
	display				: flex;
	flex-flow			: row wrap;
	justify-content		: space-around;
	padding-bottom		: 10px;
	}
*/
/*
** Formatierung des Bereichs mit den Daten
.Titel {
	font-weight			: bold;
	font-size			: var(--schriftGroesseGross);
	padding-bottom		: 10px;
	}
.Ueberschrift {
	font-weight			: bold;
	padding-bottom		: 10px;
	}
*/


/**'''''''''''''''''''''''''''''''''''''''''
**
** Zuerst das Handy ...
**
*******************************************/

/*
** Tags
*/
body {
	background-size: cover;
	margin: 0;
	padding: 0;
	}
.xpassiv {
	display: inline-block;
	width: 140px;
	text-decoration: none; 
	color: #AAAAAA;
	border: 0px solid #FFFFFF;
	text-align: center;
	padding-top: 7px;
	padding-bottom: 7px;
	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;
}
#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;
	}

/*
** Ids
*/
#container: {
	display: block;
	}
#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;
	}
#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; 
	}
#cont {
	background-color: var(--hintergrundFarbeDialog);
	overflow-y: visible;
	height: auto;
}

/*
/* Content
*/
#cont {
	display: block;
	}
#cont a {
	display: inline;
	font-size: 15px;
	text-shadow: 0px 0px 0px;
	color: #1D506D;
	font-weight: normal;
	text-decoration: none;
}
.spalte {
	padding: 20px;
	font-family: Arial;
	}
#links {
	font-size: 15px;
	text-align: justify
	}
#links img, .KgaText img, .VgaText img {
	float: left;
	padding-right: 20px;
	}
#links .textHeader {
	padding-top: 20px;
	font-size: 18px;
	font-weight: bold;
}
#links .textHeader2 {
	padding-top: 15px;
	font-size: 16px;
	font-weight: bold;
}
#links .textHeader3 {
	padding-top: 10px;
	font-size: 15px;
	font-weight: bold;
}
#links .textBody {
	padding-top: 5px;
	padding-bottom: 5px;
}
.KgaHeader, .VgaHeader {
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 20px;
	}
.KgaDatum, .VgaDatum {
	font-size: 15px;
	font-weight: bold;
	}
.KgaDatum {
	background-color: #4DBBEC;
	}
.VgaDatum {
	background-color: #888888;
	}
.KgaRef, .VgaRef {
	font-size: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	}
.KgaText, .VgaText {
	font-size: 15px;
	text-align: justify
	}
.Trenner {
	padding-top: 10px;
	padding-bottom: 10px;
	}


/**'''''''''''''''''''''''''''''''''''''''''
**
/* ... dann das Tablet ...
**
*******************************************/
@media screen and (min-width: 700px) {
	#navi a {
		border: 0px solid #FFFFFF;
		display: block;
		width: 130px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-left: 0px;
		margin-top: 0px;
		}
	#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;
		}
	#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;
		}

/*
/* Content
*/
	#cont {
		display: grid;
		grid-template-columns: 5fr 4fr;
		grid-template-areas:
			"links rechts"
		;
		}
	#links  { grid-area: links;}
	#rechts { grid-area: rechts;}
	#links p {
		margin-top: 0px;
		margin-bottom: 10px;
		}
}


/**'''''''''''''''''''''''''''''''''''''''''
**
/* ... und dann der PC
**
*******************************************/
@media only screen and (min-device-width: 1200px) {
	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, #navi1, #navi2 {
		display: block;
		text-align: center;
		width: 190px;
		}
	#navi1, #navi2 {
		padding-top: 30px;
	}
	#navi img {
		display: inline;
		width: 130px;
		xfilter: drop-shadow(1px 1px 0px #FFFFFF);
		filter: drop-shadow(0px 0px 10px #FFFFFF);
		xpadding-left: 15px;
		}
	#navi a {
		padding-top: 5px;
		padding-bottom: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		width: 190px;
	}
	#cont {
		height: calc(100vh - 100px);
		width: 1010px;
		}

	/*
	** Content
	*/
	#cont {
		display: grid;
		grid-template-columns: 5fr 3fr;
		grid-template-areas:
			"links rechts"
		;
		}
	#links  { grid-area: links;}
	#rechts { grid-area: rechts;}
	#links {
		column-count: 2;
		}
	}
}