html {
	background: #FEFEFE;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	margin: 1ex;
	min-height: calc(100vh - 2ex);
	border-radius: 0.5ex;	/* runde Ecken - weicherer Look, siehe nav, footer*/
	line-height: 1.333;
	widows: 2;
	orphans: 2;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: "Helvetica", sans-serif;
}

main {
	max-width: 100%;
}

p, fieldset, table, pre, ul, dt {
	margin-top: 0.7em;
	margin-bottom: 0;
}
p {
	text-align: justify;
}

h1, h2, h3, h4, h5, h6, .title {
	color: #900;
	page-break-after: avoid;
	page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 2em;
	clear: both;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	margin-top: 1em
}
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
	margin-top: 1.333em; /* = 1 x line-height */
}


/* header + footer */
header, footer {
	background: #0068b4;
}

nav {
	margin: 1ex;
	min-width: 24ex;
}

nav, footer {
	display: block;
	border: 1px solid #ffffe8;		/* Umrandung: durchgehender Strich */
	border-radius: 0.5ex;			/* runde Ecken - weicherer Look */
	box-shadow: 0 2px 2px -1px #f0f0f0;/* leichter Schatten unter der box */
	overflow: hidden;				/* überstehends abschneiden */
	text-align: center;
}

nav ul {
	margin: 1ex 0 0.5ex 0;			/* oben rechts unten links */
	padding: 0;
	text-align: center;
}

nav ul li, footer ul li {
	display: inline-block;			/* alles hintereinander aufreihen */
	list-style-type: none;			/* keine Kommandostriche/punkte */
	margin: 0 1ex ;					/* oben/unten  rechts/links */
	transition: all 0.2s;			/* Uebergänge */
}

nav > ul > li > a, footer > ul > li > a, nav > ul > li > p {
	display: block;
	color: white;				/* URL Text ist per default blau ... */
	text-decoration: none;		/* Text nicht unterstreichen, etc. */
	padding: 0.5ex;
	margin: 0;
}

nav > ul > li:hover, footer > ul > li:hover {	/* Top-Menu Buttons */
	background-color: #282c2f;
}

footer {
	margin: 1em 0 0 0;
}
footer > ul {
	display: inline-block;
	margin: 1ex;
}
p.copyright:before {
	content: 'Copyright © '
}
.copyright {
	font-size: 50%;
	margin: 1ex auto 0 auto;
}

@media print {
	nav { display: none; }
	footer { display: none; }
}

a {
	text-decoration: none;
}

main {
	flex: 1 1 auto;
	align-self: center;
}

main p {
	hyphens: auto;
}
article section {
	margin-left: 1em;
}
main > article {
	margin: 0.7em 1ex;
}

.center {
	text-align: center;
}
.red { color: red; }
.gray { background-color: #CCCCCC; }
.lightgray { background-color: #F2F2F2; }
.darkgray { background-color: #777777; }
.iffgray { color: #919191; }
dt { color: green; }

/* spezielle Sachen */
main.home {
	background-color: #dfdfdf;
	background-image: url(/style/bg2.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	padding: 1.5ex 1ex;
}

table {
	padding: 0;
	border-spacing: 0;
	border: 1px solid #cbcbcb;
	text-align: center;
}

th, td {
	padding-right: 1ex;
	padding-left: 1ex;
	vertical-align: middle;
}

th {
	text-align: center;
	white-space: nowrap;
}

thead th {
	text-shadow: 0 1px 1px #fff;
	background-color: #efefef; /* #00ebff */
	background-image: linear-gradient(transparent 40%,rgba(0,0,0,0.21));
}

@media print {
	thead th {
		background-image: none;
	}
}

tbody td {
	background-color: #fff;
	border: 1px solid #cbcbcb;
}

tr:nth-child(odd) td {
	background-color: #dbeaff;
}

#complete tbody td, #telefon tbody td, #history tbody td {white-space: nowrap;}
#complete tbody td:last-child, #history tbody td:last-child {white-space: normal;}