/* =============================================================================
   Typography
   ========================================================================== */
   

/* ROOT TEXT */
html              { font-size: 18px; letter-spacing: 0.01em;}


/* HEADLINES */
h1                { font-size: 2.1rem; }  /* Seitentitel */ 
h2                { font-size: 1.6rem; }  /* Rubrikentitel */ 
h3                { font-size: 1.2rem; }  /* Absatztitel */ 


/* TEXTE */
.ch_fact          { font-size: 3.0rem; }  /* Fact, Number */
.ch_intro         { font-size: 1.3rem; }  /* Intro */
.ch_rubrictitle   { font-size: 0.6rem; }  /* Rubrikentitel */
.ch_bt_label      { font-size: 0.8rem; }  /* Button Label */   



/* =============================================================================
   Links
   ========================================================================== */

/* NAVIGATION */
.linknav          { font-size: 0.7rem; line-height: 1.2rem; text-decoration: unset; }





/* =============================================================================
   Embedded Content
   ========================================================================== */


/*-------------------------------*/
/*             PAGE              */
/*-------------------------------*/

/* PADDING */
:root {
   --pagemargin:  3vw;     /* padding left & right */
}



/*-------------------------------*/
/*             NAVBAR            */
/*-------------------------------*/

#navbar {
   padding:    10px var(--pagemargin) 15px var(--pagemargin);
}
   /* LOGO */
   .lrg-logo,
   .sml-logo {
      bottom:     6vh;
   }




/*-------------------------------*/
/*          HERO MASTER          */
/*-------------------------------*/

.hero {
   padding-bottom:   7vh !important;
}
      .hero .border {
         height:     81vh;
      }


   /*-------------------------------*/
   /*           HERO 1-2            */
   /*           HERO TEXT           */
   /*-------------------------------*/

   .hero.template-1-2 .border.line1 {
   }
      .hero.template-1-2 .txt {
      }
      .hero.template-1-2 .image,
      .hero.template-text .image{
         height:     81vh;    
      }


   /*-------------------------------*/
   /*       HERO 1-3 (Projekte)     */
   /*-------------------------------*/

   .hero.template-1-3 .grid-3{
      grid-template-columns: repeat(2, 1fr);
   }
      .hero.template-1-3 .txt {
         padding-right: 5%;
      }
         .hero.template-1-3 .txt p {
            display: none;
         }


      .hero.template-1-3 .teaser1{

      }
      .hero.template-1-3 .teaser2{
         display: none;
      }

   .hero.template-1-3 .border.line1 {
      left: 50%;
   }
   .hero.template-1-3 .border.line2 {
      display: none;
   }



/*-------------------------------*/
/*       TEXT COL 1 (1-2)        */
/*-------------------------------*/

.txt-1col-1-2 .box { 
   grid-column: span 8 !important;
}




/*-------------------------------*/
/*       TEASER GROUP (1-3)      */
/*       IMAGE + TEXTE           */
/*-------------------------------*/

.teaser-group-3 { 
   
}
   /* TEASER */
   .teaser-group-3 .teaser{
      /* same hight for all boxes */
      display:          flex;
      flex-direction:   column;
      flex:             1;                                          
   }

      /* LINE */
      .teaser-group-3 .teaser hr  {
         margin-bottom:    15px;
         border-bottom:    1px solid black;
      }

      /* TEASER */
      .teaser-group-3 .teaser .txt {  
         
      }










/*-------------------------------*/
/*           LOGO WALL           */
/*-------------------------------*/

.image-logowall { 
}
   .image-logowall .logo {
   }
      .image-logowall .logo .img {
         margin-bottom:    0;
         border-bottom:    1px solid var(--color5);
      }
      .image-logowall .logo .ch_notes {
         display: none;
      }






/*-------------------------------*/
/*           NUMBER WALL         */
/*-------------------------------*/

.text-numberwall { 
}
   .text-numberwall .box {                                                                            
   }
      .text-numberwall .title,
      .text-numberwall .fact {
      }
         .text-numberwall .title {
            border-bottom:    1px solid var(--color5);
         }





/*-------------------------------*/
/*          ACCORDION            */
/*-------------------------------*/

.accordions {  }
   .accordions .acc { 
      border-top: 1px solid black;
   }
      /* Füge nur der letzten Box eine untere Linie hinzu */
      .accordions .acc:last-child {
          border-bottom: 1px solid black;
      }
      .accordions .acc li {
         padding-bottom: 0;
      }
      /* BOX */
      .accordions .acc_ctrl { 
         padding: 3% 0 2% 0;
      }

         /* ICON */
         .accordions .acc_ctrl:before,
         .accordions .acc_ctrl:after{
            margin-right:  2px;
            height:        2px;
            top:           50%;
            width:         22px;

         }
      /* PANEL */
      .accordions .acc_panel {
         padding: 2% 0 6% 0;
      }





/*-------------------------------*/
/*            FOOTER             */
/*-------------------------------*/

#footer { 
}
   #footer .imprint {
       padding-top:      0;
   }







/* =============================================================================
   CHANGE: BASE and ADDONS
   ========================================================================== */


/*-------------------------------*/
/*      GRID: 3-SPALTIG          */
/*      GRID: 8-SPALTIG          */
/*-------------------------------*/

/* GRID  */
.grid-8,
.grid-3 {  }

/* 8-COLUMN GRID  */
.grid-8 {  }

   /* BOX */
   .grid-8 .box { grid-column: span 4; }

      /* COLUMN POSTION */

      /* COLUMN SPAN */
   


/* 3-COLUMN GRID  */
.grid-3 {  }

   /* BOX */
   .grid-3 .box { 
      grid-column: span 1; 
   }

   /* SPAN */
   .grid-3 .box.span-2 {  }
   .grid-3 .box.span-3 { grid-column: span 3; }



/* BLOC GAPS */
.gap-0-25-top     { padding-top:      6px; }
.gap-0-25-bottom  { padding-bottom:   6px; }
.gap-0-5-top      { padding-top:     12px; }
.gap-0-5-bottom   { padding-bottom:  12px; }
.gap-0-75-bottom  { padding-bottom:  20px; }
.gap-1-top        { padding-top:     25px; }
.gap-1-bottom     { padding-bottom:  25px; }
.gap-2-top        { padding-top:     50px; }
.gap-2-bottom     { padding-bottom:  50px; }
.gap-3-top        { padding-top:     75px; }
.gap-3-bottom     { padding-bottom:  75px; }
.gap-4-top        { padding-top:    100px; }
.gap-4-bottom     { padding-bottom: 100px; }




/*-------------------------------*/
/*           BUTTONS            */
/*-------------------------------*/


/* BUTTON DEFAULT */
button { }
   button .arrow {  }
   button .arrow::before {
      top:     7px; /* feintuning */
   }



/*-------------------------------*/
/*       OWL SLIDESHOW           */
/*-------------------------------*/

/* SLIDE  */
.owl-theme .bg-image{ 
   height: 82vh !important;
}
   .owl-theme .owl-dots .owl-dot span {
      width:          35px !important;
      height:         3px !important;
      margin-left:    10px !important;
   }