* {
 box-sizing: border-box;
}

html {
/* font: 100% sans-serif;        */
}

body {
 max-width: 90em;
 display: grid;
 grid-template-columns: auto 250px 250px;
 grid-template-rows: 65px auto 250px auto auto auto;
 /*
 grid-template-areas:
  "anzeige1 anzeige1 anzeige1"
  "kopfleiste kopfleiste anzeige4"
  "kopf kopf anzeige4"
  "navigation navigation anzeige4"
  "inhalt infos anzeige4"
  "fuss fuss fuss"; */

 font-family: "Helvetica Neue", Arial, sans-serif;
 font-family:"Verdana", "Arial", "sans-serif";
 font-size: 90%;
 color: #333;
 background-color: #ffffff;
 margin: 0 auto;
 padding: 0 0 0 .4rem;
}

#drucken {display: none; }

  #anzeige1 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    font-size: x-small;
    padding: 0;
  }

 #anzeige1 p {
    float: left;
    transform: rotate(-90deg);
    padding: 0;
    margin: 1.5rem 0 0 0;
 }

 #anzeige2 {
    clear: both;
    padding: 0;
    margin: 2em 2em 2em 0;
    font-size: x-small;
 }

 #anzeige3 {
    clear: both;
    padding: 0;
    font-size: x-small;
    margin: 2em 2em 2em 0;
 }

  #kopfleiste {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    background: #cc0000;
    color: white;
    font-size: small;
        }

  #kopfleiste ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 2px 20px;
  }

  #kopfleiste * a {
  color: white;
  text-decoration: none;
  padding: .1em 1em;
  }

  #anzeige4 {
    grid-column: 3 / 4;
    grid-row: 2 / 6;
    font-size: x-small;
    padding: 0 0 0 5px;
    margin: 0;
    border-left: 1px solid #ddd;
        }

  #kopf {
         grid-column: 1 / 3;
         grid-row: 3 / 4;
         position: relative;
        }

  #kopf .logo {
    padding: 0 auto;
    margin: 127px 0 0 20px;
    width: 100%;
    height: 123px;
    text-align: right;
    background: url(../elemente/KH_Logo_250x123.png) top left no-repeat;
 }

  #kopf .socialmedia {
    position: absolute;
    bottom: 0;
    right: 10px;
    }

  #navigation {
          grid-column: 1 / 3;
         grid-row: 4 / 5;
         position: relative;
        }

  #navigation .menue-button {
         position: absolute;
         display: none;
         top: 0;
         left: 20px;
         font-size: 200%;
         padding: .1em .4em;
         text-decoration: none;
         }

  #navigation .menue-button a {
         text-decoration: none;
         }

  #navigation .menue-auf {
         background-color: #cc0000;
         }

  #navigation .menue-zu {
         background-color: #999;
         }

  #inhalt {
         grid-column: 1 / 2;
         grid-row: 5 / 6;
        }

  #infos {
         grid-column: 2 / 3;
         grid-row: 5 / 6;
        }

  #infos div {
        padding: 0;
        margin: 0 0 2em 0;
        }

  #infos h2 {
         font-size: 95%;
         color: #cc0000;
        font-variant: small-caps;
        text-align: center;
        background: #ddd;
        border-top: 4px double #cc0000;
        border-left: none;
        padding: .3em 0 .4em 0;
        margin: 0 0 .2em 0;
        }

  #infos figure {
        padding: 0;
        margin: 0;
        }

  #fuss {
        grid-column: 1 / 4;
        grid-row: 6 / 7;
        }

 .hg1 {
    background:url(/elemente/head_1_1.jpg) top left/cover no-repeat;
 }
 .hg2 {
    background:url(/elemente/head_2_1.jpg) top left/cover no-repeat;
 }
 .hg3 {
    background:url(/elemente/head_3_1.jpg) top left/cover no-repeat;
 }
 .hg4 {
    background:url(/elemente/head_4_1.jpg) top left/cover no-repeat;
 }
 .hg5 {
    background:url(/elemente/head_5_1.jpg) top left/cover no-repeat;
 }
 .hg6 {
    background:url(/elemente/head_6_1.jpg) top left/cover no-repeat;
 }
 .hg7 {
    background:url(/elemente/head_7_2.jpg) top left/cover no-repeat;
 }
 .hg8 {
    background:url(/elemente/head_8_1.jpg) top left/cover no-repeat;
 }

