" title="Taywa Webagentur">
			<svg version="1.1" viewBox="215 213 440 170" width="440px" height="170px" xmlns="http://www.w3.org/2000/svg">
				<use href="#wortmarke" class="basecol"></use>
				<use href="#pfeil" class="cyan"></use>
			</svg></a>
		</div>
		<div class="maxw">
    <h2 class="from-top to-top">Interessiert?</h2>

	<div class="from-bottom  to-bottom">
		<div id="contact" class="txtbox broad">
			<p><strong>Kommen Sie auf einen Kaffee vorbei:</strong></p>
			<p>Taywa&nbsp;GmbH, Räffelstrasse&nbsp;11, 8045&nbsp;Zürich<br/>
				<a id="maillink" href="#">
					<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg>
					info<span style="display:none;"> </span>@<span style="display:none;"> </span>taywa.ch</a>
					&nbsp; &nbsp; <a href="tel:+41432052940" title="Kontakt Telefon"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="phone-alt" class="svg-inline--fa fa-phone-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22"><path fill="currentColor" d="M493.09 351.3L384.7 304.8a31.36 31.36 0 0 0-36.5 8.9l-44.1 53.9A350 350 0 0 1 144.5 208l53.9-44.1a31.35 31.35 0 0 0 8.9-36.49l-46.5-108.5A31.33 31.33 0 0 0 125 .81L24.2 24.11A31.05 31.05 0 0 0 0 54.51C0 307.8 205.3 512 457.49 512A31.23 31.23 0 0 0 488 487.7L511.19 387a31.21 31.21 0 0 0-18.1-35.7zM456.89 480C222.4 479.7 32.3 289.7 32.1 55.21l99.6-23 46 107.39-72.8 59.5C153.3 302.3 209.4 358.6 313 407.2l59.5-72.8 107.39 46z"></path></svg> 043 205 29 40</a>
			</p>
		</div>
		<!-- div id="archive">
			<p><strong>Oder erfahren Sie mehr über unsere&nbsp;&hellip;</strong></p>
			<p>
				<span class="from-small to-small from-delay"><a href="/portfolio/" title="Projekte von Taywa">Referenzen</a></span>
				<span class="from-small to-small from-delay"><a href="/kompetenz/" title="Taywa Netzkompetenz">Dienst&shy;leistungen</a></span>
				<span class="from-small to-small from-delay"><a href="/taywa/" title="Firmenportrait von Taywa">Firma</a></span>
			</p>
		</div -->
	</div>
  </div></div>
</main>
</div>
</div>

<!-- script id="threejs" src="start/three-145.min.js" async></script -->
<!-- <script id="triangles" src="" async></script>start/vanta.waves-524.min.js -->
<script id="jq" src="start/jquery.slim-361.min.js" async></script>
<script id="swiper" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" async></script>
<script>
ta = {};
ta.startTime = performance.now();
ta.cases = [
	{
		tit: 'Abendrot Wirkungsreise',
		url: 'https://www.abendrot.ch/wirkungsreise/',
		img: 'wirkungsreise',
	},
	{
		tit: 'Aebi Schmidt Group',
		url: 'https://www.aebi-schmidt.com',
		img: 'aebi-schmidt',
	},
	{
		tit: 'BuchBasel Literaturfestival',
		url: 'https://www.buchbasel.ch',
		img: 'bb',
	},
	/*{
		tit: 'Internationales Bachfest',
		url: 'https://www.bachfest.ch',
		img: 'bach',
	},*/
	{
		tit: 'Albin Kistler',
		url: 'https://www.albinkistler.ch',
		img: 'aki',
	},
	{
		tit: 'Kantonsschule Hohe Promenade',
		url: 'https://www.kshp.ch',
		img: 'kshp',
	},
	{
		tit: 'Alberto Giacometti Stiftung',
		url: 'https://www.giacometti-stiftung.ch',
		img: 'giaco',
	}
];
ta.curcase = 0;
ta.caseMax =  ta.cases.length -1;

