/*! _grid.css */

/*  B R E A K P O I N T S 


  XS          SM            MD            LG 
  0 - 767px | 768px- 1023 | 1024 - 1179 | 1180 -> 
  0 - 767px | 768px- 1023 | 1024 -> 


*/

:root   {
  
    --section_padding-top-bottom_100: clamp(4rem, calc(2.22rem + 4.74vw), 10rem);
    --section_padding-top-bottom_75: clamp(3.5rem, calc(1.86rem + 4.57vw), 7.5rem);
    --section_padding-top-bottom_50: clamp(3rem, calc(2.16rem + 2.34vw), 6rem);
    --section_padding-top-bottom_25: clamp(1.5rem, calc(1.08rem + 1.17vw), 3rem);

    --section_padding-top-bottom: 0;
    --section_padding-right-left: 0;

    /*  S E C T I O N   P A D D I N G S   SX 
    --section_padding-top_xs: 64px;
    --section_padding-bottom_xs: 64px;

    --section_padding-top_half_xs: 32px;
    --section_padding-bottom_half_xs: 32px;

    --section_padding-right_xs: 15px;
    --section_padding-left_xs: 15px;
  */
  
    /*  S E C T I O N   P A D D I N G S   SM
    --section_padding-top_sm: 96px;
    --section_padding-bottom_sm: 96px;

    --section_padding-top_half_sm: 48px;
    --section_padding-bottom_half_sm: 48px;

    --section_padding-right_sm: 15px;
    --section_padding-left_sm: 15px;
 */
  
    /*  S E C T I O N   P A D D I N G S   MD 
    --section_padding-top_md: 136px;
    --section_padding-bottom_md: 136px;

    --section_padding-top_half_md: 68px;
    --section_padding-bottom_half_md: 68px;

    --section_padding-right_md: 15px;
    --section_padding-left_md: 15px;
*/
  
    /*  S E C T I O N   P A D D I N G S   LG
    --section_padding-top_lg: 136px;
    --section_padding-bottom_lg: 136px;

    --section_padding-top_half_lg: 68px;
    --section_padding-bottom_half_lg: 68px;

    --section_padding-right_lg: 15px;
    --section_padding-left_lg: 15px;

   */


/* noch nicht für Advant aufbereitet *********************************************************************************************/


    /*  R O W   P A D D I N G S   LG */
    /*--row_padding-top: 36px;
    --row_padding-bottom: 36px;

    --row_padding-top_half: 18px;
    --row_padding-bottom_half: 18px;*/

    /*  C O L   M A R G I N S  */
    /*--col_margin-bottom_xs: 36px;
    --col_margin-bottom_sm: 36px;
    --col_margin-bottom_md: 0px;*/


    /*  G A P S  */
    --section_column-gap_xs: 0px;
    --section_column-gap_sm: 24px;
    --section_column-gap_md: 24px;
    --section_column-gap_lg: 24px;
    
    --section_row-gap_xs: 20px;
    --section_row-gap_sm: 20px;
    --section_row-gap_md: 20px;
    --section_row-gap_lg: 20px;

}

.full-height { height: 100vh; }


.section {
  position: relative;   
  padding: var(--section_padding-top-bottom) var(--section_padding-right-left) var(--section_padding-top-bottom) var(--section_padding-right-left);
}

/* noch nicht für Advant aufbereitet *********************************************************************************************/

.section.section_padding-top_75 { padding-top: var(--section_padding-top-bottom_75); }
.section.section_padding-bottom_75 { padding-bottom: var(--section_padding-top-bottom_75); }

.section.section_padding-top_50 { padding-top: var(--section_padding-top-bottom_50); }
.section.section_padding-bottom_50 { padding-bottom: var(--section_padding-top-bottom_50); }

.section.section_padding-top_25 { padding-top: var(--section_padding-top-bottom_25); }
.section.section_padding-bottom_25 { padding-bottom: var(--section_padding-top-bottom_25); }

.section.section_padding-top_none { padding-top: 0px }
.section.section_padding-bottom_none { padding-bottom: 0px }


/*  F O R   T Y P O 3  */

.section.frame-space-before-extra-large { padding-top: var(--section_padding-top-bottom_100); } /* default */
.section.frame-space-after-extra-large { padding-bottom: var(--section_padding-top-bottom_100); }

.section.frame-space-before-large { padding-top: var(--section_padding-top-bottom_75); }
.section.frame-space-after-large { padding-bottom: var(--section_padding-top-bottom_75); }

.section.frame-space-before-medium { padding-top: var(--section_padding-top-bottom_50); }
.section.frame-space-after-medium { padding-bottom: var(--section_padding-top-bottom_50); }

