/*
	 1. Globale Variablen
	 2. Grundeinstellungen
	 3. Schriften vorbereiten
	 4. Template Layout Anordnung
	 5. Template Layout Gestaltung
	 6. Grafische Elemente Template
	 7. Grafische Elemente Seiteninhalt
	 8. Animationen
	 9. Regulierungen
	10. Anpassung an Bildschirmauflösungen
	10.1. VGA 740px
	10.2. SVGA 800px
	10.3. XVGA 1024px
*/


/* 1. Globale Variablen
========================*/
:root {
	--tmpl-face-backgrnd-highcol: #3344AA;

	--tmpl-face-backgrnd-midcol: #000080;
	--tmpl-face-backgrnd-lowcol: #000060;
	
	--tmpl-face-gradientcol-start: #3344AA00;
	--tmpl-face-gradientcol-end: #3344AAFF;

	--tmpl-header-height: 16.5vw;
	--tmpl-header-maxheigth: 222px;
	--tmpl-header-minheight: 10vw;
	--tmpl-maxwidth: 1400px;
	--tmpl-menueopener-height: 45px;
	
	--tmpl-singlecontent-maxwidth: 600px;
	
/*	1.1. Überschriebene Modulvorgaben	*/
	
	--ansc-hlp-input-innerheight: 30px;
	
	
}
/* 2. Grundeinstellungen
============================*/

html, html * {
/*
	margin: 0px;
	padding: 0px;
*/
	box-sizing: border-box;
}

/* 3. Schriften vorbereiten
============================*/
@font-face {
  font-family: 'WinkySans';
  src: url('WinkySans-VariableFont_wght.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 4. Template Layout Anordnung
================================*/
body {
	display: grid;
	grid-template-columns: 100%;

	margin: 0px auto 0px auto;
	max-width: var(--tmpl-maxwidth);
	width:calc(100% - 12px);
}
header {
	/* order: 1; */
	z-index: 501; /* Header muss im Desktop-Layout noch über das Hauptmenü gelagert werden */
	position: fixed;
	max-width: var(--tmpl-maxwidth);
	width: calc(100% - 4px);
	margin-left: -8px;
}
header.head-screenmod {
}
footer {
	order: 3;
}
nav {
	width: calc(100% - 1px);
	top: 0px;
}
nav.nav-screenmod {
	position: static;
	height: auto;
}
main {
	order: 2;
}
#tmpl-main-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
#tmpl-middle {
	display: grid;
	grid-template-columns: minmax(180px, 240px) auto;
}
#tmpl-spacer-behind-header {
	height: var(--tmpl-header-height);
	max-height: var(--tmpl-header-maxheigth);
}


/* 5. Template Layout Gestaltung
====================================*/
body {
	font-family: WinkySans, Arial;
	font-size: 12pt;
	letter-spacing: 0.05em;

	background-color:var (--tmpl-face-backgrnd-lowcol);
	color:#fc0;
	/* height:100%; */

	background-image:url(../images/content-bg.jpg);
	background-repeat:repeat-y;
	background-size:100%;
	border-left:ridge 2px #00f;
	border-right:#00f ridge 4px;
	padding:0 2px;
}

footer {
	height:70px;
	text-align:center;
	clear:both;
	padding-top:50px;
	font-size:9pt;
}
header {
	background-size: 100%;
	/* background-size: contain; */
	background-image:url(../images/header.jpg);
	background-repeat: no-repeat;

	height: var(--tmpl-header-height);
	max-height:222px;
}
main {
	padding: 0 5px;
}
nav {
	background-color: var(--tmpl-face-backgrnd-midcol);
}
#tmpl-main-grid {
	gap: 1vw;
}

/* 6. Grafische Elemente Template
====================================*/
ansicmaWaitAnimation{
	left: 0;
	z-index: 502;
	background-color: rgba(80,80,200, 0.7);
}

#firefox-logo {
	height:95%;
	top: 0;
	position: absolute;
}

#header_loginbutton {
	position: absolute;
	left: calc(100% - 135px);
	top: calc(100% - 42px - 1vw);
}
#header_loginbutton input {
	background: blue;
	background-image: none;
	color: yellow;
	font-weight: bold;
	padding:5px;
	border-radius: 8px;
	padding-right: 40px;
	background-image: url('mobile_login.png');
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: 96%;
}

