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


/*Schriftarten*/

	@font-face {
    		font-family: "sedgwick";
    		src: url("SedgwickAveDisplay-Regular.ttf") format("truetype");
}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}	


/*Schrift*/

 	 h4, h5, h6, p {
  		font-family: Verdana, Geneva, Tahoma, sans-serif;
}

	h2 {
  		font-family: "sedgwick";
  		color: #785E7A;
  		font-size: 3rem;
  		margin: 3rem;
}

	h3 {
  		font-family: Verdana, Geneva, Tahoma, sans-serif;
  		font-size: 1.5rem;
  		color: #785E7A;
}

	h4 {
  		font-weight: bold;
}


/*Body*/

    	body {
       	 	background-color: #000;
       	 	
}



/*Container*/

#container {
	width: 100%;
	margin: 20px auto;
	min-height: 700px;
}

#container svg {
	min-height: 700px;
}


/*Buttons*/  




	.container {
  display: none;
}

.container1 {
display: block;
width: 200px;
position: relative;
margin: 50px auto 0 auto;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.button1 {

position: relative;
top: 0px;
left: 0;
width: 100px;
height: 110px;
}	

.button1:nth-of-type(2) {
top: -15px;
left: 55px;
}	

.button1:nth-of-type(3) {
top: -30px;
left: 0;
}	

.button1:nth-of-type(4) {
top: -45px;
left: 55px;
}

.button1:nth-of-type(5) {
top: -60px;
left: 0px;
}	

.button1 p {
position: absolute;
text-align: center;
top: 55%;
left: 55%;
transform: translate(-50%, -50%) rotate(0);
color: #fff;
z-index: 5;
font-size: 1.2rem;
  font-weight: bold;
transition: .3s cubic-bezier(0,2.17,.83,1.36) .3s;
}

.button1::before {
content: "";
width: 110px;
height: 120px;
background-color: #2E2C2C;
position: absolute;
top: 0;
left: 0;
clip-path: polygon(0 25%, 50% 0, 50% 100%, 0 75%);
transition: clip-path .2s .5s, width .2s .2s, left .2s .2s;
}

.button1::after {
content: "";
width: 110px;
height: 120px;
background-color: #2E2C2C;
position: absolute;
top: 0;
left: -1px;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%);
transition: clip-path .2s .5s, width .2s .2s, left .2s .2s;
}

.button1 span {

font-size: 5rem;
position: absolute;
left: 50px;
height: 200px;
display: block;
line-height: 100px;
transform: rotateY(90deg);
transform-origin: left;
transition:  .5s;
display: none;
}

.button1:nth-child(odd) span {
right: 50px;
left: auto;
transform-origin: right;
display: none;
}

.button1:hover span {
width: auto;
transition: .5s .2s;
transform: rotateY(0);
display: none;
}       

.button1 a {
      color: #fff;
}



/*Header*/

	header {
    		text-align: center;
		
		
    
}

	header a {
  		list-style-type: none;
  		text-decoration: none;
}

    	h1 {
        	font-family: "sedgwick";
        	font-size: 4rem;
        	color: #fff;
        	text-align: center;
       	 	padding: 1rem;
}

	.logoheader {
		max-width: 9rem;
}


/*Burgermenü*/

	.burger {
  		width: 15%;
		max-width: 5rem;
}

	.burger:hover {
		transform: scale(1.1);
		cursor: pointer;
}



/*Navigation*/

	.navbar {
  		display: block;
  		text-align: center;
  		padding: 0.3rem;
  		justify-items: center;
}


	nav {
  
  		font-size: 1.0rem;
  		display: block;  
  		margin: auto;
  		width: 100%;
}

	nav ul {
  		list-style-type: none;
  		padding: 0;
  		display: block;
  		width: 100%; 
  		text-align: center;   
}

	nav ul li {
 		font-family: Verdana, Geneva, Tahoma, sans-serif;
  		display: flex;
  		padding: 0.2rem;
  		border: none;
  		margin: 0.4rem;
  		margin: 1rem;
  		align-items: center;
  		justify-content: center;
  		border-radius: 5px;
}

	nav ul li a {
  		text-align: center;
  		text-decoration: none;
  		color: #fff;
  		font-size: 1.6em;
  		padding: 0.5rem;
  		font-weight: bold;  
}

	#js-navbar-toggle {
  		width: 100%;  
  		font-size: 2.5rem;
}

	.main-nav {
		display: none;
}

	.navbar-toggle {
		position: relative;
		cursor: pointer; 
		color: #fff;
		font-size: 24px;
		display: block;
		padding: 1.5rem; 
}

	.active {
		display: block;
}   




