/* CSS Document */
/* thank you for looking at this code */
/* Design by WebMultiMedia Gmbh, Anita Messerli */







                                                   /**************************************************************************************************************************************************************************************/

                                                                                                            /*  Meine ganze Websetie CSS - My Creative  Webdesign */


                                                  /**************************************************************************************************************************************************************************************/





                     /********************************************************************************/
	
		                            /* Websetie Schrift  Montserrat */

                     /*******************************************************************************/


		
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;500;700&display=swap');



      /***********************************************************************************************************************************************************************************************************************************************/

		                                                                                                     /* 1 Seite  der Webseite / Startseite nmit Video */

      /**********************************************************************************************************************************************************************************************************************************************/


	
 *{
   box-sizing:border-box;
   list-style: none; 
   margin:0;
   padding:0;
   text-decoration: none;			
 }

html {
	height: 100%;
	
}

 body,html{
	 scroll-behavior: smooth;
	}


 body  {
	 background:url("../Bilder/cabin.jpg");
	 background-attachment: fixed;
	 background-size:cover;
	 font-family: 'Montserrat';
	 overflow-x: hidden;
}

  header{
	margin:0 auto;
	max-width: 2000px;
	padding:2rem;
	width:95%;
	
}

  video{
	  background: url("../medien/fensterl.mp4");
	  background-size: cover; 
	  height:100vh;
	  left:0; 
	  object-fit: cover;
	  opacity:0.7;
	  position: fixed;
	  top:0;
      width:100%;
      z-index:-1;
	}

 a{
  color:rgba(250,235,215);
}


 .background_start {
	background:none;
	 
}
		
  /*.scrolldown {
	 animation:jumper;
	 animation-duration: 1s;
	 animation-deley:2s;
	 animation-iteration-count:4;
	 background:none;
	 bottom:0;
	 color:wheat;
	 font-size:3rem;
	 position:absolute;
     right:90%;
     text-shadow:3px 3px 3px rgba(33,33,33,0.8);	
}
*/
.scroll{
	position: fixed;
	top: 50%;
	border: 1px solid black;
	right:0;
	display:block;
	width:80px;
	height: 70px;
	background: #DAA520;
	text-align: center;
	line-height: 80px;
	color: black;
	font-size: 15px;
	text-decoration: none;
	z-index: 10000;
}

.scroll.down{
	top: calc(50% - 80px);
	background:#DAA520;
}


/*.down {
	 animation:jumper;
	 animation-duration: 1s;
	 animation-deley:2s;
	 animation-iteration-count:4;
	 background:none;
	 bottom:0;
	 color:wheat;
	 font-size:3rem;
	 position:absolute;
     left:90%;
     text-shadow:3px 3px 3px rgba(33,33,33,0.8);	
}

  @keyframes jumper {
	0%    {bottom:0;}
	100%  {bottom:3rem;}

}

  */


           /********************************************************************************/

                                 /* Socialmedia Buttons, Startseite */

                 /*********************************************************************************/

.social{
    display:flex;
	flex-direction: column;
	height: 100vh;
	justify-content: center;
	position: fixed;
	transform: translate(-218px, 0);
	top:15%;
	color:wheat;
			
 }

.social a{
	 background: rgba(0, 0, 0, 0.4);
	 border-radius:50px;
	 color: wheat;
	 display: block;
	 font-size: 20px;
	 font-weight: 500;
	 justify-content: center;
	 margin: 5px;
	 padding: 20px;
	 text-align: right;
	 text-decoration:none;
	 transition: 1s;
	 transition-property: transform;
	 width: 200px;
	
}

 .social a:hover{
	   transform: translate(120px, 0);
				   
}

