/* -------------------------------------------------------------------- */
/* Allgemein */

/* Zurücksetzen der Auto-Schriftskalierung */
html { 
 -webkit-text-size-adjust: none; 
 box-sizing: border-box;
}

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

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

@font-face {
 font-family: 'symbole';
           src: url('../fonts/fa-solid-900.woff2')  format('woff2'),
                url('../fonts/fa-solid-900.woff')  format('woff'),
                url('../fonts/fa-solid-900.eot')  format('eot'); 
}

body {
 font: 100.01% Roboto, Arial, Helvetica, sans-serif;
 text-align: center;  
 line-height: 1.5;
 color: #7B7B7B;
 margin: 5px 0;
}

header {
 position: relative;
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: nowrap;
 flex-wrap: nowrap;
 -webkit-justify-content: center; 
 justify-content: center; 
 background: transparent;
 border-color: transparent;
 padding: 0;
 margin: 0 auto 0 auto;
 max-width: 1920px;
 min-width: 1280px;
}

.bannerdivs {
 width: 33.3%; 
 background-color: #fff;
 text-align: center;
}

.bannerbild {
 width: 100%;
 height: auto;
}

#bannerdiv_links {
 position: absolute;
 top: 0;
 left: 0;
}

#bannerdiv_rechts {
 position: absolute;
 top: 0;
 right: 0;
}

#logo {
 display: block;
 width: 100%;
 height: auto;
 margin: 0 auto 0 auto;
}

#menue_oben {
 display: flex;
 display:-webkit-flex;
 justify-content: space-between;
 -webkit-justify-content: space-between;
 font-size: 1.16em;
 list-style-type: none;
 padding: 10px 0 0 0;
 margin: 10px 15px 0 15px;
 border-top: 1px solid #B0ACAC;
}

#menue_oben li {
 display: inline;
}

#hmenue {
 display: none;
}

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

 #menue_oben {
  font-size: 0.95em;
  font-weight: bold;
 }

}

a:link {
 color: #838383;
 text-decoration: none;
}

a:active {
 color: #838383;
}

a:hover {
 text-decoration: underline;
} 

a:visited {
 color: #838383;
}

.groesser {
 font-size: 1.2em;
 font-style: normal;
 padding-top: 20px;
}

.kleiner {
 font-size: 0.95em;
 font-style: normal;
}

.nochkleiner{
 font-size: 0.9em;
}

.ganze_breite, .ganze_breite2 {
 width: 100%;
 padding: 10px;
}

h2 {
 width: 100%;
 text-align: left;
 font-size: 1.4em;
 font-weight: bold;
 margin: 0;
 padding-top: 0;
 padding-bottom: 5px;
 color: #666;
 border-bottom: 1px solid #B0ACAC;
}

h3 {
 margin: 0;
 padding-top: 0;
 padding-bottom: 5px;
}

.foto_rechts {
 float: right;
 margin: 10px;
}

.foto_links {
 float: left;
 margin: 10px 25px 10px 0;
}

#foto {
 margin: 20px 0;
 width: 100%;
 height: auto;
}

.flexfoto {
 width: 100%;
 height: auto;
}

/* -------------------------------------------------------------------- */
/* Footer, Cookie-Hinweis*/

footer {
 background-color: #494343;
 background-size: cover;
 color: #fff;
 /*min-width: 100%;*/
 min-width: 1280px;
 min-height: 50px;
 padding: 20px 0 20px 0;
 text-align: center;
}

#hinweis-footer {
 position: fixed;
 left: 0;
 bottom: 0;
 padding: 10px 0 10px 0;
 opacity: 0.9;
}

footer a:link, footer a:visited, footer a:active {
 color: #fff;
 font-size: 1em;
 text-decoration: none;
}

footer a:hover {
 text-decoration: underline; 
}

#cookie-hinweis {
 width: 70%;
 margin: 0 auto;
}

#kdaten_schmal {display: none;}