.section.frame-space-before-small { padding-top: var(--section_padding-top-bottom_25); }
.section.frame-space-after-small { padding-bottom: var(--section_padding-top-bottom_25); }

.section.frame-space-before-extra-small { padding-top: 0px }
.section.frame-space-after-extra-small { padding-bottom: 0px }

 


/* C O N T A I N E R */
.container  {
    width: 100%;
    max-width: 1276px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 20px;
}   

/* R O W */
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    /* margin-bottom: 32px; */
}

.row.no-column-gap{
     column-gap: 0;
}

.row.no-row-gap{
    row-gap: 0;
}

.row:last-child {
  margin-bottom: 0;
}

.row.block {
    display: block;
}
.row.flex {
    display: flex;
    flex-wrap: wrap;
    gap: unset;
}

/*
    .row { 
      padding: var(--row_padding-top) 0 var(--row_padding-top) 0;
    }
    .row_padding-top_half { padding-top: var(--row_padding-top_half); }
    .row_padding-top_none {  padding-top: 0px }
  
    .row_padding-bottom_half { padding-bottom: var(--row_padding-top_half); }
    .row_padding-bottom_none { padding-bottom: 0px }
*/
    .vertical-alignment { width: 100%; }
    .vertical-centered { display: flex; align-items: center; }  
    .vertical-bottom { display: flex; align-items: flex-end; }  


/* XS */

@media (min-width: 0px) {
/*
    section { 
      padding: var(--section_padding-top_xs) var(--section_padding-right_xs) var(--section_padding-top_xs) var(--section_padding-left_xs);
    }
    section.section_padding-top_half { padding-top: var(--section_padding-top_half_xs) }
    section.section_padding-bottom_half { padding-bottom: var(--section_padding-bottom_half_xs) }
  
    section.frame-space-before-extra-small { padding-top: 0px }
    section.frame-space-after-extra-small { padding-bottom: 0px }
*/
    .row { 
        column-gap: var(--section_column-gap_xs);
        grid-template-columns: repeat(6, 1fr);
    }
  
    .col-start-xs-1 { grid-column-start: 1; }
    .col-start-xs-2 { grid-column-start: 2; }
    .col-start-xs-3 { grid-column-start: 3; }
    .col-start-xs-4 { grid-column-start: 4; }
    .col-start-xs-5 { grid-column-start: 5; }
    .col-start-xs-6 { grid-column-start: 6; }
    .col-start-xs-7 { grid-column-start: 7; }
    .col-start-xs-8 { grid-column-start: 8; }
    .col-start-xs-9 { grid-column-start: 9; }
    .col-start-xs-10 { grid-column-start: 10; }
    .col-start-xs-11 { grid-column-start: 11; }
    .col-start-xs-12 { grid-column-start: 12; }

    .col-xs-1 { grid-column-end: span 1;}
    .col-xs-2 { grid-column-end: span 2;}
    .col-xs-3 { grid-column-end: span 3;}
    .col-xs-4 { grid-column-end: span 4;}
    .col-xs-5 { grid-column-end: span 5;}
    .col-xs-6 { grid-column-end: span 6;}
    .col-xs-7 { grid-column-end: span 7;}
    .col-xs-8 { grid-column-end: span 8;}
    .col-xs-9 { grid-column-end: span 9;}
    .col-xs-10 { grid-column-end: span 10;}
    .col-xs-11 { grid-column-end: span 11;}
    .col-xs-12 { grid-column-end: span 12;}
/*
    .col-start-xs-1,
    .col-start-xs-2,
    .col-start-xs-3,
    .col-start-xs-4,
    .col-start-xs-5,
    .col-start-xs-6,
    .col-start-xs-7,
    .col-start-xs-8,
    .col-start-xs-9,
    .col-start-xs-10,
    .col-start-xs-11,
    .col-start-xs-12 { margin-bottom: var(--col_margin-bottom_xs); }
*/
    .xs_show { display: inline-block !important; }
    .xs_hide { display: none !important; }    

    .text-left_xs { text-align: left !important; }
    .text-center_xs { text-align: center !important; }
    .text-right_xs { text-align: right !important; }

    .reverse-order_xs { grid-row: 1; } 
  
}

