@charset "UTF-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
	background-image: url("images/index/190822 neue Bilder/sun moon 2000.jpg");
		background-attachment: fixed;
	/*background-size: 100%;*/
	background-color: silver;
	font-family: arial, sans-serif;
}

header, nav, footer, aside, section {
    display: block;
}

#wrapper {
	width: 900px;
	/*border: 2px blue;*/
	margin: 0 auto;
	text-align: left;
	background-image: url("images/index/190822 neue Bilder/hintergrund-inhalt.png")
}

header {
	background-image: url("images/index/190822 neue Bilder/Tobi_zaubert Becher Blume 151 px.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 151px;
	width: 900px;
	margin: 0 auto;
}
#logo {
	float: left;
		height: 50px;
	margin-left: 2px;
}
#stelzen {
	float: left;
	width: auto;
	height: auto;
}
#bildfloatl {
	float: left;
	width: auto;
	height: auto;
}
#bildfloatleins {
	float: left;
	width: auto;
	height: auto;
}
#bildfloat {
	float: right;
	width: auto;
	height: auto;
}
#bildfloatn {
	float: none;
	width: auto;
	height: auto;
}
#video {
	object-position: center;
}
#logotext {
	padding-top: 45px;
	font-size: 1,5em;
	font-weight: bold;
}

header p {
	text-align: right;
	color: white;
	padding-right: 20px;
	text-shadow: 1px 1px 4px black;
}
header a{
	color: white;
	text-decoration: none;
}

header a:hover {
	text-decoration: underline;
}
#steuerungoben {
/*    background-color: orange;*/
    height: 1.5em;
    background-image: url("images/index/190822 neue Bilder/durchsichtiges-grau.png");
}

#steuerungoben ul{
	list-style-type: none;
}

#steuerungoben li{
	display: inline-block;
}
#steuerungoben a{
	display:  inline-block;
	width: 175px;
	text-align: center;
	text-decoration: none;
	line-height: 1.5em;
	color: white;
}
#steuerungoben a:hover {
    background-image: url("images/index/190822 neue Bilder/durchsichtiges-grau.png");
	height:1,5em;
}
#steuerunglinks{
	width: 220px;
	float: left;
	margin-top: 20px;
}
#steuerunglinks ul {
	padding-left:2em;
	list-style-type: none;
	color: #945e37;
}
#steuerunglinks ul ul{
	list-style-type: square;
	padding-top: 0,5em;
	padding-left: 1em;
}
#steuerunglinks {
	padding-bottom: 0,8em;
}

#steuerunglinks a {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	color: #945e37;
}

#steuerunglinks a:hover {
	text-dekoration: underline;
	-webkit-animation-name: animation_steuerung_links;
	animation-name: animation_steuerung_links;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

@-webkit-keyframes animation_steuerung_links {
	0%    {color: #945e37;}
	50%   {color: blue;}
	100%  {color: #945e37;}
}
@keyframes animation_steuerung_links {
	0%    {color: #945e37;}
	50%   {color: blue;}
	100%  {color: #945e37;}
}
article {
	
	width: 430px;
	float:  left;
	margin-left: 40px;
}
article h1 {
	padding-top: 20px;
    padding-bottom: 0.2em;
    font-size: 1.8em;
    color: black; 
}
article h3 { 
  padding-top: 1em;
	padding-bottom: 0,9em;
	font-size: 1,4em;
	color: dimgray;
	font-family: Arial narrow, sans-serif;
}
article p {
	padding-bottom: 1em;
	line-height: 1,4em;
}
article ul, article ol {
	padding-left:  2em;
	padding-top: 1em;
}
article li {
	line-height: 1,4em;
}
aside {
	width: 165px;
	float: right;
	margin-top: 20px;
}
aside p summary{
	color: black;
	font-weight: normal;
	}
	aside h4 { 
  padding-top: 0,6em;
	padding-bottom: 0,2em;
	font-size: 1,4em;
	color: white;
	font-family: Arial narrow, sans-serif;
}
aside img{
	border: 1px solid silver;
}


footer {
	 color: white;
	clear: both;
   background-image: url("images/index/190822 neue Bilder/durchsichtiges-grau.png");
    text-align: center;
	height: 1,5em;
	line-height: 1,5em;
}	
footer a {
	color: white;
	text-decoration: none;
}
footer a:hover {
    background-image: url("images/index/190822 neue Bilder/durchsichtiges-grau.png");
	height:1,5em;
}

.schriftklein {
	font-size: 0,9em;
}

.slicknav_menu {
	display:none;
}

	/* für Tablett und Co */
	
@media only screen and ( min-width: 45em ) and ( max-width: 56.25em) {
	article {
		/* background-color: yellow;*/
		width: 62%;
	}
	
	#steuerungoben { 		
		display: none;
	}

	.slicknav_menu {
		display: block;
	}	
	
	#wrapper,
	header {
		width: 100%;
	}

	#wrapper {
		background-image: url("images/index/190822 neue Bilder/hintergrund-inhalt.png");   
	}
	
	aside {
		/* background-color: orchid;*/
		clear: both;
		float: none;
		margin-left: 260px;
		width: 430px;
		margin-bottom: 1em;
	}

	aside img {
		width: 137px;
		height: auto;	
	}

	aside p {
		color: black;
		text-shadow: none;
	}		
}


/* fuer Handy und Co */
@media only screen and ( max-width: 45em ) {
	/*article*/
	article {
        /*	background-color: hsla(0, 50%, 100%, 0.3);*/
		float: none;
		width: 90%;
		margin: 0 auto;
	}		
	
	#steuerungoben,
	#steuerunglinks { 		
		display: none;
	}	

	.slicknav_menu {
		display: block;
	}

	.slicknav_nav a {
		text-align: left;
	}	
	
	#wrapper,
	header {
		width: 100%;
	}	

	/* Platz sparen oben - gut für Handy-Menü-Steuerung */
	header {		
		height: 151px;
		background-position: center bottom, center bottom;
	}	

	#logotext {
		padding-top: 15px;
	}	
	
	
	
	#wrapper {
		background-image: none;
		background-color: hsla(0, 50%, 100%, 0.9);
	}

	aside {
		/* background-color: orange;*/
		float: none;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 1em;
	}

	aside img {
		width: 31%;
		height: auto;
	}	
	
	aside p {
		color: black;
		text-shadow: none;
	}
	aside h4 {
		color:dimgray;
	}
}