/* background color */
body{
	background-color: #ddeaf3;
}

/* Style the form */
form {
	margin: auto;
	padding: 10px;
	width: 100%;
	height: 80%;
	min-width: 300px;
}

/* Style the form content */
.form-content {
	overflow: hidden;
	clear: both;
}

/* Style the fieldsets */
fieldset {
	background-color: white;
	border-radius: 15px;
	box-shadow: 0 0 20px #686868;
}

/* Style the input fields */
button,
datalist,
fieldset,
input,
legend,
optgroup,
option,
output,
select {
	padding: 10px;
	font-size: 1em;
	font-family: "Yu Gothic Light";
	color: #686868;
	border: 1px solid #777;
}

input {
	border-color: white;
	border-bottom-color: #686868;
}

textarea{
	width: 95%;
	height: 60%;
	padding: 10px;
	font-family: "Yu Gothic Light";
	color: #686868;
	border: 1px solid #777;
	font-size: 1em;
	resize: none;
}

/* Style the labels */
	label {
	font-size: 1em;
	font-family: "Yu Gothic Light";
	color: #686868;
	padding-top: 20px;
}

/* Style the error messages */
	.error-text {
	color: #f00;
	grid-column-start: 2;
}

/* Text Style */
h1{
	font-family: limelight;
	text-align: center;
	color: #B6D1E6;
}

footer{
	text-align: center;
	font-family: "Yu Gothic Light";
	color: #686868;
	width: 100%
}

/* Button Style */
.button{
	border-color: #686868;
}

.next-button{
	float: right;
}

.back-button {
	float: left;
	color: #777;
	background-color: #eef;
}

/* CSS für das Handy-Format */
@media (max-width: 600px) {
	form {
	margin: 0;
	padding: 0;
}

/* Tabelle auf volle Breite des Bildschirms setzen */
table {
	width: 100%;
}

td {
	display: block;
	width: 100%;
}

/* einzelne Tabellen auf andere Grösse setzen */
.datetime td {
	padding: 0;
	margin: 0;
	display: block;
	width: 33%;
	float: left;
}

#dateone, #datetwo, #datethree {
	width: 80%;
}

.zusammenfassung td {
	display: block;
	width: 30%;
	float: left;
}

.persoenlich td {
	display: block;
	width: 40%;
	float: left;
}