@media (min-width: 576px) {

  /*
    section { 
      padding: var(--section_padding-top_sm) var(--section_padding-right_sm) var(--section_padding-top_sm) var(--section_padding-left_sm);
    }
    section.section_padding-top_half { padding-top: var(--section_padding-top_half_sm) }
    section.section_padding-bottom_half { padding-bottom: var(--section_padding-bottom_half_sm) }
  
    section.frame-space-before-extra-small { padding-top: 0px }
    section.frame-space-after-extra-small { padding-bottom: 0px }
*/  
    .row { 
        column-gap: var(--section_column-gap_sm); 
        grid-template-columns: repeat(12, 1fr);
    }
  
    .col-start-sm-1 { grid-column-start: 1; }
    .col-start-sm-2 { grid-column-start: 2; }
    .col-start-sm-3 { grid-column-start: 3; }
    .col-start-sm-4 { grid-column-start: 4; }
    .col-start-sm-5 { grid-column-start: 5; }
    .col-start-sm-6 { grid-column-start: 6; }
    .col-start-sm-7 { grid-column-start: 7; }
    .col-start-sm-8 { grid-column-start: 8; }
    .col-start-sm-9 { grid-column-start: 9; }
    .col-start-sm-10 { grid-column-start: 10; }
    .col-start-sm-11 { grid-column-start: 11; }
    .col-start-sm-12 { grid-column-start: 12; }

    .col-sm-1 { grid-column-end: span 1;}
    .col-sm-2 { grid-column-end: span 2;}
    .col-sm-3 { grid-column-end: span 3;}
    .col-sm-4 { grid-column-end: span 4;}
    .col-sm-5 { grid-column-end: span 5;}
    .col-sm-6 { grid-column-end: span 6;}
    .col-sm-7 { grid-column-end: span 7;}
    .col-sm-8 { grid-column-end: span 8;}
    .col-sm-9 { grid-column-end: span 9;}
    .col-sm-10 { grid-column-end: span 10;}
    .col-sm-11 { grid-column-end: span 11;}
    .col-sm-12 { grid-column-end: span 12;}
/*
    .col-start-xs-1,
    .col-start-xs-2,
    .col-start-xs-3,
    .col-start-xs-4,
    .col-start-xs-5,
    .col-start-xs-6,
    .col-start-xs-7,
    .col-start-xs-8,
    .col-start-xs-9,
    .col-start-xs-10,
    .col-start-xs-11,
    .col-start-xs-12 { margin-bottom: var(--col_margin-bottom_sm); }  
*/
    .col-start-sm-1.vertical-centered,
    .col-start-sm-2.vertical-centered,
    .col-start-sm-3.vertical-centered,
    .col-start-sm-4.vertical-centered,
    .col-start-sm-5.vertical-centered,
    .col-start-sm-6.vertical-centered,
    .col-start-sm-7.vertical-centered,
    .col-start-sm-8.vertical-centered,
    .col-start-sm-9.vertical-centered,
    .col-start-sm-10.vertical-centered,
    .col-start-sm-11.vertical-centered,
    .col-start-sm-12.vertical-centered { display: flex; align-items: center; }     
  
    .sm_show { display: inline-block !important; }
    .sm_hide { display: none !important; }    
  
    .text-left_sm { text-align: left !important; }
    .text-center_sm { text-align: center !important; }
    .text-right_sm { text-align: right !important; }

    .reverse-order_sm { grid-row: 1; } 
  
}