/* -------------------------------------------------------------------- */
/* Hauptbereiche allgemein, Vertreter*/

#hauptbereich, #start_hauptbereich, #rf_hauptbereich {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 margin: 20px auto 10px auto;
 max-width: 87em;
 min-width: 1260px;
}

#start_hauptbereich {
 margin: 30px auto 30px auto;
}

#lp_hauptbereich, #os_hauptbereich, #nh_hauptbereich {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 margin: 20px auto 10px auto;
 width: 65em; 
}

#firma_box1, #rf_firma_box1 {
 margin: 5px 0 0 0;
 width: 46%;
 border-left: 0px solid #B0ACAC;
 background-color: #fff;
 text-align: left;
 padding: 10px;
 font-size: 1em;
}

#lp_firma_box1 {
 margin: 5px 0 0 0;
 width: 100%;
 background-color: #fff;
 text-align: justify;
 padding: 10px;
 font-size: 1em;
}

#os_firma_box1, #nh_firma_box1 {
 margin: 5px 0 0 0;
 width: 100%;
 background-color: #fff;
 text-align: left;
 padding: 10px;
 font-size: 1.05em;
}

#os_firma_box1 ul {
 list-style-position: inside;
}

#nh_firma_box1 ul {
 overflow: auto;
 margin: 0;
 padding-top: 10px;
 padding-left: 1.3em;
}

#nh_firma_box1 p {
 margin: 0;
 padding-top: 12px;
}

#lp_foto_links, #rf_foto_links, #os_foto_links, #nh_foto_links {
 float: left;
 margin: 10px 25px 10px 0;
}

.eingezogen {
 overflow: auto;
 padding-left: 1.3em;
}

.kein_float_breit {clear: both;}

.kein_float_schmal {display: none;}

#firma_box2 {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: center; 
 justify-content: center; 
 margin: 20px 0 0 0;
 width: 54%;
 padding: 10px;
 border-right: 0px solid #B0ACAC;
}

#rf_firma_box1 {
 margin: 0;
 text-align: justify;
 width: 63%; 
}

#rf_firma_box2 {
 text-align: justify;
 width: 36.5%; 
 margin: 0;
 padding: 10px;
}

#firma_box2 p {
 margin-top: 7px;
}

#rf_hauptbereich p {
 margin-top: 4px;
 margin-bottom: 4px;
}

#rf_hauptbereich p:first-of-type {margin-top: 10px;}


/* -------------------------------------------------------------------- */
/* Markenteil Vertreterseiten */

#marken_box {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: center; 
 justify-content: center; 
 margin: 0 10px 15px 0;
 width: 100%;
 padding: 10px;
 text-align: center;
 color: #6C6464;
}

#marken_box article {
 width: 18%;
 min-width: 300px;
 max-width: 450px;
 margin-top: 5px;
 margin-right: 15px;
 margin-left: 15px;
 padding: 10px;
 background-color: #EDEDED;
}

#marken_box article:last-of-type {margin-right: 0;}

#marken_box article p, article ul {
 text-align: left;
}

#marken_box article ul {
 margin-top: 10px;
 padding: 10px 10px 10px 20px;
}

.vfirmenlogo {
 display: block;
 margin: 0 auto;
}

.logo_div {
 display:-webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: space-around; 
 justify-content: space-around; 
 width: 100%;
 height: 88px;
}


/* -------------------------------------------------------------------- */
/* Produkte, Merkzettel */

#firma_text, #merkzettel_text {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between; 
 justify-content: space-between; 
 -webkit-align-content: flex-start;
 align-content: flex-start;
 -webkit-align-items: flex-start;
 align-items: flex-start;
 margin: 10px 10px 10px 0;
 max-width: 77%;
 background: transparent;
 text-align: left;
 padding: 5px 10px 20px 10px;
}

#merkzettel_text {
 width: 77%;
}

#text, #text2 {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 padding: 10px 0 10px 10px;
}

#text { max-width: 47%;}

#text2 { max-width: 55%;}

