/*
Theme Name: confidenza
Author: Süsskind SGD
Description: Theme für confidenza bau & immobilien
Version: 1.0
*/

@font-face {
	font-family: 'Lexend';
	src: url('fonts/Lexend-Regular.woff') format('woff'),
		 url('fonts/Lexend-Regular.woff2') format('woff2'),
		 url('fonts/Lexend-Regular.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
  }


@font-face {
	font-family: 'Lexend';
	src: url('fonts/Lexend-Bold.woff') format('woff'),
		 url('fonts/Lexend-Bold.woff2') format('woff2'),
		 url('fonts/Lexend-Bold.ttf') format('ttf');
	font-weight: bold;
	font-style: normal;
  }




/*VARIABELN----------------------------------*/
:root{
  /*Farben*/
	--col-main: #fff;
	--col-text: #003255;
	--col-alternate: #003255;
	--col-filter: rgba(94, 156, 246, 0.18);
	/* --col-filter: rgba(0, 12, 31, 0.85); */
	
	
 /*Schriften*/
	--ff-name: 'Lexend', sans-serif;
	--fs-basic: 18px;
	--fs-fliesstext: 1rem;
	--lh-fliesstext: 1.5em;
	--fs-h1: 3rem;
	--fs-h1-home: clamp(50px, 4.5vw, 100px ); /*4.5vw*/
	--fs-h2: 2.2rem;
	--fs-h3: 1.5rem;
	--fs-h4: 1.2rem;
	--fs-menu: 1.9rem;
	--fs-small: 0.8rem;
	/* --fs-tooltip: 1.4rem;
	 */
	/* --fw-bold: 600;
	--fw-medium: 500;
	--fw-thin: 400; */
	
 /*Breiten / Abstände*/
	--con-max-width-half: 500px;
	--con-max-width-two-third: 775px;
	--con-max-width-one-third: 380px;

	--con-width: 80vw;
	--con-fullwidth: 100%;
	--con-max-width: 1700px;
	--con-fuss-max-width: 800px;
	--mar-standard: 20px;
	--mar-big: 50px;
	--mar-huge: 100px;
	--flex-gap: 100px;
}

/*************************************************************************/
/*************************************************************************/
/*Allgemeines CSS*/

html 							{font-size: var(--fs-basic);}
body 							{font-family: var(--ff-name); font-variant-alternates: styleset(ss03); background-color: var(--col-main); color: var(--col-text); margin: 0;}
header * 						{color: var(--col-text); z-index: 99;}

/*Colors*/
/* .alternate 				{background-color: var(--col-alternate); color: var(--col-main);}
.alternate * 			{color: var(--col-main);} */

/* .nopaddingbottom 		{padding-bottom: 0;}
.nopaddingtop 			{padding-top: 0;} */
 
/*Content not full width*/
.contentwidth 					{width: var(--con-width); max-width: var(--con-max-width); margin: 0 auto;}
.content 						{display: flex; justify-content: space-between; -webkit-justify-content: space-betwen; }
.margin_standard 				{margin-top: var(--mar-standard); margin-bottom: var(--mar-standard);}
.margin_standard_top 			{margin-top: var(--mar-standard); }
.margin_standard_bottom 		{margin-bottom: var(--mar-standard); }
.margin_big 					{margin-top: var(--mar-big); margin-bottom: var(--mar-big);}
.margin_big_top 				{margin-top: var(--mar-big); }
.margin_big_bottom 				{margin-bottom: var(--mar-big); }
.margin_huge					{margin-top: var(--mar-huge); margin-bottom: var(--mar-huge);}
.margin_huge_top				{margin-top: var(--mar-huge); }
.margin_huge_bottom				{margin-bottom: var(--mar-huge); }

.one_half 						{max-width: var(--con-max-width-half); min-width: calc(50% - (var(--flex-gap) / 2));} 
.two_third						{max-width: var(--con-max-width-two-third); min-width: calc((100% / 3 * 2) - (var(--flex-gap) / 2));} 
.one_third						{max-width: var(--con-max-width-one-third); min-width: calc((100% / 3 ) - (var(--flex-gap) / 2));} 

.two_columns					{column-count: 2; column-gap: var(--flex-gap); width: 100%;}
.two_columns ul 				{margin-top: 0;}

.two_columns h1, .two_columns h2,
.two_columns h3, .two_columns h4,
.two_columns h5, .two_columns h6 {break-after: avoid;}
.two_columns p 					 {break-inside: avoid;}
/*Content full width*/
/* .fullwidth 				{width: var(--con-fullwidth);} */


main							{min-height: 50vh; margin-top: 25vw;}
.content img 					{max-width: 100%;}






/*************************************************************************/
/*************************************************************************/
/*Typografie*/

h1								{font-size: var(--fs-h1);}
.home h1						{font-size: var(--fs-h1-home); line-height: 1.2em;}
h2 								{font-size: var(--fs-h2);}
h3 								{font-size: var(--fs-h3);}
h4 								{font-size: var(--fs-h4);}
p, p *, .content li 			{font-size: var(--fs-fliesstext); line-height: var(--lh-fliesstext);}
h1,h2,h3,h4,h5,h6 				{hyphens: auto; -webkit-hyphens: auto;}

p a, h1 a, h2 a, h3 a, 
h4 a, h5 a, h6 a 				{color: inherit!important; text-decoration: none; font-weight: bold!important;}

p a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, 
h5 a:hover, h6 a:hover, .menu_container a:hover 		{opacity: 0.7;}


.home h3						{margin-top: 10px; margin-bottom: 10px;}

ul 								{list-style-type: "– "; padding-left: 15px;}
.content ul li 					{padding: 3px 0;}

.privacy-policy h3 				{margin-bottom: 0;}


.two_columns > p:first-child,
.two_columns > h2:first-child,
.two_columns > h3:first-child,
.two_columns > h4:first-child,
.two_columns > h5:first-child,
.two_columns > h6:first-child		{margin-top: 0;}


/*************************************************************************/
/*************************************************************************/
/*Fade-In Content*/

.animation {
	opacity: 0;
	transition: opacity 1s ease, transform 1s ease;
	will-change: auto;
	transform: translatey(80px);
}
.animation.start {
	opacity: 1;
	transform: translatey(0px);
}





/*************************************************************************/
/*************************************************************************/
/*Header*/

/*----------------------------------------------------------------------------
 * Logo */
#logo							{display: flex; justify-content: center; -webkit-justify-content: center;} 
#logo img 						{width: 400px; height: auto; margin-top: 50px; max-width: 50vw;}



/*----------------------------------------------------------------------------
 * Background SVG */

.bg_svg							{fill: var(--col-alternate);}
.bg_element						{position: absolute; right: 0; width: 100%; z-index: -1;}

#header_bg						{top: 0; margin-top: calc(-20vw - 200px); transition: all .6s ease-out; border-top: 200px solid var(--col-alternate); z-index: 90; }
#header_bg.menu_open			{margin-top: -100px;}
#header_bg svg 					{transform: translate(0px, -1px);}

#footer_bg svg					{margin-bottom: -6px;}
#footer_bg 						{bottom: 0;}


/*----------------------------------------------------------------------------
 * Menu */

.col_main						{fill: var(--col-main); }
#menu_toggle svg				{width: 50px;}

#menu_toggle {
	position: absolute; 
	top: 81px; 
	right: 100px; 
	cursor: pointer;
	width: 45px;
	height: 45px;
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;
}
  