/*Navigation Hover*/

	nav ul li:hover {
  		transform: scale(1.1);
  		background-color: #785E7A;
}



/*Main*/

    	main {
        	margin: auto;
        	max-width: 75rem;
        	text-align: center;
}

    	main p {
         	text-align: center;
}

    	img {
        	width: 100%;
        	margin-bottom: 1.5rem;
        	max-width: 40rem;
}

    	.me {
        	max-width: 30rem;
}

    	#shirteinzel:hover {
      		transform: scale(1.8); 
      		transition: 3s ease-in-out;
}

  

    	p {
        	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
        	font-size: 1.2em;
        	text-align: justify;
        	margin: 0;
        	padding: 2em;
}    


/*Aboutseite*/


	.aboutseite {
  		margin-top: 3rem;
}

	.abouttext p{
  		text-align:left;
}

	.ichtext {
  		font-weight: bold;
}
/*Formular*/


	* {
  		box-sizing: border-box;
  		-webkit-box-sizing: border-box;
  		-moz-box-sizing: border-box;
  		-webkit-font-smoothing: antialiased;
  		-moz-font-smoothing: antialiased;
  		-o-font-smoothing: antialiased;
  		font-smoothing: antialiased;
  		text-rendering: optimizeLegibility;
}

 	body {
  		color: #c0c0c0;
  		font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}


