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

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

/* TEXTE */
.ch_title         { font-size: 1.8rem; }  /* Title */ 
.ch_intro			{ font-size: 0.9rem; line-height: 1.5; }	/* Intro */
.ch_notes,
.ch_notes_title	{ font-size: 0.8rem; line-height: 1.8; letter-spacing: 0.05em; text-decoration: none }			/* Marginalien */




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



/*-------------------------------*/
/*            HEADER             */
/*-------------------------------*/

#header{
   padding:          4vw;
}
   #header .lrg-logo,
   #header .sml-logo,
   #header .status{
      width:         152px;
      min-width:     25px;
      height:        25px;
   }
   #header .lrg-logo {
      background-image: url('../images/levo-legal_logo.png');
   }
   #header .lrg-logo.invers{
      background-image: url('../images/levo-legal_logo_white.png');
   }


   #header .bt_back{
      width:         30px;
      height:        40px;
   }
   #header .status.invers{
      color: #FFF;
   }





/*-------------------------------*/
/*            SECTIONS           */
/*-------------------------------*/

.cd-content {
   width:      92vw;
   padding:    17vh 4vw 0 4vw;
   /*border:   solid 1px #0F0;*/
}

#section1 { padding: 0; min-height: 95vh;}
#section2 { }
#section3 { }
#section4 { }
#section5 { }




/*-------------------------------*/
/*            CONTENT            */
/*-------------------------------*/

/* START */
#section1 { 
   display:        flex;   /* sicherstellen */
   flex-direction: column; /* untereinander */
}
   #section1 .left,
   #section1 .right{
      margin-right:  0;
      width:         100%;
   }

   /* LEFT */
   #section1 .left{
      height:     100vh;
      order:      2; /* Text danach */
   }
      #section1 .left .textbox {
         position:      relative;
         width:         calc(100% - 19vw);

         margin-top:    12vh;
         margin-left:   4vw;
         margin-right:  12vw;
         margin-bottom: 20vh;
      }

   /* RIGHT */
   #section1 .right{ 
      height:        80vh; 
      order:   1; /* Bild zuerst */
      background-position-y: 30% !important;
   }



/* FOOTER */

#footer{
   position:         relative;
   right:            0;
   width:            100%;
   padding-left:     6vw;
   padding-bottom:   4vh;
   float:            left;
}
   @media ( max-height: 400px ) {
      #footer {
         margin-top: 20%;
      }
   }


   #footer .links{
      float:   right;
      color:   var(--color1);
                                                      /*border: solid 1px #F00;*/
   }
   #footer span{
      padding-right: 20px;
   }


/* HERO, TITLE */
#hero { 
   padding-top: 15vh;
/*                                                       border: solid 1px #F00;*/
}




/*-------------------------------*/
/*        NEWSLETTER FORM        */
/*-------------------------------*/

.newsletter { 
   max-width:  80%; 
}
.cr_form input[type="email"] {
   width: 60%;
}




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

/* COLUM */
.col     { margin-right: 0; }             /* Block mit Abstand */

/* WIDTH */
.s1         { width: 100%; }                 /* Block 1-spalte breit */
.s2         { width: 100%; }                 /* Block 2-spalten breit */
.s1-3       { width: 100%; }                 /* Block 1/3-spalten breit */

.s3         { width: 100%; display: table; } /* Block 3-spalten breit */


/* POSITION */
.s1-center, 
.s2-center,
.s3-center { width: 85%; margin-right: 7.5%;  margin-left: 7.5% }

.s1-space   { width: 100%; margin-right: 0; }      /* Block 1-spalte breit, rechts leer */
.s2-space   { width: 100%; margin-right: 0; }      /* Block 2-spalten breit, rechts leer */