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

@media screen and (max-width: 1080px){
    /* ###########################################################
    ###################### Elemente ausblenden ###################
    ############################################################## */
    .themev3 .no-display-1080{
        display:none;
    }
    
    
    /* show weekline in tno on smaller than desktop resolutions */
    .themev3 .weekline {
        display: inherit;
    }

    /* ###########################################################
    ######################      Table-div      ###################
    ############################################################## */
    .themev3 .table.lesspadding div div {
        padding: 1px 0px;
    }
    
    
    /* ###########################################################
    ############## V3 LINKLIST  / V3 SIMPLE LINKLIST #############
    ############################################################## */
             
    /* hover muss überschrieben werden, da sonst nach klick der hover als aktiv bleibt */    
    .themev3 ol.linklist li > a:active,
    ol.simple-linklist li > a:active {
        color: #41464c;      
    }
    
    .themev3 ol.linklist li > a:hover,
    ol.simple-linklist li > a:hover {
        color: #41464c;      
    }
    
/*    .list-item:hover{    
        background-color: transparent;
    } */
    

    /* höhe auf ca. 42px über padding  und neue position für icon */ 
    .themev3 ol.linklist li > a::before,
    ol.simple-linklist li > a::before {        
        top: .85em;
    }
        
    .themev3 ol.linklist li > a{       
        padding: 12px 5px 12px 20px;       
    }

    .themev3 ol.simple-linklist li > a{ 
        padding: 12px 5px 12px 20px;
    }
    
    
    /* ###################      V3      ########################
    ###################### NAV-LINKLIST ########################
    ########################################################### */
    
    /* höhe auf ca. 42px über padding und neue position für icon */ 
    .themev3 ol.nav-linklist li a::after {     
        top: .85em;
        right:5px;
    }
        
    .themev3 ol.nav-linklist li a{
        padding: 12px 20px 12px 0px;
    }
        
    /* *** STYLE FIX *** */
    .themev3 ol.nav-linklist li a.back::after {
        display: block;
      
    }
    
     
    /* hover muss überschrieben werden, da sonst nach klick der hover als aktiv bleibt */   
/*    ol.nav-linklist li a:active{
        color:#41464c;
    } */
   
    /* ###################      V3      ########################
    #######################   listnav   ########################
    ########################################################### */
/*    .themev3 ol.listnav li > a:first-child{               
         width: 30px; 
         min-height: 30px; 
         
    }*/

    .themev3 ol.listnav li > a:nth-child(n){       
        width: 30px; 
        min-height: 30px;      
    }
   
    
   /* ###################      V3      ########################
    #####################   simplelist   ######################
    ########################################################### */   
    .themev3 ol.simplelist > li > :nth-child(n){           
        min-width: 30px; 
        min-height: 30px;        
    }
    

           
    /* ###################      V3      ########################
    ####################### flat-button ########################
    ########################################################### */
    
    .themev3 .pagemenu .reframe .flat-button {       
/*       min-width: calc(100% - 15em - 6px);*/
       min-width: auto;
    }    
    
    /* ###################      V3      ########################
    #######################    GRID   ##########################
    ########################################################### */   
        
    .themev3 .reframe {
        display: grid;
        display: -ms-grid;
        grid-template-columns: 1fr 1fr;    

        -ms-grid-columns: repeat(2, 1fr);
        -ms-grid-columns: 20fr 1fr 20fr;

        grid-gap: 20px 20px;
    }
    
    
    .themev3 .reframe.nogap-1080 {
        grid-gap: 0px 0px;
    }
           
    /* 2 Spalten */
    .themev3 .col-1-2 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row:1;
    }

    .themev3 .col-2-2 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row:2;
    }
    
    /* remove top border from right column */
    .themev3 .col-2-2 .table div.border > div {
        border-top: none;
    }
    
    .themev3 .col-1-2-pagemenu {
        grid-column: 1 / 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row:1;
    }

    .themev3 .col-2-2-pagemenu {
        grid-column: 2 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row:1;
    }

    /* 4 Spalten */
    .themev3 .col-1-4 {
        grid-column: 1 / 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;    
    }

    .themev3 .col-2-4 {
        grid-column: 2 / 3;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
    }

    .themev3 .col-3-4 {
        grid-column: 1 / 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
    }

    .themev3 .col-4-4 {
        grid-column: 2 / 3;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
    }
               
 
    /******************************************************************
    ******************  flex-container - flex-item-300  ***************
    *******************************************************************/
     .themev3 .flex-item-300 {
/*        width: 45%; */
        width:calc(50% - 40px);
    }
    
    /******************************************************************
    ***********  flex-container - flex-item-widget für Startseite *****
    *******************************************************************/
    .themev3 .flex-item-widget {    
        width:calc(50% - 22px);
    }
    
    
           
    /******************************************************************
    ****************************** vcard-flex **************************
    *******************************************************************/
    .themev3 .vcard-flex-full{
        min-height: auto;
    }
    
    
    /** selectbox **/
    .themev3 div.selectbox {
        display: none;
    }

    .themev3 select.selectbox, .themev3 select,
    .themev3 select.selectbox:not(.ui-datepicker-month):not(.ui-datepicker-year),
    .themev3 select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
        display: inline-block;
    }
    
} /* ENDE MEDIA-QUERIES 1080 */



    



