/*-----------------------------------------------------------------*/
/*                       Media-Queries                             */
/*                   Ansicht < als 1080px                          */
/*-----------------------------------------------------------------*/

@media screen and (max-width: 1080px){
    
    /*The browser will zoom if the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari). */
    @media (-webkit-min-device-pixel-ratio:0) { 
      select,
      textarea,
      input[type="text"],
      input[type="number"]{
        font-size: 16px;
    /*    font-size: 1em;*/
      }
    }
    
    body{
        font-size: 80%;
    }
            
    .ico-nav-toggle-responsive {
        background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg); 
        background-repeat: no-repeat;
        background-position: -50px -1000px;
        width: 22px;
        height: 18px;

        padding:0px;
        display: inline-block;
        vertical-align: middle;    
    }
    
   .nav-arbeitsplatz, .button-group-responsive-hide{
        display: none;
    }
   

    /* #########################################
    ################## main-nav ################
    ###########################################*/
    #epheader3-responsive {
        display: block;
        height:48px;
        background-color:#2c2e3a;
        padding:0px 15px 0px 15px; 
        margin: 0px;          
    }

    #epheader3-responsive.stuck {
        position:fixed;
        top:0;
        z-index:1999;
        width:100%;
    }
            

    #epheader3{
        padding:0; /*li bis zum Rand*/
        margin:0;
        display: none;
        height: auto;
        max-height: 95vh;
/*        overflow: auto;*/
    }
       
    #epheader3.stuck {
        position: fixed;
        top:48px; /* höhe von #epheader3-responsive */
        z-index:999;
        width:100%;
    }
    
    #epheader3 li{
        width: 100%;
        border-top: 1px solid #41464c;
    }

    /* ##########################################
    ##############   button mainnav  ############
    #############################################*/
    #epheader3 .button-group3 {      
        border-right: none;
        float:none;
    }

    .button-group3 :hover{   
        background-color: inherit;
    }

    .button-group3 :active{
        background-color: inherit;
    }
    
    /* Inge Test - MEDIA QUERIES aktiv + hover raus */
    #epheader3 .button-group3.active :hover{   
        background-color: inherit;
    }

    #epheader3 .button-group3.active{
        background-color: inherit;
    }
     /* Ende Inge Test*/
    
    a.nav-button3{ 
        width:100%;
        padding:0px;
        margin:0px;    
    }
   
    /* ######################################################### 
    ############ MAINMENÜ -- dropdown-menue - layer ############
    ###########################################################*/
    .layer.navig {    
        text-align: center;
        width:100%;
        max-height: 100vh;
        overflow: auto;
    }

    .layer.navig.stuck {
        position: fixed;
        top:48px;
        z-index:999;
        width:100%;
    }

    /* ##################################################################### 
    #############  MAINMENÜ Listennavigation - layer / Untermenü ###########
    ######################################################################## */      

    ol.layer-listnav li {       
        padding: 0px 0px 0px 0px;
        height:48px;
        line-height:48px;
        border-bottom: 1px solid #e7eaec; 
    }

    .layer-list-item {
        background-color: #fff;
        color: #41464c;
    }

    .layer-list-item > a {
        color: #41464c !important;
        text-decoration: none;
    }

    .layer-list-item:hover{
        background-color: #ffffff; 
    }

    .layer-list-item:hover > a {
        background-color: #ffffff; 
    }

    
    /* ############################################# 
    ################# layer .popup  #################
    ###############################################*/
      
    /* MENÜ IM LAYER - wie layer-content - Verwendung nur innerhalb von einem popup!! */
    .container-nav-linklist {       
        width: calc(30% - 30px);
    }
    
    /* für zwei zusammenhängende .layer-content // davor .container-nav-linklist mit 20% */
    .container-layer-content{    
        width: 70%;
    }
    
    .popup .layer-content{     
        width: calc(50% - 30px);
    }            
    .popup .layer-content.wide{     
        width: calc(75% - 30px);
    }            
      
    
    
    /* ############################################# 
    #####################  footer ##################
    ############################################### */
    .container-footer{     
        width: 100%;
    }
    
    .column-footer {    
        margin: 0 3% 10px 0;

    }
    
    /* fon und mail*/
/*    a:hover.footer {
        color: #8d919a;
    }*/

    /* hover muss überschrieben werden, da sonst nach klick der hover als aktiv bleibt */    
    ol.simple-linklist-footer li a:hover { 
        color: #ffffff;               
    }

}/* ENDE MEDIA-QUERIES 1080 */




/*-----------------------------------------------------------------*/
/*                       Media-Queries                             */
/*                    Ansicht < als 620px                          */
/*-----------------------------------------------------------------*/

@media screen and (max-width: 620px){ 
    /* #########################################
    ##################### login ################
    ###########################################*/
    .form-holder .form-content {    
    padding: 20px 10px 20px 10px;    
}
    
    
    .epheader-user {
        padding: 0px 4px 0px 4px;
        font-size: 0.9em;
    } 

    /*2025Logoumbau
    .logo-position{ 
        float:none;     
        margin-left:0px;
        margin-right:0px; 
        height:auto;
    }  

    .logo{ 
        float:none; 
        margin-left: auto;
        margin-right: auto;
    }  

    .logo{
        background-image: url(d0e183903e43.aebe45.RGB_green_ebizA_Logo_Schriftzug_solo.svg);
        background-repeat:no-repeat; 
        background-size: 95px 25px;
        width:95px;
        height: 25px;   
    }*/

    /* #########################################
    ############## profilelinks header #########
    ###########################################*/
   
    .epheader-profile { 
/*        width:100%;*/
        margin-top:0px;
        margin-left:0px;
        margin-right:0px;
        justify-content: center;
    } 

    
        
    
    /* ############################################# 
    ################# layer .popup  #################
    ###############################################*/  
    
    /* MENÜ IM LAYER - wie layer-content - Verwendung nur innerhalb von einem popup!! */
    .container-nav-linklist {
        padding: 0px 0px 0px 0px;   
        width:100%;
    }
    
    /* für zwei zusammenhängende .layer-content // davor .container-nav-linklist mit 20% */
    .container-layer-content{    
        width: 100%;
    }
   
    .popup .layer-content{     
         width: calc(100% - 30px);
    } 
    .popup .layer-content.wide{     
         width: calc(100% - 30px);
    } 
    
    
    /* vcard-flex im layer*/
    .layer-vcard-flex {    
        border: none;   
        float: left;
        margin: 0;
        padding: 0px;       
        max-width: 100%;
        min-height: 100%;  
        width: 100%;
    }
            
    
    /* ############################################# 
    #############  layer-footer.popup ##############
    ###############################################*/

    /* INHALT layer-footer.popup */
    .layer-footer-content {    
        padding-bottom: 0px;
    }
    
    .column-footer {  
        margin: 0 0% 3% 0; 
        width:100%;
    }
    
    .vcard-flex.footer {       
        max-width: 100%;
        min-height: 100%;
        width: 100%;
    }
    
}/* ENDE MEDIA-QUERIES 620 */