/* =============================================================================
   Typography
   ========================================================================== */
   
/* ROOT TEXT */
html              { font-size: 19px; }

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

/* TEXTE */
.ch_title         { font-size: 2.0rem; }  /* Title */    
.ch_intro         { font-size: 1.1rem; }  /* Intro */
.ch_text          {  }                    /* Fließtext */
.ch_rubrictitle   { font-size: 0.6rem; }  /* Rubrikentitel */
.ch_bt_label      { font-size: 0.8rem; }  /* Button Label */   





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

/* NAVIGATION */
.linknav          { font-size: 1.3rem; line-height: 1.2; text-decoration: unset; }
.linknav.sub      {  }
.linknav.active   { border-bottom: 3px solid var(--color2); }




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


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



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

#navbar{
   padding:    0; /* reset */
   padding:    25px 0 15px var(--pagemargin);


/*   right:  0 !important;
   padding-right:  0 !important;*/


}
   /* LOGO */
   #navbar .lrg-logo,
   #navbar .sml-logo {
      /*transform-origin: top left;
      transform:        scale(0.7);*/

      width:      165px;
      height:     30px;
      border:     solid transparent; /* Hack */
   }

   /* EMERGENCY BUTTON */
   #navbar .bt_emergency {
      position:      relative;
      display:       inline-block;
      float:         right;
      padding-top: 5px;
      /*padding-right: 30px;*/
   }
      #navbar .bt_emergency .button {
         position:         relative;
         display:          inline-block;
         padding:          2px 5px 2px 10px !important;
      }
      #navbar .bt_emergency .button span {
         padding-right: 5px;  
      }
      #navbar .bt_emergency .button span:after {
         display:       none;
         padding-right: 5px;
      }

   /* BURGER */
   #navbar .bt_burger {
      top:              2px;                 /* hack */
      right:            var(--pagemargin);   /* hack */
      transform-origin: top right;
      transform:        scale(0.5);
   }


   /* MENU */
   #navbar .menu {
      left:       0;       /* reset */
      width:      89.5vw;  /* reset */
   }
      #navbar .menu .row2{
         grid-column: span 3;
      }
      #navbar .menu .contact{
         display:  none;
      }



/*-------------------------------*/
/*        HERO FULLSCREEN        */
/*-------------------------------*/


.hero-start{   
}
   /* BRANDICON */
   .hero-start .brandicon{ 
      /* 1/2 of height in pixels */
      width:      190px;
      height:     190px;
      top:        calc(90vh - 95px - 9px);
   }
   /* IMAGE */
   .hero-start .imagebox{  
      height:     90vh;
   }
      /* TITLE */
      .hero-start .imagebox .titlebox {
         display: none;
      }


/* TITLE (MOBILE) */
.hero-start .txt-intro .titlebox {
   width: 100%;
}
   .hero-start .txt-intro h1{
      width: 50%;
                                          /*border:  solid 1px #2FC3C1;*/
   }

/* INTRO */
.hero-start .txt-intro .txt {
   width:      80%;
}





/*-------------------------------*/
/*             TEASER            */
/*-------------------------------*/

.teaser-group{
}
   /* TEASER */
   .teaser-group .teaser {
       display: inline-block !important; /* Deaktivieren des Flexbox-Layouts */
   }
      .teaser-group .teaser.box{
         grid-column:   span 6;
         display:       flex;
      }
         /* IMAGE */
         .teaser-group .teaser .img  {
            width:      50%;
            display:    inline-block;
            float:      left;
         }
            /* SQUARE 1:1 
            .teaser-group .teaser .img.ratio-3-2 {
               aspect-ratio: 1 / 1; 
            }
            /*fallback
            @supports not (aspect-ratio: 1 / 1) {
               .teaser-group .teaser .img.ratio-3-4 {       
                  width:         100%;
                  padding-top:   100%;
               }
            }*/

         /* TEXT */
         .teaser-group .teaser .txt{
            width:      50%;
            height:     100%;
            display:    inline-block;
            float:      left;
            padding:    5%;
         }




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

#footer {
   height: auto;
}
   /* CLAIM */
   #footer .claim{  
      grid-column:      span 2 !important; 
   }
   /* BRANDICON */
   #footer .brandicon{ 
      grid-column:      span 2 !important; 
      height:           100px;

   }

   #footer .contact {
      padding-right:    40%;
      padding-bottom:   20vh;
   }
   /* SOCIAL & IMPRINT */
   #footer .social {
      padding-bottom:      20px;
   }
      .social i {
         transform-origin:    top left;
         transform:           scale(0.9);
         margin-right:        7px;
      }
   #footer .imprint {
      display:          initial;
      align-items:      normal;
      justify-content:  normal;
      height:           auto;

      text-align: left;
   }
      #footer .imprint a{
         padding-left:  0;
         padding-right: 20px;
      }








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


/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*      GRID: 6-SPALTIG          */
/*-------------------------------*/

/* GRID  */
.grid-4,
.grid-6 {  }

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

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

      /* SPAN (only from pos 1)*/
      .grid-4 .box.span-2, 
      .grid-4 .box.span-3,
      .grid-4 .box.span-4 { grid-column: span 4 !important; }

      /* COLUMN POSTION */
      .grid-4 .box.center-span-2 { grid-column: span 4 !important;  }


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

   /* BOX */
   .grid-6 .box {  }

      /* COLUMN POSTION */
      .grid-6 .box.center-span-4,
      .grid-6 .left-span-2 { grid-column: span 6 !important; }

      /* COLUMN SPAN */
      .grid-6 .box.span-3, 
      .grid-6 .box.span-4 { grid-column: span 6 !important; }



/* 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 {
   transition:    none;
   padding:       6px 10px 6px 15px;
   border:        0.2em solid var(--color2);
}
   .button span {
      padding-right: 25px;
   }
   .button span:after {
      transition:    none;
      transform:     scale(1.6);
      opacity:       1;
      padding-right: 20px;
      top:           0;
      right:         -20px;
   }
   .button:hover span {
      padding-right: 25px;
   }

/* BUTTON INVERS */
.button.invers {
   border:  solid 0.2em #FFF;
}
   /* HOVEREFFECT */
   .hover-teaser span,
   .button:hover span,
   .button-boarder:hover span,
   .button-light:hover span {
      padding-right: -20px;
   }

   .hover-teaser span:after,
   .button:hover span:after,
   .button-boarder:hover span:after,
   .button-light:hover span:after {
      right:   -20px;
   }