/********************************************************/
/** Flugtag24 - (c) Rainer Vetter 2023 - keine Haftung **/
/** Keine kommerzielle Verwendung,und Verbreitung      **/
/** Verwendung nur mit Zustimmung des Autors           **/
/** Die Fusszeile darf nicht verändert werden          **/
/********************************************************/


:root {
	--bodybg: rgba(240, 255, 240, 0.3);
	--headerbg: rgba(245, 245, 245, 1.0);	
	--sectionbg: rgba(223, 223, 223, 1.0);
	--articlebg: rgba(223, 223, 223, 1.0);
	--mainbg: rgba(252, 252, 252, 1.0);
	--asidebg: rgba(245, 245, 245, 1.0);
	--footerbg: rgba(245, 245, 245, 1.0);
	--cookiebg: rgba(200, 200, 200, 1.0); 
	--border: rgba(150, 150, 150, 0.6);
	--navbg: rgba(245, 245, 245, 1.0);
	--navbg1: rgba(210, 210, 210, 1.0);
	--navbg2: rgba(190, 190, 190, 1.0);
	--button: rgba(222, 222, 222, 1.0);
	--buttontxt: rgba(0, 0, 0, 1.0);
	--buttonhover: rgba(115, 115, 115, 1.0);
	--buttonhotxt: rgba(253,253,253,1.0);
	--msgredbg: rgba(255,228,225, 0.5);
	--msgredbor: 0.01em solid rgba(205, 0, 0, 0.7);
	--msgyelbg: rgba(255,255,0, 0.2);
	--msgyelbor: 0.01em solid rgba(0, 0, 0, 0.7);
	--msggrbg: rgba(240, 255, 240, 0.7);
	--msggrbo: 0.01em solid rgba(46, 70, 35, 0.7);
	--metacontbg: rgba(238, 238, 238, 1.0);
	--metacontbo: 0.01em solid rgba(150, 150, 150, 0.6);
	--gridhoverbg: rgba(115, 115, 115, 1.0);
	--gridcol: rgba(253,253,253,1.0);
	--gridhoverbo: 0.01em solid rgba(150, 150, 150, 0.6);
	--waterbg: rgba(200, 200, 200, 1.0);
	--fullimgbo: rgba(200, 200, 200, 1.0);
	--imgcoverbg: rgba(0,0,0,0.7);
	--infoborder: 0.2em solid rgba(255, 255, 0, 1);
	--infocolor: rgba(0, 0, 0, 1.0); 
	--infobg: rgba(252, 252, 252, 1.0);
	--databg: rgba(0,0,0,0.7);
	--ft24cookiebg: rgba(200, 200, 200, 1.0); 
	--ft24cookiebo: 0.2em solid rgba(255, 50, 50, 0.5);
	--ft24buttonbg: rgba(238, 238, 238, 1.0); 
	--ft24bottonbo: solid rgba(25, 25, 25, 1.0);
	--ft24hoverbg: rgba(115, 115, 115, 1.0);
	--ft24hovercol: rgba(253,253,253,1.0);
	
	--ctagbg: rgba(255,228,225, 0.5);
	--ctagbo: 0.01em solid rgba(205, 0, 0, 0.7);
	
	--filtermetabg: rgba(238, 238, 238, 1.0);
	--filtermetabo: 0.01em solid rgba(150, 150, 150, 0.6);
	--flight1stbg: rgba(255, 106, 106, 1.0);
	
	--slotdispbg: rgba(0, 180, 255, 0.5);
	--slotarbg: rgba(252, 252, 252, 0.5);
	--slot1stbg: rgba(0, 180, 0, 0.5);
	--slotname1stbg: rgba(255, 255, 150, 1.0);
	--slotnamedispbg: rgba(245, 245, 245, 1.0);
	--slotnamearbg: rgba(252, 252, 252, 0.5);
	
	--displaybg: rgba(0, 0, 0, 1.0);
	--displaymainbg: rgba(210, 255, 210, 1.0); 
	--dispasidebg: rgba(210, 255, 255, 1.0); 
	--dispartbg: rgba(255, 255, 210, 1.0); 
	
	--flightdispbg: rgba(238, 238, 238, 1.0);
	--flight1stbg: rgba(255, 106, 106, 1.0);
	--nextmdispbg: rgba(245, 245, 245, 1.0);
	--dispsectbg: rgba(210, 255, 255, 1.0); 
	
	--closecolor: rgba(210,210,210,0.8);
	--closeborder: 0px solid rgba(210,210,210,0.8);
	--closebg:  rgba(100,100,100,0.5);
	--closebgho:  rgba(50,50,50,0.8);	
}




