html {
background: url(../Grafik/ANA_ANDA_Regenbogen_1_transparent.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html, body {
font: 100% Arial, Helvetica, sans-serif;
width:100%;
height:100%;
}
#headertext {
   width:100%;
   position:relative;
   margin-top:0;
}
#headertext img {
  width:100%;
}
#headertext span {
  background-color: silver;
  background-color: hsla(0, 0%, 100%, 0.5);
  position:absolute;
  margin-top:5%;
  margin-left:5%;
  width:90%;
  line-height:10%;
  text-align:center;
  border-radius:20px;
}
#headertext h1 {
  position:absolute;
  margin-top:20%;
  margin-left:50%;
  font:100% Comic Sans MS, cursive, sans-serif;
  color:#CC0000;
  }
#headertext h2 {
  position:absolute;
  margin-top:25%;
  margin-left:50%;
  font:100% Comic Sans MS, cursive, sans-serif;
  color:#CC0000;
  }
#rundbildheader img {
  position:absolute;
  margin-top:12%;
  margin-left:10%;
  width:25%;
  /*transform: rotate(-5deg); */
  border-radius:50%;
  box-shadow: 10px 10px 10px silver inset;
  padding:0.5em;   
}
#steuerung ul li {
  list-style-type:none;
}
#steuerung a {
 color:#CC0000;
 }
#steuerung a:visited { 
color:#006600; 
}
#steuerung a:hover {
color:#FF9900;
}
#steuerung summary {
color:#CC0000;
}
#steuerung summary a {
 color:#CC0000;
 }
#steuerung summary a:visited { 
color:#006600; 
}
#kopfbereich {
clear:both;
margin-left:5%;
}
#kopfbereich h1 {
font:150% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
}
.artikel h3 {
font:100% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
margin-left:5%;
}
.sektion {
margin-left:5%;
}
.sektion h3 {
font:100% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
}
.sektion h4 {
font:100% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
}
.sektion p {
color:green;
font:100% Verdana, Geneva, sans-serif;
}
.sektion b {
font:100% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
}
.sektion ul li {
color:green;
font:100% Verdana, Geneva, sans-serif;
}
#galerie {
  position:relative;
}
#galerie figure {
  position:absolute;
  float:left;
  z-index:1;
  animation: wechseln 20s infinite;
  background-color:white;
}
#galerie figure:last-of-type {
  position:relative;
}
#galerie figure img {
  max-width:100%;
  }
#galerie figcaption {
  left:1em;
  bottom:0.5em;
  z-index:2;
  padding-left:2%;
}
@keyframes wechseln {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;
   	z-index:-1;}
  100% {opacity: 0;
  	z-index:-1;}
}
#galerie figure:nth-of-type(2) {
  animation-delay: 4s;
  opacity: 0;
}
#galerie figure:nth-of-type(3) {
  animation-delay: 8s;
  opacity: 0;
}
#galerie figure:nth-of-type(4) {
  animation-delay: 12s;
  opacity: 0;
}
#galerie figure:nth-of-type(5) {
  animation-delay: 16s;
  opacity: 0;
}
.lightbox {
width:100%;
margin:0 1em 0 1em;
padding:0;
}
.lightbox h3 {
  font:100% Comic Sans MS, cursive, sans-serif;
  font-weight:bold;
  color:#CC0000;
}
.lightbox figure {
float:left;
margin:0 1% 1% 1%;
}
.lightbox img {
border: solid red;
}
.lightbox figcaption {
font-size:80%;
}
.box {
 display:inline;
 }
.nebeneinander figure {
  background:white;
}
.nebeneinander figure img {
  max-width:100%;
  }
 .nebeneinander figcaption {
 max-width:100%;
 text-align:center;
 }  
