@charset "UTF-8";
/* CSS Document */



/*PHONE HOCH*/
@media (pointer: coarse)
and (orientation: portrait)
and (max-width: 1080px) {

	/* OVERHEAD */
	h1 {
		font-size: 3vw;
	}

	/* HEAD*/
	h2 {
		font-size: 8vw;
	}

	h3 {
		font-size: 5vw;
	}

	h4 {
		font-size: 7vw;
	}

	p {
		font-size: 3.75vw;
	}

/* GOLBAL */
	.text_abschnitt_beschreibungen {
		top: 5vw;
		width: 95vw;
	}
	.text_abschnitt_beschreibungen br {
		display: inline-block;
	}



	/* INTRO */
	.abschnitt_intro {
		position: relative;
		height: 100vw;
	}

	.intro_video_desktop {
		visibility: hidden;
	}
	.intro_video_mobile {
		position: absolute;
		width: 100vw;
		height: 110vw;
		left: 0vw;
		right: auto;
		top: -3vw;
		visibility: visible;
	}

	.intro_bild {
		width: 100vw;
		height: 100vw;
		left: 0vw;
		top: 5vw;
		background-image: url(../images/rooster_intro_save.png);
		background-size: cover;
	}

	.logo {
		width: 100vw;
		height: 20vw;
		top: 10vw;
	}

	.nav {
		z-index: -100;
	}

	.bild_intro_goldenegg {
		width: 20vw;
		height: 56.25vw;
		left: 40vw;
		right: auto;
		top: 58vw;
		background-image: url(../images/golden-egg.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.text_intro_ideaisking {
		position: absolute;
		width: 100vw;
		left: 0vw;
		top: 85vw;
	}
	.text_intro_ideaisking h2 {
		font-size: 5.5vw;
	}

	.text_abspann {
		left: 65vw;
		top: 55vw;
	}



	/* GWEN und AARON */
	.abschnitt_einzelkaempfer {
		height: 70vw;
	}

	.einzelkaempfer_left {
		width: 100vw;
		left: 0vw;
		top: 100vw;
	}

	.einzelkaempfer_right {
		width: 100vw;
		left: 0vw;
		top: 40vw;
	}

	.text_einzelkaempfer {
		top: 7vw;
	}

	.text_einzelkaempfer_aaron {
		width: 100vw;
		height: 12vw;
		left: 0vw;
		top: 2vw;
	}

	.text_einzelkaempfer_gwen {
		width: 100vw;
		height: 12vw;
		left: 0vw;
		top: 30vw;
	}

	.text_einzelkaempfer_description {
		position: relative;
		width: 100vw;
		left: 0vw;
		top: 0vw;
	}

	.bild_einzelkaempfer_pfeil {
		width: 6vw;
		margin-left: 2vw;
		margin-top: 0.5vw;
	}

	.einzelkaempfer_unterstreichung_left {
		width: 45vw;
		height: 0.3vw;
		margin-top: 0.1vw;
	}

	.einzelkaempfer_unterstreichung_right {
		width: 54vw;
		height: 0.3vw;
		margin-top: 0.1vw;
	}




	/* LEISTUNGEN */
	.abschnitt_leistungen {
		height: 220vw;
	}

	.text_leistungen_liste {
		top: 20vw;
		margin-right: 0vw;
	}

	.text_leistungen_liste h2 {
		margin-right: 0vw;
		display: block;
	}

	.text_leistungen_handschrift {
		height: 10vw;
		left: 0vw;
		top: 195vw;
	}




	/* PROJEKTE */
	.abschnitt_projekte {
	 height: 235vw;
	}

	.text_projekte_handschrift_desktop {
		visibility: hidden;
		z-index: 0;
	}

	.text_projekte_handschrift_mobile {
		position: absolute;
		width: 100vw;
		height: 200vw;
		top: 10vw;
		left: 0vw;
		visibility: visible;
		z-index: 0;
	}

	.projektbilder {
		transform: scale(0.4);
		z-index: 10;
	}

	.projektbilder:hover {
		transform: scale(1);
		z-index: 20;
		left: 5vw;
	}

	/* blueestate */
	.projekt_a {
		left: -20vw;
		top: 20vw;
	}
	/* bosch */
	.projekt_b {
		left: 50vw;
		top: 30vw;
	}
	/* cor */
	.projekt_c {
		left: -5vw;
		top: 44vw;
	}
	/* gazi */
	.projekt_d {
		left: -5vw;
		top: 125vw;
	}
	/* gieser */
	.projekt_e {
		left: -20vw;
		top: 85vw;
	}
	/* wmf */
	.projekt_f {
		left: 30vw;
		top: 116vw;
	}
	/* lonely planet */
	.projekt_g {
		left: 0vw;
		top: 180vw;
	}
	/* lidl */
	.projekt_h {
		left: 40vw;
		top: 156vw;
	}
	/* marco polo */
	.projekt_i {
		left: -15vw;
		top: 155vw;
	}
	/* puma */
	.projekt_j {
		left: 20vw;
		top: -10vw;
	}
	/* weinheimat */
	.projekt_k {
		left: 20vw;
		top: 80vw;
	}




	/* KUNDEN */
	.abschnitt_kunden {
		height: 120vw;
		padding-top: 12vw;
	}

	.text_kunden_einleitung {
		position: absolute;
		width: 90vw;
		left: 5vw;
		top: 35vw;
	}

	.text_kunden_handschrift {
		width: 100vw;
		height: 30vw;
		left: 0vw;
		top: 93vw;
	}

	.video_kundenlogos {
		width: 100vw;
		height: 70vw;
		left: 0vw;
		top: 55vw;
		z-index: -20;
	}

	.kundenlogoswrapper {
		top: 60vw;
		left: 2vw;
		width: 98vw;
		display: inline;
	  grid-template-rows:10vw;
	  grid-template-columns: 100vw;
	}

	.kundenlogo {
		width: 19vw;
		height: 10vw;
		margin: 2.5vw;
	}





	/* AGENTUREN */
	.abschnitt_agenturen {
		position: relative;
		height: 30vw;
		top: -2vw;
		overflow: hidden;
	}

	.agenturen_logobandbox {
		padding-top: 15vw;
		transform: scale(1.5);
	}

	.agenturen_logoband-scroll_mobile {
		position: absolute;
		margin-left: 155vw;
		visibility: visible;
		height: 50vw;
	}

	.agenturen_logoband-scroll_desktop {
		visibility: hidden;
	}




	/* WIR */
	.abschnitt_wir {
		height: 175vw;
		margin-top: -10vw;
	}

	.text_wir_1 {
		top: 20vw;
	}

	.text_wir_2 {
		top: 70vw;
	}

	.text_wir_handschrift {
		position: absolute;
		width: 100vw;
		height: 20vw;
		left: 0vw;
		top: 122vw;
	}

	.bild_wir_goldenegg {
		position: absolute;
		width: 100vw;
		height: 80vw;
		left: 0vw;
		right: auto;
		top: 90vw;
		background-image: url(../images/golden-egg.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}




	/* ÜBER UNS */
	.abschnitt_ueberuns {
		height: 145vw;
	}

	.text_ueberuns {
		width: 70vw;
		left: 20vw;
		top: 50vw;
	}

	.text_ueberuns_handschrift {
		position: absolute;
		width: 45vw;
		height: 20vw;
		left: -12vw;
		top: 20vw;
		rotate: 92deg;
	}

	.text_ueberuns_skill {
		position: absolute;
		width: 100vw;
		left: -40vw;
		top: 86vw;
		text-align: left;
		transform: scale(0.8);
		rotate: 90deg;
	}

	.bild_ueberuns {
		width: 40vw;
		height: 52vw;
		left: 42vw;
		top: -10vw;
		rotate: 3deg;
	}



	/* KONTAKT */
	.abschnitt_kontakt {
		height: 125vw;
		margin-top: 2vw;
	}

	.text_kontakt_handschrift_schrift {
		width: 100vw;
		height: 20vw;
		left: 0vw;
		top: 25vw;
	}

	.text_kontakt_handschrift_striche {
		position: absolute;
		width: 20vw;
		height: 20vw;
		left: 30vw;
		top: 73vw;
	}

	.bild_kontakt_scream {
		height: 65vw;
		right: 0vw;
		bottom: 0vw;
	}

	.text_kontakt_inhalt {
		width: 90vw;
		top: 48vw;
		left: 7vw;
	}

	.bild_kontakt_letter {
		width: 10vw;
		height: 5vw;
		margin-top: 2vw;
		margin-left: 3vw;
		margin-right: 3vw;
	}

	.kontakt_unterstreichung {
		position: absolute;
		width: 73vw;
		height: 0.2vw;
		top: 10vw;
		left: 4vw;
	}


}