@charset "UTF-8";

@font-face { 
  font-family: 'Ritterbande'; src: url('schrift/OfenbacherSchwabCAT.ttf') format('truetype') ;

}

html {
  box-sizing: border-box;
}

*, ::before, ::after { 
  box-sizing: inherit; 
}

a.foto:link, a.foto:active, a.foto:focus, a.foto:hover a.foto:visited {
 color: var(--bgfarbe);
}

body {
  background: var(--bgfarbe);
  color: #555;
  max-width: 75em;
  margin: 0 auto; 
  overflow: auto;
  padding: 0 1em;
  font: normal 1em Arial, sans-serif;  
  position:relative;
}

#seite {
  overflow: hidden;
  width: 100%; 
  min-height: 350px;
  margin: 10px 0em 0em;
  background: var(--bgfarbe);
  color: var(--txfarbe);
}

img.telefon {
  padding-top:5px;
  border-style: none;
  vertical-align: bottom;
  height: auto;
  width: 20px;
}

.teltxt { 
  padding-top:5px;
  padding-left: 15px;
  color: var(--ttfarbe);
}

* {
  margin:0;
  padding:0;
}

h1,
h2 {
  font-size: 1.80em;
  font-weight: normal;
  margin: 20px 15px 20px;  
  color: var(--ttfarbe);
  font-family: Arial Black, Arial, sans-serif;  
}

h1 a:hover span {
    color: var(--txfarbe);
}

h2.titel {
 text-align: center; 
}

a.nav:link, a.nav:active, a.nav:focus, a.nav:hover a.nav:visited {
 color: var(--bgfarbe);
}

a:link, a:active, a:focus, a:hover a:visited {
  outline: none;
  text-decoration:none;
   color: var(--bgfarbe);
}

#kopfbereich {
  border-radius: 1em; 
  width: 100%; 
  background: var(--thfarbe);
  background-size: contain, auto;
  color: var(--txfarbe);
  font-family: arial bold;
}

#inhalt {
  background-color: var(--thfarbe);
  color: var(--txfarbe);
  padding: 10px;
  text-align: left;
  vertical-align: middle; 
  text-decoration:none;
  overflow: scroll;
  width: 100%; 
  min-height: 350px;
  margin-bottom: 10px;
  margin-top: 10px;
  float: right;
  width: 100%;
  border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

#steuerung {
  width: 100%;
  background-color: var(--bgfarbe);
}

#fussbereich {
  background: var(--thfarbe);
  color: var(--txfarbe);
  background-size: contain, auto;
  padding: 0 0 0.5em;
  border-radius: 1em; 
  font-weight:normal;
  width: calc(100%-20px); 
  min-height: 60px;
  margin:0px 0px 10px;
  clear: both;
}

.dropbtn {
    background-color: var(--thfarbe);
    color: var(--txfarbe);
    width: 100%;
    font-weight:bold;
    padding: 10px;
    border: none;
}

.dropdown {
    width: 100%;
    display: inline-block;
}

