@font-face {
	font-family: "Ahkio-Bold";
	src: url("/sites/javportal/webFonts/Ahkio-Bold/font.woff2") format("woff2"),
		url("/sites/javportal/webFonts/Ahkio-Bold/font.woff") format("woff");
}

@font-face {
	font-family: "CeraPRO-Black";
	src: url("/sites/javportal/webFonts/CeraPRO-Black/font.woff2") format("woff2"),
		url("/sites/javportal/webFonts/CeraPRO-Black/font.woff") format("woff");
}

@font-face {
	font-family: "CeraPro-Regular";
	src: url("/sites/javportal/webFonts/CeraPro-Regular/font.woff2")
			format("woff2"),
		url("/sites/javportal/webFonts/CeraPro-Regular/font.woff") format("woff");
}

body {
	--border-color: #df8700;
	--form-background: rgba(255, 255, 255, 1);
	--form-shadow: 1ex 1ex 2ex 1ex #00000040;
	--input-color: black;
	--input-border-color: #fbba00;
	--input-border: 1px solid var(--input-border-color);
	--input-background: transparent;
	--input-disabled-backgound: lightgray;
	--input-invalid-background: rgba(255, 0, 0, 0.5);
	--button-background: black;
	--button-disabled-backgound: darkgray;
	--button-color: white;
	--button-border: 1px solid black;
	--horizontal-padding: 6%;
	--vertical-padding: 3%;
	--font-regular: "CeraPro-Regular", Arial, Helvetica, sans-serif;
	--font-bold: "CeraPRO-Black", Arial, Helvetica, sans-serif;
	--font-headline: "Ahkio-Bold", Arial, Helvetica, sans-serif;
	--button-font: normal 14px/20px var(--font-bold);
	--label-font: normal 14px/20px var(--font-bold);
	--logo-image: url(../layout/JAV-Wahl_LOGO.png);
	--highlight-color: #fbba00;

	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-gap: 3%;
	justify-content: center;
	align-items: end;
	min-height: 100vh;
	padding: var(--vertical-padding) var(--horizontal-padding);
	font: normal 14px/20px var(--font-regular);
	box-sizing: border-box;
}

header {
	z-index: 1;
    grid-row: 1;
    grid-column: 2;
}

main {
	grid-row: 1/3;
	grid-column: 1;
	z-index: 1;
    padding-bottom: 4%;
}

aside {
	grid-column: 2;
	grid-row: 2;
	z-index: 1;
    display: flex;
    padding-bottom: 4%;
}

#splash img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: block;
	object-fit: cover;
	background-image: var(--logo-image);
	background-size: 15%;
	background-position: var(--horizontal-padding) 3%;
	background-repeat: no-repeat;
}

#headline {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	justify-content: center;
	align-items: center;
	z-index: 1;
	padding: 10% 0 0 0;
}

#headline img {
	max-width: 40vw;
	max-height: 25vh;
}

footer {
	position: fixed;
	bottom: 0;
	left: var(--horizontal-padding);
	display: flex;
	justify-content: space-between;
	width: calc(100% - 2 * var(--horizontal-padding));
	box-sizing: border-box;
}

div.error,
noscript,
.oldBrowser,
form.grid {
	display: grid;
	grid-gap: 1ex;
	grid-template-columns: 28ex 1fr auto;
	align-items: center;
	background: var(--form-background);
	z-index: 1;
	padding: 3ex;
	border-radius: 0ex;
	max-width: 100%;
	min-width: 250px;
	box-shadow: var(--form-shadow);
	grid-row: 2;
	grid-column: 2;
	box-sizing: border-box;
	align-self: start;
	justify-self: end;
}

.grid {
	display: grid;
	grid-gap: 1ex;
	grid-template-columns: 28ex 1fr auto;
	align-items: center;
}

#login {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	grid-column: 1 / 3;
}

#login > ul {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: start;
	grid-column: 1 / 3;
	margin: 0;
	padding: 0;
}

#login li {
	margin: 0;
	display: inline-block;
	margin: 0;
	padding: 1ex;
	border: 1px solid var(--border-color);
	border-bottom: 0;
	border-radius: 1ex 1ex 0 0;
}

