/* ––– Common attributes and document body –––*/

:root {
	--page-maxwidth: 	60rem;
	--adfc-blue:		#004b7c;
	--color-dark:		#737373;
}

* {
	box-sizing:			border-box;
}

body {
	min-height:			100vh;
	display:			flex;
	flex-direction:		column;

	margin: 			0;
	align-items:		center;

	font-family:		sans-serif;
}

/* –––––– Document-wide type attributes ––––––*/

a {
	font-style:			italic;
	letter-spacing:		.25pt;
	color:				black;
	text-decoration:	solid underline;
}

a:hover {
	text-shadow: 0 0 .5pt;
}

em {
	font-style:			italic;
	letter-spacing:		.25pt;
}

/* ––––––––––––– Document header –––––––––––––*/

body > header {
	width:				100%;
	text-align:			center;
	margin-bottom:		2rem;
}

body > header > img {
	display:			block;
	margin: 			auto;
	height:				25rem;
	width:				100%;
	max-width:			var(--page-maxwidth);
	object-fit:			contain;
}

/* –––––––––– Document main section ––––––––––*/

body > main {
	padding:			0 2rem;
	margin: 			0 auto;

	width:				100%;
	max-width:			var(--page-maxwidth);
}

body > main h1 {
	text-align:			center;
	font-weight:		normal;

	margin:				1em 0;
	font-size:			xx-large;
}

body > main h2 {
	margin:				2em 0 .75em;
	font-size:			large;
}

body > main p {
	margin:				.75em 0;
	line-height:		1.5em;
	text-align:			justify;
}

body > main > footer {
	margin-top:			4rem;
	text-align:			center;
}

body > main .logos {
	display:			flex;
	flex-direction: 	row;
	flex-wrap:			wrap;
	align-items: 		center;
	justify-content:	center;
	gap:				1rem;
}

body > main .logos > img {
	display:			block;
	padding:			0;
	margin:				0;
	width:				10rem;
	height:				10rem;
	object-fit:			contain;
}

/* –––––––––––––––––– Form –––––––––––––––––––*/

body > form {
	padding:			2rem;
	margin: 			2rem auto 2rem;

	width:				100%;
	max-width:			var(--page-maxwidth);

	box-shadow: 1pt 1pt 3pt gray;
}

body > form > header {
	text-align:			center;
	font-style:			italic;
}

body > form > div {
	margin:				2em 0;
}

#personaldata {
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	column-gap:			2rem;
}

#personaldata > p {
	flex-basis:			var(--page-maxwidth);
	flex-grow:			4;
	order:				1;
}

#personaldata #firstnamecontainer,
#personaldata #lastnamecontainer,
#personaldata #emailcontainer,
#personaldata #phonecontainer {
	flex-basis:			20rem;
	flex-grow:			2;
	order:				-1;
}

#personaldata #zipcodecontainer,
#personaldata #citycontainer,
#personaldata #headcountcontainer {
	flex-basis:			20rem;
	flex-grow:			2;
}

#personaldata input{
	display:			block;
	width:				100%;
	padding:			.5em;

	font-size:			larger;
}

#questions > div {
	margin-bottom:		2em;
	font-size:			large;
}

#questions ul {
	list-style-type:	none;
	margin:				.7em 0;
}

#questions .upload {
	margin:				0 2em;
}

#questions .upload::before {
	font-size:			small;
	content:			"Beleg für dieses Kriterium";
}

#compliance h2 {
	font-size:			large;
	font-weight:		bold;
	margin:				.5em 0;
}


#compliance label {
	display:			inline-block;
	position:			relative;
	padding-left:		1.5em;
	margin:				.15em 0;
}

#compliance label > input {
	position:			absolute;
	width:				1.2em;
	left:				0;
	top:				2pt;
}

input {
	background-color:	transparent;
	border-style:		solid;
	border-color:		black;
	border-width:		1pt;
	border-radius:		0;
	outline:			0;
}

input:not(:focus):user-invalid {
	border-color:		red;
	border-style:		solid;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="phone"]:focus,
input[type="text"]:focus {
	border-color:		var(--adfc-blue);
	box-shadow:			0 0 0 1pt var(--adfc-blue);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color:		var(--adfc-blue);
}

input[type="file"] {
	border-style:			dashed;
	width:					100%;
	padding:				1em;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::file-selector-button {
	padding:			.5em 1em;
	margin-right:		1rem;
	border-radius:		4pt;

	border:				none;
	font-weight:		bold;
	color:				white;
	background-color:	var(--adfc-blue);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="file"]::file-selector-button:hover {
	text-shadow:		0 0 .5pt;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="file"]::file-selector-button:active {
	box-shadow:			0 .125em .25em black inset;
}

/* ––––––––––––– Document footer –––––––––––––*/

body > footer {
	width:				100%;
	margin-top:			auto;
	padding: 			.5em;

	font-size:			small;
	color:				white;
	background-color:	var(--color-dark);
}

body > footer a {
	display:			inline-block;
	margin-right:		.5em;
	float:				left;

	color:				unset;
	font-style:			normal;
	text-decoration:	none;
}

body > footer div {
	display:			inline-block;
	margin-left:		.5em;
	float:				right;
}