html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-color:#FFDDFF;
  overflow:auto;
}

body {
  font-family:sans-serif;
  font-size:11pt; 
}

.Bildformat {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;  
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.Linksbuendig {
  max-width: 40em; 
  margin:0;
  position:relative;
  overflow:hidden;
}

.Rechtsbuendig {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;  
    float:right;
    display: block;
    margin-left: auto;
    margin-right: 0; 
}

.Zentriert {
  max-width: 100%; 
  height: auto;
  margin:auto;
  position:relative;
  overflow:hidden;
  display: block;
  }

.Titellinks {
    max-width: 33%;
    height: auto;
    width: auto;  
}

.Titelrechts {
    max-width: 33%;
    height: auto;
    width: auto;  
}

.Titelmitte {
    max-width: 33%;
    height: auto;
    width: auto;  
}

    .Mainbild {
    max-width: 100%; 
    max-height: 100%; 
    width: 100%;
    height:auto;
}
    .Changebild {
    max-width: 100%; 
    max-height: 100%; 
    height: auto;
    width: auto;  
    display: block;
    margin-left: auto;
    margin-right: auto 
}

    .Leftbild {
    max-width: 10em;;
    height: auto;
    width: auto; 
}

#cent {
  max-width: 100%; 
  margin:auto;
  padding:1rem;
  position:sticky;
  top:0;
  overflow:hidden;
  font-size:medium; 
  background-color:#FFDDFF;
  z-index:2;
}

#zweispaltig {
  max-width: 100%; 
  margin:auto;
  padding:1rem;
  position:relative;
  -webkit-columns: 2 12em;
  columns: 2 12em;
  overflow:hidden;
  font-size:medium; 
  background-color:#FFDDFF;
}

#dreispaltig {
  max-width: 100%; 
  margin:auto;
  padding:1rem;
  position:relative;
  -webkit-columns: 3 12rem;
  columns: 3 12rem;
  overflow:hidden;
  font-size:medium; 
  background-color:#FFDDFF;
}

#logoleft {
  top:0%;
  max-width: 15rem; 
  float:left;
  position:relative;
  overflow:hidden;
}

#logomitte {
  top:0%;
  max-width: 30rem; 
  float:center;
  position:relative;
  overflow:hidden;
}

#logoright {
  top:0%;
  max-width: 15rem; 
  float:right;
  position:relative;
  overflow:hidden;
}

#navi a:link    { color:black;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration:none; }
#navi a:focus   { color:red;  text-decoration:none; }
#navi a:hover   { color:red;    text-decoration:none; }
#navi a:active  { color:red; text-decoration:underline; }

#navibar {
  margin:0.5rem;
  background-color:#FFDDFF;
}

#main {
  max-width: 100%; 
  margin:auto;
  padding:1rem;
  position:relative;
  background-color:#FFDDFF;
  color:#000000;
  overflow:auto;
  -moz-opacity:1; /* Mozilla */
  -khtml-opacity:1; /* KTHML */
  -opera-opacity:1; /* Opera */
}

#main a:link    { color:blue; text-decoration:none; }
#main a:visited { color:blue; text-decoration:none; }
#main a:focus   { color:blue; text-decoration:underline; }
#main a:hover   { color:blue; text-decoration:underline; }
#main a:active  { color:blue; text-decoration:none; }

#footer {
  max-width: 100%; 
  margin:auto;
  padding:0.5rem;
  position:sticky;
  top:0;
  bottom:0;
  background-color:#0000AA;
  overflow:hidden;
  color:#FFFFFF;  
  font-size:1em;
}

#footer a:link    { color:white; text-decoration:none; }
#footer a:visited { color:white; text-decoration:none; }
#footer a:focus   { color:blue; text-decoration:none; }
#footer a:hover   { color:blue; text-decoration:none; }
#footer a:active  { color:red; text-decoration:none; }

#footerinhalt {
    margin:1.5em;
}


@media only screen and (min-width:1000px) {

#navi {
  max-width:100%;
  margin:auto;
  padding:0.5rem;
  position:relative;
  top:0;
  overflow:hidden;
  text-align:center;
  font-size:1.5em;
  font-weight:bold;
  background-color:#FFDDFF;
  color:#000000;
}


h1 {
  color:#0000FF;  
  background-color:#FFDDFF;
  font-size:xx-large;  
  font-family:arial, "lucida console", sans-serif; 
  font-weight:bolder; 
 }

h2 {
  color:#0000FF;  
  background-color:#FFDDFF;
  font-size:x-large;  
  font-family:arial, "lucida console", sans-serif;
  font-weight:bolder; 
 }

p {  
  color:#000000;  
  background-color:#EFFDDFF;
  padding:0.0em;
  font-size:large; 
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
  }

} /* Ende Mindestbildschirmbreite 1000 */

@media only screen and ( min-width: 440px ) and ( max-width: 999px ) 
{

#navi {
  max-width:100%;
  margin:auto;
  position:relative;
  overflow:hidden;
  text-align:center;
  font-size:1rem;
  font-weight:bold;
  background-color:#FFDDFF;
  color:#000000;
}

h1 {
  color:#0000FF;  
  background-color:#EECCFF;
  font-size:large;  
  font-family:arial, "lucida console", sans-serif; 
  font-weight:bolder; 
 }

h2 {
  color:#0000FF;  
  background-color:#FFDDFF;
  font-size:medium;  
  font-family:arial, "lucida console", sans-serif;
  font-weight:bolder; 
 }

p {  
  color:#000000;  
  background-color:#FFDDFF;
  padding:0.0rem;
  font-size:small; 
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
  }

} /* Ende Bildschirme von 440 bis 999 */

@media only screen and (max-width:439px) 
{
#navi {
  max-width:100%;
  margin:auto;
  position:relative;
  overflow:hidden;
  text-align:center;
  font-size:1rem;
  font-weight:bold;
  background-color:#FFDDFF;
  color:#000000;
} 
h1 {
  color:#0000FF;  
  background-color:#FFDDFF;
  font-size:large;  
  font-family:arial, "lucida console", sans-serif; 
  font-weight:bolder; 
 }

h2 {
  color:#0000FF;  
  background-color:#FFDDFF;
  font-size:medium;  
  font-family:arial, "lucida console", sans-serif;
  font-weight:bolder; 
 }

p {  
  color:#000000;  
  background-color:#FFDDFF;
  padding:0.0em;
  font-size:small; 
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
  }

} /* Ende Bildschirme bis 439 */