/* Alle Abstaende auf null setzen */

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 62.5%; /* jetzt ist 1em oder 1rem 10px gross */
  font-size: 16px; /* Fallback für alte Browser, die rem nicht kennen */
  font-size: 1.4rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.8rem;
  background-color: #E5E7DC;
}

h1, h2, h3, h4, h5, h6, p, div, td, td, li, textarea, input {
  color: #333;
}

#navigation,
.mobilweg {
  visibility: hidden;
  display: none;
}

a {
  text-decoration: none;
}

a img {
  border: 0;
}

p {
  font-size: 1rem;
  padding: 2px 0 4px 0;
}

ul {
  padding-left: 15px;
  width: calc(100% - 20px);
}

li {
  font-size: 0.8rem;
  width: calc(100% - 40px);
}

table {
  max-width: 100%;
}

td {
 	display: grid;
}

/* Headings */

h1 {
  font-size: 1.8rem;
  font-weight: normal;
  margin: 0;
  padding: 11px 0 10px 10px;
}

h1>a, h1>a:hover, h1>a:active, h1>a:visited {
  color: #E5E7DC;
}

h2 {
  clear: left;
  font-size: 1.6rem;
  padding-top: 9px;
  padding-bottom: 4px;
}

h3 {
  font-size: 1.4rem;
  padding-top: 6px;
  padding-bottom: 4px;
}
h4 {
  font-size: 1.2rem;
  padding-top: 9px;
  padding-bottom: 4px;
}


/* DIVs */

#sb-site, #container {
  width: 100%;
  padding-top: 0;
  margin: 0;
}

#sb-site {
  z-index: 1;
}

#container {
  width: 100%;
  padding: 0;
  margin: 0;
}

#kopf {
  position: relative;
  width: 100%;
  height: 51px;
  margin: 0;
  padding: 0;
  text-align: left;
  background-color: #333;
}

#rechteSpalte,
#linkeSpalte {
  position: relative;
  float: none;
  width: calc(100% - 20px);
  margin: 0 auto;
  min-height: auto;
  height: auto;
  padding: 12px 0;
}

div.clear {
  clear: both;
}


/* Navigation */

/* mobile Navigation */

/* Icon fuer das Einblenden der mobilen Navigation */
#mobilemenu {
  position: absolute;
  top: 0;
  right: 0;
  margin: 12px 8px 8px 8px;
  z-index: 10;
  width: 30px;
  height: 30px;
  background: url(../images/Menutoggle.png) no-repeat;
  background-size: contain;
}

html.active #mobilemenu {
  background-image: url(../images/Menu_Close.png);
}

.sb-slidebar {
  width: 60%;
  min-width: 200px;
  background-color: #333333;
  z-index: 100;
}

html.sb-active #mobilemenu {
   background-image: url(../images/Menu_Close.png);
}

.sb-right ul {
  list-style-position: inside;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: right;
}

