/* CSS Document */

/* ========= Schriften ======= */

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Caveat&display=swap');


/* ========= Variablen ======= */


:root {
	--hellblau: #096183;
	--hellblauhover: #1f86ae;
	--rot: #a40b3d;            
	--rothover: #cf1753;
	--orange: #f4992e;
	--orangehover: #ffb239;
	--orangeaufblau: #f3ac46;
	--gruen: #a8c446;
	--gruenhover: #bcdc4a;
	--gruenTransparent: rgba(168, 196, 70, 0.75);
	--dunkelblau: #003471;
	--dunkelblauhover: #225da3;
	--schwarz: #000;
	--schwarzTransparent: rgba(0, 0, 0, 0.85);
	--dunkelgrau: #333;
    --grau: #D4D4D4;
    --weiss: #fff;
	--weissTransparent: rgba(255, 255, 255, 0.01);  /* muss so bleiben da border*/
	--weissTransparent2: rgba(255, 255, 255, 0.3); 
}


/* =========== RESET ========== */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: 0.25s;
	font-family: 'Nunito', sans-serif;	
}


/*=============== ALLGEMEIN =================*/


	body {
		font-size: 100%;
		background-image:url("bilder/background.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
	}

	h1, h2, h3, p{
		color: var(--weiss);
	}

	h1 {
		font-size:2rem;
		margin: 3.5rem 0rem 2.3rem 0rem;
	}
	h2{
		margin: 0.9rem 0rem;
	}
	h3{
		margin: 0.8rem 0rem;
	}
	p{
		font-size:1rem;
		margin: 0.3rem 0rem 1rem 0rem;
		line-height: 155%;
	}

	.handschrift{
		font-family: 'Caveat', cursive;
		font-size:1.8rem;
	}


	/* ------------ LINKS -------------  */


	a:link{
		text-decoration:none;
		transition:all 0.2s ease-in-out;
	}

	/* -------- p -------*/

	p a:link {
		color: var(--grau);
		font-weight:800;
	}

	p a:hover {
		font-weight:900;
		text-decoration:underline;
	}
	
	p a:visited {
		color: var(--grau);
		font-weight:800;
	}



/*=============== HEADER =================*/


	#containerganzeseite{
		/*border: 2px solid red;*/
	}

	#headerbereich{
		position: relative;
		margin: 1rem auto;
		max-width: 1000px;
	}

	#logobereich{
		border: 2px solid var(--weissTransparent); /* MUSS BLEIBEN DA SONST ALLES VERSCHIEBT???????? */
	}

	#logobereich img{
		display: flex;
		height: auto;
		max-width: 100%;
		margin: 3rem auto 2rem auto;
	}


	/* ----------- NAVIGATION ------------- */


	.navigationcontainer{
		position: absolute;
		top:12rem;
		right:0rem;
		width:100%;
		display:flex;
	}

	nav{
		/*Grösse gleich wie .navigationcontainer*/
		display:flex;
		margin:1rem auto;
		max-width: 1000px;

	}
	nav a{
		font-size:1.2rem;
		color: var(--weiss);
		margin: 0.8rem;
		height: 3rem;
		padding: 5px;
		flex-grow:1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav a:hover{
		background-color: var(--dunkelgrau);
	}

	.navigationspunkte{
		display:flex;
		margin:1rem;
		width: 100%;
	}


	/*---------- Navigation hover ---------*/

	.navigationspunkte .inhalthellblau:hover{
		background: var(--hellblauhover);
	}
	.navigationspunkte .inhaltrot:hover{
		background: var(--rothover);
	}
	.navigationspunkte .inhaltorange:hover{
		background: var(--orangehover);
	}
	.navigationspunkte .inhaltgruen:hover{
		background: var(--gruenhover);
	}
	.navigationspunkte .inhaltdunkelblau:hover{
		background: var(--dunkelblauhover);
	}


	/*----------- Hamburger ----------*/

	.hamburger{
		/*border: 3px solid red;*/
		color: var(--weiss);
		display:none;
		position: absolute;
		font-size:2.4rem;
		/*top:1.5rem;*/
		right:1rem;
	}
	

/*=============== INHALT =================*/

	.inhalt{
		padding: 2rem 5rem 4rem 5rem;
		max-width: 1000px;
		margin: 9rem auto 2rem auto;
		box-shadow:1px 2px 8px 5px rgba(0,0,0,0.25);
	}
	.inhaltrot{
		background-color: var(--rot);
	}
	.inhalthellblau{
		background-color: var(--hellblau);
	}
	.inhaltorange{
		background-color: var(--orange);
	}
	.inhaltgruen{
		background-color: var(--gruen);
	}
	.inhaltdunkelblau{
		background-color: var(--dunkelblau);
	}

	.icon{
		height: 4.2rem;
		margin: 0.5rem 0rem 0rem 0rem;
	}



	/* -------- ANMELDUNG/FORMULAR ---------- */


	#anmeldeformular{
		margin:2rem 0rem;
	}

	input {
		font-size:1rem;
		font-weight:200;
		margin:0.1rem 0rem 0.5rem 0rem;
		padding:0.2rem;
		width:70%;
		min-width:17rem;
	}

	.geburtsdatum{
		width:10rem;
		min-width:10rem;
	}
	.plz{
		width:4.2rem;
		min-width:4.2rem;
	}
	.ort{
		width:51%;
	}
	.checkbox{
		width: 8%;
		min-width: 8%;
	}

	textarea{
		font-size:1rem;
		font-weight:200;
		height:80px;
		margin:0.1rem 0rem 0.5rem 0rem;
		padding:0.2rem;
		width:70%;
		min-width:17rem;
	}

	.sendenbutton, input [type=submit]{
		cursor:pointer;
		font-size:1rem;
		font-weight:300;
		margin:2rem 0rem;
		padding:0.4rem 0;
		width:15rem;
	}


	/* -------------- GALERIE ---------------- */


	#galerie{
		margin: 3rem 0rem;
		display: grid;
		grid-column-gap: 45px;
		grid-row-gap: 45px;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.galeriebild {
		width: 15.5rem;
		height: 15rem;
		box-shadow:1px 2px 8px 5px rgba(0,0,0,0.25);
	}

	.galeriebild img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}


	.filterbuttoncontainer{
		display:flex;
		margin:1rem auto;
	}

	.filterbutton {
		color: var(--weiss);
		background-color: var(--dunkelblau);
		margin:0.4rem;
		height:2rem;
		cursor:pointer;
		flex-grow:1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filterbutton a {
		color: var(--weiss);
	}


	.aktiverfilter{
		background-color: var(--gruen);
		color: var(--schwarz);
	}


	/* -------------- TEAM ---------------- */


	.teammitglied {
		margin:1rem 2rem 4rem 2rem;
	}

	.teammitgliedbild{
		width:7rem;
		height:7rem;
		box-shadow:1px 2px 8px 5px rgba(0,0,0,0.25);
	}
	.teammitgliedbild img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}


