html {
  scrollbar-gutter: stable;
}

/* reset */
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

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

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

/* render html5 elements as block
   rendert html5 elemente als block  */

header, footer, section, aside, nav, article { display: block; }

body { background-color: #ffffff; font-size: 0.9em; font-family:'Muli', sans-serif; color:#564b47; }

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

.right  { text-align: right; }
.center  { text-align: center; }
.left  { text-align: left; }

.weiss  { background:#ffffff; }
.rot  { background:#7f2438; }
.rot_fuss  { background:#7f2438; min-height:40px; padding:1em; }
.grau { background:#e4e8e8; }
.navi  { background:#688181;  }
.dg { background:#4d504f; border-bottom: 1px solid #ffffff; }

.button  { color:#ffffff; width:60px; height:32px; padding:0.5em; }
#menubar  { background-color: #7f2438; color:#ffffff; }

h1   { font-family: 'Muli', sans-serif; font-size:0.9em; color:#7f2438; font-weight:100; line-height:1.4em;
       margin:0em; padding:2em 1.0em 0.5em 0em; }

/*h2   { font-family: 'Muli', sans-serif; font-size:1.3em; color:#7f2438; font-weight:100; line-height:1.3em;
       margin:0; padding:0.4em 0.3em 0.4em 0.8em; } */

h2   { font-family: 'Muli', sans-serif; font-size:1.3em; color:#7f2438; font-weight:100; line-height:1.5em;
       margin:0; padding:0.5em 0.5em 0 0.8em; }

h3   { font-family: 'Muli', sans-serif; font-size:1.1em; color:#7f2438; font-weight:100; line-height:1.1em;
       margin:0; padding:1em 0.5em 0.2em 1.0em; min-height:40px; }

h4   { font-family: 'Muli', sans-serif; font-size:1.1em; color:#ffffff; font-weight:100; line-height:1.1em;
       margin: 0; padding:0.7em 0.0em 0.7em 0.8em; }

h5   { font-family: 'Muli', sans-serif; font-size:1.1em; color:#7f2438; font-weight:100; line-height:1.1em;
       margin:0; padding:0.0em 0.5em 0.2em 1.0em; min-height:25px; }
	   
h6    { font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.1em;
       margin:0em; padding:0.5em 1.0em 0.5em 1.2em; }

p    { font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
       margin:0em; padding:0.5em 1.0em 0.5em 1.2em; }

.adr { color:#7f2438; line-height:1.4em; margin:0em; padding:0.5em 1em 0.8em 0em; text-align:left; }


.weis { color:#ffffff; text-align:left; line-height:1.4em; padding:0.5em 0.5em 0.5em 1em; }
.konst { color:#ffffff; text-align:center; line-height:1.4em; padding:0.5em 0.5em 0.5em 1em; }

a.stil3:link   { font-family: 'Muli', sans-serif; font-size:0.9em; color:#ffffff; font-weight:100; line-height:1.4em;
                     text-decoration: none; padding:0.5em 1.0em 0.5em 1em; }
a.stil3:visited  { color: #ffffff; text-decoration: none; }
a.stil3:hover  { color: #7f2438; text-decoration: none; }
a.stil3:active { color: #ffffff; text-decoration: none; }

.icon  { font-size:0.8em; color:#ffffff; font-weight:100; line-height:1.4em; padding:0em; }

ul {  list-style-image: url('img/but.gif'); font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100;
         line-height:1.5em; margin:0; padding-left:3em; }

.tabelle {     padding:0.5em 0 1.5em 1.2em; text-align:left; }
.tab     {     padding:0.5em 0 0.5em 1.2em; text-align:center; }


nav           { background:#688181; border: 0; margin: 0; padding: 0; display: block; }
nav a         { font-family:'Muli', sans-serif; font-size:0.9em; color:#ffffff; font-weight:100; line-height:1em;
                 text-decoration: none; display: block; background:#688181; text-align:center;
                 border-bottom: 1px solid #ffffff; letter-spacing:1px; margin: 0px; padding:1em;
                 transition:background 0.3s; -webkit-transition:background 0.3s; }
nav a:hover   { color: #ffffff; background: #4d504f; }
nav a:active  { color: #ffffff; background: #7f2438; }
.aktiv  { color: #ffffff; background: #7f2438; }




a.ad:link    {font-family: 'Muli', sans-serif; font-size:0.9em; color:#5e5e5e; font-weight:100; border:0; text-decoration:none;
             line-height:1.4em; margin: 0; padding-bottom:1em;}
a.ad:visited {color:#5e5e5e; text-decoration:none; }
a.ad:hover   {color:#4a4a4a; text-decoration:none; }
a.ad:active  {color:#5e5e5e; text-decoration:none; }


a.text:link    {font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
               margin:0em; padding:0.5em 1.0em 0.5em 1.2em; text-decoration:none; }
a.text:visited {color:#7f2438; text-decoration:none; }
a.text:hover   {color:#7f2438; text-decoration:none; }
a.text:active  {color:#7f2438; text-decoration:none; }

a.na:link    { font-family: 'Muli', sans-serif; font-size:0.9em; font-weight:100; background:#688181; color:#ffffff;
               text-decoration:none; display: block; text-align: center; margin: 0; padding:1em;
               border-right: 1px solid #ffffff; letter-spacing:1px;
               transition:background 0.3s; -webkit-transition:background 0.3s; }
a.na:visited { color: #ffffff; background: #688181; }
a.na:hover   { color: #ffffff; background: #4d504f; }
a.na:active  { color: #ffffff; background: #7f2438; }

.aktiv  { color: #ffffff; background: #7f2438; border-right: 1px solid #ffffff; }

.rand { border-left: 1px solid #ffffff; }

ol     { font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
       margin:0em; padding:0.5em 0.5em 0.5em 2.5em; }

.karte { position: relative; padding-bottom: 46%; height: 0; overflow: hidden; width: 100%; height: auto; }
.karte iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.korn { border:0; max-width:100px; max-height:230px; }

.bild_klein  { border:0;  }
.mikroskop  { border: 1px solid #ffffff; }
.siegel { width:32.5%; height:auto; }
.demo { width:50%; height:auto; }

/* ---------- header, content, footer width -------------- */
.inner{
        margin: 0 auto;
        padding: 20px;
        max-width: 1000px;
        min-width:700px;
}

/* ----------------- grid --------------------- */

[class*="col-"] { float: left; padding: 0; margin:0; }
.row:after {  content: ""; clear: both; display: block; }

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-13 {width: 25%;float: center;}

.col-50 {width: 25%; float: right; padding: 0; margin:0;}

/* -----------formular--------------------------- */
input {font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
       width:95%; height:30px; margin:0em; padding:0.2em; background-color:#fff; }

.inp1 { width:95%; height:30px; margin:0em; padding:0; background-color:#fff; }
option { font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
         width:95%; height:30px; margin:0em; padding:0; background-color:#fff; }

textarea {font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
       width:95%; height:110px; margin:0em; padding:0.3em; background-color:#fff; }
.formular1 { display:block; width:95%; height:25px; margin-left:1em; border:1px solid #ccc; }
.formular2 { display:block; width:95%; height:80px; margin-left:1em; border:1px solid #ccc; }
.formular3 { width:95%; height:25px; margin-left:1em; border:1px solid #393939; background-color:#8d989d;
             font-family: 'Muli', sans-serif; font-size:0.9em; color:#fff; font-weight:100; line-height:1em;   }
.formular_text { font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; line-height:1.5em;
       margin:0em; padding:0.3em; padding:0.5em 1.0em 0em 1.2em; }

.pflichtfeld { color: #d62222; }
.neuercode   { color: #0066FF; }
.feld1       { background-color:#eef3f5; text-align:right; }
tr  { vertical-align: top; }
td  { font-family: 'Muli', sans-serif; font-size:0.9em; color:#393939; font-weight:100; margin:0.3em 0.3em 0.3em 0.8em;
          padding:0.3em 0.3em 0.3em 0.8em; height:20px; }

/* -----------footer--------------------------- */

footer { background: #7f1f39; width: 100%; position: fixed; left: 0; bottom: 0; padding:0.5em; }

.fuss { color: #ffffff; font-size:1em; line-height:1.2em; }

a.fuss:link    {color:#ffffff; border:0; text-decoration:none; margin: 0; padding:0; font-family: 'Muli', sans-serif; font-size:0.8em; font-weight:100; line-height:1.2em; }
a.fuss:visited {color:#ffffff; text-decoration:none; }
a.fuss:hover   {color:#d7d7d7; text-decoration:none; }
a.fuss:active  {color:#ffffff; text-decoration:none; }

.energy { color: #00ce00; font-size:1em; line-height:1.2em; }

a.energy:link    {color:#00ce00; border:0; text-decoration:none; margin: 0; padding:0; font-family: 'Muli', sans-serif; font-size:0.8em; font-weight:100; line-height:1.2em; }
a.energy:visited {color:#00ce00; text-decoration:none; }
a.energy:hover   {color:#d7d7d7; text-decoration:none; }
a.energy:active  {color:#ffffff; text-decoration:none; }

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] { width: 100%; border-left:0px; }
    .adresse  { padding:0; text-align:center; }
    .adr { padding:0; text-align:center; }
    h1 { padding:0; font-size:1.1em; text-align:center; }

    #logo1 { text-align:center; width:40%; }
    #logo2 { text-align:center; width:20%; }
    #logo3 { text-align:center; width:20%; }
    #logo4 { text-align:center; width:20%; }
    #logo5 { text-align:center; width:20%; }
    #logo6 { text-align:center; width:20%; }
    #banner1 { text-align:center; width:40%; }

    
/* #banner1 { width: 500px; height: auto; position: absolute; margin-top: 5px; left: 50%; transform: translate(-50%, -0%); } */
}

@media only screen and (max-width: 1280px) {
    nav  { font-size:90%; }
    .na  { font-size:90%; }  }

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

    #menubar { display:none; }
    a.menubutton { display:none; }
    .button { display:none; }
}

@media screen and (min-width:550px) {
        nav {  display:block !important; }
		#menubar { display:none; }
		a.menubutton { display:none; }
		.button { display:none; }
		
}
@media screen and (max-width:550px) {

        #menubar a.menubutton {
                display:block;
        }
        nav {
                display:none;
                height:auto;
        }

        .menu {
                display:block;
                margin:0.3em 0em 0.3em 0em;
        }

        .bild_klein { padding-left:1em; max-width:250px; max-height:250px; }
}


html, body { height: 100%; }
body {
  margin: 0;                   
  min-height: 100vh;            
  min-height: 100dvh;           
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

.rot_fuss { margin-top: auto; flex-shrink: 0; }

@media (min-width: 769px) {
  .row.navi > nav{
    display:flex !important;
    flex-wrap:nowrap;
    align-items:stretch;      /* all cells same height */
    gap:0;
    background:#688181;
  }

  .row.navi > nav > [class*="col-"]{
    float:none; width:auto; display:flex; align-items:stretch;
    margin:0; padding:0;
  }
  .row.navi > nav > .col-2{ flex:0 0 16.66%; }
  .row.navi > nav > .col-1{ flex:0 0 8.33%;  }


  .row.navi > nav a{
    display:flex; align-items:center; justify-content:center;
    align-self:stretch;              /* key for full-height hitbox */
    flex:1 1 auto; width:100%;
    white-space:normal; hyphens:manual; word-break:keep-all;
    padding:1em .9em; letter-spacing:0;
    color:#fff; background:#688181;

    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    border-left:0; border-right:0; box-sizing:border-box;
  }
  .row.navi > nav > [class*="col-"]:not(:first-child) a{ border-left:1px solid #fff; }
  .row.navi > nav > [class*="col-"]:last-child a{ border-right:1px solid #fff; }

  
  .row.navi > nav a:hover { background:#4d504f !important; }
  .row.navi > nav a.aktiv { background:#7f2438 !important; }
}

@media (min-width: 550px) and (max-width: 768px) {
  .row.navi > nav{
    display:block !important;
    background:#688181;
    border:0 !important;     
  }
  .row.navi > nav > [class*="col-"]{ float:none; width:100%; display:block; margin:0; padding:0; }

  .row.navi > nav a{
    display:block; width:100%;
    padding:1em; text-align:center;
    color:#fff; background:#688181;
    border:0; border-top:1px solid #fff; 
  }

  .row.navi > nav > [class*="col-"]:first-child a{ border-top:1px solid #fff; }

  .row.navi > nav > [class*="col-"]:last-child a{ border-bottom:1px solid #fff; }


  .row.navi > nav a:hover { background:#4d504f !important; }
  .row.navi > nav a.aktiv { background:#7f2438 !important; }
}


/* Mobile */
@media (max-width: 550px){
  .row.navi > nav,
  aside[aria-label="Produktgruppen"] > nav { display: none !important; }

  .row.navi > nav.open,
  aside[aria-label="Produktgruppen"] > nav.open { display: block !important; }

  nav.open > [class*="col-"]{ width:100%; float:none; display:block; margin:0; padding:0; }
  nav.open a{
    display:block; width:100%;
    padding:1em; text-align:center;
    background:#688181; color:#fff;
    border:0; border-top:1px solid #fff;
  }

  nav.open a:hover { background:#4d504f !important; }
  nav.open a.aktiv { background:#7f2438 !important; }

}