/********************************************************/
/** Allgemeine Formatierung - Mobile First             **/
/** Hier werden alle Elemente einspaltig angelegt      **/
/** Das Menü ist zum Ausklappen (Hamburger Menü)       **/
/********************************************************/


	/** Grundelement Seitenbody, Schriften und Größe **/
	body {
		font: normal 1em Arial, sans-serif;
		display: grid;
		grid-template-columns: 1fr;
		max-width: 75em;
		margin: 0.5em;
		background: var(--bodybg);
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}
	

	/** Grundelement Header (Logo und Schriftzug des Vereines)**/
	header {
		grid-column: 1;
		grid-row:    1;
		padding-top: 1em;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 0.5em;
		background: var(--headerbg);
		border-top: .01em solid  var(--border);
		border-left: .01em solid  var(--border);
		border-right: .01em solid  var(--border);
	}

		/** Logo im Header, Textfluss dazu **/
		header a img {
			float: left;
			padding-right: 1em;
			padding-bottom: 1em;
			max-width: 18em;
		}



	/** Grundelement Navigation **/
	nav {
		grid-column: 1;
		grid-row:    2;	
		padding-top: 0.5em;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 1em;
		float: left;
		font: bold 1em Arial, sans-serif;
		background: var(--navbg);
		border-bottom: .01em solid  var(--border);
		border-left: .01em solid  var(--border);
		border-right: .01em solid  var(--border);
	}


		/** Hamburger Element (nur bei Mobil) **/
		label.open-menu-label {
			float: left;
			color: var(--buttontxt);
			padding-top: 0.5em;
			padding-left: 1em;
			padding-right: 1em;
			padding-bottom: 0.5em;
			background: var(--button);
			font: bold 1em Arial, sans-serif;
			border: .01em solid  var(--border);
			width: 8em;
			cursor: pointer;
		}
		
		/** Hamburger Element Farbwechsel **/
		nav label:hover{
				background: var(--buttonhover);
				color: var(--buttonhotxt);
		}

			/** Checkbox Hack, Box verstecken **/
			input#open-menu {
				display: none;
			}

			/** Checkbox Hack, Hauptmenü ausklappen **/
			input#open-menu[type=checkbox]:checked ~ 
				#menu {
				display: block;
			}


		
		/** Hauptmenü ausgeblendet (nur bei Mobil) **/
		nav div {
			display: none;
		}

			/** Hauptmenü Formatierung **/
			nav div ul {
					margin:0;
					padding:0;
					width: 12em;
					list-style:none;
					cursor: pointer;
			}

			nav div ul li {
					float:left;
					z-index: 110;
			}

			nav div ul li a {
					float: left;
					color: var(--buttontxt);
					padding: 0.5em 1em;
					text-decoration:none;
					background: var(--button);
					border: .01em solid  var(--border);
					width: 12em;
			}
			
			/** Hauptmenüelemente Farbwechsel  **/
			nav div ul li a:hover,
			nav div ul li:hover > a { 
					background: var(--buttonhover);
					color: var(--buttonhotxt);
			}

				/** Submenü Formatierung **/
				nav div li ul {
						
						background: var(--button);
						left: -999em;
						margin: 2.2em 0 0;
						position: absolute;
						width: 13em;
						z-index: 100;
						cursor: pointer;
						background: var(--navbg1);
				}
				nav div li ul a {
						background: none;
						width: 11em;
						border: .01em solid  var(--border);
				}

				nav div ul li ul li ul li {
						background: var(--navbg2);
				}
				
				
				/** Submenüelemente Einblenden  **/
				nav div li:hover ul {
						left: auto;
				}
				nav div li li ul {
						margin: -0.1em  0 0 10em;
						visibility:hidden;
						cursor: pointer;
				}
				nav div li li:hover ul {
						visibility:visible;
				}

				/** Submenüelemente Farbwechsel  **/
				nav div li ul a:hover, 
				nav div ul li li:hover > a  {
					cursor: pointer; 
						background: var(--buttonhover);
						color: var(--buttonhotxt);
				}




	/** Grundelement Article - Sprache der Seite **/
	article {
		grid-column: 1;
		grid-row:    3;	
		background: var(--articlebg);
		border-left: .01em solid  var(--border);
		border-right: .01em solid  var(--border);
		border-bottom: .01em solid  var(--border);
	}

		/** Grundelement Article - Flaggen **/
		article div {
			margin-top: 1em;
			margin-bottom: 1em;			
		}	
			/** Grundelement Article - Flaggen **/
			article div img {
				margin-left: 1em;
				margin-right: 1em;	
				height: 2em;
				width: 4em;
				border-bottom: .01em solid  var(--border);		
			}

				
	/** Grundelement Section - Überschrift der Seite **/
	section {
		grid-column: 1;
		grid-row:    4;	
		padding-top: 0em;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 0em;	
		background: var(--sectionbg);
		border-left: .01em solid  var(--border);
		border-right: .01em solid  var(--border);
		border-bottom: .01em solid  var(--border);
	}


	/** Grundelement für den Content und die Formulare **/
	main {
		line-height: 1.3;
		grid-column: 1;
		grid-row:    5;	
		padding-top: 0.5em;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 1em;  
		background: var(--mainbg);	
		border-left: .01em solid  var(--border);
		border-right: .01em solid  var(--border);
	}
	
	
	/** Grundelement für Sponsoren **/
	aside {
		line-height: 1.3;
		grid-column: 1;
		grid-row:    6;	
		padding-top: 0.5em;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 1em;  
		background: var(--asidebg);
		border-left: .01em solid  var(--border);
		border-right: .01em solid  var(--border);
		border-top: .01em solid  var(--border);
	}
	
		#aside_img	{
			max-width: 15em;
			max-height: 15em;
		}

	/** Grundelement für Fußinformationen **/
	footer {
		grid-column: 1;
		grid-row:    7;	 
		background: var(--footerbg);
		border: .01em solid  var(--border);
		padding-top: 0.5em;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 0.5em;	
	}
	
	
	
	table, th, td {
	border-collapse: separate;
	border-spacing: 0em;
	padding: 0.1em 0.7em 0.1em 0.0em; 
	word-wrap:break-word;
	vertical-align: top;
	}
	
	
	hr {
		border: .01em solid  var(--border);
	}	
	
	
	
	
	
	