#menu_toggle span {
	display: block;
	position: absolute;
	height: 2.5px;
	width: 100%;
	background: var(--col-main);
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;
	-webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;
}

#menu_toggle span:nth-child(1) {top: 8px; }
#menu_toggle span:nth-child(2) {top: 21px;}
#menu_toggle span:nth-child(3) {top: 34px;}

  
header.menu_open #menu_toggle span:nth-child(1) {top: 4px; left: 7px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
header.menu_open #menu_toggle span:nth-child(2) {width: 0%;opacity: 0;}
header.menu_open #menu_toggle span:nth-child(3) {top: 36px; left: 7px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}



.main_nav .menu					{opacity: 0; height: 0; transition: all .6s ease-out;}
.main_nav .menu.open			{opacity: 1; height: auto;}
.main_nav .menu	*				{color: var(--col-main);}

.main_nav ul					{list-style: none; padding-left: none;}
.menu_container					{position: absolute; display: flex; justify-content: center; -webkit-justify-content: center; width: 100%; padding-top: 50px; }
/* header.menu_open .menu_container {height: auto;} menu ist klickbar wenn nicht offen!*/
header:not(.menu_open) .menu_container 		{transform: scaleY(0); }

.menu_container li a			{font-size: var(--fs-menu); font-weight: bold; text-decoration: none; }
.menu_container li				{padding-bottom: 10px;}
.menu_container > div 			{max-width: 500px; min-width: 250px;}




