/* 
Bürogemeinschaft Tedesco & Bruns
 
mike lang
10.2023

*/
   
/*
Vorlage für Farbwahl.psd
orange: 		#fe5c13	rgb(254,92,19) (dunkel) rgb(243,144,9) (hell)
braun: 		#91503c	rgb(145,80,60)
dunkelgrau: #58575c	rgb(88,87,92)
hellgrau: 	#c1c2be	rgb(193,194,190)
rosa-sand: 	#f9e8dc	rgb(249,232,220)
weiss: 		#ffffff	rgb(255,255,255)


Logo:
27,54,75 		dunkel Petrol
95,154,255,.5	hellblau, 50% deckkraft



*/


/*desktop navigation main dropdown on hover*/
#navigation_desktop 	{ margin: 0; padding: 0; width: 100%; clear: both; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-weight: 300; }
#navigation_desktop a { font-size: 1.15em; }


#nav li					{ white-space: nowrap; margin: 0 15px 0 0; }

#nav a, 
#nav a:link,
#nav a:visited 		{ line-height: 1em; display: inline-block; color: white; border: 0; padding:7px 10px 6px 10px; margin: 0; text-decoration: none; }

#nav a.rex-active,
#nav a.rex-current { color: rgb(27,54,75); }


#nav .rex-navi1 { margin: 0 0 0 -25px; } /* damit die links in der nav links u rechts 10px padding haben können, aber das ganze dann linksbündig ist */
#nav .rex-navi1 > li 	{ position: relative; display: inline-block; margin: 0; padding: 3px 15px 4px 15px; }


#nav .rex-navi1 > li:hover { /*background-color: white;*/ }
#nav .rex-navi1 > li:hover a:hover { color: rgb(27,54,75);  }



#nav .rex-navi1 > li:hover > ul { 
	pointer-events: auto;
	z-index: 100;
	max-height: 1000px;
	box-shadow: 0px 10px 8px 1px rgba(0,0,0,.4);
}

#nav .rex-navi1 > li.has-children {  

	background-size: 10px 10px; 
	background-position: right 15px; 
	background-repeat: no-repeat; 
	background-image: url(../images/pfeil_down_white.svg);

}


#nav .rex-navi1 > li.has-children.rex-current,
#nav .rex-navi1 > li.has-children:hover { background-image: url(../images/pfeil_down_dark_blue.svg); }

#nav .rex-navi2 .has-children { background-size: 10px 10px; background-position: right 0 top 30px; background-repeat: no-repeat; background-image: url(../images/pfeil_down_dark_blue.svg);}






/*desktop navigation zweite ebene*/
#nav .rex-navi2 { 
	pointer-events: none;
	position: absolute; 
	background-color: rgb(250,250,250);
	border-radius: 5px;
	z-index: 10;
	padding: 0;
	margin: 4px 0 0 0;
	overflow: hidden;
	
	box-shadow: 0px 10px 8px 1px rgba(0,0,0,0);
	max-height: 0;
	 -webkit-transition: max-height .6s cubic-bezier(1, 0, 0, 1), box-shadow .6s cubic-bezier(1, 0, 0, 1);
		 -moz-transition: max-height .6s cubic-bezier(1, 0, 0, 1), box-shadow .6s cubic-bezier(1, 0, 0, 1);
			-o-transition: max-height .6s cubic-bezier(1, 0, 0, 1), box-shadow .6s cubic-bezier(1, 0, 0, 1);
				transition: max-height .6s cubic-bezier(1, 0, 0, 1), box-shadow .6s cubic-bezier(1, 0, 0, 1);
	
}

#nav .rex-navi1 > li::after { opacity: 0;	transition: opacity 6s cubic-bezier(1, 0, 0, 1);}

#nav .rex-navi1 > li:hover::after,
#nav .rex-current::after,
#nav .rex-active::after {
	opacity: 1;
	bottom: 0%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: rgb(255,255,255);
	border-width: 7px;
	margin-left: -7px;
		transition: opacity 6s cubic-bezier(1, 0, 0, 1);

}  
  
  
#nav .rex-navi2>li 					{ display: block; padding: 15px 0 0 10px;}
#nav .rex-navi2>li:last-child 	{ padding: 15px 0 20px 10px;}

#nav .rex-navi2>li:last-child:not(:first-child) 	{ padding: 15px 0 20px 10px;}
#nav .rex-navi2 a, 
#nav .rex-navi2 a:link,
#nav .rex-navi2 a:visited 		{ color: black; /*margin: 0 0 0 1em;*/ width: 100%; }