/***************************/
/**                       **/
/**    Seitenelemente     **/
/**                       **/
/***************************/	

	/** Titel **/
	#title {
		font: 700 2.5em Arial, sans-serif;
		line-height: 1.0;
	}

	/** Untertitel **/
	#subtitle {
		font: normal 1.3em Arial, sans-serif;
		line-height: 1.2;
	}

	/** Login sichtbar zuerst **/
	#login {
		display: none;
	}



	#messages_red {
		background: var(--msgredbg);
		border: var(--msgredbor);
		font: bold 1.1em Arial, sans-serif;
		line-height: 1.2;
		padding: 0.5em;
	}
	
	#messages_yellow {
		background: var(--msgyelbg);
		border: var(--msgyelbor);
		font: bold 1.1em Arial, sans-serif;
		line-height: 1.2;
		padding: 0.5em;
	}
	
	#messages_green {
		background: var(--msggrbg);
		border: var(--msggrbo);
		font: bold 1.1em Arial, sans-serif;
		line-height: 1.2;
		padding: 0.5em;
	}


	/** Tags für Selektion **/
	.mtags {
		display: none;
	}
	
	.ptags {
		display: none;
	}
	
	.ctags {
		display: none;
		background: var(--ctagbg);
		border: var(--ctagbo);
		font: bold 1.1em Arial, sans-serif;
		padding: 0.5em;
	}
	
	.filters {
		height: 2em;
		width: 10em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.filters:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
/** Infofenster Popup Grid meta **/
	#plan-filter-metagrid {
	  display: grid;
	  margin-top: 1em;
	  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	  grid-gap: 0.5em;
		padding: 0.5em;
		background: var(--filtermetabg);
		border: var(--filtermetabo);
	}