#bild {
 padding: 20px 10px 0 0;
}

.firmenbild {
 width: 50%;
 height: auto; 
 margin: 10px;
}

.firmenbild2, .firmenbild3 {
 width: 42%;
 height: auto; 
 margin: 10px;
}

#text_breit {
 width: 100%;
 padding: 10px 0 10px 10px;
}

#text_breit p {
 padding-top: 5px;
 padding-bottom: 5px;
 margin: 0;
}

.firmenbild_breit {
 width: 100%;
 height: auto; 
 margin: 10px 10px 0 10px;
}

#firma_logos {
 margin: 10px;
 min-width: 250px;
 border-right: 1px solid #B0ACAC;
 padding: 10px;
 font-size: 0.8em;
}

.logobereich {
 width: 100%;
 background: transparent;
}

#logobereich_aktiv, .logobereich:hover {
 width: 100%;
 background-color: #EFEFEF;
}

.firmenlogo {
 margin-top: 10px;
 margin-bottom: 10px;
}

.firmenlogo_kleiner {
 max-width: 80%;
 height: auto;
 margin-top: 8px;
 margin-bottom: 8px;
}

#logos-waagerecht {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-align-items: center;
 align-items: center;
 width: 100%;
 text-align: center;
 margin-top: 25px;
} 

.logobereich-waagerecht {
 min-width: 10%;
 background: transparent;
 padding: 4px;
 margin: 3px 10px 3px 0;
 border-bottom: 2px solid #fff;
}

#logobereich-waagerecht_aktiv, .logobereich-waagerecht:hover {
 background-color: #fff;
 min-width: 10%;
 padding: 4px;
 margin: 3px 10px 3px 0;
 border-bottom: 2px solid #7a7a7a;
}

#unterbereiche {
 font-size: 1.1em;
 font-weight: bold;
}

#unterbereiche li {
 padding: 3px;
}

#unterbereich_aktiv, #unterbereiche li:hover {
 background-color: #EFEFEF;
} 

#bp-logo {
 margin-left: 15px;
 margin-top: 10px;
}

#produkte {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: center; 
 justify-content: center; 
 margin-top: 10px;
 margin-bottom: 20px;
 max-width: 1920px;
}

#merkzettel_produkte {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: flex-start; 
 justify-content: flex-start; 
 -webkit-align-items: flex-end;
 align-items: flex-end;
 margin-top: 10px;
 margin-bottom: 20px;
 max-width: 77%;
}

.merkzettel_bild {
 width: 165px;
 height: auto;
}

.produktbox { 
 position: relative;
 margin: 10px;
 text-align: center;
}

.produktbox .foto2_hover { 
 position: absolute;
 display: none;
 top: 10px;
 left: 10px;
} 

.produktbox:hover .foto2_hover {display: block;}

.merkzettel_produktbox {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 flex-direction: column;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 width: 175px;
 position: relative;
 margin: 10px 15px 10px 10px;
 text-align: center;
 border: 1px solid #000;
}

.merkzettel_produktbox2 {
 width: 175px;
 position: relative;
 margin: 10px 15px 10px 10px;
 text-align: center;
}

.produktbox h3 {
 margin-top: 5px;
 padding-top: 0;
 margin-bottom: 3px;
 padding-bottom: 0;
}

.merkzettel_produktbox2 p {
 margin-top: 5px;
 font-size: 0.9em;
}

#merkzettel {
 position: fixed;
 top: 25%;
 right: 0;
 width: 7em;
 color: #fff;
 background-color: #000;
 opacity: 0.5;
 z-index: 99;
 padding: 8px 0;
 text-align: center;
}

#nach_oben {
 position: fixed;
 display: none;
 bottom: 0;
 right: 0;
 width: 7em;
 color: #fff;
 background-color: #000;
 opacity: 0.5;
 z-index: 98;
 line-height: 1.0;
 padding: 10px 0;
 text-align: center;
}

.symbole_maxi {
 font-family: symbole, Arial, sans-serif; 
 font-size: 2em;
} 