#nav .rex-navi2 a.rex-current { color: rgb(27,54,7); }

/*desktop navigation dritte ebene*/

#nav .rex-navi3 		{ display: block; padding: 0 0 0 .8em; }
#nav .rex-navi3 li 	{ display: block; }
#nav .rex-navi3 a, 
#nav .rex-navi3 a:link,
#nav .rex-navi3 a:visited 		{ color: black; text-transform: none;}
/*#nav .rex-navi2 a.rex-active,*/
#nav .rex-navi3 a.rex-current { color: rgb(27,54,7); }
#nav .rex-navi3[class*=" rex-navi-depth-"] { /*border-left: 1px solid white; */} /*[class*=" rex-navi-depth-"] = enthält ex-navi-depth-*/

/*
#nav .rex-navi2 > li:hover > ul { display: block; }

*/




/* nav meta */
#nav_meta { text-align: center; margin: 20px 0 20px 0; }


#nav_meta .rex-navi1 {  }
#nav_meta .rex-navi1 li { display: inline-block; margin: 0 0 0 10px; background-color:rgba(255,255,255,0); border-radius: 5px; border-color: rgba(255,255,255,.3); border-width:1px; border-style: solid; transition: background-color 0.2s; }
#nav_meta .rex-navi1 li:hover { background-color:rgba(255,255,255,.1); }

#nav_meta .rex-navi1 li ul { display: none; position: absolute; z-index: 10; }

#nav_meta .rex-navi1 ul li { display: block; }

#nav_meta a, 
#nav_meta a:link, 
#nav_meta a:visited {
    font-size: 1em;
    line-height: 1em;
    display: inline-block;
    height: 100%;
    color: #fff;
    padding: .1em 1em .5em 1em;
    text-decoration: none;
    transition: color 0.2s;
}

#nav_meta .active > a,
#nav_meta .active2 > a { color: rgb(254,92,19); }
#nav_meta a:hover { color: rgb(95,154,255,.5); }

/*#nav_meta .rex-navi1 li:hover ul { display: block; }*/


/* breadcrumb */

/* #home #breadcrumb { display: none; } */
ul.rex-breadcrumb { margin: 20px 0 20px 0; }
#breadcrumb li { font-size: 0.9em; display: inline-block; margin: 0 10px 10px 0; background-size: 6px auto; background-position: right 10px; background-repeat: no-repeat; background-image: url(../images/pfeil_right_breadcrumb.svg); font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-style: normal; font-weight: 200; }

#breadcrumb li:last-child { background-image: none;}

#breadcrumb li:first-child a { background-image: url(../images/pfad-home.svg); background-position: center 11px; background-size:contain; margin: 0 20px 0 0; padding: 11px; }

#breadcrumb a { padding: 0 20px 0 0; }


/* footer nav */
#footer .rex-navi1 a, 
#footer .rex-navi1 a:link,
#footer .rex-navi1 a:visited 	{ 
line-height: 1em; 
height:100%; 
color:white; 
border: 0; 
padding:5px 0 0 0; 
margin: 0; 
text-decoration: underline; 
text-decoration-color: rgba(255,255,255,.5);
}

#footer .rex-navi1 a.rex-active,
#footer .rex-navi1 a.rex-current { color: rgb(255,255,255); }

#footer .rex-navi1>li 	{ display: block;  }
#footer .rex-navi1>li:hover a { color: rgb(27,54,75); }
#footer .rex-navi1 li:hover ul { display: block;}

#footer .rex-navi1 { /*position: relative;*/ }
#footer ul { margin: 0;  }
#footer .rex-navi1 { margin: 0;  }

#footer span,
#footer #footer_titel { font-weight:600; font-size: 1.1em }



/* mobile nav trigger*/
#navigation_trigger_mobile { float: right; display: none; }

a#trigger_mobile 				{ background-image: url(../images/hamburger-close-rund.svg); }
a#trigger_mobile.open 		{ background-image: url(../images/hamburger-open-rund.svg); }

a#trigger_mobile { display: block; border: none; background-size: contain; width: 25px; height: 25px;
-webkit-transform:	rotate(0deg);
-webkit-transition:	-webkit-transform 0.4s;
-moz-transform:		rotate(0deg);
-moz-transition:		-moz-transform 0.4s;
-o-transform:			rotate(0deg);
-o-transition:			-o-transform 0.4s;
-ms-transform: 		rotate(0deg);
-ms-transition: 		-ms-transform 0.4s;
transform:				rotate(0deg);
transition:				transform 0.4s;
}