ta.showWaves = function(){
	if( typeof(window.THREE) == 'object'){
		VANTA.WAVES({
			el: '#taywa',
			//color: 0x002031,
			color: 0x041828,
			shininess: 50.00,
			waveSpeed: 0.50,
			zoom: 1.4,
		});
	} else {
		console.log('THREE not ready');
	}

}
ta.initWaves = function(){

	const delay = 3700 - performance.now() + ta.startTime;
	console.log('delay', delay);
	window.setTimeout(ta.showWaves,  delay );
}


ta.loadWaves = function() {
	let triangles = document.createElement('script');

	triangles.setAttribute('src','start/vanta.waves-524.min.js');
	triangles.addEventListener('load', ta.initWaves );
	document.head.appendChild(triangles);

};

if ('IntersectionObserver' in window) {
	ta.addObserver = function(el, options) {
	  let observer = new IntersectionObserver((entries, observer) => {
	   	entries.forEach(entry => {
	    	if(entry.isIntersecting) {
	    		entry.target.classList.remove('above');
	    		entry.target.classList.remove('below');
	/*				if(entry.boundingClientRect.top > 0) {
						// enter from below
					} else {
						// entry from above
					}*/
	    	}else{
			    if(entry.boundingClientRect.top > 0) {
		    		entry.target.classList.add('below');
			    } else {
		    		entry.target.classList.add('above');
			    }
	    	}
	    })
	  }, options)
	  observer.observe(el)
	}

	ta.scrollTrigger = function(selector, options = {}) {
	  let els = document.querySelectorAll(selector)
	  els = Array.from(els)
	  els.forEach(el => {
	  	el.classList.add('below');
	    ta.addObserver(el, options)
	  })
	}
}