.auf_merkzettel {
 position: absolute;
 bottom: 2.3em;
 right: 5px;
 width: 2.5em;
 height: 2em;
 font-family: symbole, Arial, sans-serif; 
 font-size: 1.3em;
 color: #fff;
 background-color: #000;
 opacity: 0.6;
 padding-top: 5px;
}

.neutral {display: none;}

.vom_merkzettel {
 position: absolute;
 top: 5px;
 right: 10px;
 width: 2.0em;
 height: 2em;
 font-family: symbole, Arial, sans-serif; 
 font-size: 1.3em;
 color: #fff;
 background-color: #000;
 opacity: 0.6;
 padding-top: 4px;
}

.auf_merkzettel:hover, #merkzettel:hover, .vom_merkzettel:hover, #nach_oben:hover {
 opacity: 1;
}

.auf_merkzettel a, .auf_merkzettel a:link,  .auf_merkzettel a:active, .auf_merkzettel a:hover, .auf_merkzettel a:visited, 
.vom_merkzettel a, .vom_merkzettel a:link,  .vom_merkzettel a:active, .vom_merkzettel a:hover, .vom_merkzettel a:visited, 
#merkzettel a, #merkzettel a:link,  #merkzettel a:active, #merkzettel a:hover, #merkzettel a:visited,
#nach_oben a, #nach_oben a:link,  #nach_oben a:active, #nach_oben a:hover, #nach_oben a:visited {
 display: block;
 color: #fff; 
 text-decoration: none;
}


/* -------------------------------------------------------------------- */
/* Startseite-Gebietswahl */

#start_box1 {
 margin: 5px 0 0 0;
 width: 30%;
 border-left: 0px solid #B0ACAC;
 background-color: #fff;
 text-align: left;
 padding: 10px;
 font-size: 1em;
}

#start_foto {
 width: 45%;
}

#plzwahl {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: flex-start; 
 justify-content: flex-start; 
 margin: 10px;
 width: 23%;
 padding: 5px;
 border-right: 0px solid #B0ACAC;
}

#plzwahl h3 {
 width: 100%;
 text-align: left;
}

#ziffern {
 text-align: left;
 margin: 0 10px;
}

#unterbereich {
 text-align: left;
 line-height: 1.5em;
 margin: 0 20px;
}

#plz_aktiv {
 background-color: #E60000;
 color: #fff;
 font-size: 1.5em;
}

#plzwahl a:link, #plzwahl a:visited, #plzwahl a:active {
 background-color: #000;
 color: #fff;
 font-size: 1.5em;
 text-decoration: none;
}

#plzwahl a:hover {
 background-color: #E60000;
 color: #fff;
 font-size: 1.5em;
 text-decoration: none;
}

#unterbereich a:link, #unterbereich a:visited, #unterbereich a:active {
 background-color: #fff;
 color: #999595;
 font-size: 1em;
 text-decoration: none;
}

#unterbereich a:hover {
 background-color: #fff;
 color: #000;
 font-size: 1em;
 text-decoration: none;
}


/* -------------------------------------------------------------------- */
/* Messetermine */

#messen_hauptbereich {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 margin: 20px auto 10px auto;
 max-width: 78em;
 min-width: 1260px;
}

#messen_box {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between; 
 justify-content: space-between; 
 margin: 0 auto;
 width: 60%;
 padding: 10px;
 text-align: center;
}

#messen_box article {
 width: 48%;
 margin-top: 5px;
 margin-bottom: 5px;
 padding: 10px;
 background-color: #fff;
 text-align: center;
}

#messen_box p {
 text-align: center;
}

.messelogo_div {
 display:-webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center; 
 justify-content: center; 
 width: 100%;
 height: 320px;
}

.messelogo {
 display: block;
 margin: 0 auto;
}

/* -------------------------------------------------------------------- */
/* Aktuelles, Kontakt, Impressum, Datenschutz */