/* Hauptmenü */
#menue-opener {
	background-color: black;
	padding: 2px 0px 0px 40px;
	border: solid 2px black;
	border-top: solid white;
	border-bottom: solid white;
	color: white;
	cursor: pointer;

	height: var(--tmpl-menueopener-height);
	font-size: 20px;

	display:none;
}
nav .toolbox-titel {
	line-height:24px;
	padding: 0 0 6px 0;
}
#menue-opener-login, #menue-opener-button {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	background-color: transparent;
	background-image: url('mobile_login.png');
	background-size:contain;
	background-position:center;
	border:none;
}
#menue-opener-button {
	background-image: url('mobile_menue.png');
	background-color: black;
	background-position: center center;
	background-size: 140%;
}


/*	7. Grafische Elemente Seiteninhalt
========================================*/
.comError {
	padding: 10px;
	text-align: center;
	color: red;
	background-color: #FDD;
	border: solid 3px;
	margin: 20px 0;
}
.comError:empty {
	display:none;
}

h3.Titel {
	margin-bottom: 1em;
}
input {
	font-family: WinkySans, Arial;
	font-size: 12pt;
	letter-spacing: 0.05em;
}
input[type="button"], input[type="submit"] {
	cursor:pointer;
	border-radius: 5px;
}
input[type="submit"] {
	min-width:200px;
	min-height: 32px;
}
input[type="submit"]:not([disabled]) {
	background: linear-gradient(to bottom, #0D0 0%, #FF0 50%, #0D0 100%);
}
input[type="text"], input[type="password"] {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#pagetitel {
	font-size:24px;
	color:#FFF;
	font-style:italic;
	font-weight:bold;
	font-stretch:normal;
}
#tmpl-main-grid comAnsicmaArticle {
	background: linear-gradient(to bottom, var(--tmpl-face-gradientcol-start) 0%, var(--tmpl-face-gradientcol-end) 2%, var(--tmpl-face-gradientcol-end) 98%, var(--tmpl-face-gradientcol-start) 100%);
	padding: 0.5vw;
}
a {
	color:#00FFFFEE;
}

/* 8. Animationen
====================*/
header {
	transition: margin 500ms ease-out, height 500ms ease-out;
}
html.ansc-scrolldown header {
	margin-top: 0px;
	height: var(--tmpl-header-minheight);
	border-bottom:solid 6px var(--tmpl-face-backgrnd-midcol);
}
html.ansc-scrolldown nav {
	top: calc(0px - var(--tmpl-menueopener-height));
}
html.ansc-scrolldown #header_loginbutton {
	display:none;
}
nav {
	transition: top 500ms ease-out;
}
nav.ansc-activated {
	height:100% !important;
}

/* 9. Regulierungen
======================*/

/* Textauswahl verhindern */
#menue-opener {
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Für Chrome, Safari */
  -moz-user-select: none; /* Für Firefox (optional) */
  -ms-user-select: none; /* Für Internet Explorer 10 und höher (optional) */
}

/*	10. Anpassung an Bildschirmauflösungen
============================================*/

/****** VGA 740px ******/
@media only screen and (max-width: 740px) {
	header.head-screenmod {
		margin-top: var(--tmpl-menueopener-height);	
	}
	nav.nav-screenmod {
		position: fixed;
		height: var(--tmpl-menueopener-height);
		margin-left: -13px;
		overflow:hidden;
	}
	nav .nav-content {
		padding: var(--tmpl-header-height) 40px 0 5px;
		height: 100%;
		overflow: scroll;
	}
	#menue-opener {
		display:grid;
		grid-template-columns: auto 60px 60px;
		line-height: calc(var(--tmpl-menueopener-height) / 1.3);
	}
	#tmpl-main-grid {
		grid-template-columns: 100%;
	}
	#tmpl-middle {
		display: block;
	}
	#tmpl-spacer-behind-header {
		height: calc(var(--tmpl-menueopener-height) + var(--tmpl-header-height));
	}
	#header_loginbutton {
		display: none;
	}
}

/****** SVGA 800px ******/
@media only screen and (max-width: 800px) {

}

/****** XGA 1024px ******/
@media only screen and (max-width: 1024px) {

}