body,
header,
main,
footer,
article,
div,
section,
aside {
 background: transparent;
}

nav {
 background-color: transparent;
 border: 1px solid #999;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
}

ul#mainnav {
 float: left;
 font-size: 110%;
 margin: 0 0 .1em 20px;
 padding: 0 1em 0 0;
 letter-spacing: 1px;
 background: #fff;
}

#mainnav li {
 float: left;
 list-style: none;
 font-weight: bold;
 vertical-align: middle;
 padding: 0;
 margin: 0 .4rem 0 0;
 border: none;
}

#mainnav a {
 color: #666;
 display: block;
 width: 100%;
 height: 100%;
 padding: .5rem;
 text-decoration: none;
 background: transparent;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
 border-bottom-right-radius: 10px;
}

#mainnav a:hover {
 color: #cc0000;
 text-decoration: none;
 padding: 1rem .5rem;
 border-right: 1px solid #cc0000;
 border-bottom: 1px solid #cc0000;
 border-bottom-right-radius: 10px;
}

#mainnav a.aktuell {
 color: #cc0000;
 text-decoration: none;
 padding: 1rem .5rem;
 border-right: 1px solid #cc0000;
 border-bottom: 1px solid #cc0000;
 border-bottom-right-radius: 10px;
}

#mainnav .subnav {
 clear: left;
 display: inline-block;
 width: 90%;
 margin: 0 0 0 10%;
 padding: 0;
 font-size: 90%;
 font-weight: normal;
}

#mainnav .subnav li {
 float: left;
 list-style: none;
 margin: .1em .4em 0 0 ;
 padding: 0;
 border: none;
 }

#mainnav .subnav a {
 color: #333;
 font-weight: normal;
 text-decoration: none;
 display: block;
 padding: .1em .4em;
 border: none;
 border-bottom-right-radius: 0px;
}

#mainnav .subnav a:hover {
 color: white;
 text-decoration: none;
 background: #999;
 padding: .1em .4em;
 border: none;
 border-bottom-right-radius: 0px;
}

#mainnav .subnav a.aktuell {
 color: white;
 text-decoration: none;
 background: #999;
 padding: .1em .4em;
 border: none;
 border-bottom-right-radius: 0px;
}

main {
 clear: both;
 margin: 1rem 0 0 0;
}

dl {
 margin: 0 1em 0 0;
}

dt {
 font-weight: bold;
 margin: 1.2em 0 0 0;
}

dd {
 /* font-style: italic; */
 padding: 0;
 margin: 0;
}

.legendemedien {
 width: 60%;
 font-size: 90%;
 padding: .5em;
 margin: 2em 2em 2em 0;
 border-left: 2px double #cc0000;
 border-bottom: 2px double #cc0000;
 border-bottom-left-radius: 10px;
 border: 2px double #cc0000;
 border-radius: 10px;
}

h1 {
 font-size: 175%;
 color: #cc0000;
 margin-top: 0;
}

h2, h3, h4, h5, h6 {
padding: 0;
margin: .5em 0;
}

.bereich {
 clear: left;
 border-top: 1px solid #666;
 border-left: 1px solid #666;
 border-top-left-radius: 10px;
 padding: 1em;
 margin: 2.5em 1.5em 1.5em 0;
}

.datum {
 text-align: right;
}

p cite {
 display: inline;
 float: right;
 text-align: right;
 margin: 0 2em 0 0;
}

main a {
 color: #cc0000;
 display: inline-block;
 text-decoration: none;
 padding: .3em;
 margin: 0;
}

