    
        
                <section class="emotion--container emotion--column-1 emotion--mode-rows emotion--0"
                         data-emotion="true"
                         data-gridMode="rows"
                         data-fullscreen="false"
                         data-columns="1"
                         data-cellSpacing="0"
                         data-cellHeight="240"
                         data-baseWidth="1260"
                         >

                                                                        
                                <div class="emotion--element col-1 row-1 start-col-1 start-row-1 col-xs-1 start-col-xs-1 row-xs-1 start-row-xs-1 is--hidden-xs col-s-1 start-col-s-1 row-s-1 start-row-s-1 is--hidden-s col-m-1 start-col-m-1 row-m-1 start-row-m-1 is--hidden-m col-l-1 start-col-l-1 row-l-1 start-row-l-1 is--hidden-l col-xl-1 start-col-xl-1 row-xl-1 start-row-xl-1 is--hidden-xl" style="padding-left: 0rem; padding-bottom: 0rem;">
    
    
                    <a href="https://fsa-valve.com/fsavalve/fsavalve/online-shop/magnetventile/" onClick="return false;">
		 	<div class="polygon2-large plink grow-up-poly trans-std" style="background-repeat: none; background-image: url(../img/polygon_weiss.svg);z-index: 92">
		 		
		 		<img src="https://fsa-valve.com/fsavalve/../img/polygon_blau.svg" class="pweiss22 trans-std" style="">
		 		
				<div class="trans-std" style="position: absolute">
        		<img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/products/magnetventile.webp" style="width: 100%; height: auto; opacity: 1!important;">
        		<p class="" style="color: white;">Magnetventile</p>
        		</div>

			</div></a>
            

</div>
                            
                                                    
                                <div class="emotion--element col-1 row-1 start-col-1 start-row-1 col-xs-1 start-col-xs-1 row-xs-1 start-row-xs-1 col-s-1 start-col-s-1 row-s-1 start-row-s-1 col-m-1 start-col-m-1 row-m-1 start-row-m-1 col-l-1 start-col-l-1 row-l-1 start-row-l-1 col-xl-1 start-col-xl-1 row-xl-1 start-row-xl-1" style="padding-left: 0rem; padding-bottom: 0rem;">
    
    
                    <style>
.poly-container-wrapper	{
width: 100vw; 
overflow:hidden
}

	
</style>

<div class="poly-container-wrapper">
<div class="content-container ptheteam--title" style="margin-bottom: 3rem">
 	<div class="content-container-cell" style="flex-basis: 100%; text-align: center">
 	<p class="title">Das FSA-Valve Team</p>	
 	</div>
</div>

<div style="width: 100%;">

<div id="breadcrumb"></div>	