/***************************/
/**                       **/
/**    Formularfelder     **/
/**                       **/
/***************************/

	.file_label {
	}

	.file_div {
		display: flex;
		height: 2em;
		width: 11em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
		align-items: center;
		justify-content: center;
	}

	.file_div:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);	
	}

	.file_input {
		display: none;
	}

	.file_name {
	}

	/** Grundelement Input überall **/
	input:required {
	border-width: 0.2em;
	border-style: solid;
	border-color: blue;
	}
	
	input:required:valid {
	border-width: 0.15em;
	border-style: solid;
	border-color: green;
	}
	
	input:focus:required:invalid {
	border-width: 0.15em;
	border-style: solid;
	border-color: red;
	}
	
	select:required {
	border-width: 0.15em;
	border-style: solid;
	border-color: blue;
	}
	
	select:required:valid {
	border-width: 0.15em;
	border-style: solid;
	border-color: green;
	}
	
	select:focus:required:invalid {
	border-width: 0.15em;
	border-style: solid;
	border-color: red;
	}
	
	.input_m {
		height: 2em;
		width: 11em;
	}
	
	
	.input_xs {
		height: 2em;
		width: 9em;
	}

	.input_xxs {
		height: 2em;
		width: 7em;
	}
	
	.input_s {
		height: 2em;
		width: 9em;
	}
	
	.input_l {
		height: 2em;
		width: 16em;
	}
	
	.input_xl {
		height: 2em;
		width: 22em;
	}	

	.input_xxl {
		height: 2em;
		width: 34em;
	}	
	
	.select_m {
		height: 2em;
		width: 9.7em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.select_m:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}

	
	.select_s {
		height: 2em;
		width: 7.7em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.select_s:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	
	.select_xs {
		height: 2em;
		width: 5.7em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.select_xs:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}

	
	.select_l {
		height: 2em;
		width: 11.7em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.select_l:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
 	.select_xl {
		height: 2em;
		width: 13.7em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.select_xl:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	} 
	
	/** Grundelement Button überall **/
	
	.button_del {
		height: 1.3em;
		width: 1.3em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
		align-items: center;
		justify-content: center;
	}
	
	.button_xxs:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	.button_xs {
		height: 2em;
		width: 7em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
		align-items: center;
		justify-content: center;
	}
	
	.button_xs:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	.button_s {
		height: 2em;
		width: 9em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
		align-items: center;
		justify-content: center;
	}
	
	.button_s:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	.button_m {
		height: 2em;
		width: 11em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
			align-items: center;
	justify-content: center;
	}

	.button_m:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	.button_l {
		height: 2em;
		width: 13em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
		align-items: center;
		justify-content: center;
	}

	.button_l:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	.button_xl {
		height: 4em;
		width: 15em;
		background: var(--button);
		border: .01em solid  var(--border);
		color: var(--buttontxt);
		font: bold 1em Arial, sans-serif;
		align-items: center;
		justify-content: center;
	}

	.button_xl:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	.tr_ho:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}
	
	
	.tr_ho_red {
		color: var(--buttontxtred);
	}

	.tr_ho_red:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}	

	.tr_ho_blue {
		color: var(--buttontxtblue);
	}

	.tr_ho_blue:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}	
	
	.tr_ho_green {
		color: var(--buttontxtgreen);
	}

	.tr_ho_green:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}	
	
	.tr_ho_strike {
		color: var(--buttontxtstrike);
		text-decoration: line-through;
	}


	
	.tr_ho_strike:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}	

	/** Grundelement Editlink **/
	.edit {
		font: normal 0.7em Arial, sans-serif;
	}

	/** Grundelement Dropdown **/


	.select:hover {
		cursor: pointer; 
		background: var(--buttonhover);
		color: var(--buttonhotxt);
	}

	/** Grundelement Check **/
	.check {
		height: 1.3em;
		width: 1.3em;
	}

	/** Grundelement Radiobutton **/
	.radio {
		height: 1.3em;
		width: 1.3em;
	}
	
	/** Grundelement Textarea s **/
	.textarea_s {
		height: 10em;
		width: 22em;
	}
	
	/** Grundelement Textarea l **/
	.textarea_m {
		height: 20em;
		width: 22em;
	}
	
	/** Grundelement Textarea l **/
	.textarea_l {
		height: 30em;
		width: 22em;
	}
	
	label {
		font-weight: bold;
	}
	
	.checklabel {
		font-weight: normal;
	}