#footer {
clear:both;
background:url(Grafik/SommerGalerieZopf1_footer.jpg) no-repeat;
background-size: 100% auto;
height:50%;
text-align:center;
}
#footer p {
  background-color: silver;
  background-color: hsla(0, 0%, 100%, 0.5);
  padding-top:1%;
  padding-left:1%;
  margin:0 auto;
  }
#footer ul li {
  list-style-type:none;
  float:left;
  width:10%;
  background-color: silver;
  background-color: hsla(0, 0%, 100%, 0.5);
  }
#footer a {
 color:#CC0000;
 }
#footer a:visited { 
color:#006600; 
}
#footer a:hover {
color:#FF9900;
}

@media only screen and ( min-width: 950px ) {
    /* breites Browserfenster */
.menue-button a {
display:none;
}
#steuerung {
  position:absolute;
  margin-top:35%;
  margin-left:5%;
  width:90%;
  background-color: silver;
  background-color: hsla(0, 0%, 100%, 0.5);
  border-radius:20px;
  font: 100% Arial, Helvetica, sans-serif;
}
#steuerung ul li {
  float:left;
  padding-right:7%;
}
#steuerung details {
float:left;
width:13%;
}
    .artikel h2 {
	margin-left:5%;
	font:130% Comic Sans MS, cursive, sans-serif;
	font-weight:bold;
	color:#CC0000;
	}
    .sektion h3 {
	width:60%;
	position:relative;
	margin-left:53%;
	margin-top:1%;
	font-size:120%;
}
   .sektion h4 {
	width:60%;
	position:relative;
	margin-left:53%;
	margin-top:1%;
}
    .sektion p {
	width:35%;
	position:relative;
	margin-left:53%;
}
    .sektion ul li {
	width:35%;
	position:relative;
	margin-left:53%;
}
    .box figure {
	display:inline-block;
	margin-left:1em;
}
    .nebeneinander figure {
  	clear:both;
  	display:inline-block;
  	width:20%;
}
   .lightbox {
   	clear:both;
   	margin-left:20%;
   	margin-top:8%;
   	}
#footer p {
width:20%;
}
}
@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {
    /* Tablets und mittlere Bildschirme */
    #steuerung {display:none;
right:0;
width:50%;
  background-color: #CCCCCC;
  border-radius:20px;
  font: 100% Arial, Helvetica, sans-serif;
  position:absolute;
  z-index:1000000;
  margin-top:42%;
}
.menue-button {
display:block;
position:absolute;
background-color:#CCCCCC;
right:0;
margin-top:25%;
color:red;
width:50%;
border-radius:20px;
text-align:center;
}
.menue-button:hover {
	color: black;
	background: white;
}
#nav-menue:target #steuerung {
	display: block;
}
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}
.artikel h2 {
font:130% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
margin-left:5%;
}
#footer p {
width:50%;
}
#footer ul li {
padding-right:40%;
}
}
@media only screen and ( max-width: 440px ) {
    /* mobile Geräte */
        #steuerung {display:none;
right:0;
width:50%;
  background-color: #CCCCCC;
  border-radius:20px;
  font: 100% Arial, Helvetica, sans-serif;
  position:absolute;
  z-index:1000000;
  margin-top:45%;
}
    #steuerung ul li {
padding-bottom:3%;
}
#steuerung summary {
right:0;
width:50%;
margin-left:25%;
}
.menue-button {
display:block;
position:absolute;
background-color:#CCCCCC;
right:3%;
color:red;
width:50%;
margin-top:25%;
border-radius:20px;
text-align:center;
}
.menue-button:hover {
	color: black;
	background: white;
}
#nav-menue:target #steuerung {
	display: block;
}
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}
#kopfbereich h1 {
font-size:130%;
}
.artikel h2 {
font:90% Comic Sans MS, cursive, sans-serif;
font-weight:bold;
color:#CC0000;
margin-left:5%;
}
.sektion {
max-width:90%;
}
#footer p {
width:60%;
}
#footer ul li {
padding-right:40%;
}
}