.social i{
	  font-size: 30px;
	  height: 30px;
	  margin-left: 10px;
	  width: 30px;
	
}

 .social a:nth-child(1) i{
	    color:rgba(16,14,197,1.00);

}

 .social a:nth-child(2) i{
	    color:rgba(244,8,12,1.00);
				 
}

 .social a:nth-child(3) i{
	   background-image:linear-gradient(45deg, #FFDF9E, #E56969, #8A49A1);
	   -webkit-background-clip: text; 
	   color:transparent;
	   font-weight: 600;
				 
 }


                  /************************************************************************************/

                                        /* Logo , Startseite - auf allen Seiten */

                  /*************************************************************************************/

 .logo {
     align-items: left; 
	 display: fixed;
	 flex-direction: column; 
	 justify-content: center;
	 margin: 0rem;
	 padding:0rem;
	 position: fixed;
	 width: 28%;

	 z-index:-1px;
	
 }

  .logo_klein {
	      height:20rem;
          font-size:20rem;
}


                    /*********************************************************************************************-*/

                                                /*     Überschrift 1  Startseite mit Animation    */

                     /*-**********************************************************************************************/

  h1{
     animation: backcolor 5s linear infinite alternate;
	 -webkit-background-clip: text;
	 background-position: -750px 0;
	 background-size: cover;
	 background-image: linear-gradient(#ffff,#ffff);
	 background-repeat: no-repeat;
	 /* -webkit-text-stroke: 1px #fff; */
	 color:transparent;
	 display:relative; 
	 font-size: 95px;
	 left:60%; 
	 position: absolute;
     transform: translate(-50%, -50%);
	 top:60%;
   
 }

   @keyframes backcolor{
	    100%{
		     background-position: 0 0;
	  }
    }


                  /********************************************************************************************/

                                                  /* Menuband, Startseite */

                  /*********************************************************************************************/


  .hauptnavigation{
	 display: fixed;
	 padding: 1rem;
	 color:whitesmoke;
	
}

  nav ul{
	  float: right;
	  margin: 30px;
	  padding: 30px;
}

  nav ul li{
	   display: inline-block;
	   line-height: 80px;
	   margin: 1px;
	   color:white;
}

  nav ul li a{
		border: 5px solid transparent;
		border-radius: 3px;
	    color:whitesmoke;
	    font-size: 42px;
		padding: 11px 11px;
		text-shadow:5px 5px 5px rgba(33,33,33,0.8);
	    text-transform: capitalize;
	    margin:2.5px;
}

  a.active,a:hover{
	     border: 3px solid wheat;
		 color: silver;
		 transition: .5s;
}

 
	/***********************************************************************************************************************************************************************************************************************************************************************/

		                                                                                                                     /*  2 Seite  der Webseite: Ueberschriften der Titeln Anbebotsseite  */


	/**********************************************************************************************************************************************************************************************************************************************************************/
	
h2{
	display: block;
	color:wheat;
	font-size: 2rem;
	margin:0rem;
	padding:2rem;
	text-align: center;
 }

h2 p{
	   margin:3rem;
	   font-size:1.2rem;
       text-align: center;
	   display:block;
	   
}
		
  h3{
	  color:whitesmoke;
	  display:block;
	  font-size: 5rem;
	  font-weight:900;
	  float:center;
	  margin:10rem;
	  padding:3rem;
	  postition:relative;
	  text-align: center;
	  text-shadow:5px 5px 5px rgba(33,33,33,0.8);
	 
}
		
  h3 span{
	  color:goldenrod;
}
		
  h4{
	background:rgb(218,165,32);
	border-radius: 4rem;
	color:black;
	display:block;
	font-size: 3.5rem;
	font-weight:400;
	margin:6rem;

	padding:2rem;
	text-align: center;
	text-shadow:5px 5px 5px rgba(33,33,33,0.8);
	
}
h4 p{
	   margin:2rem;
	   font-size:2.5rem;
	   display:block
}
		
  h5{
    display: block;
	color:white;
	font-size: 3rem;
	font-weight:300;
	margin:5rem;
	padding:2rem;
	text-align: center;
   
	
}
	
h5 p{
	margin:3rem;
    text-align: center;
	font-size:2rem;
 
}
h5 span{
	color:wheat;
}	
  
h6{
	color:antiquewhite;
    display:block;
	margin:6rem;
	font-size:3rem;
	text-align: center;
	
}

h6 p{
	margin:3rem;
	font-size:2rem;
	
}

h6 span{
	color:white;
	display:block;

	
}
                /*****************************************************************************************/

		                 /* Alle Textgrössen,  aller Seiten / Angebot, über mich und Kontakt */

		         /***************************************************************************************/
		
 p{
   color:white;
   display: block;
   font-size:1.6rem;
   margin:8rem;
 
	 
}
.text{
	margin:5rem;
	
}	

.text p {
	display:block;
	margin:1rem;

}
.text span{
	list-style-position: outside;
}
          /*-******************************************************************************************-*/

	               /*   Bildcontainer und Einstellungen  für Karussel, Angebotsseite  */

	     /************************************************************************************************/
		
 .bildcontainer{
	  display: flex;
	  height: 100vh;
	  overflow: hidden;
	  width: 100%;
}
		
 .carousel{
	 margin: 200px auto 0;
	 overflow: visible;
	 width: 300px;
}

  .carousel img{
	  -webkit-box-reflect: below 20px linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.3));
	  
}
		
		           /*******************************************************************************************************/

		                      /*      Drehender Würfel, Angebotsseite     */

		          /**********************************************************************************************************/

 .animationen{
	
	  display:flex;
	  justify-content: space-between;
	  margin:3rem;
	  padding:1rem;
	  width: 100%;
			
}
 .cube{
	  animation: animate_wuerfel 4s linear infinite;
	  height: 300px;
	  margin:10rem;
	  position: relative;
	  transform-style: preserve-3d;
	  transform: rotateX(-30deg);
	  width: 300px;
	 
}
		
   @keyframes animate_wuerfel{
		0%{
			transform: rotateX(-30deg) rotateY(0deg);
		   }
	   
		100%{
		    transform: rotateX(-30deg) rotateY(360deg);
		}
}
		
 .cube div{
	 height: 100%;
	 left: 0;
	 position: absolute;
	 top: 0;
	 transform-style: preserve-3d;
	 width: 100%;
			
}
  .cube div span{
	  background: linear-gradient(#151515,#00ec00);
	  height: 100%;
	  left: 0;
	  position: absolute;
	  top: 0;
	  transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
	  width: 100%;
			
}
  .top{
	  background: #222;
	  height: 100%;
	  left: 0;
	  position: absolute;
	  top: 0;
	  transform: rotateX(90deg) translateZ(150px);
	  width: 100%;
			
}
		
  .top::before{
		background: #0f0;
		box-shadow: 0 0 120px rgba(0,255,0,0.2),
		0 0 200px rgba(0,255,0,0.4),
		0 0 300px rgba(0,255,0,0.6),
		0 0 400px rgba(0,255,0,0.8),
		0 0 500px rgba(0,255,0,1);
		content:'';
		filter: blur(20px);
		height: 100%;
		left: 0;
		position: absolute;
		transform:translateZ(-380px);
		top: 0;
		width: 100%;
				
}
		
	        /****************************************************************************************/

		                           /* Drehende Pyramide, Angebotsseite */

		   /*******************************************************************************************/

			
 .pyramide{
	   animation: animate_pyramide 8s linear infinite;
	   height: 300px;
	   margin:7rem;
	   position: relative;
	   transform-style: preserve-3d;
	   width: 300px;
	 
}
		
  .pyramide div{
	  height: 100%;
	  position: absolute;
	  top: 0;
	  right: 0;
	  transform-style: preserve-3d;
	  width: 300px;
		
}
		
  .pyramide div span{
		background: linear-gradient(#33FFFF,#0000ff);
		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		transform: rotateY(calc(90deg * var(--i))) translateZ(150px) rotateX(30deg);
		transform-origin: bottom;
	    width: 300px;
			
}
	
   .pyramide .glow{
	   background: #33FFFF;
	   box-shadow: 0 0 120px rgba(0,0,255,0.2),
			0 0 200px rgba(0,0,255,0.4),
			0 0 300px rgba(0,0,255,0.6),
			0 0 400px rgba(0,0,255,0.8),
			0 0 500px rgba(0,0,255,1);
	    filter: blur(20px);
	    height: 100%;
		position: absolute;
	    right: 0;
		top: 0;
		transform: rotateX(90deg) translateZ(-250px);
		width: 100%;
			
}
		
	 @keyframes animate_pyramide{
		0%{
			transform: rotateX(-30deg) rotateY(0deg);
		   }
	   
		100%{
		    transform: rotateX(-30deg) rotateY(360deg);
		}
}
    

/*.scroll-button {
    animation:jumper;
	 animation-duration: 1s;
	 animation-deley:2s;
	 animation-iteration-count:4;
	 background:none;
	 bottom:0;
	 color:wheat;
	 font-size:3rem;
	 position:absolute;
     right:90%;
     text-shadow:3px 3px 3px rgba(33,33,33,0.8);
   
}
*/
	   /*********************************************************************************************************************************************************************************************************************************************************************/

		                                                                                                       /* 3 Seite der Webeseite: 4 vierecke mit schlangen , ueber mich*/
		
	   /*****************************************************************************************************************************************************************************************************************************************************************/
		
   .container{
	   align-items: center;
	   display: flex;
	   gap: 40px;
		/*-webkit-box-reflect: below 2px linear-gradient(transparent,#0005);*/
	   justify-content: center;
	   position: relative;
	   width: 100%;
		
}
			
	.container .box{
		animation: animate 0.5s linear infinite;
		background: linear-gradient(45deg,#00f376 10%,transparent 10%,transparent 50%,#00f376 50%,#00f376 60%,transparent 60%,transparent 100%);
		background-size: 40px 40px;
		filter: hue-rotate(calc(var(--i) *90deg));
		height: 200px;	
		position: relative;
		transform: rotate(calc(var(--i) * 90deg));
		width: 200px;
			
}
		@keyframes animate{
		0% {
		background-position:0;	
		}
		100%{
		background-position: 40px;	
		}
		
}


           /*********************************************************************************************************************************************/
          /**********************************************************************************************************************************************/

                               /* ueber mich zwei fotos, my und universum und vom Angebot Wuerfel und Mockup */

           /**********************************************************************************************************************************************/


.cover img{
     display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 height: 560px;
}

.cover .content {
  display:fixed;
  position: absolute; 
  bottom: 0; 
  width: 50%; 
  padding: 15px; 
  height: auto;
}

 .content p{
		display:flex;
		font-size:1.5rem;
}
.my img{
	 display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 height: 950px;
}
.projekt img{
     display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 height: 560px;
}	

.projekt {
     transition: transform 0.6s;
}

.projekt:hover {
     transform: translate(130px, 0px);

}



.webseite img{
	  display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 height: 560px;
}

.card-container{
	display:flex;
	justify-content: center;
	align-items: center;
	gap:30px;
	flex-wrap: wrap;
	padding:50px;

}
.card{
	width: 350px;
	height: auto;
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	padding:20px;
	transition: all .3s ease-in;
	background:rgb(218,165,32);
}

.card > *{
	padding:10px;
}

.card .card-image{
	height: 150px;
	width: 150px;
	border:5px double #022a3c;
	border-radius:50%;
	background-position: center center;
	background-size:cover;
	
}
.card .card-title{
	padding:20px 10px;
	font-size: 2rem;
	text-transform: uppercase;
	text-shadow: 1px 0px 2px 3262654;
}

.card:nth-child(1) .card-image{
	background-image: url("../Bilder/einfach.jpg");
	
}
.card:nth-child(2) .card-image{
	background-image: url("../Bilder/anita.jpg");
	
}
.card:nth-child(3) .card-image{
	background-image: url("../Bilder/enzian.jpg");
	
}
.card .card-text{
	display:block;
	font-size: 1.2rem;
    color:white;
}

/* Neue Zeilen mit zwei Kacheln */
.zeile {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

.zeilen-bild-behaelter {
	flex-basis: 40%;
	padding: 0 3rem;
}
.zeilen-bild {
	display: block;
	width: 95%;
	height: auto;

}
.zeilen-bild-behaelter:hover {
	transition:transform 0.7s;
	transform: translate(3em, 3em );
}

.zeilen-text {
	flex-basis: 40%;
	padding: 0 3rem;
}
.zeilen-text p {
	margin: 0 0 3rem 0;
}
	/*Visitenkarten**/

.article{
    display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}
.article_bild {
   flex-basis: 40%;
	padding: 0 3rem;
}


.vollbildcover {
	display: block;
	flex-basis: auto;
	width: 60%;
	height: auto;
}	
.article_text{
	flex-basis: 40%;
	padding: 0 3rem
}
.article_text p{
   margin: 0 0 3rem 0;
}
		/**************************************************************************************************************/
			
	                         /* Fotobilder, ueber mich */

		/**************************************************************************************************************/


.bildergalerie{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin:0 auto;
}

.bildergalerie img{
	align-items: center;
    border: 1px solid white;
	flex-direction: column;
	height: 350px;
	justify-content: center;
    object-fit: cover;
    object-position: center;
    margin:3rem;
    padding:1rem;
	width: 350px;
	 
}
					
.bildergalerie img:hover {
	transform:scale(1.2);
	transition:0.4s ease-in-out all;
}
	
.hover_effekt:hover {
	transform:scale(1.2);
	transition:0.4s ease-in-out all;
}	

.cover {
     transition: transform 0.6s;
}

.cover:hover {
     transform: translate(130px, 0px);

}


.my img {
     transition: transform 0.6s;
}

.my img:hover {
     transform: translate(130px, 0px);

}
				
                   /***************************************************************************/

                                        /* Youtube video - bei der Seite Ueber Mich */

                  /***************************************************************************/
		           
		
 iframe{
    display:block;
	height: 650px;
	margin:10rem auto;
	padding:1rem;
    width: 60%;
}

                    /***********************************************************************************************************************************************************************************************************************************/

                                                                                                            /* 4 Setie der Webseite Kontakt, Formular */

                  /************************************************************************************************************************************************************************************************************************************/
	

 .adresse{
	  align-items: center;
	  align-items: flex-start;
	  color:white;
	  display:fixed;
	  flex-wrap: wrap;
	  text-align: center;
}
	
.adresse p{
	margin:2rem;
	padding:2rem;
	
}
	a:link{
		color:wheat;
		font-weight: normal;
		text-decoration: none;
}

 .formular{
	  align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
}
	
	form {
		 align-items: center;
		 display:block;
		 max-width: 600px;
	     justify-content: center;
		 text-align: center;
      	 width:100%;
}
	
 .input-group{
		margin-bottom: 30px;
		position:relative;
	
}

 input, textarea{
		background: transparent;
		border: 2px solid rgb(218,165,32);
		color:white;
		font-size: 19px;
		outline: 0;
		padding: 30px;
		text-shadow:5px 5px 5px rgba(33,33,33,0.8);
	    width: 100%;
		
}

  label{
		color:white;
		cursor: text;
		font-size: 1.5rem;
		height: 100%;
		left: 0;
		padding: 10px;
		position: absolute;
		top: 0;
		transition: 0.2s;		
}

	button{
		background: transparent;
		border: 3px solid rgb(218,165,32);
		cursor: pointer;
		color: white;
		font-size: 1.5rem;
		outline: none;
		padding: 10px;
	    width: 100%;
}
	
	input:focus~label,
	input:valid~label,
    textarea:focus~label,
	textarea:valid~label{
		top:-35px;
		font-size: 14px;
}
	 
	.row{
		align-items: center;
		display:flex;
		justify-content: space-between;
}

	.row .input-group{
		flex-basis: 48%;
}
	
     .row_01{
		align-items: center;
		display:flex;
		justify-content: space-between;
}
	.row_01 .input-group{
		flex-basis: 48%;
}

           /*********************************************************************************************************************************************************************************************************************************************/

                                                                                                                   /* Ende der 4 Seiten  */

           /**********************************************************************************************************************************************************************************************************************************************/



         /*********************************************************************************************************************************************************************************************************************************************/

                                                                                                                /* Schluss der Webseite */

         /***************************************************************************************************************************************************************************************************************************************************/


  footer {
	  background-size:cover;
	  bottom:1rem;
	  color:white;
	  display:relative;
	  font-size: 1rem;
	  left:2rem;
	  justify-content: center;
	  padding:1rem;
	  position: fixed;
	  text-shadow:5px 5px 5px rgba(33,33,33,0.8);
    
 }

                     /*******************************************************************************************************/

                                                                /* Impressum */

                    /******************************************************************************************************-*/

 .impressum{
	
	display:block;
	font-size: 1rem;
	padding:1rem;
}

                    /********************************************************************************************************/

                                                                /* Datenschutz */

                    /*******************************************************************************************************/

 .datenschutz{
	 display:block;
	 font-size: 1rem;
	 padding:1rem;
	 
}

	
                /***********************************************************************************/

                                          /* Eigene Klassen  speziell */

                 /************************************************************************************/

  .article_oben {
		margin-top:13rem;
}

   .element_oben{
	    margin:1rem;
}
   .seite_oben{
	      margin-top:15rem;
}
   .anno_oben{
	    margin-top:13rem;
}
   .nach_oben{
	margin:8rem;
}
 .vision_oben{
	
}

	/*******************************************************************************************************************/

                                /*MEDIA für Tablet und Handy*/

/****************************************************************************************************************************/

/*************************************************************************************************************************/
                                             /* Notebook und Desktop 1400 */
/************************************************************************************************************************/



@media screen and (max-width: 1400px) {
    body { 
		min-height: 100%;	 	
}
	
  .social{
		transform: translate(-220px, 0);
}
	h1{
		 font-size: 100px;
}
	p {
		font-size: 1.4rem;
		display:block;
		margin:1.8rem;
}
	h6{
		disply:block;
		font-size:2.5rem;
		text-align: center;
		margin:2rem;
		
}
	h6 p{
		font-size: 2rem;
		display:block;
		margin:1rem;
		
}
	h6 span{
	display:block;		
}
	
   h4{
	   font-size:2.3rem;
	   margin:1rem;
       text-align: center;		
}
	
  h4 p{
		display:block;
		font-size:1rem;	
}
	
	h5{
		font-size:1.3rem;
		margin:1rem;
        text-align: center;
}
	
	h5 p{
		font-size: 1.3rem;
		text-align:center;
		
}
	h1{
		font-size: 80px;
				
}
	.bildergalerie{
		margin:0;
}
	.adresse{
		margin:0;
}
	.logo{
		position: relative;
		 
}
	
	.logo_klein{
		  font-size:2rem;
		  height:5rem;
}
	
	nav ul.hauptnavigation {
		float: none;
		position: relative;
		z-index: 999;
		margin: 0;
		padding: 0;
}
	nav ul.hauptnavigation li {
		display: block;
		line-height: 2;		
}
	nav ul.hauptnavigation li a:link,
	nav ul.hauptnavigation li a:visited {
		font-size: 35px;
		display: block;
		padding: 5px;
		text-align: left;
}
	
	/**********************************************************************************************************************************************************/
	
	/******************************************************************MEIN ANGEBOT***************************************************************************************/
	
	/**********************************************************************************************************************************************************/
	

		
		           /*******************************************************************************************************/

		                      /*      Drehender Würfel, Angebotsseite     */

		          /**********************************************************************************************************/

  .animationen{
	display:fixed;
	margin:20rem;
	padding:0.5rem;
	width: 46%;
    z-index:-999;	
}
		
 .cube{
	  float:left;
	  display: fixed;
	  height: 5%;
	  margin:0;
	  width: 5%;
}
	
	        /****************************************************************************************/

		                           /* Drehende Pyramide, Angebotsseite */

		   /*******************************************************************************************/

 .pyramide{
	 	float:center;
		margin:0;
	    width:30%;
		z-index:-999;	 
}	
		
   section{
	  displsy:block;	
}
	
  .text{
	    display:flex;
		flex-direction: column;
        list-style-position:outside;
	    margin-top: 8rem;
}

	.article text p{
		font-size: 1rem;
		display:block;
		padding:1rem;
}

	.article_vollbildcover{
		display: block;
		height: 100px;
		margin:4rem;
		width: auto;
		justify-content: center;
		align-items: center;
}
	
	.article_text{
	        flex-direction: column;
}
	.seite_oben{
		margin-top:1rem;
}
	.nach_oben{
		margint-top:1rem;
}
	
	   /*********************************************************************************************************************************************************************************************************************************************************************/

		                                                                                                       /* 3 Seite der Webeseite: 4 vierecke mit schlangen , ueber mich*/
		
	   /*********************************************************************************************************************************************************************************************************************************************************************/
	
/****************************************************************************************************************/
	/***************************************************Ueber Mich*************************************************************/
	/****************************************************************************************************************/

	
  .scroll {
     font-size:2rem;
	 padding:2rem;
}
	
    .scroll.down{
		font-size:2rem;
		padding:2rem;
	
	}
 .container{
	    gap: 30px;
		/*-webkit-box-reflect: below 0px linear-gradient(transparent,#0005);*/
	 padding:1.1rem;
	    
}
	
	
 .container .box{
       background-size: 19px 19px;			
}	

	
	.cover img{
		height:500px;
		display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 
		
	}
	.my img{
	 display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 height: 650px;
}	

.projekt img{
		height:500px;
		display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 
		
	}	
	
	.webseite img{
	  display:block;
     margin:10rem auto;
	 padding:1rem;
     width:auto;
	 height: 500px;
}
	
 .cover .content {
  position: absolute; 
  bottom: 0; 
  width: 80%; 
  padding: 15px; 
}
	
 .impressum p{
	font-size: 1.2rem;
	display:block;
	padding:2rem;	
}

	iframe{
    display:block;
	height: 340px;
	margin:4rem;
    padding:0rem;
    width: 85%;
}
	
	/******************************************************************************************************************************/
	/*********************************************Impressunm ********************************************************************************/
	/*****************************************************************************************************************************/
		
	/***********************************************************************************/
	/**********Footer*******************************************************************/
	
	footer {    
	   font-size: 1rem;	
 }
}
	
/************************************************************************************************************************************/

/*********************************************************************Tablet********************************************************/


   @media screen and (max-width: 900px) {
      body { 
		min-height: 100%;
}
	.social{
		transform: translate(-200px, 0);
}
	.social a{ 
		font-size: 10px;
	    font-weight: 500;
        margin: 4px;
	    padding: 15px;
	    width: 180px;
}
	p {
		display:block;
		margin:1rem;
		font-size: 1.5rem;
}
	h6{
		margin:0.5rem;
		font-size:2rem;
		text-align: center;
}
	h6 p{
		display:block;
		font-size: 1.6rem;
		margin:1rem;
}
	h6 span{
      display:block;
}
		
   h4{
      font-size:2.8rem;
	  margin:1rem;
	  text-align: center;
}
	h4 p{
		font-size:1.6rem;
		display:block;	
}
    h5{
	   font-size:2rem;	
       margin:1rem;  
}
	h5 p{
		font-size: 1.7rem;
		text-align:center;
}			
    h1{
		font-size: 70px;
	  
}
    .bildergalerie{
		margin:0;
}
     .adresse{
	      margin:0;
}
  .logo {
	   margin:0rem;
	   width: 26%;
}
	.logo_klein{
		   font-size:3rem;
		   height:9rem;
}
	nav ul.hauptnavigation {
		float: none;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 999;		
}
	nav ul.hauptnavigation li {
		display: block;
		line-height: 1;
}
	nav ul.hauptnavigation li a:link,
	nav ul.hauptnavigation li a:visited {
		font-size: 32px;
		display: block;
		padding: 5px;
		text-align:left;
}
	
	/**********************************************************************************************************************************************************/
	
	/******************************************************************MEIN ANGEBOT***************************************************************************************/
	
	/**********************************************************************************************************************************************************/
	
	.animation{
	  margin:20rem;
	  padding:0rem;
	  width: 5%;
}
	.pyramide{
		float:center;
		margin:-1;
	    width:15%;
}
	   .article{
		 flex-direction: column;
	   }
	.article_bild{
		margin:0rem;
		width:95%;
		height: auto;
		display: block
	
}
	.article_text p{
		font-size:1.5rem;
		margin: 1rem;
	    position:relative;
}
	.article_vollbildcover{
		display: block;
		height: 100px;
		margin:6rem;
		width: auto;
		justify-content: center;
		align-items: center;
}
	.nach_oben{
		margin-top:6rem;
}
	.zeilen-bild-behaelter {
	flex-basis: 60%;
	padding: 0 3rem;
}
    .zeilen-bild {
	      display: block;
		  height: auto;
	      width: 95%;
}
	.zeilen-text {
	      flex-basis: 40%;
	      padding: 0 3rem;
}
    .zeilen-text p {
	      margin: 0 0 3rem 0;
}
	/************************************************************************************************************************************************************************/
	
	/***********************************************************Ueber Mich*************************************************************************************************************/
	
	/************************************************************************************************************************************************************************/
	
	
     .scroll {
	     font-size:1rem;
		 line-height: 40px;
		 
	     
}
	  .scroll.down{
		   font-size:1rem;
		   top: calc(50% - 40px);
}
     .container{
	   gap: 37px;
		/*-webkit-box-reflect: below 0px linear-gradient(transparent,#0005);*/
	   padding:3rem;
}
	.container .box{
       background-size: 22px 22px;			
}
	   
	.cover img{
		height:320px;
		display:block;
        margin:7rem auto;
	    padding:1rem;
        width: auto;	
	}
	   
	.projekt img{
		height:320px;
		display:block;
        margin:7rem auto;
	    padding:1rem;
        width: auto;	
	}   
	   
	   
	   
	   
    .webseite img{
	  display:block;
     margin:7rem auto;
	 padding:1rem;
     width:auto;
	 height: 320px;
}

	 .content p{
	      display:block;
          font-size:1.5rem;
}
	.bildergalerie img{
      display: block;
	  height: 350px;
      margin:1rem;
      padding:0rem;
	  width: 350px;	 
}
	
	/**************************************************************************************/
	/***********************************Kontakt*******************************************/
	
   h3{	
	  font-size: 4rem;
	  margin: 5rem;
	  padding: 3rem;
}
	.adresse p{
	  margin:0rem;
	  padding:1rem;
	font-size:1.6rem;
}

	/*******************************************************************************************************************/
	/***********************************************Impressunm *********************************************************/
	/*******************************************************************************************************************/
	
	/***************************************************************************************************/
	/***********************************Footer***********************************************************/

	 footer {
	     display:flex;
	     font-size: 0.8rem;
		 left:0.2rem;
	     padding:0.5rem;
	     position: flex;
} 
    
/**************************************************************************************************************/			
	                         /* Fotobilder, ueber mich */
/**************************************************************************************************************/

	.animationen{
		margin:0;
}
	.cube{
		margin:0;
		font-size:2rem;
		width:50%;
}
	.pyramide{
		margin:0;
	    width:40%;
}
	.vollbilder{
		margin:3rem;
}
	 .text{
		margin:1.2rem;
}
	.text p{
        margin:1rem;
		padding:1rem;
		text-indent: 8px;
}  
	
	   
	 	iframe{
    display:block;
	height: 280px;
	margin:2rem;
    padding:0rem;
   width: 90%;
}  
	   
	   
	   
	}

/********************************************************************************************************************************/
/***************************************************Mobilphone*******************************************************************/


@media screen and (max-width: 600px) {
    body { 
		min-height: 100%;
}
	
	nav ul.hauptnavigation li a:link,
	nav ul.hauptnavigation li a:visited {
		font-size: 26px;
		display: block;
		padding: 5px;
		text-align:left;
}
	
   .social{
	   transform: translate(-180px, 0);
}
	
   .social a{ 
	 font-size: 10px;
	 font-weight: 500;
     margin: 4px;
	 padding: 15px;
	 width: 170px;
}
   .social i{
	  font-size: 22px;
	  height: 22px;
	  margin-left: 10px;
	  width: 30px;	
}
	p {     
	  display:block;
	  margin:1rem;
	  font-size: 1.2rem;	
}
	h6{
		margin:1rem;
	    font-size:1.5rem;
		text-align: center;
}
	h6 p{
		font-size: 0.9rem;
		margin:1rem;
}
    h6 span{
	   display:block;	
}
	
    h4{
      font-size: 1.8rem;
	  margin:1rem;
	  text-align: center;
}
	h4 p{
		display:block;
		font-size:0.9rem;
		margin:1rem;
}
   h5{
	margin:1rem;
	font-size:1.4rem;
	text-align: center;
}
     h5 p{
		 font-size: 0.9rem;
		 text-align:center;
}	
	h1{
		font-size: 30px;
	    margin:0;
}
	.bildergalerie{
		margin:0;		
}
    .adresse{
	    margin:0;
}	
    .logo {
	   margin:0rem;
	   width: 28%;
}
    .logo_klein{
		 height:3.5rem;
         font-size:1.5rem;
}
	/**********************************************************************************************************************************************************/
	
	/******************************************************************MEIN ANGEBOT***************************************************************************************/
	
	/**********************************************************************************************************************************************************/
	
	.carousel{
	     margin: 100px auto 0;
	     width: 200px;
}
    .carousel img{
	       -webkit-box-reflect: below 15px linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.3));
}
    .animationen{
	    margin:0;
}
    .cube{
		margin:0;
		font-size:0.1rem;
		width:0%;
}
	.pyramide{
		margin:0;
	    width:0%;
		z-index:999;
}
	.zeile{
		flex-direction: column;
}	
	.zeilen-bild-behaelter {
          display:block;
          height: 40%;
		  margin:0rem;
          width:100%;
}
	.zeilen-bild {
		height:40%;
		margin:0rem;
        width: 100%;
}
	.zeilen-text {
		display: block;
		flex-direction: column;
	    margin:1rem;
}
    .zeilen-text p {
		display:flex;
		flex-direction: column;	
		font-size:1.2rem;
		margin:1rem;
        position: relative;
        text-overflow:ellipsis;	
}
     /************************************************************************************************************************************************************/
	
	/*************************************************Ueber mich **********************************************************************************************************/
	
	/************************************************************************************************************************************************************/
		
     .scroll {
	        font-size:0.8rem;
		    line-height: 10px;
		    
		    
		
}
	.scroll.down{
	    top: calc(48% - 55px);
		line-height: 10px;
		font-size:0.8rem;
}
       .container{
            gap:35px;
		    /*-webkit-box-reflect: below 0px linear-gradient(transparent,#0005);*/
            padding:1.6rem;
}
      .container .box{
	    background-size: 25px 25px;
		height: 80px; 
		width:80px;
}
	
	.cover img{
		height:200px;
		display:block;
        margin:1rem auto;
	    padding:1rem;
        width: auto;	
	}
	
	.projekt img{
		height:200px;
		display:block;
        margin:1rem auto;
	    padding:1rem;
        width: auto;	
	}
	
	
	.my img{
	 display:block;
     margin:8rem auto;
	 padding:1rem;
     width:auto;
	 height: 420px;
}
	
	
	 .webseite img{
	  display:block;
     margin:1rem auto;
	 padding:1rem;
     width:auto;
	 height: 200px;
}
	  .cover {
		height: auto;
		margin: 0 auto;
	    position: relative;
        width:100%;
}
     .cover .content {
		    bottom: 0; 
		    padding:0;
		    position: absolute; 
		    width: 80%; 	
}
      .content p{
	       font-size:1.2rem;
}
      .bildergalerie img{
           display:block;
		   height: auto;
           margin:2rem;
           padding:0.5rem;
	       width: 80%;
}
	.article_oben {
		margin-top:8rem;
}	
	.seite_oben{
		margin-top:10rem;
}
	.anno_oben{
		margin-top:10rem;
}
	.nach_oben{
		margin-top:7rem;
}
    /*************************************************************************************************/
	/******************************Kontakt************************************************************/
	
	h3{
		display:block;
		font-size: 3rem;
        margin:3rem;
		padding:0rem;		
}
	 .adresse p{
		 font-size: 1.2rem;
         margin:0rem;
	     padding:3rem;	
}
	div{
	   padding:0px;
}
	.formular{
	    display: fixed;
		width:100%;
}
	form {
		max-width: 350px;
		width:90%;
        
}
	input, textarea{
	    font-size: 19px;
		padding: 22px;	
}

	label{
		font-size: 1.2rem;
		height: 85%;		
}
	button{
	    font-size: 1.2rem;
		padding: 5px;
	    width: 100%;
}
	input:focus~label,
	input:valid~label,
    textarea:focus~label,
	textarea:valid~label{
		top:-35px;
		font-size: 9px;
}
	/*************************************************************************************/
	/**********Footer********************************************************************/
	
	 footer {
	     display:flex;
	     font-size: 0.5rem;
		 left:0rem;
	     padding:0rem;
	     position:left;
		 margin:0.5rem; 
 } 
	.article{
		display:block;
}
	.article_bild{
		margin:1rem;
		padding:1rem;
}
	.article_text p{
		font-size:1.3rem;
		margin: 1rem;
	    position:relative;
}
	.vollbildcover{
	       height: auto;
		   margin:2rem;
	       position:relative;
		   width:80%;
		justify-content: center;
			align-items: center;
}
	.text{
		margin:1.2rem;
}
	.text p{
        margin:1rem;
		padding:1rem;
		text-indent: 8px;
}
	 	iframe{
    display:block;
	height: 180px;
	margin:2rem;
    padding:0rem;
    width: 80%;
}  
	   
	
	
	}