
/* damit Mobiltelefone den Text nicht ungefragt vergrößern */
html { -webkit-text-size-adjust: none; }



  @media (max-width: 900px) {
	.logo img {
		width: 60%;
	}
  }

  


@media (max-width: 600px) {
	h1  {
		font-size: 180%;
	}

	h2 {
		font-size: 180%;
	}

	h3 {
		font-size: 180%;
	}

}

@media (max-width: 508px) {
	h3 {
		font-size: 140%;
	}
}

@media (max-width: 400px) {
	h3 {
		font-size: 100%;
	}
}


/* footer */

@media (max-width: 646px) {

	.footer {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		/* flex-direction: column; */
		flex-wrap: wrap;
		align-content: stretch;
	}

	.onlyDesktop {
		display: none;
	}
}

@media (max-width: 781px) {

	.onlyDesktop {
	display: none;
	}
}

@media (max-width: 356px) {

	.open {
	font-size: 80%;
	}
}

/* Titelbild */

@media (max-width: 1023px) {
	.titelbild img {
		max-width: 100%;
		margin: 0 auto;
	}
}

@media (max-width: 950px) {
	.titelbild img {
		max-width: 100%;
		margin: 0 auto;
		padding-top: 5%;
	}
}


@media (max-width: 580px) {
	.titelbild {
		display: flex;
		flex-direction: column;
		position:static;
		margin: 0%;
	}
	
	.titelbild img {
		max-width: 100%;
		height: auto;
		filter: none;
	}
	
	
	h2 {
		font-family: grafolita-script, sans-serif;
		font-weight: 400;
		font-style: normal;;
	}
	
	.zitat {
		position: static;
		top: 10%;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 40px; /* Abstand um den Text */
		
	}
	
	.zitat p {
		margin-left: 0.5em;
	}
}

@media (max-width: 498px) {
	h2 {font-size: 1.3rem;}

}

@media (max-width: 612px) {
	.ueberschrift {
		margin-top: 20%;
	  }
	}



/* Karte  */

@media (max-width: 850px) {
	.karte {
		height: 100%;
		width: 100%;
		display: grid;
		grid-template-rows: 1fr 4fr;
		grid-template-columns: 1fr 1fr ;
		align-content: start;
		gap: 4%;
	  }
	  
	  
	  .adresse {
	  grid-row-start: 1;
	  grid-row-end: 2;
	  grid-column-start: 1;
	  grid-column-end: 2;
	  }
	  
	  .route {
	  grid-row-start: 1;
	  grid-row-end: 2;
	  grid-column-start: 2;
	  grid-column-end: 3;
	  background-color: #5c3a1f;
	  justify-content: center;
	  align-items: center;
	  display: flex;
	  text-align: center;
	  }
	  
	  
	  .karte img {
		grid-row-start: 2;
		grid-row-end: 3;
		grid-column-start: 1;
		grid-column-end: 3;
		max-width: 100%;
	  }

}

@media (max-width: 566px) {
	.karte {
		grid-template-columns: 1fr 0.5fr ;
		align-content: start;
		
	  }
	}

/* Abschnitt 2 */

@media (max-width: 1023px) {
	.flexbox {
		justify-content: space-between;
	}
}

@media (max-width: 760px) {

	.flexbox {
		align-items: center;
	}

    .spaziergang {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: [linie-v-1] auto [linie-v-2] 5% [linie-v-3] 43%;
        grid-template-rows: [linie-h-1] auto [linie-h-2] auto [linie-h-3] auto [linie-h-4] auto [linie-h-5] auto;
        grid-template-areas:
            "text1 . images"
            "text2 . images"
            "text2 . preview"
            ". . preview"
            ". . .";
		margin: 0 auto;	
    }

    .preview img {
        margin:auto 0 auto auto;
		max-width: 100%;
  
    }

}

    @media (max-width: 590px) {

        .spaziergang {
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                "text1"
                "images"
                "text2"
                "preview";
        }

        .images  {
            grid-area: images;
            
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            }
            
            .images img {
                padding-bottom: 2%;
                filter: drop-shadow(0.5rem 0.5rem 0.2rem  #261201);
                max-width: 95%;
			}

            .preview img {
                margin: 0 auto;
                max-width: 100%;
            }

			.text1 {
				margin-top: 0;
				margin-bottom: 3%;
			}
  
        


        .spaziergang_winter {
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                "text_winter text_winter"
				"images_winter3 images_winter2"
				". images_winter1"
				;
        }	
		
		.text_winter {
			grid-area: text_winter;
		  
			text-align: justify;
			line-height: 150%;
			display: flex;
			align-self: flex-start;
			margin-top: 0%;
		}

		.images_winter1 {
			grid-area: images_winter1;
			display: flex;
			align-items: center;
		}

		.images_winter1 img {
			max-width: 90%;
			align-items: right;
			margin-bottom: 5%;
		}

		.images_winter2 {
			grid-area: images_winter2;
			display: flex;
			align-items: flex-start;
		}

		.images_winter2 img {
			max-width: 90%;
		}

		.images_winter3 {
			grid-area: images_winter3;
			display: flex;
			align-items: flex-start;
		}

		.images_winter3 img {
			max-width: 90%;
		}
	}
    

/* Impressionen */

@media (max-width: 1023px) {

	.galerie {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin-bottom: 5%;
	}
	
	.galerie img {
		max-width: 30vw;
	}

	.gesamt {
		max-width: 90vw;
		margin: 0 auto;
		overflow: hidden;
	}
	
}



@media (max-width: 937px) {

	.galerie {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin-bottom: 0.5%;
	}
	
	.galerie img {
		max-width: 38vw;
	}
	
}

/* feiern */

@media (max-width: 937px) {

	.feiern {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 5%;
	}
	
	.feiern img {
		max-width: 35vw;
	}

	.feiern p {
		max-width: 90vw;
		text-align: center;
	}

	.Bilder {
		display: flex;
		justify-content: space-around;
	  }
	
}

@media (max-width: 1023px) {
	.oktoberfest img {
		max-width: 100%;
	  }

}

@media (max-width: 601px) {
	.veranst {
		margin-top: 20%;
	  }

}