ta.init = function() {
	ta.slides = new Swiper ('.swiper-container', {
		loop: true,
		grabCursor: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

	$('#team li a').click(function (e) {
		e.preventDefault();
		e.stopPropagation();
		$t = $(this);

		ta.slides.slideTo( $t.parent().index() + 2 );
		return false;
	});

	ta.iframes = $('#cases iframe');
	ta.case = $('#cases .case');
	ta.casetit = $('#casetit');

	var switchCase = function (dir) {
		ta.iframes.hide();

		ta.curcase += dir;
		if(ta.curcase<0){
			ta.curcase = ta.caseMax;
		}else if(ta.curcase > ta.caseMax){
			ta.curcase = 0;
		}
		ta.case.eq(0).css('background-image', 'url("start/ref-labtop-'+ ta.cases[ta.curcase].img +'.jpg")');
		ta.case.eq(1).css('background-image', 'url("start/ref-mobile-'+ ta.cases[ta.curcase].img +'.jpg")');
		ta.casetit.addClass('out');
		window.setTimeout( "ta.casetit.text( ta.cases[ta.curcase].tit ).removeClass('out');", 400);
	}
	var interact = function(e){
		ta.iframes.attr('src', '');
		window.setTimeout( "ta.iframes.attr('src', ta.cases[ta.curcase].url );", 10);
		window.setTimeout( "ta.iframes.show()", 20);
	}
	$('.interact').click(interact);

	var nextCase = function (e) {
		e.preventDefault();
		switchCase(1);
	}
	var prevCase = function (e) {
		e.preventDefault();
		switchCase(-1);
	}
	$('#cases .swiper-button-next').click(nextCase);
	$('#cases .swiper-button-prev').click(prevCase);

	switchCase(0);

	const initPhotoPx = function(el){

		let htmlstr = '';
		let ypos = 0;
		let xpos = 0;
		const xcount = 25;
		const ycount = 25;
		const max = ycount * xcount;
		let delay = max;
		let mydelay = 0;
		const size = 100 / xcount;

		for (let y = 0; y < ycount; y++) {
			ypos = y * size;
			for (let x = 0; x < xcount; x++) {
				delay--;
				if(y > Math.random()*ycount  ){

					if(x - 4 > Math.random()*xcount / 3 ){
						if(x + 4 < Math.random()*xcount* 1.1 ){
							xpos = x * size;
							mydelay = delay / 5 + Math.floor( Math.random() * 1000 );
							htmlstr += '<div class="pxw" style="--l:'+ xpos +';--t:'+ ypos +'"></div><div class="px" style="--l:'+ xpos +';--t:'+ ypos +';--delay:'+ mydelay +'ms"></div>';
						}
					}
				}
			}
		}
		console.log(el, htmlstr);
		el.innerHTML += htmlstr;
	}

	$('#rat, #ys, #mg').each( (i,el) => initPhotoPx(el));

	$('#maillink').attr('href', "mailto:info@taywa.ch?subject=" + encodeURIComponent("Interesse an Taywa"));


//	ta.addObserver('.section');
	if ('IntersectionObserver' in window) {
		ta.scrollTrigger(
			'main .section', {
				rootMargin: '0px',
			  threshold: 0.5
			}
		);
	}

	let three = document.createElement('script');

	three.setAttribute('src','start/three-145.min.js');
	three.addEventListener('load', ta.loadWaves );
	document.head.appendChild(three);
	
};



if(typeof(Swiper)=== "function" && typeof($) === "function"){
	ta.init();
}else{

	document.getElementById('jq').addEventListener('load', function() {
		if(typeof(Swiper) === "function"){
			ta.init();
		}
	});

	document.getElementById('swiper').addEventListener('load', function() {
		ta.swiper = true;
		if(typeof($) === "function"){
			ta.init();
		}
	});
}
</script>
</body>
</html>
 viewBox="0 0 33.3 62" width="33.3" height="62" xmlns="http://www.w3.org/2000/svg"><use class="ico" href="#prev"></use></svg></div>
	<div class="swiper-button-next from-right to-right from-delay"><svg version="1.1" viewBox="0 0 33.3 62" width="33.3" height="62" xmlns="http://www.w3.org/2000/svg"><use class="ico" href="#next"></use></svg></div>
	</div>
	</div>

	<div id="allteam" class="section">
		<div class="row left slides swiper-container"><div class="swiper-wrapper">

			<div id="team" class="row swiper-slide" style="background-image: url('start/team-taywa-2025.webp'); background-size: 100% auto; background-position: right bottom; background-color: #fff;">
				<div class="maxw"> 
					<h2 class="from-left to-right">Team</h2>
					<div class="txtbox from-right to-bottom to-delay">
						<p>Seit fast 20 Jahren arbeiten wir effizient und leidenschaftlich für unsere Kunden: mit Liebe zum Detail, elegantem Code und einem Auge für Design.</p>
						<ul>
							<li><a href="#" title="Kurzportrait von Roman Abt">Roman Abt, Partner ›</a></li>
							<li><a href="#" title="Kurzportrait von Yves Serrano">Yves Serrano, Partner ›</a></li>
							<li><a href="#" title="Kurzportrait von Marcel Gschwend">Marcel Gschwend, CFO ›</a></li>
						</ul>
					</div>
				</div>
		  	</div>
			<div id="rat" class="row swiper-slide">
				<div class="maxw">
					<h2>Roman Abt</h2>
					<div class="txtbox narrow">
						<p>UX &amp; UI Designer, Frontend Developer und CSS3 / Javascript Wizard</p>
					</div>
				</div>
		  	</div>
			<div id="ys" class="row swiper-slide">
				<div class="maxw">
					<h2>Yves Serrano</h2>
					<div class="txtbox narrow">
						<p>Application Architect, Spezialist für Toolchain, Deployment & Operations</p>
					</div>
				</div>
		  	</div>
			<div id="mg" class="row swiper-slide">
				<div class="maxw">
					<h2>Marcel Gschwend</h2>
					<div class="txtbox narrow">
						<p>Unser Mann für Zahlen</p>
					</div>
				</div>
		  	</div>
		</div>
		<div class="swiper-button-prev from-left to-left from-delay"><svg version="1.1" viewBox="0 0 33.3 62" width="33.3" height="62" xmlns="http://www.w3.org/2000/svg"><use class="ico" href="#prev"></use></svg></div>
		<div class="swiper-button-next from-right to-right from-delay"><svg version="1.1" viewBox="0 0 33.3 62" width="33.3" height="62" xmlns="http://www.w3.org/2000/svg"><use class="ico" href="#next"></use></svg></div>
		</div>
	</div>

  <div id="more" class="section row center inv">
  		<div class="logo"><a href="home/index.html