/* Kontakt Formular Styles */


	h1 {
  		margin: 5px 0 0 0;
}

	h4 {
 		margin: 0 0 20px 0;
}

	#contact-form {
  		background-color: rgba(72, 72, 72, 0.9);
  		padding: 10px 20px 30px 20px;
  		max-width: 40em;
  		margin-top: 80px;
  		margin-left: auto;
  		margin-right: auto;
  		text-align: center;
  		border-radius: 7px;
  		-webkit-border-radius: 7px;
  		-moz-border-radius: 7px;
}

	#contact-form input,
	#contact-form select,
	#contact-form textarea,
	#contact-form label {
  		font-size: 15px;
  		margin-bottom: 2px;
 		font-family: Arial, san-serif;
}


	#contact-form input,
	#contact-form select,
	#contact-form textarea {
  		width: 100%;
  		background: #fff;
  		border: 0;
  		-moz-border-radius: 4px;
  		-webkit-border-radius: 4px;
  		border-radius: 4px;
  		margin-bottom: 25px;
  		padding: 5px;
}

	#contact-form input:focus,
	#contact-form select:focus,
	#contact-form textarea:focus {
  		background-color: #e5e6e7;
}

	#contact-form textarea {
  		width: 100%;
  		height: 150px;
}

	#contact-form button[type="submit"] {
  		cursor: pointer;
  		width: 90%;
  		border: none;
  		background: #6E4F5C;
  		background-image: linear-gradient(bottom, #785E7A 0%, #8C648A 52%);
  		background-image: -moz-linear-gradient(bottom, #785E7A 0%, #8C648A 52%);
  		background-image: -webkit-linear-gradient(bottom, #785E7A 0%, #8C648A 52%);
 		color: #fff;
  		margin: 0 0 5px;
  		padding: 10px;
  		border-radius: 5px;
    		font-size: 1.2rem;
}

#contact-form button[type="submit"]:hover {
  background-image: linear-gradient(bottom, #9B6C93 0%, #AC63B3 52%);
  background-image: -moz-linear-gradient(bottom, #9B6C93 0%, #AC63B3 52%);
  background-image: -webkit-linear-gradient(bottom, #9B6C93 0%, #AC63B3 52%);
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
    transform: scale(1.1);
}
#contact-form button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
input:required,
textarea:required {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
}
#contact-form .required {
  font-weight: bold;
  color: #e5e6e7;
}

/* Hide success/failure message
   (especially since the php is missing) */
#failure,
#success {
  color: #6ea070;
  display: none;
}

/*Footer*/

.social-menu {
	    display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            background-color: #2E2C2C;
            padding: 2rem;
            margin-top: 5rem;
            text-align: center;
	
}
 
        .social-menu img {
	    width: 100%;
	    transition: all 0.2s ease-in-out;
    
}

        .social-menu img:before {
            padding: 2rem;
            
}

        .social-menu a {
	    text-decoration: none;
}
        
        .fbicon {
		max-width: 3rem;
		max-height: 3rem;
		grid-column: 1;
      		grid-row: 1;
} 

        .daicon {
		max-width: 3rem;
		max-height: 3rem;
		grid-column: 2;
      		grid-row: 1;
}

        .koicon {
		max-width: 2.5rem;
		max-height: 3rem;
		grid-column: 3;
      		grid-row: 1;
}

        .imicon {
		max-width: 2.5rem;
		max-height: 2.5rem;
		grid-column: 4;
      		grid-row: 1;
}

        .daticon {
		max-width: 2.5rem;
		max-height: 3rem;
		grid-column: 5;
      		grid-row: 1;
}
        
        .social-menu img:hover {
	        opacity: .7;
}


/*Media query*/

  @media (min-width: 45em) {

.container {
    display: none;
  }
	  
    /*Tshirts*/

    .shirtgalerie {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1.5rem;
      text-align: center;
    }


    #shirt1 {
      grid-column: 1/2;
      grid-row: 1/2;
    }

    #shirt1:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt2 {
      grid-column: 2/3;
      grid-row: 1/2;
    }

    #shirt2:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt3 {
      grid-column: 1/2;
      grid-row: 2/3;
    }

    #shirt3:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt4 {
      grid-column: 2/3;
      grid-row: 2/3;
    }

    #shirt4:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt5 {
      grid-column: 1/2;
      grid-row: 3/4;
    }

    #shirt5:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt6 {
      grid-column: 2/3;
      grid-row: 3/4;
    }

    #shirt6:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt7 {
      grid-column: 1/2;
      grid-row: 4/5;
    }

    #shirt7:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt8 {
      grid-column: 2/3;
      grid-row: 4/5;
    }

    #shirt8:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt9 {
      grid-column: 1/2;
      grid-row: 5/6;
    }

    #shirt9:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt10 {
      grid-column: 2/3;
      grid-row: 5/6;
    }

    #shirt10:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt11 {
      grid-column: 1/2;
      grid-row: 6/7;
    }

    #shirt11:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt12 {
      grid-column: 2/3;
      grid-row: 6/7;
    }

    #shirt12:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt13 {
      grid-column: 1/2;
      grid-row: 7/8;
    }

    #shirt13:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt14 {
      grid-column: 2/3;
      grid-row: 7/8;
    }

    #shirt14:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt15 {
      grid-column: 1/2;
      grid-row: 8/9;
    }

    #shirt15:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt16 {
      grid-column: 2/3;
      grid-row: 8/9;
    }

    #shirt16:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt17 {
      grid-column: 1/2;
      grid-row: 9/10;
    }

    #shirt17:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }

    #shirt18 {
      grid-column: 2/3;
      grid-row: 9/10;
    }

    #shirt18:hover {
      transform: scale(1.1);
      border: 5px solid #fff;
    }
  }


  @media (min-width: 80em) {
    
/*Buttons*/  
        
	.container1 {
    display: none;
  }
       
  .container {
    display: block;
		width: 200px;
		position: relative;
		margin: 50px auto;
		font-family: Impact, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}
		
	.button {
		position: relative;
		top: 0;
		left: 0;
		width: 200px;
		height: 200px;
}	
	.button:nth-of-type(2) {
		top: -40px;
		left: 100px;
}	
		
	.button:nth-of-type(3) {
		top: -80px;
		left: 0;
}	
	.button:nth-of-type(4) {
		top: -120px;
		left: 100px;
}	

  .button:nth-of-type(5) {
    top: -160px;
    left: 0px;
}	
		
	.button p {
		position: absolute;
		text-align: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(0);
		color: #fff;
		z-index: 10;
		font-size: 40px;
		transition: .3s cubic-bezier(0,2.17,.83,1.36) .3s;
}
		
		.button:hover p {
			transform: translate(-50%, -50%) rotate(-27deg);
			font-size: 0;
			transition: .2s;
			opacity: 0;
}
		.button::before {
			content: "";
			width: 200px;
			height: 200px;
			background-color: #2E2C2C;
			position: absolute;
			top: 0;
			left: 0;
			clip-path: polygon(0 25%, 50% 0, 50% 100%, 0 75%);
			transition: clip-path .2s .5s, width .2s .2s, left .2s .2s;
}
		
		.button:nth-child(odd):hover::before {
			width: 0;
			left: 100px;
			transition: clip-path .2s, width .2s .2s, left .2s .2s;
			transition: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
		.button::after {
			content: "";
			width: 200px;
			height: 200px;
			background-color: #2E2C2C;
			position: absolute;
			top: 0;
			left: -1px;
			clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%);
			transition: clip-path .2s .5s, width .2s .2s, left .2s .2s;
}
	
		.button:nth-child(even):hover::after {
			width: 0;
			left: 99px;
			transition: clip-path .2s, width .2s .2s, left .2s .2s;
			clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
		
		.button span {
			
		font-size: 252px;
			position: absolute;
			left: 100px;
			height: 200px;
			display: block;
			line-height: 200px;
			transform: rotateY(90deg);
			transform-origin: left;
			transition:  .5s;
			overflow: hidden;
}
		
		.button:nth-child(odd) span {
			right: 100px;
			left: auto;
			transform-origin: right;
}
		.button:hover span {
			width: auto;
			transition: .5s .2s;
			transform: rotateY(0);
        }       
        
        .button a {
            color: rgb(255, 255, 255);
        }
  /*Nav*/

  nav ul {
    grid-template-columns: repeat(6, 1fr);
  }

  .navbar-toggle {
    display: none;
  }

    .main-nav {
      display: grid;
  }

 

  #js-navbar-toggle {
    display: none;
  }


 
  /*Tshirts Einzelseite*/

  #einzelseite {
    display: grid;
    text-align: center;  
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  #shirteinzel {
    width: 100%;
    grid-column: 1/2;
    grid-row: 1/2;
  }

  #einzeltext {
    color: #fff;
    text-align: center;  
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;

    font-size: 1.3rem;
    grid-column: 2/3;
    grid-row: 1/2;
  }

  /*Logoseite*/

  .logoseite {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1rem;
    text-align: center;
  }


  #logo1 {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  #logo1:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo2 {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  #logo2:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo3 {
    grid-column: 3/4;
    grid-row: 1/2;
  }

  #logo3:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo4 {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  #logo4:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo5 {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  #logo5:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo6 {
    grid-column: 3/4;
    grid-row: 2/3;
  }

  #logo6:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo7 {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  #logo7:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo8 {
    grid-column: 2/3;
    grid-row: 3/4;
  }

  #logo8:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo9 {
    grid-column: 3/4;
    grid-row: 3/4;
  }

  #logo9:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo10 {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  #logo10:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo11 {
    grid-column: 2/3;
    grid-row: 4/5;
  }

  #logo11:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo12 {
    grid-column: 3/4;
    grid-row: 4/5;
  }

  #logo12:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo13 {
    grid-column: 1/2;
    grid-row: 5/6;
  }

  #logo13:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo14 {
    grid-column: 2/3;
    grid-row: 5/6;
  }

  #logo14:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo15 {
    grid-column: 3/4;
    grid-row: 5/6;
  }

  #logo15:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo16 {
    grid-column: 1/2;
    grid-row: 6/7;
  }

  #logo16:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo17 {
    grid-column: 2/3;
    grid-row: 6/7;
  }

  #logo17:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo18 {
    grid-column: 3/4;
    grid-row: 6/7;
  }

  #logo18:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo19 {
    grid-column: 1/2;
    grid-row: 7/8;
  }

  #logo19:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo20 {
    grid-column: 2/3;
    grid-row: 7/8;
  }

  #logo20:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }

  #logo21 {
    grid-column: 3/4;
    grid-row: 7/8;
  }

  #logo21:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
    #logo22:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
    #logo23:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
    #logo24:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
    #logo25:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
    #logo26:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
    #logo27:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
  
    #logo28:hover {
    transform: scale(1.2);
    border: 5px solid #fff;
  }
	  
	  
  /*Illuseite*/

  .illuseite {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 5rem;
    row-gap: 5rem;
    
    text-align: center;
  }

  #nr1 {
    margin-top: 3rem;
    grid-column: 2/4;
    grid-row: 1;
  }

  #nr2 {
    grid-column: 2/4;
    grid-row: 2;
  }

  #nr3 {
    grid-column: 2/4;
    grid-row: 3;
  }

  #nr4 {
    grid-column: 2/4;
    grid-row: 4;
  }

  #nr5 {
    grid-column: 2/4;
    grid-row: 5;
  }

  #nr6 {
    grid-column: 2/4;
    grid-row: 6;
  }

  #nr7 {
    grid-column: 2/4;
    grid-row: 7;
  }

  #nr8 {
    grid-column: 2/4;
    grid-row: 8;
  }

  #nr9 {
    grid-column: 2/4;
    grid-row: 9;
  }

  #nr10 {
    grid-column: 2/4;
    grid-row: 10;
  }

  /*Aboutseite*/

  .aboutseite {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.5rem;
    
    text-align: center;
  }

  #me1 {
    grid-column: 2/3;
    grid-row: 1/2;
  }


  /*Weingutseite*/

 
  /*Photoshop*/

  .photoseite {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.5rem;
    
    text-align: center;
  }


  #photo1 {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  #photo1:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo2 {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  #photo2:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo3 {
    grid-column: 3/4;
    grid-row: 1/2;
  }

  #photo3:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo4 {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  #photo4:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo5 {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  #photo5:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }


  #photo6 {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  #photo6:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo7 {
    grid-column: 2/3;
    grid-row: 3/4;
  }

  #photo7:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo8 {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  #photo8:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo9 {
    grid-column: 2/3;
    grid-row: 4/5;
  }

  #photo9:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo10 {
    grid-column: 1/2;
    grid-row: 5/6;
  }

  #photo10:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo11 {
    grid-column: 2/3;
    grid-row: 5/6;
  }

  #photo11:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }

  #photo12 {
    grid-column: 1/4;
    grid-row: 6/7;
  }

  #photo12:hover {
    transform: scale(1.1);
    border: 5px solid #fff;
  }
  /*Tshirts*/

      .shirtgalerie {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1.5rem;
        
        text-align: center;
      }


      #shirt1 {
        grid-column: 1/2;
        grid-row: 1/2;
      }

      #shirt1:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt2 {
        grid-column: 2/3;
        grid-row: 1/2;
      }

      #shirt2:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt3 {
        grid-column: 3/4;
        grid-row: 1/2;
      }

      #shirt3:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt4 {
        grid-column: 3/4;
        grid-row: 5/6;
      }

      #shirt4:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt5 {
        grid-column: 1/2;
        grid-row: 2/3;
      }

      #shirt5:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt6 {
        grid-column: 2/3;
        grid-row: 2/3;
      }

      #shirt6:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt7 {
        grid-column: 3/4;
        grid-row: 2/3;
      }

      #shirt7:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt8 {
        grid-column: 3/4;
        grid-row: 6/7;
      }

      #shirt8:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt9 {
        grid-column: 1/2;
        grid-row: 3/4;
      }

      #shirt9:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt10 {
        grid-column: 2/3;
        grid-row: 3/4;
      }

      #shirt10:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt11 {
        grid-column: 3/4;
        grid-row: 3/4;
      }

      #shirt11:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt12 {
        grid-column: 2/3;
        grid-row: 6/7;
      }

      #shirt12:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt13 {
        grid-column: 1/2;
        grid-row: 4/5;
      }

      #shirt13:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt14 {
        grid-column: 2/3;
        grid-row: 4/5;
      }

      #shirt14:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt15 {
        grid-column: 3/4;
        grid-row: 4/5;
      }

      #shirt15:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt16 {
        grid-column: 1/2;
        grid-row: 6/7;
      }

      #shirt16:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt17 {
        grid-column: 1/2;
        grid-row: 5/6;
      }

      #shirt17:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      #shirt18 {
        grid-column: 2/3;
        grid-row: 5/6;
      }

      #shirt18:hover {
        transform: scale(1.1);
        border: 5px solid #fff;
      }

      /*Weingut*/

      .weingutseite {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1.5rem;
        text-align: center;
      }

      .gestaltenseite {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1.5rem;
        text-align: center;
      }
    }