/*************************************************************************/
/*************************************************************************/
/*Animation Text auf Startseite*/

.animated_text_main, .animated_text, .animated_text_content		{display: block;}
.animated_text							{height: 4rem;}

.animated_text_content					{ position: absolute;}
.animated_text_content:not(.visible)	{ opacity: 0; transition-delay: .6s; transition: all .6s ease-out; transform-origin: bottom;}
.animated_text_content.visible			{ opacity: 1; transition-delay: 0s; transition: all .6s ease-out; transform-origin: top;}


 
/*************************************************************************/
/*************************************************************************/
/*Über uns / Timeline*/

.one_half.team_img .filter, 
.one_half.team_img img	 				{max-width: 300px; display: block; margin: auto;}


.content_timeline						{flex-direction: column;}
.timeline_content ul 					{padding: 0; position: relative; list-style-type: none; display: flex; flex-direction: column;}
.timeline_content ul:before 			{position: absolute; left: 50%; top: 0; content: ' '; display: block; width: 3px; height: 100%; margin-left: -1.5px; background: var(--col-alternate); z-index: 5;}
.timeline_content ul li:not(.timeline_year) {position: relative; width: 48%; max-width: 350px;}
.timeline_content ul li.even 			{text-align: right; margin-right: 52%; align-self: flex-end;}
.timeline_content ul li.odd 			{margin-left: 52%;}

.timeline_year							{text-align: center; font-size: var(--fs-h2); font-weight: bold; padding: 10px; background: white; z-index: 9;}
.ms_date, .ausb_date					{margin-bottom: 0;}
.ms_content, .ausb_content 				{margin-top: 5px;}


.ausbildungen_content					{column-count: 2; column-gap: var(--flex-gap);}
.ausbildung_object						{break-inside: avoid-column;}

/* .timeline_content li.hidden				{opacity: 0; transition: all 0.5s ease-in;}
.timeline_content li.faded 				{opacity: 1;} */



/*************************************************************************/
/*************************************************************************/
/*Objekte*/

/*Loop*/
.object_box								{display: flex; flex-direction: column; background-color: var(--col-alternate); padding: 20px; color: var(--col-main);}
.object_box *							{color: var(--col-main);}
.object_box h2 							{flex-grow: 1;}
.objects								{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px;}





/*************************************************************************/
/*************************************************************************/
/*Images Filter */

.one_half > img, 
.one_half > .filter, 
.one_half > .slider 			{margin-top: 1em;}
/*img:not(.custom-logo) 			{filter: contrast(0.75) saturate(0) grayscale(1)}*/
.filter							{position: relative; display: flex;}
/*.filter:after					{
	position: absolute; 
	content: ''; 
	display: block; 
	top: 0; 
	left: 0; 
	height: 100%;
	width: 100%;
	background: var(--col-filter);
	mix-blend-mode: color;
	opacity: 0.8;
}*/






/*************************************************************************/
/*************************************************************************/
/*Slider*/

