

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

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

/* HEADLINES */
h1 				{ font-size: 3.2rem; line-height: 1.1; }																			/* Seitentitel */ 
h2 				{ font-size: 1.6rem; line-height: 1.3; }																			/* 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.4rem; line-height: 1.5; }																		/* Intro */
.ch_text				{  }																														/* Fließtext */
.ch_rubrictitle	{	font-size: 			0.7rem; 																						/* Rubrikentitel */
							line-height: 		1.3; 
							letter-spacing: 	0.15em;

							display:  			block;
							padding-bottom: 	0.5em;

							text-transform:	uppercase; 
							color: 		 		var(--color1); 	
						}	

.ch_bt_label		{ font-size: 0.9rem; letter-spacing: 0.02em; }																/* Button Label */	
.ch_notes,
.ch_notes_title	{ font-size: 0.8rem; line-height: 1.8; letter-spacing: 0.05em; text-decoration: none }			/*	 Marginalien  */




/* =============================================================================
   Links
   ========================================================================== */
  
/* NAVIGATION */
.linknav				{ font-size: 1.6rem; line-height: 1.2; }
.linknav.sub 		{  }
.linknav.active	{ border-bottom: 4px solid var(--color2); }

/* NOTES */
.linknotes			{ font-size: 0.8rem; }																								/* Marginalien */
   
   

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



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



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


#navbar {
	position:	fixed;
	top: 			0;
	width:		100%;
	height:		auto;

	display:		block;
	padding: 	30px var(--pagemargin) 15px var(--pagemargin);

	background-color:	#FFF;

	/*opacity: 			0.98;*/
	box-shadow: 		-10px -15px 30px grey; 
	z-index:				5;
								
	transition:			top 0.3s;																			/*border:  solid 1px #2433FF;*/
	}
		
	/*#navbar.bg_white{
		width: 	100vw;
		background-color:	#FFF;
		box-shadow: 		-10px -15px 30px grey; 
	}*/
	.nav-bg {
		position:		fixed;
		top: 				0;
		left:				0;
		width: 			100vw;
		height: 			0;

		background:		var(--color3);
		z-index:			4;					
	}
		.nav-bg.open {
			height: 		100vh;
			transition: height 0.4s ease 0s;
			background:	var(--color3);
		}
		.nav-bg.close {
			height: 		0;
			transition: height 0.7s ease 0s;
			background:	var(--color3);
		}


	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {
		position:	relative;
		display: 	inline-block;
		width: 		245px;
		height: 		40px;
		float: 		left;
		cursor: 		pointer;
			
		background-size: 		auto 100%;
		background-position:	left bottom;
	   background-repeat:	no-repeat;
		background-image:		url('../images/a+t-guppe_logo.png'); 
																											/*border:  solid 1px #2433FF;*/

	}
		#navbar .lrg-logo.orange,
		#navbar .sml-logo.orange {
			background-image:		url('../images/a+t-guppe_logo.png'); 
		}
		#navbar .lrg-logo.open {
			background-image:		url('../images/a+t-guppe_logo.png'); 
		}
		#navbar .lrg-logo.close {
			background-image:		url('../images/a+t-guppe_logo.png'); 
		}


	/* EMERGENCY BUTTON */
	#navbar .bt_emergency {
		position:		relative;
		display: 		inline-block;
		top:				-5px;
		float: 			right;
		padding-right: 30px;
																											/*border:  solid 1px #2433FF;*/
	}
		#navbar .bt_emergency .button {
			left:  				0;
			margin-right:  	0;
		}


	/* BURGER */
	#navbar .bt_burger {
		position:  relative;
		top:			5px;
		float: 		right;		
		display:		none;

		transform-origin: top right;
		transform:  scale(0.6);				
																											/*border:  solid 1px #2433FF;*/
	}
		#navbar .bt_burger.show {
			display:	inline-block;
			z-index:	5;
		}

	/* MENU */
	#navbar .menu {
		position:  	absolute;
		top:			25vh;
		left:  		0;				/* reset */
		width:		89vw;			/* reset */
		z-index:		4;

		/*opacity: 	0;
		transition:	opacity 0.5s;*/

		visibility:	hidden; 
		opacity:		0;
		transition:	visibility 0.5s, opacity 0.5s; 
																											/*border:  solid 1px #2433FF;*/
	}
		#navbar .menu .row1 p,
		#navbar .menu .row2 p {
			padding-bottom:  2em;
		}
		#navbar .menu .row2{
			width:	130%;
		}

		#navbar .menu.open{
			visibility: visible; 
			opacity: 	1;
		}
		#navbar .menu.close{
			visibility:	hidden; 
			opacity: 	0;
		}
		#navbar .menu ul{
			margin:			0;
			padding:			0; 
			list-style: 	none;
			text-align: 	left;
		}
		#navbar .menu li{
			overflow:	hidden;
			display: 	block;
			padding: 	0 0 0.8em 0;
																											/*border:  solid 1px #2433FF;*/
		}

		/* KONTAKT NOTRUF 
		#navbar .menu .kontakt-emergency	{
			position:	absolute;
			right: 		0;
			top: 			-25vh;
			height: 		100vh;
			width:  		33.3vw;
			padding: 	25vh var(--pagemargin) 0 3vw;

	    	background:	var(--color1);

			opacity:		0;
			transition:	opacity 0.5s; 
			transition-delay: 800ms;
		}
			#navbar .menu .kontakt-emergency.open{
				opacity: 	1;
			}
			#navbar .menu .kontakt-emergency.close{
				opacity: 	0;
			}
			#navbar .menu .kontakt-emergency .txt{
			}
			#navbar .menu .kontakt-emergency .links{
			}			
			*/




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

