@charset "utf-8";
/* 
CSS Document für Desktop- und Mobile-Darstellungen
hier werden alle Formatierungen für Tags, Bildschirmgrößen und Druckformate(t.b.d.) definiert
@media wird vom Browser ausgeführt, wenn die entsprechenden Bedingungen erfüllt sind
*/

/* *************************************************** Formate die fuer alle Displaygroessen verwendet werden *************************************************** */
/*---------------------------------------------------------------------------------------------------*/
header 
{  
   background-color:#63adff;
   color: #FF9800;
   font-size: xx-large;
   font-style:italic;
   font-weight:bolder;
   padding: 10px;
   text-align:center;
   background-image: url("../graphics/BckGndMultiNoten(1504x341).png");
   background-size: cover;
}
/*---------------------------------------------------------------------------------------------------*/
h1, h2, h3 {   text-align:center;}       /* DR20190209: Zentrierung der Überschriften */
/*---------------------------------------------------------------------------------------------------*/
body 
{
   background-color:#ffffff;
   color:#000000;
   font-family:Verdana, Geneva, sans-serif;
   margin:0px;
   background-image: url("../graphics/Stars.png"), linear-gradient( to right, #0000ff,#ffffff);
   background-attachment:fixed;
}
/*---------------------------------------------------------------------------------------------------*/
#hilfscontainer 
{
   margin:0px auto;
   max-width:1024px;
}
/*---------------------------------------------------------------------------------------------------*/
aside 
{
   float:left;
   float:top;
   text-align:center;
   width:25%;
}  
/*---------------------------------------------------------------------------------------------------*/
nav 
{
   margin:10px;
   padding-bottom:20px;
   padding-left:5px;
   padding-right:5px;
   padding-top:10px;
   text-align:center;   
   /*display:inline;*/
}
/*---------------------------------------------------------------------------------------------------*/
main 
{
   background-color:#ffffff;
   color: #000000;
   float:left;
   width:75%;
}
/*---------------------------------------------------------------------------------------------------*/
main h1 
{
   font-size: xx-large;
   margin-bottom: 10px;
   margin-top: 0px;
}		
/*---------------------------------------------------------------------------------------------------*/
article 
{
   border: 1px solid grey;
   border-radius:10px;
   margin:20px;
   padding-bottom:10px;
   padding-left:10px;
   padding-right:10px;
   padding-top:10px;
}
/*---------------------------------------------------------------------------------------------------*/

figure#fotos
{
   float: left;   
}

/*---------------------------------------------------------------------------------------------------*/
figcaption
{
   font-weight:bolder;   
   text-align: center;
}
/*---------------------------------------------------------------------------------------------------*/

/*
div .fotos figcaption
{
   text-align: center;
   word-break: break-all;
   word-wrap: break-word;
}
*/
/*---------------------------------------------------------------------------------------------------*/

ol
{
 list-style-type:circle;  
}
/*---------------------------------------------------------------------------------------------------*/
footer 
{
   background-color:#63adff;
   clear:left;
   color:#ffffff;
   font-size:large;
   font-style:italic;
   font-weight:bolder;
   padding-bottom:10px;
   padding-top:10px;
   text-align:center;
   width: 100%;
}
/*---------------------------------------------------------------------------------------------------*/
img {max-width:100%; height:auto; }
/*---------------------------------------------------------------------------------------------------*/
ul 
{
   margin:0; 
   padding:0;
   width:100%;
   list-style-type:none;
   font-size:large;
}
/*---------------------------------------------------------------------------------------------------*/
ul li a 
{
   text-decoration:none;
   color:#ffffff; 
   padding:10.5px 11px;
   margin-bottom:10px;
   background-color:#63adff;
   display:block;
   border-radius:10px;
}
/*---------------------------------------------------------------------------------------------------*/
ul li a:visited {color:#ffffff;}
/*---------------------------------------------------------------------------------------------------*/
ul li a:hover, ul li .current 
{
   color:black;
    background-color:yellow;
}
/*---------------------------------------------------------------------------------------------------*/
#responsible, #email
{
   text-align:center;
}
#email
{
   color:#0000ff;
}
/*---------------------------------------------------------------------------------------------------*/
.tooltip {
  position: relative;
  /*display: inline-block;*/
  /*border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/*---------------------------------------------------------------------------------------------------*/
/* *************************************************** fuer Display-Breiten < 600 Pixeln  ********************************************** */
/*---------------------------------------------------------------------------------------------------*/
/*                                            Display-Breiten < 600 Pixeln                       */
@media only screen and (max-width: 600px) 
{
  #hilfscontainer{width: 100%;}
/*---------------------------------------------------------------------------------------------------*/
  aside 
  {
      text-align:center;
      width:100%;
  }     
/*---------------------------------------------------------------------------------------------------*/
  main 
  {
      background-color:#ffffff;
      color: #000000;
      width:100%;
   }
  
}
/*---------------------------------------------------------------------------------------------------*/