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

/* ROOT TEXT */
html 				{ font-size: 20px; line-height: 1.5; letter-spacing: 0.03em;}

/* HEADLINES */
h1 				{ font-size: 3.2rem; line-height: 1.1; }																		/* Seitentitel */ 
h2 				{ font-size: 0.8rem; line-height: 1.4; letter-spacing: 0.15em; text-transform: uppercase;}	/* Rubrikentitel */
h3 				{ font-size: 1.0rem; line-height: 1.4; padding-bottom: 5px; }											/* Absatztitel */ 


/* TEXTE */
.ch_title 		{ font-size: 3.2rem; line-height: 1.1; }	/* Title */		
.ch_intro		{ font-size: 1.3rem; 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 */



/* =============================================================================
   Links
   ========================================================================== */
   
/* NOTES */
.linknotes		{  }		/*Marginalien*/

/* NAVIGATION */
.linknav			{ font-size: 12pt; line-height: 1.2; }			/*Navigation*/



/* =============================================================================
   Buttons
   ========================================================================== */

/* BUTTONLABEL */
.ch_bt_label	{ font-size: 0.8rem; }	

   

/* =============================================================================
   Other Elements
   ========================================================================== */



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




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

#header{
	position: 			fixed;
	width: 				100%;
	height: 				auto;
	padding: 			3vw;
	z-index: 			1001;

																		/*border: solid 1px #00F;*/
}
	#header .lrg-logo,
	#header .sml-logo,
	#header .bt-notruf{
		display: 			inline-block;
		width: 				275px;
		height: 				45px;
		vertical-align:	top;
		
		background-size: 		auto 100%;
		background-position:	left bottom;
	   background-repeat:	no-repeat;
																		/*border: solid 1px #F00;*/
	}
	#header .lrg-logo{
		background-image:	url('../images/a+t-guppe_logo.png');
	}
	#header .lrg-logo.invers{
		background-image:	url('../images/a+t-guppe_logo-invers.png');
	}
	#header .sml-logo{
	   background-image:	url('');
		background-position:0 bottom;
	}
	#header .sml-logo-white{
	   background-image:	url('');
		background-position:0 bottom;
	}
	#header .bt-notruf{
		float: 		right;
		text-align: right;
	}
	#header .bt_back{
		display: 				inline-block;

		float: 					right;
		width: 					30px;
		height: 					45px;
		
		background: 			url("../images/bt_back.svg");
		background-size: 		auto 30px;
		background-position:	right bottom;
	   background-repeat:	no-repeat;
		
																		/*border: solid 1px #F00;*/
	}


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

.cd-section {
  	position:	relative;
}
.cd-content {
  	position:	relative;
  	width: 		70vw;
	padding: 	20vh 15vw 0 15vw;
	float: 		left;
																		/*border: solid 1px #0F0;*/
}

#section1 { padding: 0; min-height:	100vh; }




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


/* ICON PLUS */
#plus{
	position:		absolute;
	width:			20vh;
	height:			20vh;
	top: 				3vw;
	right: 			3vw;
	float: 			right;

	background-image: url('../images/a+t-plus.png');
	background-size: 		auto 100%;
	background-position:	left bottom;
   background-repeat:	no-repeat;

	z-index: 		1004;
																		/*border: solid 1px #F00;*/
}


/* START */
#section1 { }
	#section1 .left,
	#section1 .right{
		margin-right:	0;
		width: 			50%;
		height:  		100vh;
	}

	/* LEFT */
	#section1 .left{
		background-image: url('../images/a+t-guppe_hero-2.jpg');
		background-position:	top;
		background-repeat:	no-repeat;
		background-size:		cover;
		position:				relative;
		background-position: left;

		background-color: rgb(0 0 0 / 0.3);  /*black and 30% transparent*/ 
		background-blend-mode: multiply;
	}
		#section1 .left .title{
			/*position:		absolute;
			bottom:			10vh;
			width:			80%;
	  		left:				3vw;*/

			display: 		flex;
	  		height:  		auto;
	  		width:			90%;
	  		margin: 			50vh 3vw 10vh 3vw;
	  																	/*border: solid 1px #0F0;*/
		}

	/* RIGHT */
	#section1 .right { 
		background-color: var(--color3);
	}
		#section1 .right .textbox{
			/*position:		absolute;
			bottom:			4vw;
			width:			60%;
	  		left:				3vw;*/
			
			display: 		flex;
	  		height:  		auto;
	  		margin: 			50vh 3vw 10vh 3vw;
	  																	/*border: solid 1px #F51828;*/
		}
			#section1 .right .textbox span{
				/*display: 	inline-block;
  				align-self: flex-end;*/
			}



/* KONTAKT & IMPRINT & DATENSCHUTZ */
#hero-kontakt { 
	height:  			75vh;
	padding-top:  		25vh;
	background-color: var(--color3);
	  																	/*border: solid 1px #F51828;*/
}



/* FOOTER */

#footer{
	position: 			fixed;
	left: 				50%;
	width: 				50%;
	height: 				auto;
	padding: 			3vw;
	padding-bottom:  	4vh;
	bottom:				0;
	z-index: 			1003;
																		/*border: solid 1px #00F;*/
}
	#footer .links{
		float: 	left;
		color:	var(--color1);
																		/*border: solid 1px #F00;*/
	}
	#footer span{
		padding-right: 20px;
	}