#aktuelles_hauptbereich, #kontakt_hauptbereich{
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 margin: 20px auto 10px auto;
 max-width: 65em;
}

#kontakt_hauptbereich {
 width: 65em;
 margin-bottom: 20px;
}

#kontakt_hauptbereich form{
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 -webkit-align-content: flex-start;
 align-content: flex-start;
 margin: 10px;
}

#aktuelles, #impressum, #datenschutz {
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between; 
 justify-content: space-between; 
 margin: 0 0 10px 0;
 width: 100%;
 min-height: 30em;
 padding: 10px;
 text-align: center;
}

#aktuelles p {text-align: left;}

#aktuelles .ganze_breite {text-align: center;}

#aktuelles .ganze_breite img {
 display: block;
 margin: 10px auto 25px auto;
} 

#aktuelles .ganze_breite p, #aktuelles_hauptbereich .ganze_breite h2 {text-align: center;}

#aktuelles article {
 width: 50%;
 margin-top: 5px;
 margin-bottom: 5px;
 padding: 10px 10px 10px 0;
 background-color: #fff;
 text-align: left;
}

#aktuelles article img {margin-left: 20px;} 

#aktuelles figure {
 width: 47%;
 margin: 15px 1.5%;
 padding: 0;
}

#aktuelles figure img {
 display: block;
 width: 100%;
 height: auto;
} 

.aktuell_ganz {
 width: 100%;
 padding: 10px 0 20px 0;
 border-bottom: 1px solid #7B7B7B;
}

.grosses_bild_breit {
 width: 100%;
 height: auto;
}

#aktuelles hr {
 width: 100%;
 border: 0;
 height: 1px;
 margin-top: 15px;
 margin-bottom: 15px;
 background-color: #B0ACAC;
}

#impressum p {
 text-align: left;
 padding-left: 10px;
 padding-right: 10px;
}

#datenschutz p, #datenschutz h3, #datenschutz h4 {
 text-align: left;
 padding-left: 10px;
 padding-right: 10px;
 width: 100%;
}

#datenschutz h3, #datenschutz h4 {
 margin-top: 12px;
 margin-bottom: 2px;
}

#datenschutz li {
 text-align: left;
}

.nur_rot {
 color: #ad0303;
}

#anfrageformular1, #anfrageformular2 {
 text-align: left;
}

#anfrageformular1 {
 width: 55%;
}

#anfrageformular2 {
 width: 42%;
}

#bestaetigung1, #bestaetigung2 {
 width: 48%;
 min-height: 20em;
 padding: 10px; 
 text-align: left;
}

#anfrageformular1 label {
 display: inline-block;
 width: 10em;
 text-align: left;
}

#anfrageformular1 input,select {
 margin-bottom: 5px;
}

#anfrageformular2 textarea {
 width: 30em;
 height: 14em;
}

#name, #funktion, #firma, #strasse, #branche, #branche2, #ort, #tel, #fax, #mail {
 height: 2em;
 width: 20em;
}

#plz {
 height: 2em;
 width: 6em;
}

#anfrageformular2 input[type="submit"] {
 height: 2em;
}

.kleiner2 {
 font-size: 0.9em;
}

.red_color1 {
 display: none;
}

.input_falsch {
 background-color: #FAAAAA;
}

/* -------------------------------------------------------------------- */
/* spezielle Formatierungen Aktuelles */

.aktuell_ganz_2 {
 position: relative;
 width: 100%;
 color: #fff; 
 min-height: 12em; 
 margin-top: 15px; 
 padding: 15px; 
 font-size: 1.2em; 
 text-align: left;
}

.pixel_farbe {
 position: absolute;
 right: 15px;
 top: 15px;
 font-size: 1.6em;
 font-weight: bold;
 color: #fff;
 opacity: 0.6;
}

.amefa_logo {
 width: 50%;
 text-align: right;
 padding: 16px 20px;
}
 
.amefa_download {
 width: 50%;
 text-align: left;
 padding: 10px 15px;
}