#anmelden,
#restore {
	padding: 1ex;
	border: 1px solid var(--border-color);
	grid-column: 1;
	display: none;
}

#cache {
	display: none;
	justify-content: end;
	width: 100%;
	grid-column: 1/4;
}

.stored #cache {
    display: flex;
}

#cache button {
	background-color: transparent;
	color: black;
	margin: 0 0 0 1em;
	padding: 1ex;
	border: 1px solid var(--border-color);
	border-radius: 1ex;
	min-width: fit-content;
	width: fit-content;
}

#cache p {
	padding-right: 1em;
    width: 100%;
}

body .grid .restore {
	display: none;
}

body.restore #restore,
body.anmelden #anmelden {
	display: grid;
}

body.anmelden li.anmelden,
body.restore li.restore {
	background-color: var(--highlight-color);
}

body.stored .init {
	display: none;
}

#password-container {
	display: contents;
}

body.restore .restore {
	display: inline;
}

body.restore .init {
	display: none;
}

body.igm .selectbox {
	background-image: url(../layout/logo_igm.png);
	background-size: 7em;
	background-repeat: no-repeat;
	background-position-x: right;
}

body.evg .selectbox {
	background-image: url(../layout/logo_evg.png);
	background-size: 7em;
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: center;
}

body.igbce .selectbox {
	background-image: url(../layout/logo_igbce.png);
	background-size: 10em;
	background-repeat: no-repeat;
	background-position-x: calc(100% - 1em);
	background-position-y: center;
}

body.igbau .selectbox {
	background-image: url(../layout/logo_igbau.png);
	background-size: 10em;
	background-repeat: no-repeat;
	background-position-x: calc(100% - 2em);
	background-position-y: top;
}

body.ngg .selectbox {
	background-image: url(../layout/logo_ngg.png);
	background-size: 7em;
	background-repeat: no-repeat;
	background-position-x: calc(100% - 1em);
	background-position-y: center;
}

body.verdi .selectbox {
	background-image: url(../layout/logo_ver.di.png);
	background-size: 7em;
	background-repeat: no-repeat;
	background-position-x: right;
}

video {
	max-width: 40vw;
	min-width: 25vw;
	max-height: 40vh;
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	justify-self: start;
	z-index: 1;
	background: var(--form-background);
	box-shadow: var(--form-shadow);
}

#privacy {
	grid-column: 1 / 4;
}

#stored,
body.stored #privacy,
.grid.hidden {
	display: none;
}

body.stored #stored {
	display: block;
	grid-column: 1 / 3;
}

.grid > label {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	grid-column: 1 / 3;
}

.grid > label#password2 {
	display: grid;
}

body.stored .grid > label#password2 {
	display: none;
}

.grid > label .label-text {
	font: var(--label-font);
}

.grid button,
.grid > label > div,
.grid > label > select,
.grid > label > input {
	cursor: pointer;
	min-width: 40ex;
	padding: 1.5ex;
	background: var(--input-background);
	border: var(--input-border);
	border-radius: 0.5ex;
	color: var(--input-color);
}

:focus,
.grid > label > div:focus,
.grid > label:focus > div.fileinput,
.grid button:focus,
.grid > label > input:focus {
	box-shadow: 0ex 0ex 1ex 0ex var(--input-border-color) !important;
	outline: 0;
}

input[type="file"],
div.fileinput {
	grid-row: 2;
	grid-column: 1;
	background-color: white;
	min-width: 32ex;
	min-height: 3ex;
}

input[type="file"] {
	visibility: hidden;
}

div.fileinput {
	height: 3ex;
}

.grid button {
	cursor: pointer;
	background: var(--button-background);
	color: var(--button-color);
	border: var(--button-border);
	font: var(--button-font);
}

.grid > label > input:disabled {
	cursor: inherit;
	background-color: var(--input-disabled-backgound);
}

.grid button:disabled {
	cursor: inherit;
	background-color: var(--button-disabled-backgound);
}

.grid button#update {
	margin-left: 1ex;
}

