html
{
	background-color: #f7f7f7;
}
/* DESKTOP */
@media (min-width: 28.01cm) {
	body
	{
		background-color: white;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		color: 5b5b5b;
		max-width: 1170px;
		margin: 0 auto;
	}
	.head
	{
		grid-column-start: 1;
		grid-column-end: 13;
		color: white;
		background-color: #d1c1b4;
		padding: 11em 1em 0 17em;
		background-image: url("images/kreise.png");
		background-repeat: no-repeat;
	}
	.navigation
	{
		grid-column-start: 1;
		grid-column-end: 13;
		color: white;
		background-color: #d1c1b4;
		padding-left: 15.5em;
		margin-bottom: 1em;
	}
	.content-01
	{
		grid-column-start: 1;
		grid-column-end: 4;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02
	{
		grid-column-start: 4;
		grid-column-end: 7;
		padding: 1.5em 1.5em;
		text-align: center;
	}	
	.content-03
	{
		grid-column-start: 7;
		grid-column-end: 10;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02-03
	{
		grid-column-start: 4;
		grid-column-end: 10;
		padding: 0 1.5em 1.5em 1.5em;
		text-align: left;
	}
	.content-04
	{
		grid-column-start: 10;
		grid-column-end: 13;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.footer-01
	{
		grid-column-start: 1;
		grid-column-end: 4;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-02
	{
		grid-column-start: 4;
		grid-column-end: 7;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-03
	{
		grid-column-start: 7;
		grid-column-end: 10;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-04
	{
		grid-column-start: 10;
		grid-column-end: 13;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-all
	{
		grid-column-start: 1;
		grid-column-end: 13;
		font-size: 1.2em;
		color: white;
		background-color: #d1c1b4;
		text-align: center;
		padding: 1em 0 1.75em 0;
	}
	.footer-all a:link
	{
		color: white;
		text-decoration: none;
	}
	.content
	{
		float: left;
		padding: 0 0 0 0;
	}
	h1
	{
		font-size: 2.5em;
		font-weight: normal;
		color:white;
		margin: 0;
		display: block;
		text-align: left;
	}
	h2
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: center;
	}
	h3
	{
		font-size: 2.5em;
		font-weight: normal;
		font-style: italic;
		color: #a29696;
		margin: 0;
		display: block; 
		text-align: left;
		padding: 1em 0;
	}	
	h4
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: left;
	}	
	p
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: center;
	}		
	p.content
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: left;
	}
	a:link,
	a:visited
	{
		color: #636363;
		text-decoration: none;
	}
	ul
	{
		list-style-type: disc;
		list-style-position: outside;
		color: Black;
		padding: 0;
		margin: 0 0 0 1.5em;
	}
	ul.content
	{
		list-style-type: disc;
		list-style-position: outside;
		color: #636363;
	}
	ul#menu
	{
		font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;
		list-style: none;
		margin: 0;
	}
	ul#menu li
	{
		display: inline;
	}
	ul#menu li a
	{
		float: left;
		text-decoration: none;		
		padding: 0.5em 1em;
	}
	ul#menu li a:link,
	ul#menu li a:visited
	{
		background-color: d1c1b4;
		color: white;		
		font-size: 1.5em;		
	}
	ul#menu li.selected a:link,
	ul#menu li.selected a:visited,
	ul#menu li a:hover,
	ul#menu li a:active
	{
		background-color: #d1c1b4;
		color: white;
		font-size: 1.5em;
		font-weight: bold;
	}
	.tele
	{
		font-size: 1.2em;
	}
}
/* SMARTPHONE */
@media (min-width: 0cm) and (max-width: 11cm) {
	body
	{
		background-color: white;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		color: 5b5b5b;
		margin: 0 auto;
	}
	.head
	{
		grid-column-start: 1;
		grid-column-end: 2;
		color: white;
		background-color: #d1c1b4;
		padding-left: 5%;
		padding-top: 5%;
		background-image: url("images/kreise_smartphone.png");
		background-size: auto;
		background-repeat: no-repeat;
	}
	.navigation
	{
		grid-column-start: 1;
		grid-column-end: 2;
		color: white;
		background-color: #d1c1b4;
		padding: 1em 0;
		margin-bottom: 1em;
	}
	.content-01
	{
		grid-column-start: 1;
		grid-column-end: 2;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02
	{
		grid-column-start: 1;
		grid-column-end: 2;
		padding: 1.5em 1.5em;
		text-align: center;
	}	
	.content-03
	{
		grid-column-start: 1;
		grid-column-end: 2;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02-03
	{
		grid-column-start: 1;
		grid-column-end: 2;
		padding: 0 1.5em 1.5em 1.5em;
		text-align: left;
	}
	.content-04
	{
		grid-column-start: 1;
		grid-column-end: 2;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.footer-01
	{
		grid-column-start: 1;
		grid-column-end: 2;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-02
	{
		grid-column-start: 1;
		grid-column-end: 2;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-03
	{
		grid-column-start: 1;
		grid-column-end: 2;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-04
	{
		grid-column-start: 1;
		grid-column-end: 2;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-all
	{
		grid-column-start: 1;
		grid-column-end: 2;
		font-size: 1em;
		color: white;
		background-color: #d1c1b4;
		text-align: left;
		padding: 1.5em 1em 1.75em 1em;
	}
	.footer-all a:link
	{
		color: white;
		text-decoration: none;
	}
	.content
	{
		float: left;
		padding: 0 0 0 0;
	}
	h1
	{
		font-size: 2em;
		font-weight: normal;
		color:white;
		margin: 0;
		display: block;
		text-align: left;
	}
	h2
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: center;
	}
	h3
	{
		font-size: 1em;
		font-weight: normal;
		font-style: italic;
		color: #a29696;
		margin: 0;
		display: block; 
		text-align: left;
		padding-top: 1em;
		padding-bottom: 1em;
	}	
	h4
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: left;
	}	
	p
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: center;
	}		
	p.content
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: left;
	}
	a:link,
	a:visited
	{
		color: #636363;
		text-decoration: none;
	}
	ul
	{
		list-style-type: disc;
		list-style-position: outside;
		color: Black;
		padding: 0;
		margin: 0 0 0 1.5em;
	}
	ul.content
	{
		list-style-type: disc;
		list-style-position: outside;
		color: #636363;
	}
	ul#menu
	{
		list-style: none;
		margin: 0;
	}
	ul#menu li
	{
		display: inline-block;
	}
	ul#menu li a
	{
		float: left;
		text-decoration: none;		
		padding: 0 3em 0 1em;
	}
	ul#menu li a:link,
	ul#menu li a:visited
	{
		background-color: d1c1b4;
		color: white;		
		font-size: 1.5em;		
	}
	ul#menu li.selected a:link,
	ul#menu li.selected a:visited,
	ul#menu li a:hover,
	ul#menu li a:active
	{
		background-color: #d1c1b4;
		color: white;
		font-size: 1.5em;
		font-weight: bold;
	}
	.tele
	{
		font-size: 1.2em;
	}
}
/* TABLET PORTRAIT*/
@media (min-width: 11cm) and (max-width: 22cm) {
	body
	{
		background-color: white;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		color: 5b5b5b;
		margin: 0 auto;
	}
	.head
	{
		grid-column-start: 1;
		grid-column-end: 5;
		color: white;
		background-color: #d1c1b4;
		padding-left: 5%;
		padding-top: 5%;
		padding-right: 5%;
		background-image: url("images/kreise_tablet.png");
		background-size: auto;
		background-repeat: no-repeat;
	}
	.navigation
	{
		grid-column-start: 1;
		grid-column-end: 5;
		color: white;
		background-color: #d1c1b4;
		padding: 1em 0;
		margin-bottom: 1em;
	}
	.content-01
	{
		grid-column-start: 1;
		grid-column-end: 3;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02
	{
		grid-column-start: 3;
		grid-column-end: 5;
		padding: 1.5em 1.5em;
		text-align: center;
	}	
	.content-03
	{
		grid-column-start: 1;
		grid-column-end: 3;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02-03
	{
		grid-column-start: 3;
		grid-column-end: 5;
		padding: 0 1.5em 1.5em 1.5em;
		text-align: left;
	}
	.content-04
	{
		grid-column-start: 3;
		grid-column-end: 5;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.footer-01
	{
		grid-column-start: 1;
		grid-column-end: 3;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-02
	{
		grid-column-start: 3;
		grid-column-end: 5;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-03
	{
		grid-column-start: 1;
		grid-column-end: 3;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-04
	{
		grid-column-start: 3;
		grid-column-end: 5;
		color: white;
		font-size: 1.2em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-all
	{
		grid-column-start: 1;
		grid-column-end: 5;
		font-size: 1.2em;
		color: white;
		background-color: #d1c1b4;
		text-align: left;
		padding: 2em 1em 1.75em 1.5em;
	}
	.footer-all a:link
	{
		color: white;
		text-decoration: none;
	}
	.content
	{
		float: left;
		padding: 0 0 0 0;
	}
	h1
	{
		font-size: 2em;
		font-weight: normal;
		color:white;
		margin: 0;
		display: block;
		text-align: left;
	}
	h2
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: center;
	}
	h3
	{
		font-size: 2em;
		font-weight: normal;
		font-style: italic;
		color: #a29696;
		margin: 0;
		display: block; 
		text-align: left;
		padding-top: 1em;
		padding-bottom: 1em;
	}	
	h4
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: left;
	}	
	p
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: center;
	}		
	p.content
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: left;
	}
	a:link,
	a:visited
	{
		color: #636363;
		text-decoration: none;
	}
	ul
	{
		list-style-type: disc;
		list-style-position: outside;
		color: Black;
		padding: 0;
		margin: 0 0 0 1.5em;
	}
	ul.content
	{
		list-style-type: disc;
		list-style-position: outside;
		color: #636363;
	}
	ul#menu
	{
		list-style: none;
		margin: 0;
	}
	ul#menu li
	{
		display: inline-block;
	}
	ul#menu li a
	{
		float: left;
		text-decoration: none;		
		padding: 0 3em 0 1em;
	}
	ul#menu li a:link,
	ul#menu li a:visited
	{
		background-color: d1c1b4;
		color: white;		
		font-size: 1.5em;		
	}
	ul#menu li.selected a:link,
	ul#menu li.selected a:visited,
	ul#menu li a:hover,
	ul#menu li a:active
	{
		background-color: #d1c1b4;
		color: white;
		font-size: 1.5em;
		font-weight: bold;
	}
	.tele
	{
		font-size: 1.2em;
	}
}
/* TABLER LANDSCAPE */
@media (min-width: 22.01cm) and (max-width: 28cm) {
	body
	{
		background-color: white;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		color: 5b5b5b;
		margin: 0 auto;
	}
	.head
	{
		grid-column-start: 1;
		grid-column-end: 13;
		color: white;
		background-color: #d1c1b4;
		padding: 11em 4em 0 15em;
		background-image: url("images/kreise.png");
		background-repeat: no-repeat;
	}
	.navigation
	{
		grid-column-start: 1;
		grid-column-end: 13;
		color: white;
		background-color: #d1c1b4;
		padding-left: 1em;
		margin-bottom: 1em;
	}
	.content-01
	{
		grid-column-start: 1;
		grid-column-end: 4;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02
	{
		grid-column-start: 4;
		grid-column-end: 7;
		padding: 1.5em 1.5em;
		text-align: center;
	}	
	.content-03
	{
		grid-column-start: 7;
		grid-column-end: 10;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.content-02-03
	{
		grid-column-start: 4;
		grid-column-end: 10;
		padding: 0 1.5em 1.5em 1.5em;
		text-align: left;
	}
	.content-04
	{
		grid-column-start: 10;
		grid-column-end: 13;
		padding: 1.5em 1.5em;
		text-align: center;
	}
	.footer-01
	{
		grid-column-start: 1;
		grid-column-end: 4;
		color: white;
		font-size: 1em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-02
	{
		grid-column-start: 4;
		grid-column-end: 7;
		color: white;
		font-size: 1em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-03
	{
		grid-column-start: 7;
		grid-column-end: 10;
		color: white;
		font-size: 1em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-04
	{
		grid-column-start: 10;
		grid-column-end: 13;
		color: white;
		font-size: 1em;
		background-color: #d1c1b4;
		padding: 1em 1.5em 0 1.5em;
	}
	.footer-all
	{
		grid-column-start: 1;
		grid-column-end: 13;
		font-size: 1em;
		color: white;
		background-color: #d1c1b4;
		text-align: center;
		padding: 1em 0 1.75em 0;
	}
	.footer-all a:link
	{
		color: white;
		text-decoration: none;
	}
	.content
	{
		float: left;
		padding: 0 0 0 0;
	}
	h1
	{
		font-size: 2.5em;
		font-weight: normal;
		color:white;
		margin: 0;
		display: block;
		text-align: left;
	}
	h2
	{
		font-size: 1.5em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: center;
	}
	h3
	{
		font-size: 2.5em;
		font-weight: normal;
		font-style: italic;
		color: #a29696;
		margin: 0;
		display: block; 
		text-align: left;
		padding: 1em 0;
	}	
	h4
	{
		font-size: 2em;
		font-weight: normal;
		color: #636363;
		line-height: 1.1;
		display: block; 
		text-align: left;
	}	
	p
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: center;
	}		
	p.content
	{
		font-size: 1.1em;
		font-weight: normal;
		color: #636363;
		line-height: normal;
		text-align: left;
	}
	a:link,
	a:visited
	{
		color: #636363;
		text-decoration: none;
	}
	ul
	{
		list-style-type: disc;
		list-style-position: outside;
		color: Black;
		padding: 0;
		margin: 0 0 0 1.5em;
	}
	ul.content
	{
		list-style-type: disc;
		list-style-position: outside;
		color: #636363;
	}
	ul#menu
	{
		font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;
		list-style: none;
		margin: 0;
	}
	ul#menu li
	{
		display: inline;
	}
	ul#menu li a
	{
		float: left;
		text-decoration: none;		
		padding: 0.5em 0.75em;
	}
	ul#menu li a:link,
	ul#menu li a:visited
	{
		background-color: d1c1b4;
		color: white;		
		font-size: 1.3em;		
	}
	ul#menu li.selected a:link,
	ul#menu li.selected a:visited,
	ul#menu li a:hover,
	ul#menu li a:active
	{
		background-color: #d1c1b4;
		color: white;
		font-size: 1.3em;
		font-weight: bold;
	}
	.tele
	{
		font-size: 1.2em;
	}
}