.slider									{position:relative; overflow:hidden; margin:0; max-width: 100%; background: var(--col-alternate); }
.slider ul								{position:relative; margin:0; padding:0; height:100%; list-style:none; width:100%; overflow:hidden; left:0;}
.slider ul li							{position:absolute; display:block; float:left; margin:0; padding:0; width: 100%; height: auto; /*width:500px; height:300px;*/ background:var(--col-alternate); transition: ease-out 0.4s; display: flex;}
.slider ul li.active					{left: 0;}

/*controls*/
.controls 								{width: 100%; height: 100%; position: absolute; top: 0; display: flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center;}
.control_prev,
.control_next							{/*position:absolute; top:45%;*/ z-index:1; display:block; width:auto; height:auto; color:#fff; text-decoration:none; font-weight:600; font-size:18px; cursor:pointer;}
/* .control_prev							{left:0;}
.control_next							{right:0;} */
.control svg 							{fill: var(--col-main);} 


/*************************************************************************/
/*************************************************************************/
/*Footer*/
footer 							{position: relative; padding-top: 28vw; }
.footer_widgets 				{display: flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: flex-end; max-width: var(--con-max-width); width: var(--con-width); margin: auto;}
.footer_widget_1				{padding: 50px 50px 100px 0;}
.footer_widget_2				{padding: 50px 50px 100px;}
.footer_widget_3				{padding: 50px 0px 100px 50px;}
.footer_widget_2 
.has-text-align-center 			{font-size: var(--fs-small);} 
footer * 						{color: var(--col-main);}

#scroll-top-button 				{display: flex; justify-content: flex-end; -webkit-justify-content: flex-end;}
#scroll-top-button svg 			{fill: var(--col-main); }
#scroll-button 					{width: 48px; height: 48px; cursor: pointer; margin-right: -10px;}




/*************************************************************************/
/*************************************************************************/
/*Text Selection*/

::-moz-selection 				{background: var(--col-alternate); color: var(--col-main); }
::selection 					{background: var(--col-alternate); color: var(--col-main); }
footer ::-moz-selection, .object_box ::-moz-selection, header ::-moz-selection		{background: var(--col-main); color: var(--col-alternate); }
footer ::selection, .object_box ::selection, header ::selection				{background: var(--col-main); color: var(--col-alternate); }




/*************************************************************************/
/*************************************************************************/
/*Responsive*/

/*------------------------------------------------------------------------------------------------------*/
/*-------   BIG SCREENS   -------*/
/*------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 2400px) {
	:root{
		--fs-menu: 2.9rem;
	}
	#header_bg							{margin-top: calc(-24vw - 200px);}
	/* #footer_bg 							{margin-bottom: -12vw;} */
	.menu_container > div 				{max-width: 650px; min-width: 400px;}
	#header_bg.menu_open 				{margin-top: -200px;}

	.two_third 							{max-width: var(--con-max-width-half); min-width: calc((50%) - (var(--flex-gap) / 2));}
}





