﻿*		{margin: 0; padding: 0; }

header, nav, footer, aside, section {
    display: block;
}

/* html, body		{ height: 100%; font-family: 'Fira Sans', normal; }*/
html, body		{ height: 100%; font-family: 'Lexend Deca', sans-serif; }
body			{ max-width: 1100px; }

h1				{ font-weight: bold; color: #000000; text-decoration: underline; }
h2				{ font-weight: bold; color: #000000; margin-left: 5pt; }
h3				{ font-weight: bold; color: #000000; }

nav				{ background-color:#9ac6e8; }
nav ul			{ list-style: none; }
nav ul li a 	{ font-weight: bold; text-decoration: none; color: #444444; border: 0 none; }
nav ul li a:hover, nav #active 	{ border: 0 none #000000; color: #111111; background-color: #FFFFFF; }

ul				{ margin-left: 1em; }

form input, form textarea	{ font-family: 'Lexend Deca', sans-serif; }
form input[type=submit] { padding: 0.2em 0.5em; }

@media only screen and ( min-width: 1000px ) {
    /* Browserfenster */
	body 		{ width: 90%; margin: 0 auto; background-color: #DCDCDC; }
	a, p, form input, form textarea	{ font-size: 1.4rem; }
	nav			{ width: 17em; padding: 10% 1em 0; height: 100%; float: left; position: fixed; }
	nav img		{ max-width: 100%; height: auto;}
	p.tel		{ margin-top: 1em; }
	a.tel		{ color: #000000; text-decoration: none; }
	nav ul		{ margin-top: 15%; margin-left: 2em; }
	nav ul li	{ display: block; margin:0.5em 0; width: 100%; }
	nav ul li a	{ display: block; padding: 0.3em 0.4em 0.3em 0.3em; width: 100%; }
	nav ul li a:hover, nav #active { display: block; padding: 0.3em 0.4em 0.3em 0.3em; background-color: white; width: 100%; }
	section  	{ width: auto; height: 100%; margin-left: 19em; padding: 0 1em; background-color: white; }
	form input[type=text]	{ width: 20em; }
	form textarea	{ width: 20em; height: 10em; }
}

@media only screen and ( min-width: 700px ) and ( max-width: 1000px ) {
    /* Tablets und mittlere Bildschirme */

    body 		{ margin: 0 auto; background-color: white; }
	a, p, form input, form textarea	{ font-size: 1.4rem; }
	nav			{ width: 15em; padding-top: 10% ;height: 100%; float:left; /*position:fixed;*/ }
	nav img		{ max-width: 12em; height: auto; margin: 0 auto; }
	p.tel		{ margin-top: 1em; margin-left: 0.1em; margin-right: 0.1em; }
	a.tel		{ color: #000000; text-decoration: none; }
	nav ul		{ margin-top: 15%; margin-left: 2em; }
	nav ul li	{ display: block; margin: 0.5em 0 ; width: 100%; }
	nav ul li a	{ display: block; padding: 0.3em 0em 0.3em 0.3em; width: 100%; }
	nav ul li a:hover, nav #active { display: block; padding: 0.3em 0 0.3em 0.3em; background-color: white; width: 97%; }
	section  	{ width: auto; height: 100%; margin-left: 15em; padding: 0 1em ; background-color: white; }	
	form input[type=text]	{ width: 15em; }
	form textarea	{ width: 15em; height: 7em; }
}

@media only screen and ( min-width: 450px ) and ( max-width: 700px ) {
    /* große Smartphones */

    body 		{ margin: 0 auto; background-color: white; }
	a, p, form input, form textarea	{ font-size: 1rem; }	
	nav			{ width: 11em; padding-top: 1%;height: 100%; float:left; /*position:fixed;*/ }
	nav img		{ max-width: 10em; height: auto; margin: 0 auto; }
	p.tel		{ margin-top: 0.5em; }
	a.tel		{ color: #000000; text-decoration: none; }
	nav ul		{ margin-top: 3%; margin-left: 2em; }
	nav ul li	{ display: block; margin: 0.1em 0 ; width: 100%; }
	nav ul li a	{ display: block; padding: 0.3em 0em 0.3em 0.3em; width: 100%; }
	nav ul li a:hover, nav #active { display: block; padding: 0.3em 0 0.3em 0.3em; background-color: white; width: 97%; }
	section  	{ width: auto; height: 100%; margin-left: 11em; padding: 0 0.7em; }	
	form input[type=text]	{ width: 15em; }
	form textarea	{ width: 15em; height: 7em; }	
}

@media only screen and ( max-width: 450px ) {
    /* kleine Smartphones */
    body 		{ background-color: white; width: 100%; margin: 0 auto; }
	a, p, form input, form textarea { font-size: 1rem; }
	nav			{ width: 100%; /*height: 9em;*/ position:fixed; }
	nav img		{ max-width: 9em/*6em*/; height: auto; margin-top:0.5em }
	a.tel		{ color: #000000; text-decoration: none; }
	nav ul		{ padding: 0.2em; margin: 0.2em; }	
	nav ul li	{ display: inline; padding: 0.2em; margin: 0.2em; }
	nav ul li a	{ padding: 0.2em; margin: 0.2em; }
	section  	{ padding: 9em/*6em*/ 0.7em 0.7em 0.7em; height: 100%; background-color: white ; }
	form input[type=text]	{ width: 10em; }
	form textarea	{ width: 10em; height: 7em; }	
}
