/* Fluesterfix GWH Corporate Design
 * 2022-08-03 von Thomas Jirasko <technik@bugfree-systems.de>	
 */
:root {
	--text-color: #333333;
	--bg-color-input: #FFFFFF;
	--bg-color-button: #88c432;
	--bg-color-button-hover: #a0d05b;	
	--bg-root-color: #c8df8b;
	--bg-root-image: none;
	--bg-root-gradient: linear-gradient(0deg, rgba(200,223,139,1) 0%, rgba(132,206,205,1) 100%);
	--line-color: #77b5a7;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #FFFFFF;
		--bg-color-input: #222222;
		--bg-color-button: #333333;
		--bg-root-color: #222222;
		--bg-root-image: none;
		--line-color: #444444;
	}
}

* {
	font-family: Arial,sans-serif;
	font-size: 1.1em;
	color: var(--text-color);
}

html {
	height: 100%;
	background: var(--bg-root-gradient);
	background-repeat: no-repeat;
	background-position: center center;
}

a:link, a:visited {
	color: var(--text-color);
	text-decoration: none;
	border-bottom: 1px dotted var(--text-color);
}

a:hover, a:active, a:focus {
	border-bottom: 1px solid var(--text-color);
}

a.headerlink {
	border: none;
}

body {
	padding: 0 5em;
	max-width: 1280px;
	margin: 0 auto 4em;
}

#logo {
	width: 100px;
	margin: 3.2em 0 1.7em 0;
}

h1 {
	font-size: 1.5em;
	padding-top: 2.2em;
	font-weight: bold;
	border-top: 1px solid var(--line-color);
}

input, textarea, .button {
	border: 1px solid var(--line-color);
	padding: 17px 10px;
	margin: 2px 0;
	display: inline-block;
	border-radius: 2px;
}

input[type=submit], .button {
	font-size: 1em;
	border: none;
	cursor: pointer;
	margin-top: 1.2em;
	padding: 1.05em 3.2em .95em 3.2em;
	background-color: var(--bg-color-button);
	transition: background-color .15s ease-in-out;
}
input[type=submit]:hover, .button:hover { 
	background-color: var(--bg-color-button-hover);
}

input[type=text] {
	width: 100%;
	background-color: var(--bg-color-input);
}

textarea {
	font-family: Arial,sans-serif;
	letter-spacing: .05em;
	width: 100%;
	min-height: 9em;
	line-height: 1.2em;
	background-color: var(--bg-color-input);
}

@media only screen and (max-width: 767px) {
	body {
		padding: 0 3.5em;
		margin: 0 auto 3em;
	}

	#logo {
		margin: 2.6em 0 1.4em;
	}
}

@media only screen and (max-width: 599px) {
	body {
		padding: 0 2.5em;
		margin: 0 auto 2em;
	}

	#logo {
		margin: 2.1em 0 1.2em;
	}
}

@media only screen and (max-width: 379px) {
	body {
		padding: 0 1.5em;
		margin: 0 auto 1.25em;
	}

	#logo {
		margin: 1.9em 0 1em;
	}
}