a#trigger_mobile.open { 
-webkit-transform:	rotate(90deg);
-webkit-transition:	-webkit-transform 0.4s;
-moz-transform:		rotate(90deg);
-moz-transition:		-moz-transform 0.4s;
-o-transform:			rotate(90deg);
-o-transition:			-o-transform 0.4s;
-ms-transform:			rotate(90deg);
-ms-transition: 		-ms-transform 0.4s;
transform:				rotate(90deg);
transition:				transform 0.4s;
}
a#trigger_mobile:hover { padding-bottom: 0; padding-top: 0; }





/* mobile nav */
#navigation_mobile 		{ display: none; position: absolute; background-color: rgba(255,255,255,0.8); height: 2000px; float: left; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; }

#navigation_mobile 		{ width: 100%; margin-bottom: 20px; }
#navigation_mobile ul 	{ margin-top: 20px; }

#navigation_mobile li			{ width: 100%; display: inline-block; margin: 0; padding: 4px 0 6px 0; background-size: 28px auto; background-position: right center; background-repeat: no-repeat; background-image: url(../images/pfeil_right_inactive.svg); }

#navigation_mobile li.has_sub { background-image: url(../images/pfeil_right.svg); }


#navigation_mobile li.zurueck,
#navigation_mobile li a { 
/* text-transform: uppercase;*/ font-size: 20px; border-width: 0; color: #505050; font-weight: 300; 
padding: 0 0 0 10px; 
display: inline-block;
margin-left: 15px;
width: 95%; 
}




#navigation_mobile li.zurueck { 

/*text-transform: uppercase;*/ font-size: 20px; color: #505050; font-weight: 300; 
padding-right: 0;
width: 95%; 
padding-bottom: 6px; padding-top: 4px;
margin-left: -5px; padding-left: 30px; display: inline-block; background-image: url(../images/pfeil_left.svg); background-position: left center; cursor: pointer; }



#navigation_mobile #mob_sprache {
    width: 100%;
    margin:20px 0 20px 0
}

#navigation_mobile #mob_sprache a, #navigation_mobile #mob_sprache span {
	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; 
	text-transform: uppercase;
	display: inline-block;
	font-size: 1em;
	border-width: 0;
	color: rgb(0, 0, 0);
	padding:0 0 0 25px
}

#navigation_mobile #mob_sprache span {
    color:rgba(0,0,0,.5)
}


/* mob nav slide links / rechts untermenüs*/
.ebene1 { width: 100%; position: relative; top:0; left:0; }
.ebene2,
.ebene3 { width: 100%; position: absolute; top:-23px; left:0; }

.ebene1 { 
-webkit-transition: -webkit-transform 0.4s ease-in-out;
   -moz-transition:    -moz-transform 0.4s ease-in-out;
     -o-transition:      -o-transform 0.4s ease-in-out;
        transition:         transform 0.4s ease-in-out;
}

.ebene2 {  
-webkit-transition: -webkit-transform 0.4s ease-in-out;
   -moz-transition:    -moz-transform 0.4s ease-in-out;
     -o-transition:      -o-transform 0.4s ease-in-out;
        transition:         transform 0.4s ease-in-out;
}
.ebene3 { 
-webkit-transition: -webkit-transform 0.4s ease-in-out;
   -moz-transition:    -moz-transform 0.4s ease-in-out;
     -o-transition:      -o-transform 0.4s ease-in-out;
        transition:         transform 0.4s ease-in-out;
}

.ebene1 li { width: 100%; }