/*-----------------------------------------------------------------*/
/*                       Media-Queries                             */
/*                    Ansicht < als 620px                          */
/*-----------------------------------------------------------------*/
@media screen and (max-width: 620px){ 
    /* ###########################################################
    ###################### Elemente ausblenden ###################
    ############################################################## */
    .themev3 .no-display-620{
        display:none;      
    }
    .themev3 .display-620{
        display:inherit;
    }
    
    /* ###################      V3      ########################
    ###################### NAV-LINKLIST ########################
    ########################################################### */
    .themev3 ol.nav-linklist li a::after {     
        top: .85em;
        right:1em;
    }
    
    /* padding-left auf 15 */ 
    .themev3 ol.nav-linklist li a{
        padding: 12px 30px 12px 15px;
    }
    
    /*  ZURÜCK PFEIL */
    .themev3 ol.nav-linklist li a.back::after {    
        display:block;
    }
    
    .themev3 ol.nav-linklist li a.back{
        padding: 10px 30px 10px 15px;/* oben und unten 10px, da kein Textinhalt */
        display:block;
    }
    
       
    
    /* ###################      V3      ########################
    ############### label über den formularen ##################
    ########################################################### */
    
    .themev3 label { 
    display: block;         
    } 
    
    .themev3 ol.form.label-left-2 label,
    .themev3 ol.form.label-left-5 label,
    .themev3 ol.form.label-left-10 label,
    .themev3 ol.form.label-left-15 label,
    .themev3 ol.form.label-left-20 label,
    .themev3 ol.form.label-left-25 label,
    .themev3 ol.form.label-left-30 label {
        width: 100%;
        margin:0px;
    }
    
    /* ###################      V3      ########################
    ####################### flat-button ########################
    ########################################################### */
    
    .themev3 .flat-button {       
        width: 100%;
        margin: 5px 0px 5px 0px;        
    }
        
    /* button-mini */
    .themev3 .flat-button.button-mini {    
        width:calc(15em + 10px);      
    }

    /* ###################      V3      ########################
    ####################### pagemenu    ########################
    ########################################################### */
    
    div.themev3.pagemenu .pull-right {              
        float:none;
    }
    
    .themev3.pagemenu .reframe .pull-right {
        width: 100%;
    }
       
    /* ###################      V3      ########################
    #######################    GRID   ##########################
    ########################################################### */
    .themev3 .reframe {        
        grid-gap: 20px 20px;
        -ms-grid-columns: repeat(1, 1fr);
        -ms-grid-columns: 1fr;        
    }
            
    
    /* 2 Spalten */
    .themev3 .col-1-2 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:1;
        }

    .themev3 .col-2-2 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
    }
    
    .themev3 .col-1-2-pagemenu {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:1;
    }

    .themev3 .col-2-2-pagemenu {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
    }
    
     /* 4 Spalten */
    .themev3 .col-1-4 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;  
        -ms-grid-row:1;
    }

    .themev3 .col-2-4 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
    }

    .themev3 .col-3-4 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:3;
    }

    .themev3 .col-4-4 {
        grid-column: 1 / 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row:4;
    }
    
    /******************************************************************
    *******   flex-container - flex-item-300 / flex-item-basic  *******
    *******************************************************************/
     .themev3 .flex-item-300 {
        width:calc(100% - 20px);
        margin: 0px 0px 10px 0px;
    }
    
    .themev3 .flex-item-basic {
       width:calc(100% - 20px);
        margin: 0px 0px 10px 0px;
    }
    
    /* meine Auszubildenden - pagemenu */
    .themev3 div.person.flex-item-basic {
        width:100%;
        margin: 0px 0px 5px 0px;
    }
    
    div.themev3.pagemenu.pagemenu-person,
    .themev3 div.pagemenu.pagemenu-person {
    max-height:95px;
    
}
    
    .themev3 .flex-item-dummypic {
        width:calc(100% - 20px);
        margin: 0px 0px 10px 0px;
    }
        
    /******************************************************************
    ***********  flex-container - flex-item-widget für Startseite *****
    *******************************************************************/
    .themev3 .flex-item-widget {    
        width:100%;
    }
    
    
    /******************************************************************
    ****************************** vcard-flex **************************
    *******************************************************************/
    .themev3 .vcard-flex{
       width:calc(100% - 20px);
       margin: 0px 0px 10px 0px;
    }
    
    
    
    /******************************************************************
    ****************************** nav-pill  **************************
    *******************************************************************/
    .themev3 a.nav-pill {
       width: calc(100% - 10px);
       margin: 5px 0px 5px 0px;
    }
    
    
    .themev3 .flex-container a.nav-pill {
       width: auto;
       margin: 5px 10px 5px 0px;     
    }
    
    .themev3 .offset-pagenav{
        position: relative;
        bottom: 110px;
    }

    
    
    
}/* ENDE MEDIA-QUERIES 620 */



/* Das Ausblenden von Inhalten auf Smartphones wird etwa durch den folgenden Code realisiert: */

@media (max-width: 620px) {
    .hideOnMobile {
        display: none !important;
    }
}