/***************************/
/**                       **/
/**    Thumbnails         **/
/**                       **/
/***************************/



	/** Bild Thumbnail **/
	.image_s {
		max-width: 15em;
		cursor: pointer;
	}

	/** Sponsorlogo Thumbnail **/
	.sponsor_s {
		width:16em;
	}

	/** Sponsor/Eventfarbe dazu **/
	.colsample {
		width:20em;
		padding-top: 2em;
		padding-bottom: 2em;
		text-align:center; 
	}

	/** Favicon Thumbnail **/
	.favicon {
		max-height:2em;
		max-width:2em;
	}

	/** Eventlogo Thumbnail **/
	.event_s {
		width:16em;
	}

	.flightnumber{
		text-align: right;
		font: bold 3em Arial, sans-serif;
	}
	

/***************************/
/**                       **/
/**    Vollgrafiken       **/
/**                       **/
/***************************/

	/** Seitenlogo **/
	.logo {
		max-height:10em;
		max-width:20em;
	}


	/** Wasserzeichen **/
	.watermark {
		background: var(--waterbg);
		max-height:10em;
		max-width:20em;
	}
	
	/** Versicherungsbild small voll**/
	#clear {
		clear:both;
	}
	
	
/***************************/
/**                       **/
/**   Vollbildanzeige     **/
/**                       **/
/***************************/

	/** Bild **/
	#full {
		z-index: 600;
		border: var(--fulimgbo);
		margin: auto;
		position:fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		
	}

	/** Rahmen**/
	#image {
		z-index: 550;
		display: none;
	}

	/** Hintergrund **/
	#cover{
	  position:fixed;
	  top:0;
	  left:0;
	  background: var(--imgcoverbg);
	  z-index:500;
	  width:100%;
	  height:100%;
	  display:none;
	}


/**Close**/
	#imageclose {
	z-index: 650;
	border:  var(--closeborder);
	border-radius: 0;
	background-color: var(--closebg);
	position:fixed;
	top:0;
	left:0;
	width:0;
	height:0;
	display:block;
	cursor: pointer;
    font-size: 0;
	padding-top: 0;
    text-align: center;
	color: var(--closecolor);
	}

	#imageclose:hover {
	background-color: var(--closebgho);
	}	
	
	
/***************************/
/**                       **/
/**   Infoanzeige         **/
/**                       **/
/***************************/
	/** Speichern**/
	#save {
	z-index: 900;
	  position:fixed;
	  top:0;
	  left:0;
	  width:100%;
	  height:100%;
	  display:none;
	}
	
	
	/** info **/
	#info {
		z-index: 400; 
		padding: 0.5em; 
		border:  var(--infoborder);
		width: 45em; 
		color: var(--infocolor);
		background-color: var(--infobg);
		display: none; 
		overflow: auto;
		margin: auto;
		position:fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
     max-height: 50em;
     min-height: 20em;
	}

	/** Rahmen**/
	#data {
	z-index: 300;
	  position:fixed;
	  top:0;
	  left:0;
	  background: var(--databg);
	  width:100%;
	  height:100%;
	  display:none;
	}

/**Close**/
	#infoclose {
	z-index: 450;
	border:  var(--closeborder);
	border-radius: 0;
	background-color: var(--closebg);
	position:fixed;
	top:0;
	left:0;
	width:0;
	height:0;
	display:block;
	cursor: pointer;
    font-size: 0;
	padding-top: 0;
    text-align: center;
	color: var(--closecolor);
	}

	#infoclose:hover {
	background-color: var(--closebgho);
	}	