<div class="trans-std pcontainer pbew pstart ptheteam" >

	<style>
	.first-poly   {

	}
	@media (orientation: portrait) 
	{
	.first-poly   {

	}
	}
	</style>
	<div class="first-poly" style="" >
		<style>
	
		
		.delphi	{
			margin-left: 6%;
			height: 76%;
			z-index: 10;
		}
		.delphi img	{
			margin-left: -29%;
		}
		
		
		.chris	{
			height: 80%;
			z-index: 5;
		}
		.chris img {
			margin-left: -3rem;
			width: 157%;
		}
		.rita	{
			height: 78%;
			z-index: 2;
		}
		.rita img	{
			width: 145%;
			margin-left: -3rem;
		}
		.matthias	{
			flex-basis: 12%;
			height: 89%;
			z-index: 2;
		}
		.matthias img	{
			width: 130%;
			margin-left: -2.5rem;
		}
		.jenny	{
			flex-basis: 8%;
			height: 76%;
			z-index: 6;
		}
		.jenny img	{
			width: 172%;
			margin-left: -3rem;
		
		}
		.tristan	{
			height: 76%;
			z-index: 5;
		}
		.tristan img	{
			width: 146%;
			margin-left: -3rem;
		}
		.janette	{
			flex-basis: 8%;
			height: 78%;
			z-index: 4;
		}
		.janette img	{
			width: 186%;
			margin-left: -4.5rem;
		}
		.fabi	{
			flex-basis: 7%;
			height: 84%;
			z-index: 3;
		}
		.fabi img	{
			width: 228%;
			margin-left: -3.5em;
		}
		.marion	{
			flex-basis: 13%;
			height: 76%;
			z-index: 2;
		}
		.marion img	{
		  width: 118%;
		  margin-left: -1.5em;
		}
		
		.the-team--hover-info	{
			width: 21rem;
			height: 18rem;
			position: absolute;
			text-align: center;
			background-size: contain;
			background-repeat: no-repeat;
			color: white !important;
			padding: 3rem;
		}
		</style>
		<div class="the-team">
			<div class="the-team--hover-container" onMouseOut="closeDetails()">
				<div class="the-team--hover-cell delphi elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/delphi.webp" name="Delphi" job="Lager" onMouseOver="showDetails($(this))"></div>
				<div class="the-team--hover-cell chris elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/chris.webp" name="Chris" job="Leitung Auftragsabwicklung & Versand" onMouseOver="showDetails($(this))"></div><div class="the-team--hover-cell matthias elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/matthias.webp" name="Matthias" job="Geschäftsführer" onMouseOver="showDetails($(this))"></div>
				<div class="the-team--hover-cell jenny elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/jenny.webp" name="Jenny" job="Buchhaltung & Personalwesen" onMouseOver="showDetails($(this))"></div>
				<div class="the-team--hover-cell tristan elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/tristan.webp" name="Tristan" job="Entwicklung Elektronik & Software" onMouseOver="showDetails($(this))"></div>
				<div class="the-team--hover-cell janette elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/janette.webp" name="Janette" job="Lager" onMouseOver="showDetails($(this))"></div>
				<div class="the-team--hover-cell fabi elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/fabi.webp" name="Fabian" job="E-Commerce & Marketing" onMouseOver="showDetails($(this))"></div>
				<div class="the-team--hover-cell marion elmt-hover"><img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/marion.webp" name="Marion" job="Montage" onMouseOver="showDetails($(this))"></div>
				
				<div class="the-team--hover-info pblau grow-up-poly-fast" style="display:none">
					<p class="title white" style="font-size: 2rem;margin:0">Delphi</p>
					<p>Lager</p>
				</div>
				
			</div>
		</div>
		
		
		<div class="polygon2-large grow-up-poly trans-std pblau info-poly text-poly " style="padding: 0;	height:auto;" >
			<img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/polygon_blau.svg" class="trans-std pweiss22" style="" id="testid">
		</div>
		
		<div class="polygon2-large grow-up-poly trans-std pblau"  style="left: var(--left1); top: var(--top1); position: absolute" ></div>
		<div class="polygon2-large grow-up-poly trans-std pblau"  style="left: var(--left6); top: var(--top6); position: absolute" ></div>
		<style>
		.second-poly   {

		}
		@media (orientation: portrait) 
		{
		.second-poly   {

		}
		}
		</style>
	
		<div class="second-poly" >
			
			<div class="polygon2-large grow-up-poly trans-std pblau info-poly text-poly ">
				<div class="trans-std " style="position: absolute; width: 68%;">
					<p style="margin-top: 1rem; font-size: 1.5em;text-transform:uppercase">Unternehmen im Herzen der Ortenau</p>
					<p>Wir sind ein junges dynamisches Team in einem schnell wachsenden Unternehmen. 
Unser Schwerpunkt liegt auf dem Gebiet der Industrie- und Verfahrenstechnik und dem Zukunftsthema sparsame Bewässerung.</p>
				</div>
			</div>
			
			<style>
			.third-poly   {

			}
			@media (orientation: portrait) 
			{
			.third-poly   {

			}
			}
			</style>
			<div class="third-poly" >
			
				<a href="https://fsa-valve.com/#fsa" >
				<div class="polygon2-large grow-up-poly trans-std pblau info-poly text-poly phover">
					<div class="trans-std " style="position: absolute; width: 45%;">
						<img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/logo_fsa_2021_white.svg" style="width: 100%; height: auto; opacity: 1!important;">
						<p style="margin-top: 1rem; font-size: 1.5em;text-transform:uppercase">Über uns</p>
					</div>
					
				</div>
				</a>
			
				
				<style>
				.fourth-poly   {

				}
				@media (orientation: portrait) 
				{
				.fourth-poly   {

				}
				}
				</style>
				
				<div class="fourth-poly">
					<div class="polygon2-large grow-up-poly trans-std pblau info-poly text-poly">
					<div class="trans-std " style="position: absolute; width: 60%;line-height: 1.8rem;">
						<p style="margin-top: 1rem; font-size: 1.5em;text-transform:uppercase">Schreiben Sie uns!</p>
						<p>Sie haben Fragen zu Produkten, Ihrer Bestellung oder zu unserer alltäglichen Arbeit?