.ebene1.reingefahren { 
  -webkit-transform: translateX(0%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateX(0%); /* IE 9 */
       -o-transform: translateX(0%);
          transform: translateX(0%); /* IE 10, Fx 16+, Op 12.1+ */
}
.ebene2.reingefahren { 
  -webkit-transform: translateX(-100%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateX(-100%); /* IE 9 */
       -o-transform: translateX(-100%);
          transform: translateX(-100%); /* IE 10, Fx 16+, Op 12.1+ */
}
.ebene3.reingefahren { 
  -webkit-transform: translateX(-200%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateX(-200%); /* IE 9 */
       -o-transform: translateX(-200%);
          transform: translateX(-200%); /* IE 10, Fx 16+, Op 12.1+ */
}

.rausgefahren { 
  -webkit-transform: translateX(100%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateX(100%); /* IE 9 */
       -o-transform: translateX(100%);
          transform: translateX(100%); /* IE 10, Fx 16+, Op 12.1+ */
}




/* navigation artikelliste TEMPLATE im content */
/* navigation artikelliste MODUL im content */

.nav_art_list p,
.verwandte_art p { display: inline-block; margin: 1em 0 .5em 7px; }

.txt-img .art_list { width: 100%; margin: 0 0 4em 0; list-style-type:none;

	display: -ms-flexbox;
	display: box;
	display: -webkit-flex;
	display: flexbox;
	display: flex; 
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	
	-ms-flex-line-pack: stretch;
	-webkit-align-content: stretch;
	align-content: stretch;
	
	
	-ms-flex-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
	
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	
	/* grid zu viel problem mit ie 10 & 11
	/*
	margin: 0 auto 50px 0;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr; 
	-ms-grid-rows: 32% 32% 32%;  
	grid-template-columns: repeat(3, 1fr);
	
	grid-auto-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
*/
}


.txt-img .art_list li { 

margin-bottom: 10px; padding: 5px 4px 5px 7px; background-color: rgb(104,176,221); border: solid 1px rgb(65,157,212); 
-moz-box-sizing: border-box;
box-sizing: border-box;
	
}

.txt-img .art_list li a { display: block; color: white; font-weight: 300; border: 0; font-size: 1em; padding: 0; line-height: 140%; width: 100%; height: 100%; text-decoration: none; }
.txt-img .art_list li:hover { background-color: rgb(65,157,212); }
.txt-img .art_list .art_list_aktiv a { color: black; }







/* Smartphones */
@media only screen and (min-width: 320px) { 
	
	#navigation_desktop,
	#nav_meta,
	#sprache  { display: none; }
	#navigation_mobile { top: 79px; width: 100%; display: none; }
	#navigation_trigger_mobile { margin: 30px 20px 0 0; display: block; }
	#navigation_trigger_mobile a#trigger_mobile {  }
	.txt-img .art_list li { width: calc(1/2*100% - (1 - 1/2)*10px);}
	.txt-img .art_list li:nth-child(2n) { margin-right: 0; }
}


/* Smartphones (large z.B iphone 6 od ipad portrait) */
@media only screen and (min-width:667px) {
	
	#navigation_desktop,
	#nav_meta,
	#sprache  { display: none; }
	#navigation_trigger_mobile { display: block; }
	#navigation_mobile { top: 89px; width: 100%; display: none; }
	.txt-img .art_list li { width: calc(1/2*100% - (1 - 1/2)*10px);}
	.txt-img .art_list li:nth-child(2n) { margin-right: 0; }
}


	
	
/*styles for 1024px and up, u.A. ipad landscape */
@media only screen and (min-width: 1024px){
	
	#navigation_desktop { display: block;  }
	#nav_bg {  padding: 0 20px 0 20px; }
	#nav_meta,
	#sprache  { display: block; }
	#navigation_desktop #nav,
	#breadcrumb  	{ width: 100%; margin: 0 auto 0 auto;   }

	#navigation_trigger_mobile { display: none; }

	#navigation_mobile { display: none; }
	#abdunkeln.open { display: none; }
	
	.txt-img .art_list li { width: calc(1/3*100% - (1 - 1/3)*10px);}
	.txt-img .art_list li:nth-child(3n) { margin-right: 0; }
	
}




/*styles for 1200px and up */
@media only screen and (min-width: 1200px){

	#navigation_desktop { display: block; padding: 0; }
	#nav_bg {  padding: 0; }
	#navigation_desktop #nav,
	#breadcrumb  	{ width: 70%; margin: 0 auto 0 auto;  }

	#navigation_mobile { display: none!important; }

	#navigation_trigger_mobile	 { display: none; }
	#navigation_trigger_desktop a#trigger-desktop { margin-right: 0; }

}


@media only screen and (min-width: 1600px){

	#navigation_desktop #nav,
	#breadcrumb  { width: 60%; }

	.txt-img .art_list li { width: calc(1/3*100% - (1 - 1/3)*10px);}
	.txt-img .art_list li:nth-child(3n) { margin-right: 0; }


} 

@media only screen and (min-width: 2000px){

	#navigation_desktop #nav,
	#breadcrumb { width: 50%; }

	.txt-img .art_list li { width: calc(1/3*100% - (1 - 1/3)*10px);}
	.txt-img .art_list li:nth-child(3n) { margin-right: 0; }


}