/*------------------------------------------------------------------------------------------------------*/
/*-------   SMALL SCREENS   -------*/
/*------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1400px) {
	:root{
		--con-max-width-half: calc(50% - (var(--flex-gap) / 2));
	}
}


/*------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1100px) {
	:root{
		--fs-menu: 1.5rem;
	}
	#logo img 							{margin-top: 2vw;}
	#menu_toggle						{top: 5vw; right: 10vw;}
	.menu_container > div				{max-width: 350px;}
	#header_bg.menu_open 				{border-top: 35vw solid var(--col-alternate);}

	.footer_widget_1					{padding: 50px 15px 25px 0;}
	.footer_widget_2 					{padding: 50px 15px 25px;}
	.footer_widget_3 					{padding: 50px 0px 25px 15px;}

	.object_box h2 						{font-size: var(--fs-h3);}
	.objects 							{grid-gap: 30px;}
}

/*------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 940px) {
	:root {
		--fs-h1: 2rem;
		--fs-h1-home: 6.5vw;
	}
	footer *							{font-size: var(--fs-small);}
	footer .wp-block-social-links *		{font-size: var(--fs-fliesstext);}
	.object_box h2 						{font-size: var(--fs-h4);}
	.objects 							{grid-gap: 20px;}
} 


/*------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
	#menu_toggle						{top: 7vw; right: 10vw;}
	.menu_container						{display: block; max-width: 350px; left: 0; right: 0; margin: auto; padding-top: 0;}
	#header_bg.menu_open				{border-top: 440px solid var(--col-alternate);}
	#header_bg 							{margin-top: calc(-20vw - 165px);}

	main 								{margin-top: 35vw;}

	.content							{flex-direction: column;}
	.one_half, .one_third, .two_third 	{max-width: 100%;}
	.ausbildungen_content, .two_columns {column-count: 1;}
	.one_half.team_img .filter, 
	.one_half.team_img img				{margin-left: 0;}
					
	.footer_widgets						{flex-direction: column-reverse;align-items: flex-start;}
	#footer_bg							{border-bottom: 180px solid var(--col-alternate); }
	#footer_bg svg 						{transform: translate(0px, 1px);}
	.footer_widget						{padding: 0; }
	.footer_widget_2 					{margin-bottom: 20px;}
	.footer_widget_2 *, 
	.footer_widget_3 *					{text-align: left!important;}
	.footer_widget_2 ul					{justify-content: flex-start;}

	.footer_widget_1 					{display: none;}

	.timeline_content ul:before			{left: 48px;}
	.timeline_content ul li:not(.timeline_year)	{width: 76%; max-width: 100%;}
	.timeline_content ul li.odd 		{margin-left: 24%;}
	.timeline_content ul li.even		{margin-left: 24%; margin-right: 0; text-align: left;}
	.timeline_year						{text-align: left;}

	.objects							{grid-template-columns:  1fr;}
	.object_box h2 						{font-size: var(--fs-h3);}

}


/*------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 562px) {
	:root {
		--fs-h1: 1.5rem;
		--fs-h1-home: 10vw;
		--fs-h3: 1.1rem;
	}
	#menu_toggle						{width: 38px; height: 28px;}
	#menu_toggle span					{height: 2px;}
	#menu_toggle span:nth-child(1) 		{top: 1px;}
	#menu_toggle span:nth-child(2)		{top: 13px;}
	#menu_toggle span:nth-child(3)		{top: 25px;}
	header.menu_open #menu_toggle span:nth-child(1) {top: 0px; left: 5px;}
	header.menu_open #menu_toggle span:nth-child(3)	{top: 27px; left: 5px;}

	.privacy-policy h3 ~ p				{margin-top: 0.2em;}

	
}

/*------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 380px) {
	:root{
		--fs-menu: 1.1rem;
	}
	#header_bg							{margin-top: calc(-15vw - 165px);}
	#footer_bg							{border-bottom: 250px solid var(--col-alternate); }

	.object_box h2 						{font-size: var(--fs-h4);}

	.menu_container						{width: var(--con-width);}
	.menu_container ul 					{padding-left: 0;}
}

/*VARIABELN----------------------------------*/
/* :root{
	  --col-main: #fff;
	  --col-text: #003255;
	  --col-alternate: #003255;
	  --col-filter: rgba(94, 156, 246, 0.18);

	  --ff-name: 'Lexend', sans-serif;
	  --fs-basic: 18px;
	  --fs-fliesstext: 1rem;
	  --lh-fliesstext: 1.4em;
	  --fs-h1: 3rem;
	  --fs-h1-home: 4.5vw;
	  --fs-h2: 2.2rem;
	  --fs-h3: 1.5rem;
	  --fs-h4: 1.2rem;
	  --fs-menu: 1.9rem;
	  --fs-small: 0.8rem;

	  --con-max-width-half: 500px;
	  --con-max-width-two-third: 775px;
	  --con-max-width-one-third: 380px;
  
	  --con-width: 80vw;
	  --con-fullwidth: 100%;
	  --con-max-width: 1700px;
	  --con-fuss-max-width: 800px;
	  --mar-standard: 20px;
	  --mar-big: 50px;
	  --mar-huge: 100px;
	  --flex-gap: 100px;
  } */