main a.aktuell {
 color: white;
 text-decoration: none;
 background: #cc0000;
 padding: .2rem .3rem;
}

main a:hover, a:focus, a:active {
 color: white;
 background-color: #cc0000;
 text-decoration: none;
}

ul {
 list-style-type: square;
 margin: 1.5em;
 }

ul.meldungen {
 list-style-type: none;
 }

div.facebook {
 clear: both;
 margin: 1.5em;
 }

div.cdangaben, div.labels {
 display: flex;
 align-items: flex-start;
 flex-wrap: wrap;
 padding: 0;
}

div.cdangaben div {
  width: 50%;
}

div.labels div {
  width: 70%;
}

div.bestellen {
 display: flex;
 align-items: baseline;
 justify-content: space-around;
 flex-wrap: wrap;
 clear: both;
 padding: 0;
 border-top: 1px solid #666;
 border-bottom: 1px solid #666;
}

p.bestellen {
 height: 41px;
 background:url(/elemente/bestellen.gif) top left no-repeat;
 padding: 5px 0 0 50px;
}

p.top {
 font-size: 250%;
 font-weight: bold;
 text-align: center;
 border-bottom: 1px solid #cc0000;
 margin: 0 8em;
 }

.besprechung {
 padding:3px 0 0 20px;
 background:url(/elemente/bullet_seite.gif) bottom left no-repeat;
}

.bewertung {
 padding:3px 0 0 20px;
 background:url(/elemente/disco.gif) bottom left no-repeat;
}

.cdempfehlung {
 height: 48px;
 letter-spacing: 3px;
 color: #cc0000;
 text-align: center;
 background: url(/elemente/empfehlung_a.gif) left center no-repeat #ffffcc;
 padding: 0 0 0 50px;
 margin: 1em 0;;
}

.links {
 float: left;
}

.linksx {
 clear: left;
}

.rechts {
 float: right;
}

.rechtsx {
 clear: right;
}

article {
 padding: 0;
 margin: 2.5em 2.5em 1em 1.5em;
 clear:both;
}

article ul {
 margin-left: 1.5em;
}

section {
 margin: 1.5rem 0 0 0;
}

section.auswahl {
 display: flex;
 }

section.auswahl ul {
 list-style-type: none;
 margin: 0 4em 0 0;
 font-size: 100%;
 }

details {
  display: inline-block;
  margin: 0 1.5em 0 0;
  }

a.auswahl {
 color: white;
 background-color: #cc0000;
 }

section.kalendarium {
 display: flex;
 flex: 1;
 flex-wrap: wrap;
}

section.neuheiten {
 display: flex;
 flex: 1;
 flex-wrap: wrap;
}

div.genderhinweis {
 padding: 0 0 0 1.5em;
 margin: 2.5em 2.5em 1em 1.5em;
 border-left:3px double #cc0000;
}

.genderhinweis p {
 font-size: 85%;
 font-style: italic;
}

div.neuheiten {
 display: flex;
 flex: 1;
 flex-wrap: wrap;
}

.mehrspaltig {
 width: 95%;
 padding: 0 0 2em 1.5em;
 margin: 0;
 column-count: 5;
 -webkit-column-width: 2rem;
 column-width: 2rem;
}

.mehrspaltig p {
 padding: 0;
 margin: 0;
}

.mehrspaltig a {
 display: block;
 padding: .2em .1em;
}

.mehrspaltig3 {
 font-size: 100%;
 width: 99%;
 padding: .5em 0;
 margin: 1.5em;
 column-count: 3;
 -webkit-column-width: 1.5rem;
 column-width: 1.5rem;
}

.mehrspaltig3 p {
 padding: 0;
 margin: 0;
}

.mehrspaltig3 a {
 display: block;
 padding: .2em .1em;
}

.neuheiten div {
 position: relative;
 width: 145px;
 padding: 10px 0 0 0;
 margin: 0 1.5em 2em 0;
}