/*=============== FOOTER =================*/


	#fusszeile{
		display:flex;
		height: 5rem;
	}

	#fusszeilen-inneres{
		margin: 1rem;
		flex-grow:1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#fusszeilen-inneres h3{
		color: var(--schwarz);
	}

	#fusszeilen-inneres a{
		color: var(--schwarz);
	}

	.fusszeilentext{
		margin:0rem 1rem 2rem 1rem;
	}




/* =========================================== */
/* =============  MEDIA QUERY  =============== */
/* =========================================== */



/* ===========  MEDIA QUERY 1050px =========== */

@media screen and (max-width:1050px) {
	
	
	/*------- Allgemein --------*/
	
	body {
		background-image:url("bilder/background-mobile.png");		
	}
	
	h1 {
		font-size:1.8rem;
		margin: 3rem 0rem 2rem 0rem;
	}

	h2{
		font-size: 1.4rem;
	}

	h3{
		font-size: 1rem;
	}

	p{
		font-size:1rem;
		margin: 0.3rem 0rem 1rem 0rem;
		line-height: 155%;
	}

	
	/*------- Header/Nav --------*/
	
	nav{
		margin:0.2rem auto;
	}
	nav a{
		font-size:1.1rem;
	}
	
	#headerbereich{
		margin: 0rem auto;
	}
	
	.navigationcontainer{
		top:11rem;
	}
	
	
	/*------- Inhalt --------*/
	
	.inhalt{
		padding: 2rem 3rem 4rem 3.2rem;
		max-width: auto;
		margin: 8rem 1rem 2rem 1rem;
	}
	
	
	/*------- Galerie --------*/
	
	#galerie{
		grid-column-gap: 50px;
		grid-row-gap: 50px;
		grid-template-columns: 1fr 1fr;
	}
	.galeriebild {
		width: 100%;
		height: 15rem;
	}

	
	/*------- Footer --------*/
	
	#fusszeilen-inneres h3{
		font-size: 1.1rem;
	}
	
		
}  /* ENDE MEDIA QUERY 1050px ------------------------------ */