@media (min-width: 992px) {

    /*
    section { 
      padding: var(--section_padding-top_md) var(--section_padding-right_md) var(--section_padding-top_md) var(--section_padding-left_md);
    }
    section.section_padding-top_half { padding-top: var(--section_padding-top_half_md) }
    section.section_padding-bottom_half { padding-bottom: var(--section_padding-bottom_half_md) }
  
    section.frame-space-before-extra-small { padding-top: 0px }
    section.frame-space-after-extra-small { padding-bottom: 0px }
*/
    .row { column-gap: var(--section_column-gap_md) }
  
    .col-start-md-1 { grid-column-start:1;}
    .col-start-md-2 { grid-column-start:2;}
    .col-start-md-3 { grid-column-start:3;}
    .col-start-md-4 { grid-column-start:4;}
    .col-start-md-5 { grid-column-start:5;}
    .col-start-md-6 { grid-column-start:6;}
    .col-start-md-7 { grid-column-start:7;}
    .col-start-md-8 { grid-column-start:8;}
    .col-start-md-9 { grid-column-start:9;}
    .col-start-md-10 { grid-column-start:10;}
    .col-start-md-11 { grid-column-start:11;}
    .col-start-md-12 { grid-column-start:12;}
    
    .col-md-1 { grid-column-end: span 1;}
    .col-md-2 { grid-column-end: span 2;}
    .col-md-3 { grid-column-end: span 3;}
    .col-md-4 { grid-column-end: span 4;}
    .col-md-5 { grid-column-end: span 5;}
    .col-md-6 { grid-column-end: span 6;}
    .col-md-7 { grid-column-end: span 7;}
    .col-md-8 { grid-column-end: span 8;}
    .col-md-9 { grid-column-end: span 9;}
    .col-md-10 { grid-column-end: span 10;}
    .col-md-11 { grid-column-end: span 11;}
    .col-md-12 { grid-column-end: span 12;}

/*
    .col-start-xs-1,
    .col-start-xs-2,
    .col-start-xs-3,
    .col-start-xs-4,
    .col-start-xs-5,
    .col-start-xs-6,
    .col-start-xs-7,
    .col-start-xs-8,
    .col-start-xs-9,
    .col-start-xs-10,
    .col-start-xs-11,
    .col-start-xs-12 { margin-bottom: var(--col_margin-bottom_md); }  
*/

    .col-start-md-1.vertical-centered,
    .col-start-md-2.vertical-centered,
    .col-start-md-3.vertical-centered,
    .col-start-md-4.vertical-centered,
    .col-start-md-5.vertical-centered,
    .col-start-md-6.vertical-centered,
    .col-start-md-7.vertical-centered,
    .col-start-md-8.vertical-centered,
    .col-start-md-9.vertical-centered,
    .col-start-md-10.vertical-centered,
    .col-start-md-11.vertical-centered,
    .col-start-md-12.vertical-centered { display: flex; align-items: center; }     
  
    .md_show { display: inline-block !important; }
    .md_hide { display: none !important; }    
  
    .text-left_md { text-align: left !important; }
    .text-center_md { text-align: center !important; }
    .text-right_md { text-align: right !important; }

}


@media (min-width: 1200px) {

    /*
    section { 
      padding: var(--section_padding-top_lg) var(--section_padding-right_lg) var(--section_padding-top_lg) var(--section_padding-left_lg);
    }
    section.section_padding-top_half { padding-top: var(--section_padding-top_half_md) }
    section.section_padding-bottom_half { padding-bottom: var(--section_padding-bottom_half_md) }
  
    section.frame-space-before-extra-small { padding-top: 0px }
    section.frame-space-after-extra-small { padding-bottom: 0px }
    */

    .row { column-gap: var(--section_column-gap_lg) }
  
    .col-start-lg-1 { grid-column-start:1;}
    .col-start-lg-2 { grid-column-start:2;}
    .col-start-lg-3 { grid-column-start:3;}
    .col-start-lg-4 { grid-column-start:4;}
    .col-start-lg-5 { grid-column-start:5;}
    .col-start-lg-6 { grid-column-start:6;}
    .col-start-lg-7 { grid-column-start:7;}
    .col-start-lg-8 { grid-column-start:8;}
    .col-start-lg-9 { grid-column-start:9;}
    .col-start-lg-10 { grid-column-start:10;}
    .col-start-lg-11 { grid-column-start:11;}
    .col-start-lg-12 { grid-column-start:12;}
    
    .col-lg-1 { grid-column-end: span 1;}
    .col-lg-2 { grid-column-end: span 2;}
    .col-lg-3 { grid-column-end: span 3;}
    .col-lg-4 { grid-column-end: span 4;}
    .col-lg-5 { grid-column-end: span 5;}
    .col-lg-6 { grid-column-end: span 6;}
    .col-lg-7 { grid-column-end: span 7;}
    .col-lg-8 { grid-column-end: span 8;}
    .col-lg-9 { grid-column-end: span 9;}
    .col-lg-10 { grid-column-end: span 10;}
    .col-lg-11 { grid-column-end: span 11;}
    .col-lg-12 { grid-column-end: span 12;}


    .col-start-lg-1.vertical-centered,
    .col-start-lg-2.vertical-centered,
    .col-start-lg-3.vertical-centered,
    .col-start-lg-4.vertical-centered,
    .col-start-lg-5.vertical-centered,
    .col-start-lg-6.vertical-centered,
    .col-start-lg-7.vertical-centered,
    .col-start-lg-8.vertical-centered,
    .col-start-lg-9.vertical-centered,
    .col-start-lg-10.vertical-centered,
    .col-start-lg-11.vertical-centered,
    .col-start-lg-12.vertical-centered { display: flex; align-items: center; }      
  
    .lg_show { display: inline-block !important; }
    .lg_hide { display: none !important; }  
  
    .text-left_lg { text-align: left !important; }
    .text-center_lg { text-align: center !important; }
    .text-right_lg { text-align: right !important; }
  
}