.neuheiten p {
 padding: 0;
 margin:0;
 text-align: center;
}

.neuheiten p.besprechung {
 background: url(/elemente/b_besprechung.gif) top left no-repeat;
}

.neuheiten p.empfehlung {
 background: url(/elemente/b_empfehlung.gif) top left no-repeat;
}

.neuheiten p.bestellen {
 background: url(/elemente/b_bestellen.gif) top left no-repeat;
}

.neuheiten a {
 position: absolute;
 bottom: 0;
 width: 145px;
 display: block;
 padding: .3em 0;
 color: #cc0000;
 text-align: center;
 text-decoration: none;
 background: white;
 border-bottom: 1px solid #cc0000;
}

.neuheiten a:hover, a:focus, a:active {
 color: white;
 text-decoration: none;
 background: #cc0000;
 border-bottom: 1px solid #cc0000;
}

hr {
 clear: both;
 border: 1px solid #eee;
 }

.lebensdaten {
 width: 50%;
 font-weight: bold;
 font-style: normal;
 text-align: center;
 margin: 0 0 2em 0;
 }

.lebensdaten dt {
 float: left;
 padding: .2em .4em;
 margin: 0 2em 0 0;
 }

.lebensdaten dd {
 float: left;
 padding: .2em .4em;
 margin: 0 2em 2em 0;
 }

table {
margin-right: 1.5em;
}

td {
 padding: .1em .5em .1em 0;
 vertical-align: top;
}

table.bios {
 width: 95%;
 vertical-align: top;
 margin: 2em 1.5em;
}

table.bios td {
 width: 50%;
 vertical-align: top;
 padding: .2rem .3rem;
 padding: .2em 0;
}

table.bios td a {
 padding: 0 1.5em 0 0;
}

td.zitieren {
 padding: .1em 1em;
 margin: 0;
}

td.wusstensie {
 color: #cc0000;
 padding: .1em;
 margin: 0;
 font-size: 400%;
 font-weight: bold;
 text-align: center;
 vertical-align: top;
}

td.zitat {
 color: #365a35;
 padding: .1em;
 margin: 0;
 font-size: 400%;
 font-weight: bold;
 text-align: center;
 vertical-align: top;
}

table.kalendarium {
 width: 100%;
 vertical-align: top;
 margin: 2em 0;
}

.kalendarium td {
 padding: .5em;
 vertical-align: top;
}

.kalendarium td.aktuell {
 color: #cc0000;
 font-weight: bold;
 border-top: 1px solid #cc0000;
 border-left: 1px solid #cc0000;
 border-top-left-radius: 10px;
}

.kalendarium p {
 font-size: 90%;
 font-style: italic;
}

ul.ohne {
 font-size: 100%;
 list-style-type: none;
}

ul.karteireiter {
 clear: left;
 font-size: 100%;
 padding: 0;
 margin: .5em 0 .1em 0;
}

ul.karteireiter li {
 display: inline-block;
 list-style-type: none;
 padding: .2rem;
 margin: 0;
}

ul.karteireiter li a {
 padding: .2rem;
 border-left: 1px solid #cc0000;
 border-top: 1px solid #cc0000;
}

ul.karteireiter li a.aktuell {
 color: white;
 background-color: #cc0000;
 padding: 0;
}

form {
 width: 90%;
}

aside {
 font-size: 90%;
 margin: 1em 2em 2em 2em;
}

aside#infos {
 font-size: 95%;
 margin: 1em 0;
 }

.aufzaehlung {
 float: left;
 display: flex;
 padding: 0;
 margin: .5em 1.5em;
 }

.aufzaehlung ul {
 font-size: 100%;
 min-width: 120px;
 margin: 0 1em 0 0;
 list-style-type: none;
 }

aside.themen {
 padding: 0;
 margin: .5em 0;
 }

li.geboren {
 font-size: 100%;
 color: #cc0000;
 padding: .2em 1.5em;
 list-style-type: none;
 }