.sb-right li {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 10px 0;
  display: block;
  background-color: #333333;
  border-bottom: 2px solid #E5E7DC;
  text-align: right;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.sb-right li a {
  text-decoration: none;
  color: #E5E7DC;
  padding-bottom: 0;
  margin-right: 10px;
  font-size: 1.2rem;
}

.sb-right li.hier {
  background: #E5E7DC url('/images/nav_bg.png') no-repeat left top;
  background-size: cover;
}

.sb-right li.hier > a {
  color: #333333;
  font-weight: bold;
}

/* Ende mobile Navigation */

#rechteSpalte,
.farbwahl { 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: stretch;
  width: calc(100% - 20px);
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.farbwahlbutton {  
  width: 40px;
  height: 40px;
}

.vorschaubild {
  float: left;
  height: 67px;
  width: auto;
  overflow: hidden;
  margin-left: 2px;
  margin-bottom: 5px;
}

.vorschaubild img {
  height: 67px;
  width: auto;
}

.fotounterschrift {
  clear: left;
  font-style: italic;
  font-size: 1rem;
  margin-top:-5px;
  padding-top:0;
}

#rechteSpalte {
  justify-content: space-between;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.bildanzeigeHerbar {
  flex-basis: calc(20% - 5px);
}

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

.last {
  margin-right: 0;
}

.bildanzeige {
  width: auto;
  max-width: 100%;
  height: auto;
}

.bildanzeige img {
  width: auto;
  max-width: 100%;
  height: auto;
  text-align: center;
  margin: auto; 
}

.fotounterschrift,
.zuordnung {
  clear: left;
  font-size: 0.8rem;  
}

.fotounterschrift {
  font-style: italic;
  margin-top: -5px;
  padding-top: 0;
  line-height: 1rem;
}

.ergebnisnavi {
  width:96%;
  margin-bottom:10px;
  line-height: 1rem;
}

.ergebnisnavi td {
  display: table-cell;
}

.zuruecklink, .weiterlink {
  width: 19px;
  height: 13px;
}

.zuruecklink {
  margin-right: 10px;
}

.weiterlink {
  margin-left: 10px;
}

#linkeSpalte a, #linkeSpalte a:active, #linkeSpalte a:hover,
#rechteSpalte a, #rechteSpalte a:active, #rechteSpalte a:hover  {
  color: #1E1E1E;
  font-weight: bold;
}

#linkeSpalte a:visited,
#rechteSpalte a:visited {
  color: #565656;
}


/* Formulare */

.required {
  font-weight: bold;
}

.fehler {
  color: #FF0000;
  font-weight: bold;
}

input,
textarea,
select
{
  padding: 1px 2px;
  margin-left: 0;
  border: 1px solid #333;
  background-color: #F0F2E6;
}

textarea {
  font-size: 1em;  
  background-color: #F0F2E6;
}

select {
  margin-left: 10px;
  /*background-color: #F0F2E6;*/
  border: 1px solid #333;
}

input:hover,
input:active,
textarea:hover,
textarea:active,
select:hover,
select:active {
  background-color: White;
}

.fehler input,
.fehler textarea,
.fehler select {
  background-color: White;
}

.formfeldKurz {
  width: 90%;
}

.formfeldLang, textarea {
  width: 90%;
}

.formfeldPLZ {
  width: 20%;
}

.submit {
  width: 90%;
  height: 40px;
  margin-top: 7px;
  font-weight: bold;
  background: #E5E7DC url('/images/nav_bg.png') no-repeat left top;
  background-size: cover;
}

.submit:hover {
  color: #E5E7DC;
  background-color: #333;
  background-image: none;
}

/* Ende Styles fuer Formulare */

#linkeSpalte a.hier, #linkeSpalte a.hier:visited, #linkeSpalte a.hier:hover, #linkeSpalte a.hier:active {
  text-decoration: none;
  font-weight: bold;
}

#linkeSpalte a.tooltip, #linkeSpalte a.tooltip:link, #linkeSpalte a.tooltip:visited, #linkeSpalte a.tooltip:active  {
  position: relative;
  text-decoration: none;
  border-bottom: 1px dotted;
  font-weight: normal;
  }

#linkeSpalte a.tooltip:hover {
  background: transparent;
  border-bottom: 1px dotted;
  }

#linkeSpalte a.tooltip span {
  display: none;
  text-decoration: none;
}

#linkeSpalte a.tooltip:hover span {
  display: block;
  position: absolute;
  bottom: 20px;
  left: 60px;
  padding: 4px;
  width: calc(100% - 60px);
  min-width: 200px;
  z-index: 100;
  color: #000000;
  border:1px solid #000000;
  background: White;
  text-align: left;
  line-height: 1.2rem;
}

#linkeSpalte a.hoehenstufe:hover span {
  left: 0;
}
 

.kompakt {
  line-height: 1.2rem;
}

.clearfix {
  position: relative;
  content: ".";
  display: block;
  width: 100%;
  height: 0;
  clear: both;
}