.grid button#update:disabled {
	display: none;
}

.grid > label > input[type="password"] {
	min-width: 32ex;
}

.grid > label > select:invalid,
.grid > label > input:invalid {
	border-color: var(--input-invalid-background);
	min-width: auto;
}

@media screen and (max-height: 1024px) {
	body {
		grid-gap: 3%;
	}

	header {
		grid-column: 2;
		grid-row: 1;
	}

	#headline {
		padding: 0;
	}

	main {
		grid-column: 1;
		grid-row: 1/3;
		align-self: end;
		justify-self: start;
	}

	aside {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		justify-self: end;
	}
}

@media screen and (max-width: 1024px) {
	body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto auto auto;
		grid-row-gap: 2%;
		background-image: url(../layout/tablet_splash.png);
		background-size: cover;
	}

	#splash {
		display: none;
	}

	header {
		grid-column: 1;
		grid-row: 1;
	}

	#headline {
		padding: 0;
	}

	#headline img {
		object-fit: contain;
		object-position: bottom right;
		background-image: var(--logo-image);
		background-size: 25%;
		background-position: var(--horizontal-padding) 3%;
		background-repeat: no-repeat;
		padding: 12% 10% 5% 10%;
	}

	main {
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		max-width: 100%;
	}

	aside {
		max-width: 100%;
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		justify-self: center;
	}

	footer {
		position: inherit;
		padding: 1ex 1em;
		width: 100%;
	}
}

@media screen and (max-width: 540px) {
	body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 2fr auto auto;
		background-image: url(../layout/mobile_splash.png);
	}

	.grid button,
	.grid > label > div,
	.grid > label > input {
		min-width: auto;
	}

	#headline img {
		max-width: 80vw;
	}

	aside {
		max-width: 100%;
		grid-column: 1;
		grid-row: 3;
	}

	footer {
		position: inherit;
		padding: 1ex 1em 0 1em;
		flex-wrap: wrap;
	}
}

/* Modernizer Auswertung */
.mdrnz-crypto .crypto,
.mdrnz-json .json,
.mdrnz-webworkers .webworkers,
.mdrnz-template .template,
.mdrnz-templatestrings .templatestrings,
.mdrnz-adownload .adownload,
.mdrnz-strictmode .strictmode,
.mdrnz-spreadobject .spreadobject,
.mdrnz-arrow .arrow,
.mdrnz-promises .promises,
.mdrnz-filereader .filereader,
.mdrnz-fetch .fetch,
.mdrnz-atobbtoa .atobbtoa,
.mdrnz-dataurl .datauri,
.mdrnz-sessionstorage .sessionstorage,
.mdrnz-localstorage .localstorage {
	display: none;
}

div.error,
.oldBrowser {
	display: none;
}

.no-openpgp .oldBrowser,
.mdrnz-no-crypto .oldBrowser,
.mdrnz-no-json .oldBrowser,
.mdrnz-no-webworkers .oldBrowser,
.mdrnz-no-template .oldBrowser,
.mdrnz-no-templatestrings .oldBrowser,
.mdrnz-no-adownload .oldBrowser,
.mdrnz-no-strictmode .oldBrowser,
.mdrnz-no-spreadobject .oldBrowser,
.mdrnz-no-arrow .oldBrowser,
.mdrnz-no-promises .oldBrowser,
.mdrnz-no-filereader .oldBrowser,
.mdrnz-no-fetch .oldBrowser,
.mdrnz-no-atobbtoa .oldBrowser,
.mdrnz-no-dataurl .oldBrowser,
.mdrnz-no-sessionstorage .oldBrowser,
.mdrnz-no-localstorage .oldBrowser {
	display: initial;
}

div.console {
	position: absolute;
	background: white;
	z-index: 1;
	overflow: auto;
	bottom: 0;
	width: 100%;
	height: 6em;
	font-size: 66%;
	box-sizing: border-box;
	padding: 0 1ex;
}

div.console pre {
	padding: 0;
	margin: 0;
	background: beige;
	line-height: 1;
}

div.console pre:nth-child(2n) {
	background: bisque;
}