li.geboren::before {
 content: "* ";
 color: #cc0000;
}

.geboren1 {
 font-size: 90%;
 color: white;
 padding: .2em;
 margin: 0;
 background: #cc0000;
 border: 1px solid #cc0000;
 }

.geboren2 {
 background-color: #ddd;
 color: #cc0000;
 font-size: 400%;
 padding: 0 .1em;
 margin: 0;
 border: 1px solid #cc0000;
 }

.geboren3 {
 font-size: 90%;
 color: white;
 padding: .2em;
 margin: 0;
 background: #cc0000;
 border: 1px solid #cc0000;
 }

.ort {
 font-weight: normal;
 font-style: italic;
 color: #333;
 padding: 0 .1em;
 margin: 0;
 }

li.gestorben {
 font-size: 100%;
 color: #333;
 padding: .2em 1.5em;
 list-style-type: none;
 }

li.gestorben::before {
 content: "+ ";
 color: black;
}

.gestorben1 {
 font-size: 90%;
 color: white;
 font-weight: bold;
 font-style: normal;
 padding: .2em;
 margin: 0;
 background: #666;
 border: 1px solid #666;
 }

.gestorben2 {
 background-color: #ddd;
 color: black;
 font-size: 400%;
 font-style: normal;
 padding: 0 .1em;
 margin: 0;
 border: 1px solid #666;
 }

.gestorben3 {
 font-size: 90%;
 font-style: normal;
 color: white;
 padding: .2em;
 margin: 0;
 background: #666;
 border: 1px solid #666;
 }

 .grau {
 color: #333;
 }

#infos h2 {
 font-size: 100%;
 font-variant: small-caps;
 text-align: center;
 color: #cc0000;
 border-top: 4px double #cc0000;
 background: #ccc;
 padding: .2em 0;
 margin: 0 0 .3em 0;
}

#infos div {
 margin: 0 0 1em 0;
}

#infos p, ul {
 font-size: 95%;
 padding: .5em .2em;
 margin: 0; }

#infos li {
 padding: 0;
 margin: 0 0 .5em 0;
}

#infos a {
 display: block;
 color: #666;
 text-decoration: none;
 padding: .2em 0;
}

#infos a:hover {
 background-color: #eee;
}

#infos div.wechseln {
 position: relative;
 margin: 0 0 1em 0;
 height: 260px;
}

#infos figure.wechseln {
  position: absolute;
  padding:0;
  margin:0;
  top: 0;
  left: 0;
  width:250px;
  height:250px;
  background-color: #fff;
  -webkit-animation: wechseln 25s infinite;
  animation: wechseln 25s infinite; }

#infos figcaption.wechseln {
  position: absolute;
  left: .5em;
  font-size: 2em;
  font-weight: bold;
  bottom: 0.5em;
  z-index: 2;
  color: white; }

 aside#infos p {
 font-size: 85%;
 padding-bottom: 1.5em;
 }

@keyframes wechseln {
    0% {opacity: 1;}
   25% {opacity: 1;}
   50% {opacity: 0;}
   75% {opacity: 0;}
  100% {opacity: 1;} }

@-webkit-keyframes wechseln {
    0% {opacity: 1;}
   25% {opacity: 1;}
   50% {opacity: 0;}
   75% {opacity: 0;}
  100% {opacity: 1;} }

#infos .wechseln figure:nth-of-type(4) {
  -webkit-animation-delay: 7s;
  animation-delay: 7s; }

#infos .wechseln figure:nth-of-type(3) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s; }

#infos .wechseln figure:nth-of-type(2) {
  -webkit-animation-delay: 15s;
  animation-delay: 15s; }

#infos .wechseln figure:nth-of-type(1) {
  -webkit-animation-delay: 24s;
  animation-delay: 24s; }

figure {
 padding: .2em 0 0 0;
 margin: 0 1em 2.5em 0;
}

