/* ----------------- generelle Angaben--------------------------------------------------------------- ---------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ----------Font Verdana -----------------------------------------------------------------------------*/

@font-face 
	{
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		font-family: "Verdana";
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


@font-face 
	{
		font-family: 'Verdana';
		font-weight: 400;
		font-display: swap;
		font-family: "Verdana";
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


.orbF /* Verdana fett*/

{
		font-family: "Verdana",sans-serif;
		font-weight:600;
	}

.orb /* Verdana normal*/
	{
		font-family: "Verdana",sans-serif;
		font-weight:400;
	}

/* ---------- mehrfach verwendete Style-Angaben ------------------------------------------------------------------------*/
body 
	{
		margin:0px; padding:0px;
		box-sizing: border-box;
		/*font-family: "Arial",  sans-serif;*/
		font-family: Verdana, sans-serif;
		font-weight:400;
	}
	
a:link {text-decoration:none;color: #000000}
a:visited {text-decoration:none;color: #000000}
a:hover {text-decoration:none;color: #550000}

.dontDrag /* verhindert, dass am Handy Bilder oder Icons in den Drag&Drop-Modus schalten */ 
	{
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

/* Farben */ 
.gold
	{
		color: #b08844;
	}

.purple
	{
		color: #3510c7;
	}

/* Hover Effekte */ 
	
.emphasize
	{
		padding: 0vw;
		box-shadow: 0px 0px 0px #00000000;
		background-image: linear-gradient(#ffffff 75%, #ffffff 100%);
		transition: box-shadow 0.7s, background-image 0.5s;
	}

.emphasize:hover 
	{
		box-shadow: 0px .1vmax .2vmax #00000066;
		background-image: linear-gradient(#fafcff 75%, #f2f4ff 100%);
	}	
		
	
/* vordefinierte Grids */ 

.fineGrid 
	{
		display: grid;
		width:100%;		
		margin-top: 1vw;
		column-gap: 1vw;
		row-gap: 0.2vw;	
		grid-template-columns:100%;
	}
	
.fiveCellGrid 
	{
		display: grid;
		width:100%;
		margin-top: 1vw;
		column-gap: 1vw;
		row-gap: 0.2vw;	
		grid-template-columns:100%;
	}
	
/* ----------------- Einstellungen für mobile Geräte (mobile first), Grundeinstellung für alle Geräte ---------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ----------------- Logo-Zeile und Buttons ------------------------------------------------*/
.logoline
	{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top:1vw;
	}
	
.geofrontLogo
	{
		height: 8vw;
		min-height:2.5vmax;
	}

.iconBox
	{
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 0.3vmax;
		align-items: center;
		justify-content: space-between;
	}

.longIcon
	{
		height: 4vw;
		min-height: 2em;
		width: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		filter: drop-shadow(0px 0px 0px #00000000);
		transition: filter 0.3s;
	}
	
.longIcon:hover 
	{
		filter: drop-shadow(0px .1em .3em #00000088);
	}
	
.show_hide
	{
		display: flex; /* => show */
	}

.button
	{
		opacity:0.5;
		transition: opacity 0.3s;
	}
.button:hover 
	{
		opacity:1.0;
	}

.ico
	{
		width: 2.2vmin;
		min-width: 2em;
	}


/* ------------ eigentliches Menü in einer Spalte untereinander ----------------------------------------------------------------------*/

.menuItem
	{
		height: 5vw;
		min-height:30px;
		width: 100%;
		display: flex;
		column-gap: 1vw;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: .2vw;
	}
	
/* Menü Spalte 1 */	
	
.headerLink1 
	{
		grid-column: 1 / 2;
		grid-row:    1 / 2;
		font-size: 3vw;
	}
.headerLink4 
	{
		grid-column: 1 / 2;
		grid-row:    2 / 3;			
		font-size: 2.5vw;
	}
.headerLink7 
	{
		grid-column: 1 / 2;
		grid-row:    3 / 4;			
		font-size: 2.5vw;
	}

/* Menü Spalte 2 */	
	
.headerLink2 
	{
		grid-column: 1 / 2;
		grid-row:    4 / 5;  
		font-size: 3vw;
	}
.headerLink5 
	{
		grid-column: 1 / 2;
		grid-row:    5 / 6;			
		font-size: 2.5vw;
	}
.headerLink8 
	{
		grid-column: 1 / 2;
		grid-row:    6 / 7;			
		font-size: 2.5vw;
	}
	
/* Menü Spalte 3 */	

.headerLink3 
	{
		grid-column: 1 / 2;
		grid-row:    7 / 8;	 
		font-size: 3vw;
	}
.headerLink6 
	{
		grid-column: 1 / 2;
		grid-row:    8 / 9;			
		font-size: 2.5vw;
	}
.headerLink9 
	{
		grid-column: 1 / 2;
		grid-row:    9 / 10;			
		font-size: 2.5vw;
	}
	
/* Trennlinien*/	

.hr1 
	{
		display:none;
		width: 100%;
		border: 0.11vmax solid #ed603f;
		background: #ed603f;
		height:0px;
		margin-top: 0.2vmax;
		margin-bottom: 0.2vmax;	
	}

.hr2 
	{
		display:none;
		width: 100%;
		border: 0.11vmax solid #ed603f;
		background: #ed603f;
		height:0px;
		margin-top: 0.2vmax;
		margin-bottom: 0.2vmax;		
	}

.hr3 
	{
		display:none;
		width: 100%;
		border: 0.11vmax solid #ed603f;
		background: #ed603f;
		height:0px;
		margin-top: 0.2vmax;
		margin-bottom: 0.2vmax;		
	}
	
/* ------------Hero-Pic und Viewer ----------------------------------------------------------------------*/

.heroPicture
	{
		grid-column: 1 / 2;
		grid-row:    1 / 2;
		margin-top: 0.2em ;
		width:100%;
	} 
.viewer
	{
		grid-column: 1 / 2;
		grid-row:    1 / 2;
		margin-top: 0.2em ;
		width:100%;
		height: 30vmax;
		border: 0;
	} 

.heroPic
	{
		width:100%;
	}
	
/* ------------ TextSection -------------------------------------------------------------------------*/

.cellL
	{
		grid-column: 1 / 2;
		grid-row:    1 / 2;
		text-align:center;
	}
.cellM
	{
		grid-column: 1 / 2;
		grid-row:    2 / 3;
		text-align:center;
	}
.cellR
	{
		grid-column: 1 / 2;
		grid-row:    3 / 4;
		text-align:center;
	}

.articleHeader
	{
		text-align: inherit;
		margin-bottom: 1vmin;
		padding: 0.5vw;
		font-size: 2.5vw;
	}
	
.articleText
	{
		text-align: justify;
		padding: 0.5vw;
		font-size: 2vw;
		margin-bottom: 2vmin;
	}
	
.articleTextBig
	{
		text-align: inherit;
		padding: 0.5vw;
		font-size: 2.3vw;
		margin-bottom: 2vmin;
	}
/* -------------Footer -----------------------------------------------------------------------------------*/	
.footerItem
	{
		height: 5vw;
		min-height:30px;
		width: 100%;
		display: flex;
		column-gap: 1vw;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 2.5vw;
		padding: .2vw;
	}

.footerL
	{
		grid-column: 1 / 2;
		grid-row:    1 / 1;
	}
.footerM
	{
		grid-column: 1 / 2;
		grid-row:    2 / 3;
	}
.footerR
	{
		grid-column: 1 / 2;
		grid-row:    3 / 4;
	}
	




/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
@media (min-width: 45em)/* ------------ Layout für breitere Bildschirme ------------------------------------------------------------------------------------------------*/ 
{
	/* ---------- mehrfach verwendete Style-Angaben --------------------------------------------*/
	
	/* Hover Effekte */ 
	
	
	
	.emphasize
		{
			box-shadow: 0px 0px 0px #000000ff;
			background-image: linear-gradient(#ffffff, #ffffff);
			transition: box-shadow 0.7s, background-image 0.5s;
		}

	.emphasize:hover 
		{
			box-shadow: 0px .1vw .2vw #00000066;
			background-image: linear-gradient(#fafcff 75%, #f2f4ff 100%);
		}	
	
	/* vordefinierte Grids */
	
	.fineGrid 
		{
			grid-template-columns:4fr 1fr 6fr 3fr 6fr 1fr 4fr;;
		}
		
	.fiveCellGrid 
		{
			grid-template-columns:1fr 1fr 1fr 1fr 1fr;
		}
	
	/* ----------------- Logo-Zeile und Buttons ------------------------------------------------*/
	
	.show_hide
		{
			display: none; /* => hide */
		}
	
	/* ------------Menü ----------------------------------------------------------------------*/

	.menuItem
		{
			height: unset;
			min-height:initial;
			display: flex;
		}

	/* eigentliches Menü in 3 Spalten nebeneinander*/
	
	/* Zeile 1, Kopfzeile*/
	
	.headerLink1 
		{
			grid-column: 3 / 4;
			grid-row:    1 / 2;
			justify-content: flex-start;
			font-size: 2vw;	
		}
	.headerLink2 
		{
			grid-column: 4 / 5;
			grid-row:    1 / 2; 
			justify-content: center;
			font-size: 2vw;				
		}
	.headerLink3 
		{
			grid-column: 5 / 6;
			grid-row:    1 / 2;	 
			justify-content: flex-end;
			font-size: 2vw;	
		}
		
	/* Zeile 2, Items*/
	
	.headerLink4 
		{
			grid-column: 3 / 4;
			grid-row:    2 / 3;
			justify-content: flex-start;
			font-size: 1.35vw;				
		}
	.headerLink5 
		{
			grid-column: 4 / 5;
			grid-row:    2 / 3;
			justify-content: center;
			font-size: 1.35vw;				
		}		
	.headerLink6 
		{
			grid-column: 5 / 6;
			grid-row:    2 / 3;
			justify-content: flex-end;
			font-size: 1.35vw;				
		}
		
	/* Zeile 3, Items*/
	
	.headerLink7 
		{
			grid-column: 3 / 4;
			grid-row:    5 / 6;
			justify-content: flex-start;
			font-size: 1.35vw;
		}
	.headerLink8 
		{
			grid-column: 4 / 5;
			grid-row:    5 / 6;	
			justify-content: center;
			font-size: 1.35vw;	
		}	
	.headerLink9 
		{
			grid-column: 5 / 6;
			grid-row:    5 / 6;	
			justify-content: flex-end;
			font-size: 1.35vw;	
		}		
	
	/* Trennlinien*/	
	
	.hr1 
		{
			grid-column: 2 / 4;
			grid-row:    3 / 4;
			display: block;
		}
	.hr2 
		{
			grid-column: 4 / 5;
			grid-row:    3 / 4;
			display: block;	
		}
	.hr3 
		{
			grid-column: 5 / 7;
			grid-row:    3 / 4;
			display: block;	
		}		
	/* ------------Hero-Pic und Viewer ----------------------------------------------------------------------*/
	
	.heroPicture
		{
			grid-column: 2 / 5;
			grid-row:    1 / 2;
		} 
	.viewer
		{
			grid-column: 2 / 5;
			grid-row:    1 / 2;
		}

	/* ------------ TextSection -------------------------------------------------------------------------*/
	.cellL
		{
			grid-column: 2 / 3;
			grid-row:    1 / 2;
			text-align:left;
		}
	.cellM
		{
			grid-column: 3 / 4;
			grid-row:    1 / 2;
			text-align:center;
		}
	.cellR
		{
			grid-column: 4 / 5;
			grid-row:    1 / 2;
			text-align:right;
		}
	.articleHeader
		{
			font-size: 1.7vw;
		}
	.articleText
		{
			font-size: 1.3vw;
			margin-bottom: 0px;
		}
	.articleTextBig
		{
			text-align: inherit;
			padding: 0.5vw;
			font-size: 1.5vw;
			margin-bottom: 2vmin;
		}
		
	/* -------------Footer -----------------------------------------------------------------------------------*/	
	.footerItem
		{
			height: unset;
			min-height:initial;
			font-size: 2vw;
		}
	.footerL
		{
			grid-column: 2 / 3;
			grid-row:    1 / 2;
			justify-content: flex-start;
		}
	.footerM
		{
			grid-column: 3 / 4;
			grid-row:    1 / 2;
			justify-content: center;
		}
	.footerR
		{
			grid-column: 4 / 5;
			grid-row:    1 / 2;
			justify-content: flex-end;
		}

}