/* 
    Created on : 27.12.2020, 15:52:06
    Author     : Stephan
*/


body {
    font-family: Trebuchet MS;
    padding-top: 0px;
}

#ausklappen {
}
#ausklappen div#mainmenu {
  left: 0;
  top: 0px;
  display:table-cell;
  width:0%;
  position:fixed;
  z-index:1000;
  background-color: #363636;
  overflow: hidden;
  height:21em;
  transition: width 0.5s ease-in-out;
}
#ausklapttten div#mainmenu {
  width:100%;
}
#menuhead {
  left: 0;
  top: 0px;
  display:table-cell;
  width:100%;
  position:fixed;
  z-index:999;
  background-color: #363636;
  color: #e0e0e0;
  overflow: hidden;
  height:1.5em;
  font-size: 1.5em;
  padding: 3px 0px 0px 20px;
  }
  #menuhead .menuimg {
      float: left;
      margin: 0px 20px 0px 0px;
  }
  #menuhead span {
      vertical-align: middle;
  }

  #mainmenu {
  height:1.5em;
  line-height: 1.5em;
  font-size: 1.5em;
  color: #e0e0e0;
  }
  #mainmenu .menuimg {
      float: left;
      margin: 3px 0px 0px 20px;
  }
  #mainmenu div div {
      margin: 0em 0em 10px 0em;
 }
  #mainmenu span {
      vertical-align: middle;
      padding: 0em 0em 0em 1em;
 }
 #mainmenu div.zeile {
    line-height: 1.5em;
    font-size: 1em;
    color: #e0e0e0;
 }
 #mainmenu div.zeile span {
    line-height: 1.5em;
    font-size: 1.5em;
 }
#tooltip {
  background: #f8f8f8;
  border: 1px solid black;
  border-radius: 3px;
  padding: 5px;
}

#mid {
    display: table;
    table-layout: fixed;
    width: 100%;
    top: 0;
}

#mid::before, #mid::after {
    display: table-cell;
    content: '';
}

.left {
    float: left;
}
.right {
    float: right;
}
.middle {
    float: middle;
}
clearLeft {
    clear: left;
}

.width40 {
    width: 40%;
}
.width50 {
    width: 50%;
}

.wrappersearch {
    display: table-cell;
    width: 80%;
    margin: 0 auto;
    padding: 0 0px;
}

.wrapper-container {
    padding: 50px 5% 30px;
}


#inner-1 {
    display: table;
    width: 100%;
    margin-top: 10px;
    border-bottom: 3px grey solid;
    border-collapse: collapse;
}

#inner-1-search {
    display: table;
    width: 100%;
    margin-top: 10px;
}

#inner-1-head {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}
/* #inner-1-liste {
    display: table;
    width: 100%;
    margin-top: 10px;
    border-bottom: 3px grey solid;
 Prüfen ob noch notwendig
} */


#inner-1-footer {
    display: table;
    width: 100%;
    /* border-bottom: 5px #ff5110 solid; /* Komplementätfarbe zu #00aeef */
    /* padding: 20px 0px 5px 0px; */
}

.inner-1-wrapper {
    display: table-row;
    margin: 0 auto;
}
.inner-1-wrapper-container {
    display: table-cell;
    vertical-align: middle;
    padding: 5px 10px;
}
.input-1-wrapper-container {
    vertical-align: middle;
    padding: 5px 10px;
    width: 100%;
}
.svgBRD {
    width: 40%;
    height: 40%;
}

.inner-1-quicksearch-wrapper-container {
    display: table-cell;
    vertical-align: middle;
    border: 0px greenyellow solid;
    padding: 5px 0px; /* äußerer Container darf noch angepasst werden, solange Seiten mit 0px */
}


.headline {
    font-size: 2em;
    font-stretch: expanded;
    letter-spacing: 5px;
}

.searchname {
    font-size: 2em;
    font-stretch: expanded;
}

#inputicon {
    width: 10%;
    height: auto;
}

:root {
  --input-border: #C0C0C0;
  --input-focus-h: 245;
  --input-focus-s: 100%;
  --input-focus-l: 42%;
}
.input {
  font-size: 18px;
  font-size: max(18px, 1.2em);
  font-family: inherit;
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 2px solid var(--input-border);
  border-radius: 4px;
}
.input:not(textarea) {
  line-height: 1;
  height: 2.3rem;
  width: 95%;
}
.input[disabled] {
  --input-border: #ccc;
  background-color: #eee;
  cursor: not-allowed;
}
textarea.input {
  resize: vertical;
  width: 95%;
}
select {
  max-width:100%;
  background-color: yellowgreen; /* wird durch select.input überschrieben */
}
select.input {
  background-color: #fff;
}
option {
    
}
option:checked, option:hover {
    color: white;
    background-image: url("data:image/gif;base64,R0lGODlhFAAUAIABAP9REP8RACH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAAFAAUAAACEYSPqcvtD6OctNqLs968+68VADs=");
}

#myfed select { 
width: 95%; }


#svg15099 {
    width: 100%;
    height: 100%;
}

.fiSH:hover {fill:#C0C0C0;} /* SH 1 */
.fiHH:hover {fill:#ff5110;} /* HH 2 */
.fiNI:hover {fill:#C0C0C0;} /* NI 3 */
.fiHB:hover {fill:#C0C0C0;} /* HH 4 */
.fiNW:hover {fill:#C4C4C4;} /* HH 5 */
.fiBY:hover {fill:#C0C0C0;} /* BY 9 */
.fiBW:hover {fill:#C0C0C0;} /* BW 8 */
.fiSL:hover {fill:#C0C0C0;} /* HH */
.fiST:hover {fill:#C0C0C0;} /* HH */
.fiSN:hover {fill:#C0C0C0;} /* HH */
.fiTH:hover {fill:#C0C0C0;} /* HH 16*/



@media only screen and (max-width: 480px) {

#content {
	width:100%;
	margin-right:0;
	margin-bottom:2%;
}

#inner-1-head {
    margin: 2em 0 0 0;
}
#menuhead span center {
  margin-right: 10%;
}
#menuline {
  left: 0;
  top: 0px;
  display:table-cell;
  width:0%;
  position:fixed;
  z-index:1100;
  background-color: #363636;
  overflow: hidden;
  height:350px;
  transition: width 0.5s ease-in-out;
}
#sidebar1 {
	width:100%;
	height:200px;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
	margin-top:2%;
}


.inner-1-wrapper-container {
    display: table-row;
}
.inner-1-quicksearch-wrapper-container {
    display: table-row;
}
.headline {
    font-size: 1.0em;
}
.headlinephone {
    font-size: 2.5em;
}
.left, .right {
    
}

.svgBRD {
    /* background-color: red; */
    width: 90%;
    height: auto;       /* Höhe soll sich automatisch anpassen, aber min-height sein, damit die Grafik nich zu klein dargestellt wird. */
    min-height: 450px;
}
#svg15099 {
    width: 100%;  /* width und height, damit die Grafik selber nicht nach width ermittelt wird, aber der Pixelwert des SVG das DIV in der Höhe bestimmt und die kleine Grafik in einem riesen DIV ist. */
    height: 100%;  /* siehe width */
    min-height: 440px;  /* min-height, damit die Höhe auf Android ausfüllend dargestellt wird. */
}
.width40, .width50 {
    width: 100%;
}
.wrappersearch {
    width: 100%;
}
.wrapper-container {
    padding: 5px 1% 30px;
}

} /* Ende Media Query iPhone */