Dann nehmen Sie jetzt Kontakt mit uns auf, wir freuen uns über jede Nachricht!
</p>
					</div>
					</div>
					
					<style>
					.fifth-poly   {

					}
					@media (orientation: portrait) 
					{
					.fifth-poly   {

					}
					}
					</style>
					
					<div class="fifth-poly">
						<a href="https://fsa-valve.com/#kontakt" >
						<div class="polygon2-large grow-up-poly trans-std pblau info-poly text-poly ptech phover" >
							
							<div class="trans-std " style="position: absolute; width: 45%;">
								<img src="https://fsa-valve.com/fsavalve/themes/Frontend/Fluidtheme/frontend/_public/src/img/frage_antwort.svg" style="width: 100%; height: auto; opacity: 1!important;">
								<p style="margin-top: 1rem; font-size: 1.5em; text-transform:uppercase">Kontakt</p>
							</div>
					
						</div>
						</a>
						
						
					</div> <!-- Fifth Poly  -->
				
				</div> <!-- Fourth Poly  -->
			
			</div> <!-- Third Poly  -->
			
		</div> <!-- Second Poly  -->
			
			
		</div> <!-- Second Poly  -->
		
	
	</div> <!-- First Poly  -->
	

</div> <!-- Ende pcontainer  -->
	
	
</div> <!-- Ende Bluepoly  -->


<div id="transition-helper"></div>	
</div>
<style>


</style>
            

                    <script>
                function closeDetails()
{
	$(".the-team--hover-info").css("display", "none");
}
function showDetails(worker)
{
//	console.log(worker.attr("name")+" "+worker.attr("job"));
	//$(".the-team--hover-info p:first").html(worker.attr("name"));
	//$(".the-team--hover-info p:last").html(worker.attr("job"));
	
	var poly = $(".the-team--hover-info");
	
	var left = worker.offset().left - $(".the-team--hover-container").offset().left - (poly.width() / 4);
	var top =   worker.offset().top  - $(".the-team--hover-container").offset().top - (poly.height() / 1.2);
	
	poly.remove();
	
	$(".the-team--hover-container").append("<div class='the-team--hover-info pblau grow-up-poly-fast' style='left: "+left+"px; top: "+top+"px'><p class='title white' style='font-size: 2rem;margin:0'>"+worker.attr("name")+"</p><p>"+worker.attr("job")+"</p></div>");
	
	
	console.log(worker.offset().left+" "+top);
	
//	poly.css({"left": left+"px", "top": top+"px"});
}


$(document).ready(function()
{

});	

	$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
		
		
		const transition = document.querySelector('.first-poly');

		transition.addEventListener('transitionend', () => 
		{
			updatePolys();
		});  
		
		setTimeout(function()
		{
			 updatePolys();
			 
		},550);
	});
	
$(document).ajaxStop(function () {
		
 });

$( document ).ajaxComplete(function() {
	
});
function updatePolys(obj)
{

	$(".poly-container-wrapper").css("margin-left", "-"+$(".poly-container-wrapper").parent().offset().left+"px" );
			poly_height = $("#testid").outerHeight(true)-1;
			poly_width = $("#testid").outerWidth(true)-1;
			
			//console.log("transition end");
			document.documentElement.style.setProperty('--poly-height', `${poly_height}px`);
			//console.log("Polygonhöhe: "+$("#testid").outerHeight(true));
			
			var offset = 0;
			var pcontainer_height = $(".pcontainer").height();
			$(".category-background").css("height", offset+pcontainer_height+"px");
}

StateManager.registerListener([
	{
	    state: '*',
	    exit: function() 
	    { 
	    	//updatePolys();
	    	//document.documentElement.style.setProperty('--poly-width', `39vmin`);
	    }
	},
	{
	    state: 'l',
	    enter: function() 
	    { 
	    	//document.documentElement.style.setProperty('--poly-width', `30vmin`);
	    }
	}


]);
	
            </script>
            

</div>
                            
                        
                                                                <div class="emotion--sizer-xs col--1" data-rows="1" style="height: 240px;"></div>
                                                            
                                                                <div class="emotion--sizer-s col--1" data-rows="1" style="height: 240px;"></div>
                                                            
                                                                <div class="emotion--sizer-m col--1" data-rows="1" style="height: 240px;"></div>
                                                            
                                                                <div class="emotion--sizer-l col--1" data-rows="1" style="height: 240px;"></div>
                                                            
                                                                <div class="emotion--sizer-xl col--1" data-rows="1" style="height: 240px;"></div>
                            
                                                        <div class="emotion--sizer col-1" data-rows="1" style="height: 240px;"></div>
                        
                                    </section>