* {
margin : 0;
padding : 0;
}
body {
background-color : silver;
font-family : Arial, sans-serif;
background-image : url(../img/hg_sonnenuntergang.jpg);
/* background-image : url(../img/hg_blauerhimmel.jpg);
background-image : url(../img/hg_natur.jpg);
background-image : url(../img/hg_idylle.jpg); */
background-attachment : fixed;
background-size : 100% 100%;
text-align : center;
}
header, nav, footer, article {
display : block;
}
#wrapper {
width : 900px;
margin : 0 auto;
background-image : url(../img/durchsichtig8.png);
text-align : left;
}
/* Button auf der Startseite mit Anker/Verlinkung zu einer internen HTML-Seite
   oder eines Download-PDF's bzw. eines Pop-Up-Fenster's
   ######################################################################## */
.buttongroesse {
  width: 250px;
  height: 55px;
}
/* Button 1 auf BLAU #021B47 */
#button1 {
  background-color: #021B47;
  color: white;
  position: absolute;
  top: 7%;
  left: 1%;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid white;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
}
#button1:hover {
	background-color: #021B47;
	color: white;
}
#button1 a {
	color: white;
    text-decoration: none;
	font-weight: bold;
}
#button1 a:hover {
	color: white;
}
/* Button 2 auf GRÜN #7ED957 */
#button2 {
  background-color: #7ED957;
  color: white;
  position: absolute;
  top: 110%;
  left: 48%;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid white;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
}
#button2:hover {
	background-color: #7ED957;
	color: white;
}
#button2 a {
	color: white;
    text-decoration: none;
	font-weight: bold;
}
#button2 a:hover {
	color: white;
}
/* Button 3 ROT */
#button3 {
  background-color: red;
  color: white;
  position: absolute;
  /* top: 210px;  */
  /* left: 200px;  */
  width: 100px;
  height: 135px;
  top: 25%;
  right: 6%;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid white;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
}
#button3:hover {
	background-color: red;
	color: white;
}
#button3 a {
	color: white;
    text-decoration: none;
	font-weight: bold;
}
#button3 a:hover {
	color: white;
}
header {
background-image : url(../img/schatten.png), url(../img/header_rheinsonnenuntergang.jpg);	
/* background-image : url(../img/schatten.png), url(../img/header_sonnenuntergang.jpg);  
background-image : url(../img/schatten.png), url(../img/header_weg.jpg);
background-image : url(../img/schatten.png), url(../img/header_bergblick.jpg);
background-image : url(../img/schatten.png), url(../img/header_berge.jpg);
background-image : url(../img/schatten.png), url(../img/header_dreizinnenoben.jpg);
background-image : url(../img/schatten.png), url(../img/header_dreizinnenvorne.jpg);
background-image : url(../img/schatten.png), url(../img/header_wirtschaftfortschritt.jpg);
background-image : url(../img/schatten.png), url(../img/header_fernblickheimweh.jpg); */
background-repeat : no-repeat;
background-position : right 28px, center;
height : 175px;
width : 900px;
margin : 0 auto;
}
#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 {
height : 1.5em;
background-image : url(../img/grau-50.png);
}
#steuerungoben ul {
list-style-type : none;
}
#steuerungoben li {
display : inline-block;
}
#steuerungoben a {
display : inline-block;
width : 230px;
text-align : center;
text-decoration : none;
line-height : 1.5em;
color : white;
}
#steuerungoben a:hover {
background-color : #008037;
}
#steuerunglinks {
width : 220px;
float : left;
margin-top : 20px;
}
#steuerunglinks ul {
padding-left : 2em;
list-style-type : none;
color : #008037;
}
#steuerunglinks ul ul {
list-style-type : square;
padding-top : 0.5em;
padding-left : 1em;
}
#steuerunglinks li {
padding-bottom : 0.8em;
}
#steuerunglinks a {
text-decoration : none;
display : inline-block;
width : 100%;
color : #008037;
}
#steuerunglinks a:hover {
background-color: #7ED957;
color: #008037;
animation-name : animation_steuerung_links;
animation-duration : 1s;
font-weight: bolder;
}
.menue-button {
float : right;
}
@keyframes animation_steuerung_links {
0% {
color : #7ED957;
}
50% {
color : #008037;
}
100% {
color : #FFFFFF;
}
}
article {
width : 430px;
float : left;
margin-left : 40px;
}
article h1 {
padding-top : 20px;
padding-bottom : 0.2em;
font-size : 1.8em;
color : #7ED957;
}
article h2 {
color : #7ED957;
padding-top : 0.6em;
padding-bottom : 0.2em;
font-size : 1.4em;
}
article p {
padding-bottom : 1em;
line-height : 1.4em;
}
article a {
color : black;
font-weight : bold;
text-decoration : none;
}
article a:hover {
color : #7ED957;
}
article ul, article ol {
padding-left : 2em;
padding-bottom : 1em;
}
article li {
line-height : 1.4em;
}
figure {
background-color : #eee;
display : inline-block;
padding : 10px;
border : silver solid 1px;
float : right;
margin : 0.4em 0 0.4em 1em;
}
figcaption {
font-size : 80%;
text-align : center;
font-style : italic;
}
aside {
width : 165px;
float : right;
margin-top : 20px;
}
aside p {
color : white;
font-weight : bold;
text-shadow : 1px 1px 4px black;
text-align : center;
}
aside img {
border : silver solid 1px;
}
footer {
color : white;
clear : both;
background-image : url(../img/grau-50.png);
text-align : center;
height : 1.5em;
line-height : 1.5em;
}
footer a {
color : white;
text-decoration : none;
}
.valid {
	float: right;
}
.valid img {
	border: 0;
	width: 50px;
	height: 20px;
}
.schriftklein {
font-size : 0.9em;
}
.slicknav_menu {
display : none;
}
@media only screen and (min-width:45em) and (max-width:56.25em) {
article {
width : 62%;
}
#bewertungright {
margin-right : 50px;
}
#steuerungoben {
display : none;
}
.slicknav_menu {
display : none;
}
#wrapper, header {
width : 100%;
}
#wrapper {
background-image : url(../img/durchsichtig8.png);
}
aside {
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;
}
figure {
background-color : #eee;
display : inline-block;
padding : 10px;
border : silver solid 1px;
margin : 0.4em 0 0.4em 1em;
}
figcaption {
font-size : 80%;
text-align : center;
font-style : italic;
}
}
@media only screen and (max-width:45em) {
article {
float : none;
width : 90%;
margin : 0 auto;
}
article p {
font-size : 85%;
}
.bewertung {
text-align : center;
}
#steuerungoben {
display : none;
}
#steuerunglinks {
width : 100%;
float : right;
margin : 10px;
padding-bottom : 20px;
padding-left : 5px;
padding-right : 5px;
padding-top : 10px;
text-align : center;
}
#steuerunglinks ul {
padding-left : 1.5em;
padding-top : 0.5em;
margin-top : 0.5em;
list-style-type : none;
margin : 0;
padding : 0;
width : 100%;
}
#steuerunglinks ul ul {
list-style-type : none;
}
#steuerunglinks li {
padding-bottom : 0.5em;
list-style : none;
float : left;
}
#steuerunglinks a {
display : block;
height : 100%;
width : 100%;
padding : 0.5em;
text-decoration : none;
font-weight : bold;
color : white;
background-color : #7ED957;
}
#steuerunglinks a:hover {
color : black;
background : #7ED957;
}
.menue-button {
display : none;
margin-top : 121.5px;
}
.menue-button {
display : block;
}
.menue-button {
background-color : #008037;
display : block;
position : absolute;
right : 0;
top : 0;
padding : 0.5em;
color : #008037;
cursor : pointer;
text-decoration : none;
}
#steuerunglinks {
float : left;
width : 100%;
display : none;
}
#steuerunglinks li {
width : 100%;
border-bottom : 2px solid silver;
}
.menue-button:hover {
background : #7ED957;
color : #008037;
}
#nav-menue:target #steuerunglinks {
display : block;
}
#nav-menue:target .menue-button-beschr-open {
display : none;
}
.slicknav_menu {
display : block;
}
.slicknav_nav a {
text-align : left;
}
#wrapper, header {
width : 100%;
}
header {
height : 122px;
background-position : right bottom, center bottom;
}
#logotext {
padding-top : 15px;
font-size : 1.25em;
font-weight : bold;
}
header p {
text-align : right;
color : white;
padding-right : 20px;
text-shadow : 1px 1px 4px black;
}
#wrapper {
background-image : none;
background-color : hsla(0, 50%, 100%, 0.9);
}
aside {
float : none;
width : 90%;
margin : 0 auto;
margin-bottom : 1em;
}
aside img {
width : 30%;
}
aside p {
color : black;
text-shadow : none;
}
figure {
width : 40%;
background-color : #eee;
display : inline-block;
padding : 10px;
border : silver solid 1px;
margin : 0.4em 0 0.4em 1em;
}
figure img {
width : 100%;
}
figcaption {
font-size : 75%;
text-align : center;
font-style : italic;
}
}