figure.links {
 float: left;
 padding: .2em 0 0 0;
 margin: 0 10px 10px 0;
}

figure.rechts {
 float: right;
 padding: 0;
 margin: 0 0 10px 10px;
}

figcaption {
 font-size: 80%;
 font-style: italic;
}

.absatzende {
 clear: left;
 text-align: center;
 font-weight: bold;
 margin: 0 0 2.5em 0;
}

.absatzende a {
 padding: .4em;
 color: #cc0000;
 text-decoration: none;
 background: white;
 border-bottom: 1px solid #cc0000;
}

.absatzende a:hover, a:focus, a:active {
 color: white;
 background: #cc0000;
 border-bottom: 1px solid #cc0000;
}

.umbruch {
display: none;
}

blockquote {
 text-align: right;
 font-style: italic;
 padding: .5em 1.5em;
 margin: 0;
}

footer {
 display: flex;
 flex: 1;
 flex-wrap: wrap;
 font-size: 90%;
 color: #ffffff;
 padding: 0;
 margin-top: 1rem;
 background: url(/elemente/KH_Logo_120x59.png) center center no-repeat #686868;
}

footer p {
 line-height: 1.2;
 margin: 1.5em;
}

footer a {
 color: white;
 display: block;
 padding: 0 .5rem .1rem .5rem;
 margin: 0;
}

footer a:active, a:focus, a:hover {
 background: #999;
 text-decoration: underline;
 border: none;
}

img {
 max-width: 100%;
 height: auto;
}

/* ------------------------------------------- */

@media screen and (max-width: 55em) {
body {
  grid-template-colums: auto 200px;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "anzeige1 anzeige1"
  "kopfleiste kopfleiste"
  "kopf kopf"
  "navigation navigation"
  "inhalt infos"
  "anzeige4 anzeige4"
  "fuss fuss";
  }

  nav {
  min-height: 45px;
  font-size: 120%;
  padding: 50px 0 .2em 4em;
  }

  #navigation .menue-button {
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  color: white;
  text-decoration: none;
  background-color: #cc0000;
  }

  #navigation .menue-button:hover {
   color: white;
   background: #cc0000;
   }

#kopfleiste ul {
   margin: 0;
   padding: .2em 1em;
   }

#kopf .logo {
    margin: 0 0 0 20px;
        }

#mainnav {
 display: none;
 }

.subnav {
 display: none;
 }

#mainnav ul {
 clear: left;
 font-size: 120%;
 letter-spacing: 1px;
 width: 100%;
 background: #fff;
 border-bottom: #999;
 margin: 50px 0 1em 2em;
}

#mainnav li {
 clear: left;
 list-style: none;
 font-weight: bold;
 vertical-align: middle;
 padding: 0;
 margin: 0;
 border: none;
 border-bottom: #666;
}

#mainnav a {
 color: #666;
 display: block;
 width: 100%;
 height: 100%;
 padding: .1rem;
 text-decoration: none;
 border: none;
 border-bottom: #666;
}

#mainnav a:hover {
 color: #cc0000;
 padding: .1rem;
 border: none;
}

#mainnav a.aktuell {
 color: #cc0000;
 padding: .1rem;
 border: none;
}

h1 {
 font-size: 100%;
 color: #cc0000;
 margin-top: 0;
}

h2 {
font-size: 110%;
color: #000033;
padding: 0;
margin: .2em 0;
}

h3, h4, h5, h6 {
font-size: 100%;
color: #000066;
padding: 0;
margin: .2em 0;
}

.bereich {
 clear: left;
 border-top: 1px solid #666;
 border-left: 1px solid #666;
 border-top-left-radius: 10px;
 padding: .8em;
 margin: 1.5em 1.5em .3em 0;
}

ul.subnav {
 clear: left;
 display: block;
 width:100%;
 margin: .5em 0;
 padding: 0;
 font-size: 120%;
}

ul.subnav li {
 clear: left;
 width: 100%;
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
}