/* ===========  MEDIA QUERY 700px =========== */

@media screen and (max-width:700px) {
	
	
	/*------- Header/Nav --------*/
	
	.hamburger{
		display:block;
		position: right;
	}	

	.navigationcontainer{
		top: 8rem;
		z-index: 33;
	}

	.navigationspunkte{
		display:none;
		flex-direction:column;
		margin:3rem auto 8rem auto;
		width:100% !important;
		padding: 2rem 1rem;
	}
	.navigationspunkte a{
		width:100% !important;
	}	
	
	
	nav{
		display:block;
		background-color: var(--schwarzTransparent);
		margin:1rem auto;
	}
	
	nav a{
		font-size:1.2rem;
		color: var(--weiss);
		margin: 0.8rem auto;
		height: 3rem;
		padding: 5px;
		flex-grow:1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	
	/*------- Inhalt --------*/
	
	.inhalt{
		padding: 2rem 2.2rem 3rem 2.2rem;
		max-width: auto;
		margin: 4rem 0rem 0rem 0rem;
	}

	
	/*------- Footer --------*/
	
	#fusszeile{
		display:flex;
		height: auto;
		margin: 0rem;
	}

	#fusszeilen-inneres{
		margin: 1rem;
		display: flex;
		flex-direction: column;
		width: 100%;	
	}

	#fusszeilen-inneres h3{
		font-size: 1.1rem;
		margin: 0.5rem;
	}

	.fusszeilentext{
		text-align: center;
		margin:0rem;
		width: 100%;
		float: right;
	}
	
		
} /* ENDE MEDIA QUERY 700px ------------------------------ */
	

/* ===========  MEDIA QUERY 600px =========== */

@media screen and (max-width:600px) {

	/*------- Header --------*/
	
	#logobereich{
		background-color: var(--weiss);
		box-shadow:1px 2px 8px 5px rgba(0,0,0,0.2);
	}
	
	.navigationcontainer{
		top: 8rem;
	}

	
	/*------- Inhalt --------*/
	
	.inhalt{
		padding: 2rem 2rem 3rem 2rem;
	}
	
	
	/*------- Galerie --------*/
	
	#galerie{
		grid-template-columns: 1fr;
	}
	
	.galeriebild {
		height: 20rem;
	}
	
		
	.filterbuttoncontainer{
		display:block;
		height: auto;
	}

	.filterbutton {
		display: block;
		background-color: var(--dunkelblau);
		width: 100%;
		margin:0.5rem;
		height:1.7rem;
		text-align:center;
	}

	#fusszeilen-inneres{
		background-color: var(--weiss);
		box-shadow:1px 2px 8px 5px rgba(0,0,0,0.2);
		margin: 1.5rem 0rem 0rem 0rem;
		padding: 1rem 0rem 0rem 0rem;
	}
	

} /* ENDE MEDIA QUERY 600px ------------------------------ */



/* ===========  MEDIA QUERY 500px =========== */

@media screen and (max-width:500px) {
	
	.navigationcontainer{
		top: 7rem;
	}
}