/* Farbangaben */

:root {
	--color-background: white;
	--color-main: black ;
	--color-accent: white;
	--color-notification: orange;
	--color-notification-text: black;
	--color-text: black;
	--color-link: blue;
	--color-linkhighlight: lightblue;
	--color-button: lightgrey;
	--color-button-alternative: grey;
	--color-button-disabled: white;
	--color-button-hover: grey;
	--color-button-hover-text: white;	
	--color-button-text: black;
	--color-button-text-alternative: black;
	--color-button-text-disabled: black;
	--color-progressbar: grey;
	--color-progressbar-text: black;
	--color-progressbar-current: green;
	--color-progressbar-current-text: white;
}
  

	
	/* <!-- */
	/* General styles */
	body {
		font-family:Verdana, Geneva, sans-serif;
		margin:0;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:100%;
		background:var(--color-background);
				/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
	}
	a {
		color:var(--color-link);
		text-decoration: none;
	}
	a:hover {
		background:var(--color-linkhighlight);
		text-decoration:none;
	}
	h1, h2, h3 {
		margin:.8em 0 .2em 0;
		padding:0;
	}
	p {
		margin:.4em 0 .8em 0;
		padding:0;
	}
	img {
		margin:10px 0 5px;
	}
	/* Header styles */
	#header {
		clear:both;
		float:left;
		width:100%;
		color:var(--color-accent);
		text-align:center;
		background-color:var(--color-main);
	}
	#header {
		padding-bottom: 1em;
	}
	#header a {
		color:var(--color-accent);
		text-decoration:none;
	}

	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}


	/* Full page settings */
	.fullpage {
		background:var(--color-background);		/* page background colour */
	}
	.fullpage .col1 {
		width:95%;			/* page width minus left and right padding */
		margin: 0 auto;
	}

	/* Footer styles */
	#footer {
		clear:both;
		width:100%;
		text-align: center;
		font-size: 1em;

	}
	#footer p {
		padding:10px;
		margin:0;

	}
	
	.gobutton {
		width: 100%;
		height:2.5em;
		font-size:1em;
		font-weight:bold;
	}
	

	.button {
		display:block;
		height: 1.2em;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
		text-align: center;
		vertical-align: middle;
		font-size: 1.0em;
		padding: 0.8em;
		font-weight: bold;
		text-decoration: none;
		background-color: var(--color-button);
		border: thin solid #000000;
		color: var(--color-button-text);
	}

	a.button:hover {
		background-color: var(--color-button-hover);
		color: var(--color-button-hover-text);
	}
	
	.backbutton {
		display:block;
		height: 1.2em;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
		text-align: center;
		vertical-align: middle;
		font-size: 1.0em;
		padding: 0.8em;
		font-weight: bold;
		text-decoration: none;
		background-color: var(--color-button-alternative);
		border: thin solid #000000;
		color: var(--color-button-text-alternative);
	}
	
	.disabledbutton {
		display:block;
		height: 1.2em;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
		text-align: center;
		vertical-align: middle;
		font-size: 1.0em;
		padding: 0.8em;
		font-weight: bold;
		text-decoration: line-through;
		background-color: var(--color-button-disabled);
		border: thin solid #000000;
		color: var(--color-button-text-disabled);
		position: relative;
	}
	
	.disabledbutton .napopup {
		visibility: hidden;
		width: 80%;
		height: 50%;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 8px 0;
		position: absolute;
		z-index: 999;
		bottom: 5%;
		left: 10%;
	}

	.napopupshow {
		visibility: visible !important;
		-webkit-animation: fadeInOut 5s;
		animation: fadeInOut 5s forwards
	}

	@-webkit-keyframes fadeInOut {
		0% {
			opacity: 0;
		}
		30% {
			opacity: 1;
		}	
		70% {
			opacity: 1;
		}		
		100% {
			opacity: 0;
		}
	}

	@keyframes fadeInOut {
		0% {
			opacity: 0;
		}
		30% {
			opacity: 1;
		}	
		70% {
			opacity: 1;
		}		
		100% {
			opacity: 0;
		}
	}


	.formdata {
		width:100%;
	}
	
	.flag {
		border: 2px solid white;
		height: 1em;
		width: auto;
		margin-left: 5px;
		vertical-align: middle;
	}
	.flaghighlight {
		border: 2px solid black;
		height: 1em;
		width: auto;
		margin-left: 5px;
		vertical-align: middle;
	}

	p.note {
		background-color: var(--color-notification);
		padding: 0.8em;
		margin: 0.5 0 0.5em 0;
		color: var(--color-notification-text)
	}

	#contactdata {
		margin: 0 auto;
		width: 100%;
	}

	#progressbar {
		width: 100%;
		margin: 0 auto;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		justify-content: center;
	}

	.barsegment {
		height: 2em;
		line-height: 2em;
		font-weight: bold;
		text-align: center;
	}

	.greensegment {
		background-color: var(--color-progressbar-current);
		color: var(--color-progressbar-current-text);
	}

	.graysegment {
		background-color: var(--color-progressbar);
		color: var(--color-progressbar-text);
	}

	.middlesegment {
		margin: 0;
	}
	

@media only screen and (min-width: 600px) {
	.fullpage .col1 {
		min-width: 50%;
		max-width: 50%;
		margin: 0 auto;
	}

	#progressbar {
		width: 100%;
		margin: 0 auto;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;

	}

	.barsegment {
		flex-basis: 0;
		height: 2em;
		line-height: 2em;
		flex-grow: 1;
		font-weight: bold;
		text-align: center;
	}

	.middlesegment {
		margin-left: 0.2em;
		margin-right:  0.2em;
	}

}