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


/*beginn handy-----------------------------*/
@media screen and (max-width: 600px)   {
			body {
				background-color: var(--bgfarbe);
			}
			
			#topheader {
				
				background: url("../img/loewin2-025.jpg") center/cover;
				position: relative; 
				z-index: 2;           
			}
	
/*	formular ----------------   */
			h4 {
			text-align: left;
			}
			form p {
				margin: 0.5rem 0; 
			}
			form input, form textarea {
				background: none;
				width: 100%;
				border: none;
				outline: none;
				border-bottom: 1px solid;
				font-size: 1rem;
				padding: 0.3rem;
			}
			form input:focus, form textarea:focus {
				background: #fff;
			}
			form label {
				width: 100%;
				display: inline-block;
				text-align: right;
				padding-right: 5px;
				vertical-align: top;
			}
			#dsgvo {
				
				font-size: 1rem;
				
			}
			form input[type="submit"] {
				border: 1px solid;
				margin-top: 10px;
				
				padding: 0.5rem 1rem;
				transition: 0.5s;
				border-radius: 3px;
			}
			form input[type="submit"]:hover {
				background: rgba(199,128,129,0.67);
			}
			form input[type="checkbox"], form input[type="radio"] {
				accent-color: rgba(199,128,129,0.67);
			}
			form a {
				color: rgba(199,128,129,0.67);
			}
/*	 ende formular ----------------   */

			.flex {
                display: flex;
				position: relative;
            }
          
	
	
	
			.blatt1 {
				top: 50px;
				left: -60px;
				position: absolute;
				transform: rotate(20deg);
			}

			.blatt2 {
				top: 100px;
				left: -20px;
				position: absolute;
				transform: rotate(50deg);
			}
			.blatt3 {
				top: 80px;
				left: -30px;	
				position: absolute;
				transform: rotate(60deg);
			}
			.blatt1a {
				top: 50px;
				right: -60px;
				position: absolute;
				transform: scaleX(-1);
				transform: rotate(-20deg);
			}

			.blatt2a {
				top: 100px;
				right: -20px;
				position: absolute;
				transform: scaleX(-1);
				transform: rotate(-50deg);
			}
			.blatt3a {
				top: 80px;
				right: -30px;	
				position: absolute;
				transform: scaleX(-1);
				transform: rotate(-60deg);
			}

			.wrapper900  {
				padding: 2%;
			}
	
			.kontaktform  {
				width: 100%;
				padding-left: 2%;
	
			}
			
			.kontaktform p {
				
				text-align: left;
			}
			.anfahrt {
				
				height: 100%;
				width: 100%;
				
			}
			.anf-text {

				padding: 2%;

			}

			.anf-img {

			
			padding: 2%;
			
		}
		.giraffen {
			display: none;
		}
	}
/*--- ende handy ------------------		*/



/* tablet ------------------------------------*/	
@media screen and (min-width:601px) and (max-width:900px){
			body {
				background-color: var(--bgfarbe);
			}
			
			#topheader {
				
				background: url("../img/loewin2-025.jpg") center/cover;
				position: relative; 
				z-index: 2;           
			}
	
/*	formular ----------------   */
			h4 {
			text-align: left;
			}
			form p {
				margin: 0.5rem 0; 
			}
			form input, form textarea {
				background: none;
				width: 100%;
				border: none;
				outline: none;
				border-bottom: 1px solid;
				font-size: 1rem;
				padding: 0.3rem;
			}
			form input:focus, form textarea:focus {
				background: #fff;
			}
			form label {
				width: 100%;
				display: inline-block;
				text-align: right;
				padding-right: 5px;
				vertical-align: top;
			}
			#dsgvo {
				
				font-size: 1rem;
				
			}
			form input[type="submit"] {
				border: 1px solid;
				margin-top: 10px;
				
				padding: 0.5rem 1rem;
				transition: 0.5s;
				border-radius: 3px;
			}
			form input[type="submit"]:hover {
				background: rgba(199,128,129,0.67);
			}
			form input[type="checkbox"], form input[type="radio"] {
				accent-color: rgba(199,128,129,0.67);
			}
			form a {
				color: rgba(199,128,129,0.67);
			}
/*	 ende formular ----------------   */

			.flex {
                display: flex;
				position: relative;
            }
          
	
	
	
			.blatt1 {
				top: 50px;
				left: -60px;
				position: absolute;
				transform: rotate(20deg);
			}

			.blatt2 {
				top: 100px;
				left: -20px;
				position: absolute;
				transform: rotate(50deg);
			}
			.blatt3 {
				top: 80px;
				left: -30px;	
				position: absolute;
				transform: rotate(60deg);
			}
			.blatt1a {
				top: 50px;
				right: -60px;
				position: absolute;
				transform: scaleX(-1);
				transform: rotate(-20deg);
			}

			.blatt2a {
				top: 100px;
				right: -20px;
				position: absolute;
				transform: scaleX(-1);
				transform: rotate(-50deg);
			}
			.blatt3a {
				top: 80px;
				right: -30px;	
				position: absolute;
				transform: scaleX(-1);
				transform: rotate(-60deg);
			}

			.wrapper900  {
				padding: 2%;
			}
	
			.kontaktform  {
				width: 100%;
				padding-left: 2%;
	
			}
			
			.kontaktform p {
				
				text-align: left;
			}
			.anfahrt {
				
				height: 100%;
				width: 100%;
				
			}
			.anf-text {

				padding: 2%;

			}

			.anf-img {

			
			padding: 2%;
			
		}
		.giraffen {
			display: none;
		}
	}

@media screen and (min-width:901px) {
		
			#topheader {

			background: url("../img/loewin2.jpg") center/cover;
			position: relative; 
			z-index: 2;           
			}
		
			#footer {
                background-image: url("../img/footerbeginn.png");
			}

			.wrapper900  {
			  text-align: center;
			  padding: 2%;
			  font: 1.2em sans-serif;
			  
			}
			.wrapper900 p {
			  
			 line-height: 1.5rem;
			  
			  
			}
			
			.logo {
				height: 150px;
				width: auto;
				top: 0;
				z-index: 5;
				
			}
	}

/*ende desktop ----------------------------*/