/** Infofenster Popup Grid meta **/
	#plan-info-metagrid {
		padding: 0.5em; 
	  display: grid;
	  grid-gap: 1em;
	}
	
/** Register Grid meta **/
	#plan-register-metagrid {
	  display: grid;
	  grid-gap: 0.5em;
	  padding-top: 0.5em;
	}


/** Hangar Grid meta **/
	#plan-hangar-metagrid {
	  display: grid;
	  grid-gap: 0.5em;
	  padding-top: 0.5em;
	}
	
	
	
/** Überschriften im Plan **/
	.plan-headline {
		font: bold 1.5em Arial, sans-serif;
		padding-top: 0.3em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-bottom: 0.3em;	
		background: var(--metacontbg);
		border: var(--metacontbo);
	}
		
		

		
/** Rechtes Grid Action **/
	.plan-hangar-action{
	  display: grid;
		grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
		padding-top: 0.5em;
		border-top: 0.01em solid var(--border);
	}	
	


		
		
/**  Infofenster Popup Grid Daten **/
	.plan-info-data{
	  display: grid;
		grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
		grid-gap: 1em;
	}
	
	.plan-info-buttons{
	  display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
		grid-gap: 1em;
	}
		
/**  Infofenster Popup Grid image **/
	.plan-info-data-div-img {
		width: 100%;
		cursor: pointer;
	}

	
	
/**  Infofenster Popup Grid Pilot/Modell/Action **/
	.plan-info-items{
	  display: grid;
	  overflow: hidden;
	  grid-template-columns: none;
	}
	
		
/** Formatierung der Aktionsleiste im Plan unten **/
	.plan-action-metagrid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	  grid-gap: 0.5em;
		padding: 0.5em;
		background: var(--metacontbg);
		border: var(--metacontbo);
	}
	
	
	
	.plan-action-items{
	  display: grid;
	  grid-template-columns: none;
	}

	
	
		
		
		