.hero-start{	
																	/*border:  solid 1px #2FC3C1;*/
}
	/* BRANDICON */
	.hero-start .brandicon{	
		position:	absolute;
		display: 	inline-block;

		/*		
		width: 		33.33vh;
		height: 		33.33vh;
		top: 			calc(100vh - 16.66vh - 1.7vh);
		*/

		/* 1/3 of height in pixels */
		width: 		300px;	
		height: 		300px;
		top: 			calc(85vh - 150px - 15px);	
		right:  		var(--pagemargin);
		
		background-size: 		auto 100%;
		background-position:	left bottom;
	   background-repeat:	no-repeat;
		background-image:		url('../images/a+t-plus.png'); 
	}

	/* IMAGE */
	.hero-start .imagebox{	
		height:		85vh;

		background-position: right;
		background-size: 		cover;
		background-repeat: 	no-repeat;

		background-color: rgb(0 0 0 / 0.2);  black and 20% transparent 
		background-blend-mode: multiply;
	}
		/* TITLE */
		.hero-start .imagebox .titlebox {
			margin-top: 35vh;
		}

/* INTRO */
.hero-start .txt-intro {
	background: var(--color2); 
}





/*-------------------------------*/
/*		 HEADLINE (left/center)		*/
/*-------------------------------*/

.txt-headline {
}





/*-------------------------------*/
/*			 TEXT: 1-COLUMN 	      */
/*-------------------------------*/

.txt-1col {
}





/*-------------------------------*/
/*				TEXT+IMAGE				*/
/*-------------------------------*/

.txt-img{
}
	/* TEXT */
	.txt-img .txt {  }
		.txt-img .txt.right {
			order:  2; 
		}
	/* IMAGE */
	.txt-img .img {  }
		.txt-img .img.left{
			order:  1; 
		}




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


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

		/* same hight for all boxes */
		display: flex;
		flex-direction: column;
		flex: 1;

		cursor:			pointer;
		margin-bottom:	60px;
	}
		/* IMAGE */
		.teaser-group .teaser .img  {
			position: 				relative;
			overflow: 				hidden; 
			background-color:    var(--color5);	

			/*mix-blend-mode: multiply;*/
		}
			/* OVERLAY */
			.teaser-group .teaser .img .overlay {
				position:			absolute;
				width:				100%;
				height:				100%;
				background-color:	rgba(0, 0, 0, 0.5); 
				opacity: 			0;

				/*background-image:  	url('../images/plus.svg');
				background-position: top calc(20px) right calc(20px);
				background-size: 		40px 40px;
				background-repeat: 	no-repeat;*/
				z-index: 				2;

				transition:				opacity 0.3s ease;
			}
			/* HOVER */
			.teaser-group .teaser:hover .img .overlay{
			    opacity: 			1;
			}		

			/* ZOOM */
			.teaser-group .teaser .img .img-holder {
			   transition: transform 0.6s ease;
			}
			.teaser-group .teaser:hover .img .img-holder {
			    transform: scale(1.1);
			}

		/* TEXT */
		.teaser-group .teaser .txt{

			/* same hight for all boxes */
			display: flex;
			flex-direction: column;
			flex: 1;

			height:  			auto;
			padding-left:		7%;
			padding-right:		10%;
			background-color: var(--color2);	
		}
			.teaser-group .teaser .txt .button {
			    margin-top: auto; /* Pushes the button to the bottom */
			    align-self: flex-start; /* Ensures the button is left-aligned */
			}





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

#footer {
	min-height: 				100vh;
	align-content: 	space-between; 
	background-color: var(--color2);
}
	/* BRANDICON */
	#footer  .brandicon{	
		height: 					200px;
		background-size: 		auto 100%;
		background-position:	right top;
	   background-repeat:	no-repeat;
		background-image:		url('../images/a+t-plus.png'); 
	}
	#footer .contact {
		padding-right:  70%;
	}
	/* SOCIAL & IMPRINT */
	.social,
	.imprint {
		align-self: end;
		/*border:  solid 1px #2FC3C1;*/
		/*background-color: var(--color2);*/
	}
	#footer .social {
	}
	#footer .imprint {
		text-align: 	right;
	}
		#footer .imprint a{
			padding-left: 20px;
		}