ul.subnav a {
 width: 100%;
 color: #333;
 text-decoration: none;
 display: block;
 padding: 0 .5em;
}

ul.subnav a:hover {
 color: white;
 text-decoration: none;
 background: #999;
}

ul.subnav a.aktuell {
 color: white;
 text-decoration: none;
 background: #999;
}

aside.infos {
 display: flex;
 flex-direction: column;
 flex: 1;
 flex-wrap: wrap;
 justify-content: flex-start;
 }

.infos div {
 width: 200px;
 margin: 0 10px 10px 0;
 }

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#navigation:target #mainnav {
    display: block;
}

/* ausblenden des Men�-Buttons zum �ffnen - somit wird der zum Schlie�en sichtbar */
#navigation:target .menue-auf {
    display: none ;
}

/* ----------------------------------------- */

@media screen and (max-width: 35em) {
body {
  display: block;
  }

header {
 border-top: 1px solid #cc0000;
 }

  nav {
  min-height: 45px;
  font-size: 120%;
  padding: 50px 0 .2em 4em;
  }

  #navigation .menue-button {
  display: block;
  }

  #navigation .menue-button {
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  color: white;
  text-decoration: none;
  background-color: #cc0000;
  }

  #navigation .menue-button:hover {
   color: white;
   background: #cc0000;
   }

#kopfleiste ul {
   margin: 0;
   padding: .2em 1em;
   }

#kopf .logo {
    margin: 0 0 0 20px;
        }

#mainnav {
 display: none;
 }

.subnav {
 display: none;
 }

#mainnav ul {
 clear: left;
 font-size: 110%;
 letter-spacing: 1px;
 width: 100%;
 background: #fff;
 border-bottom: #999;
 margin: 50px 0 1em 2em;
}

#mainnav li {
 clear: left;
 list-style: none;
 font-weight: bold;
 vertical-align: middle;
 padding: 0;
 margin: 0;
 border: none;
 border-bottom: #666;
}

#mainnav a {
 color: #666;
 display: block;
 width: 100%;
 height: 100%;
 padding: .1rem;
 text-decoration: none;
 border: none;
 border-bottom: #666;
}

#mainnav a:hover {
 color: #cc0000;
 padding: .1rem;
 border: none;
}

#mainnav a.aktuell {
 color: #cc0000;
 padding: .1rem;
 border: none;
}

h1 {
 font-size: 100%;
 color: #cc0000;
 margin-top: 0;
}

h2 {
font-size: 110%;
color: #000033;
padding: 0;
margin: .2em 0;
}

h3, h4, h5, h6 {
font-size: 100%;
color: #000066;
padding: 0;
margin: .2em 0;
}

.bereich {
 clear: left;
 border-top: 1px solid #666;
 border-left: 1px solid #666;
 border-top-left-radius: 10px;
 padding: .8em;
 margin: 1.5em 1.5em .3em 0;
}

ul.subnav {
 clear: left;
 display: block;
 width:100%;
 margin: .5em;
 padding: 0;
 font-size: 120%;
}

ul.subnav li {
 clear: left;
 width: 100%;
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
}

ul.subnav a {
 width: 100%;
 color: #333;
 text-decoration: none;
 display: block;
 padding: 0 .5em;
}

ul.subnav a:hover {
 color: white;
 text-decoration: none;
 background: #999;
}

ul.subnav a.aktuell {
 color: white;
 text-decoration: none;
 background: #999;
}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#navigation:target #mainnav {
    display: block;
}
/* ausblenden des Men�-Buttons zum �ffnen - somit wird der zum Schlie�en sichtbar */
#navigation:target .menue-auf {
    display: none ;
}

aside.infos {
 display: flex;
 flex-direction: row;
 flex: 1;
 flex-wrap: wrap;
 }

.infos div {
 width: 190px;
 padding: 0;
 margin: 0 10px 10px 0;
 }

 table.kalendarium {
 width: 100%;
 }