.dropdown-content {
    display: none;
    min-width: 200px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

a.tel:link, a.tel:visited, a.tel:active, a.tel:hover {
 color: var(--ttfarbe);
 background-color: var(--thfarbe);
 font-family: Arial;
 font-weight: bold;

}


a.menu:link, a.menu:visited {
 color: var(--mtfarbe);
 background-color: var(--mhfarbe);
}

a.menu:active, a.menu:hover {
 color: var(--mthfarb);
 background-color: var(--mhhfarb);
}

a.aktuell {
 color: var(--mtafarb);
 background-color:var(--mhafarb);
 display:block;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
} 

a.haktuell {
 color: var(--bgfarbe);
 background-color:var(--thfarbe);
 display:block;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
} 

a.umenu:active, a.umenu:hover {
 color: var(--mthfarb);
 background-color: var(--mhhfarb);
}

a.uaktuell {
 color: var(--mtafarb);
 background-color: var(--mhafarb);
}

a.menu {
 display:block;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

a.umenu {
 color: var(--mtfarbe);
 background-color: var(--mhfarbe);
 display:block;
 margin-left: 25px;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

a.uaktuell {
 color: var(--mtafarb);
 background-color:var(--mhafarb);
 display:block;
 margin-left: 25px;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

a.uumenu:link, a.uumenu:visited {
 color: var(--mtfarbe);
 background-color: var(--mhfarbe);
}

a.uumenu:active, a.uumenu:hover {
 color: var(--mthfarb);
 background-color: var(--mhhfarb);
}

a.uumenu {
 display:block;
 margin-left: 50px;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

a.uuaktuell {
  color: var(--mtafarb);
 background-color: var(--mhafarb);

 display:block;
 margin-left: 50px;
 border-top:1px solid var(--mrfarbe);
 text-align:left;
 vertical-align: middle; 
 font-weight:bold;
 text-decoration:none;
 text-indent: 1.5em;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

a.xyz:link, a.xyz:visited {
 color:#0066CC;
 background-color:#EDEDED;

}

a.xyz:active, a.xyz:hover {
 color:#000;
 background-color:var(--mhfarbe);
}

.colst {
    border: 0px;
    float:left;
    width: 100%;
}
.colsl {
    border: 0px;
    float:left;
    width: 100%;
    vertical-align: middle; 
    margin-left:0px;
    display: flex;
    align-items: center;
    word-wrap:break-word;
}

.colll {
    float:left;
    top: 0;
    width: 45%;
    margin-bottom:30px;
}

.collr {
    float:right;
    top: 0;
    width: 50%;
    margin-bottom:20px;
    padding-left: 10px;
}

a.xyz {
 display: block;
 border-top:1px solid var(--mrfarbe);
 color:#0066CC;
 background-color:#EDEDED;
 vertical-align: middle; 
 text-align: center;
 font-weight:bold;
 text-decoration:none;
 padding: 5px;
 border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
 -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
}

a:active, a:focus {
outline: none;
}

a img {
border: 0px;
}

figure {
  border: 0px;
  position: relative;
  width: 100%;
}

figure.einzel {
  border: 0px;
  position: relative;
  display: inline-block;
  width: 48%;
}

figure img {
  width: 100%;
  display: block;
}

.figcaption {
  position: absolute;
  background-color: #636363;
  color: #cccccc;
  font-style: italic;
  width: 100%;
  text-align: center;
}

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






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

.dropdown {   
  float: left;
  width: 22%;
  margin: 10px 0px 10px 0px;
  border-radius: 15px 15px 0 0; -moz-border-radius: 15px 15px 0 0;
  -webkit-border-radius: 15px 15px 0 0; -khtml-border-radius: 15px 15px 0 0;
  display: block;
  }

.dropdown-content {
    display: block;
    min-width: 200px;
    z-index: 1;
}

#inhalt {
  float: right;
  width: 76%;
  border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 15px 15px 15px 15px; -khtml-border-radius: 15px 15px 15px 15px;
  }

#reihenbilder {
  display: table-cell; 
  padding: 0 4px;  
  text-align: center;
}

img:reihenbilder {
border: 0;
max-width: 33%;
height: auto;
}


a.aktuell, a.haktuell, a.menu, a.menu, a.umenu, a.uaktuell, a.uumenu, a.uuaktuell {
  line-height: 36px;
  height: 36px;
  }

.dropbtn {
  display: none;
  }

a.xyz {
 line-height: 36px;
 height: 36px;
  }

  .container6{
    grid-template-columns: 1fr 1fr 1fr;
  }

  .wrapper {
    width: 80%;
    height: auto;
    margin: 10%;
  }

  .img-area {
    grid-template-rows: repeat(5, 30vh);
    grid-template-columns: repeat(1, 50vh);
    }

  img:hover {
    width: 100%;
    height: 200%;
  }

}

@media only screen and (min-width: 1200px) {
  #seite {width: 1200px;   margin: 0 auto; }

  .container6{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .wrapper {
    width: 80%;
    height: auto;
    margin: 5%;
  }

  .img-area {
    grid-template-rows: repeat(3, 20vh);
    grid-template-columns: repeat(2, 32vh);
    }

  img:hover {
    width: 100%;
    height: 200%;
  }

}