/*******************************/
/**                           **/
/** Inneres Grid für Elemete  **/
/**                           **/
/*******************************/

	/** Allgemeine Anzeige für die inneren Datenfelder zu den Übersichten **/
	
	/** Rechtes Grid meta **/
	.overall-metagrid {
		display: grid;
	  grid-gap: 1em;
	}
	
	/**Übersicht **/
	.all-grid-metagrid-l {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	  grid-gap: 0.5em;
	}
	
	/**Übersicht **/
	.all-grid-metagrid-m {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
	  grid-gap: 0.5em;
	}
	
	/**Übersicht **/
	.all-grid-metagrid-s {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
	  grid-gap: 0.5em;
	}
	
	/** Rechtes Grid Zeile **/
	.all-grid-metacontent{
	  display: grid;
		grid-template-columns: none;
		background: var(--metacontbg);
		border: var(--metacontbo);
	}
	
	.all-grid {
	  display: grid;
	  padding: 0.5em;
	  grid-template-columns: none;
	  cursor: pointer;
	}
	
	.all-grid-no {
	  display: grid;
	  padding: 0.5em;
	  grid-template-columns: none;
	}
	
	.all-grid:hover{	
		background: var(--gridhoverbg);
		border: var(--gridhoverbo);
		color: var(--gridcol);
		}

	.all-grid-div-img {
		display: grid;
		cursor: pointer;
		max-width: 100%;
	}

	.all-grid-a  {
		display: grid;
	}

	
	
	.all-grid-div {
		display: grid;
		padding-top: 0.5em;
	}

	.all-grid-footer {
		overflow: hidden;
		display: grid;
		padding-top: 0.5em;
		align-self: self-end;
	}


	
	#plan-flightplan-metagrid {
	  display: grid;
		padding-top: 0.5em;
		padding-bottom: 0.5em;	
	}
	
	
	
	.slotdisplay {
		background: var(--slotdipbg);
	  display: grid;
	  padding: 0.5em;
	 grid-gap: 0.5em;
	}

	.slotarchive{
		background: var(--slotarbg);
	  display: grid;
	  padding: 0.5em;
	 grid-gap: 0.5em;
	}

	.slotfirst {
		background: var(--slot1stbg);
	  display: grid;
	  padding: 0.5em;
	  grid-gap: 0.5em;
	}
	
	.slotnamefirst {
		background: var(--slotname1stbg);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		font: bold 1em Arial, sans-serif;
		padding: 0.5em;
		margin-top: 0.5em;
		border: 0.01em solid var(--border)
	}
	
	.slotnamefirst:hover{
				background: var(--buttonhover);
				color: var(--buttonhotxt);
				cursor: pointer;
		}
		
	.slotnamedisplay {
		background: var(--slotnamedispbg);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		font: bold 1em Arial, sans-serif;
		padding: 0.5em;
		margin-top: 0.5em;
		border: 0.01em solid var(--border)
	}
	
	.slotnamedisplay:hover{
				background: var(--buttonhover);
				color:  var(--buttonhotxt);
				cursor: pointer;
		}
		
	.slotnamearchive {
		background: var(--slotnamearbg);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		font: bold 1em Arial, sans-serif;
		padding: 0.5em;
		margin-top: 0.5em;
		border: 0.01em solid var(--border)
	}
	
	.plan-flightline-metagrid {
	  display: grid;
	  grid-gap: 2em;
	}
	
	.plan-flightslot-metagrid {
	  display: grid;
		border: 0.01em solid var(--border)
		padding-top: 0.5em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		 grid-gap: 0.5em;
	}	
	

	
	
	.plan-flightslot-name{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		font: bold 1em Arial, sans-serif;
		padding: 0.5em;
		border: 0.01em solid var(--border)
	}
	

	
	.plan-flightslot-flights{
	  display: grid;
	  grid-gap: 0.5em;
	}
	
	.plan-flightslot-metamodel{
		display: grid;
	  	
		border: 0.01em solid var(--border)
	}
	
	.plan-flightslot-model{
		display: grid;
		grid-gap: 0.5em;
		padding: 0.5em;
	  grid-template-columns: 1fr 1fr 1fr 1fr;

	}
	
	.flightdisplay {
		background: var(--metacontbg);
		display: grid;
		grid-gap: 0.5em;
		padding: 0.5em;
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.flightarchive{
		background: var(--gridcol);
		display: grid;
		grid-gap: 0.5em;
		padding: 0.5em;
	   grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.flightfirst {
		background: var(--flight1stbg);
		display: grid;
		grid-gap: 0.5em;
		padding: 0.5em;
	 grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	.flightdisplay:hover{
				background: var(--gridhoverbg);
				color:  var(--gridcol);
				cursor: pointer;
		}
		
	.flightfirst:hover{
				background: var(--gridhoverbg);
				color:  var(--gridcol);
				cursor: pointer;
		}
	

	

	
	.plan-flightslot-items-img {
		max-width: 100%;
		max-height: 4em;;
	}

	.plan-flightslot-items{
		overflow: hidden;
	  display: grid;
	}




	.left{
	  text-align: left;
	}
	
	.right{
	  text-align: right;
	}
	
	.center{
	  text-align: center;
	}
	




/****************************/
/** Cookiehinweis          **/
/****************************/

#ft24cookie {
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	max-width: 63em;
	margin: 1em;
	background: var(--ft24cookiebg); 
	border: var(--ft24cookiebo);
	padding: 1em;
}

#ft24cookie a.button {
	cursor: pointer; 
	background: var(--ft24buttonbg); 
	border: var(--ft24buttonbo);
	padding: 0.5em 1em; 
	margin-left: 1em; 
	font-weight: bold; 
	float: right;
}

#ft24cookie a.button:hover {
	background: var(--ft24hoverbg);
	color: var(--ft24hovercol);
}

#ft24cookie p.cookiemessage {
	display: block; 
	padding: 0; 
	margin: 0;
}











/********************************************************/
/** Zusatzformatierung für Tablet und Desktop          **/
/** Hack für Übergang zur skalierten Seitenbreite      **/
/** um den Body zentriert im Viewport zu halten        **/
/********************************************************/

