@charset "utf-8";

/* header */

.header                                         { background-color: var(--main-grey); width: 100%; z-index: 3; }
.header ul                                      { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--main-color); }
.header li a                                    { display: block; padding: 10px 10px; border-right: 0px solid var(--main-grey); text-decoration: none; font-size:16px; font-weight: 500; color: white; }
.header li a:hover,

.header .menu-navi-aktiv                         { background-color: var(--main-grey); text-decoration: none;  color: var(--main-color) !important; }


.header .menu                                   { clear: both; max-height: 0; transition: max-height .2s ease-out; background-color: var(--main-grey); }


.header .menu-icon                              { cursor: pointer; display:  inline-flex; align-items: center; justify-content: center; padding: 20px 0px 20px 0px; position: relative; user-select: none; width: 100%; }
.header .menu-icon::before                      { content: normal; }
.header .menu-icon::after                       { content: normal;}
.header .menu-icon .navicon                     { background: white; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; }
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after               { background: white; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;}
.header .menu-icon .navicon:before              { top: 5px; }
.header .menu-icon .navicon:after               { top: -5px; }


.header .menu-btn                               { display: none; }
.header .menu-btn:checked ~ .menu               { max-height: 1000px; padding-bottom: 15px; }
.header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; }

.header .menu-btn:checked ~ .menu-icon .navicon:before                        { transform: rotate(-45deg); }
.header .menu-btn:checked ~ .menu-icon .navicon:after                         { transform: rotate(45deg); }
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after             { top: 0; }
.header .menu-btn:hover                         { background-color: var(--main-grey);  color: var(--main-color) !important; }
.header .menu-btn-aktiv                         { display: block; padding: 15px 30px 15px 10px; background-color: var(--main-grey); text-decoration: none; font-size:16px; font-weight: 500; color: var(--main-color) !important; }






/* 48em = 768px */
@media (min-width: 48em) {
	.navrow {
    height: 50px;
    align-items: center;
    justify-content: left;
  }
  .navshadow {
    -webkit-box-shadow: 0 4px -2px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
  }
  .header li {
    float: left;
  }
  .header li a {
    padding:  15px 30px 15px 0px;
  }
  .header .menu {
    clear: none;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
	
	
}
@media only screen
  and (min-width: 1200px)
  {
	  .menu                          {width:1230px; } 
}

/* Tablet Querformat (Landscape) - PC mit geringer Auflösung */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="col-"] {
    width: 100%;
  }
  .navrow {
    height: auto !important;
    padding-left: 0px
  }
  .col-2.main_grey_bg.navrow {
    height: 5px;
  }
.header .menu                  { padding-left: 15px; }
.header li a                   { font-size:13px; padding:  15px 20px 15px 0px; }
.header .menu-btn-aktiv        { font-size:13px; padding:  15px 20px 15px 0px; }    
	
	
}
/* Tablet Hochformat (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="col-"] {
    width: 100%;
  }
  .navrow {
    height: auto !important;
    padding-right: 0px
  }
  .col-2.main_grey_bg.navrow {
    height: 5px;
  }
	.header .menu                  { padding-left: 15px; }
.header li a                   { font-size:12px; padding:  15px 15px 15px 0px; }
.header .menu-btn-aktiv        { font-size:12px; padding:  15px 15px 15px 0px; }

}
/* Smartphone Hochformat  */
@media only screen and (max-width: 600px) {
  /* Kopfbereich */
  [class*="col-"] {
    width: 100%;
  }
  .col-8.main_grey_bg.navrow {
    height: auto;
  }
  .col-2.main_grey_bg.navrow {
    height: 1px;
  }
  .navrow {
    height: auto;
    padding-right: 0px
  }
}
/* Smartphone Querformat (Landscape) */
@media only screen and (min-width: 601px) and (max-width: 767px) {
  [class*="col-"] {
    width: 100%;
  }
  .col-8.main_grey_bg.navrow {
    height: auto;
  }
  .col-2.main_grey_bg.navrow {
    height: 0px;
  }
  .navrow {
    height: auto;
    padding-right: 0px
  }
}