@media only screen and (min-width: 67em) 

{
	body	{
		margin-left:auto; 
		margin-right:auto;
	}
	
	#ft24cookie {
			margin-left:auto; 
			margin-right:auto;
	}

	/** Logo im Header, Textfluss dazu **/
	header a img {
		max-height: 8em;
		max-width: 30em;
	}
	
	/** Titel **/
	#title {
		font: 800 3em Arial, sans-serif;
		line-height: 1.0;
	}

	/** Untertitel **/
	#subtitle {
		font: normal 1.3em Arial, sans-serif;
		line-height: 1.1;
	}
	
}







/********************************************************/
/** Zusatzformatierung - Tablet und Desktop            **/
/** Hier werden alle Elemente vierspaltig angelegt     **/
/** Das Menü ist oben, die Seitenleiste rechts         **/
/********************************************************/

@media only screen and (min-width: 980px) 

{
	/** Grundelement Seitenbody, 4 Spalten **/
	body {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	/** Grundelement Header über alle Spalten **/
	header {
		grid-column: 1 / span 4;
		grid-row:    1;	
	}
	


	/** Grundelement Navigation über alle Spalten **/
	nav {
		grid-column: 1 / span 4;
		grid-row:    2;	
	}
	
		/** Hamburger Menübutton wird ausgeblendet **/
		label.open-menu-label {
			display: none;
		}
		
		/** Navigationsleiste einblenden **/
		nav div {
			display: block;
			overflow: hidden;
		}
		
		nav div ul {
			width: auto;
		}
		

	
	/** Grundelement Überschrift über 3 Spalten **/
	section {
		grid-column: 1 / span 3;
		grid-row:    3;	
		border-right: 0;
	}
	
	/** Grundelement Sprache über 1 Spalte **/
	article {
		grid-column: 4 / span 1;
		grid-row:    3;	
		text-align: center;
	}

	/** Grundelement Content und Formulare über 3 Spalten **/
	main {
		grid-column: 1 / span 3;
		grid-row:    4;	
		border-right: 0;
	}

	/** Grundelement Seitenleiste neben section und main über 1 Spalte **/
	aside {
		grid-column: 4 / span 1;
		grid-row:    4;	
		border-top: 0;
	}

	/** Grundelement Fußzeile über alle Spalten **/
	footer {
		grid-column: 1 / span 4;
		grid-row:    5;	
	}
	

/** Rechtes Grid meta **/
	.overall-metagrid {
	  grid-template-columns: repeat(auto-fill, minmax(40em, 1fr));
	  grid-gap: 1em;
	}

	

	

		/** Grundelement Input überall **/
	.input_m {
		width: 15em;
	}
	
	.input_xs {
		width: 13em;
	}
	
	.input_xxs {
		width: 11em;
	}
	
	.input_s {
		width: 13em;
	}
	
	.input_l {
		width: 22em;
	}

	.input_xl {
		width: 32em;
	}

	.input_xxl {
		width: 42em;
	}	
	.select_m {
		width: 13em;
	}
	
	
	.select_s {
		width: 11em;
	}

	.select_xs {
		width: 9em;
	}
	
	
	.select_l {
		width: 15em;
	}
	
	/** Grundelement Button überall **/

	
	.button_xs {
		width: 11em;
	}
	
	.button_s {
		width: 13em;
	}

	
	.button_m {
		width: 15em;
	}

	.button_l {
		width: 17em;
	}

	.button_xl {
		width: 19em;
	}
	
	.file_div {
		width: 13em;
	}

	/** Grundelement Dropdown **/
	.select {
		width: 13em;
	}
	
	/** Grundelement Textarea s **/
	.textarea_s {
		height: 9em;
		width: 23em;
	}
	
	/** Grundelement Textarea l **/
	.textarea_m {
		height: 15em;
		width: 30em;
	}
	
	/** Grundelement Textarea l **/
	.textarea_l {
		height: 20em;
		width: 40em;
	}
	
		#aside_img	{
			max-width: 100%;
			max-height: 100%;
		}
}