/* CSS Document */

/*=============================================================================================*/
/*Externe Schriften importieren*/
/*=============================================================================================*/		
	
	
	@import url("https://use.typekit.net/xnn6adi.css");

/*=============================================================================================*/
/*CSS-Reset*/
/*=============================================================================================*/
*{
			box-sizing:border-box;
			margin:0;
			padding:0;
		}
/*=============================================================================================*/
/*HTML-Basics / Body */ 
/*=============================================================================================*/
	html, body {
			/*border: 2px dashed green;*/
			min-height: 100vh; /*Bildschirmhöhe*/
			
			scroll-behavior:smooth; /*fährt langsam hoch*/
	}

	body {
	
	/*Hintergrundsbild einbinden*/
	
			background-image: url("bilder/schiefer.jpg");
			background-color: #000000;
			color: silver; /*Schriftfarbe*/
			display: flex;
	
			background-attachment: fixed;/*fixiert den Hintergrund*/
			background-size: cover;/*auto oder cover*/
			
			font-family: 'Poppins', "Verdana", "sans-serif";
			font-size: 1.3rem; /*Standardgrösse de Textes 16px*/
			font-weight: lighter;
		
			line-height:1.3;
			padding: 2rem; /*Randabstand*/
	}

	.hintergrundhome {
	
			background-image: url("bilder/haupthintergrund.png");
	
			background-attachment: no-repeat center center fixed;
			background-size:cover;/*auto oder cover*/
	}


/*=============================================================================================*/
/*Standard-Darstellung header, main und container */
/*=============================================================================================*/
	header {
			height: 10rem;
    }

	main {
			/*background:rgba(44,42,40,0.7);*/
			padding: 2rem;
		}
		
	p { padding: 0.5rem 3rem;	}
		

	#container {
			width: 100%;
			max-width:85rem; /*Container Breite*/
	
			margin: 0 auto; /*Container zentrieren*/
			padding:0.5rem;
			position: relative; /*innerhalb des Containers*/
	}

/*=============================================================================================*/	
/* Logo & Social-Media & Hamburger-Menu */
/*=============================================================================================*/
	
	#hauptlogo {
		
			height: auto;
			width: 40%;
			margin:0% 30%;

			display: flex;
			flex-wrap: wrap;
			object-fit: cover;

			justify-content: center; 
			align-items: center;
			
			z-index: 100;
				
	}

	#logo {
		
			position: absolute; /*ausgehend vom body*/
		
			left: 2rem;
			top: 0.5rem;
		
			text-align: left;
		
			height: auto;
			width: auto;
			
			z-index:100; /*definiert die Ebenen (Vorder-Hintergrund) Höhere Zahl im Vordergrund*/
		}

	#socialmedia {
			
			position:absolute;
		
			right:2rem;
			top:1rem;
			
			text-align: center;
			
			display: flex;
			flex-direction: column;
			
			height: 8%;
			width: auto;
		
			z-index:1000; /*definiert die Ebenen (Vorder-Hintergrund) Höhere Zahl im Vordergrund*/	
		}
		
		#socialmedia .fab {
			color: #94741A;
			padding: 0.5rem;
			transition: all ease-in-out 0.7s;
			
		}
		
		 #socialmedia .fab:hover {
			color: antiquewhite!important;
			padding: 0.5rem;
			transition: all ease-in-out 0.7s;
			 
			transform:scale(1.2); /*vergrössert die Icons*/
			
		}
		#socialmedia a {
			background: none;
		
		}

		#hamburger{
			display: none;
        }

/*=============================================================================================*/
/* Navigation */
/*=============================================================================================*/	
		nav {
				font-size: 1.5rem;
				padding: 1rem;
		
			/* Display definition */
				display:flex;
				justify-content:space-around; /* oder between (Zwischenräume)*/
				flex-wrap:wrap;
				
				z-index: 90000;
			
				}
			
		/* Kontext sensitive definition */
			/* alle Links innerhalb der Navigation */
		nav a:link {
				background:rgba(31,31,31,0.8);
				color: #94741A;
				padding:0.5rem 0rem; /* Abstand */
				text-align: center;
				text-transform: lowercase;
				flex-grow: 1;
				font-weight: normal;	
				
			}

		nav a:hover {
				background:rgba(117,92,21,0.8);
				color: antiquewhite;
			}

		nav .aktivmenu{
			color:black!important;
			background:rgba(117,92,21,0.8);
		}

		#menu {
			display: none;
			
		}

/*=============================================================================================*/
/* Boxen*/
/*=============================================================================================*/

	.zweiboxen	{
		
		display: flex;
		justify-content: space-between;
		
		margin-bottom: 2.5rem;
	
}
	.boxlinks {
			position: relative; /*ausgehend vom body*/
		
			height: auto;
			width: 47%;
		
			padding: 2rem;
}
	.boxrechts {
			position: relative; /*ausgehend vom body*/
			
			height: auto;
			width: 47%;
		
			padding: 2rem;
}

/*=============================================================================================*/
/*Bilder und  Galerien*/
/*=============================================================================================*/
		.bilder {
			
				display: flex; 	/* ordnet die Elemente nebeneinander an */
				justify-content: space-between; /* Abstand zwischen den Bildern */
				flex-wrap: wrap;
				
			}

		.bilder img{
				display: block;
				object-fit: cover;
				flex-grow: 1;	
				opacity: 1;
			
				width: 33.333%; /* z.B. für 3 Bilder */
			
				padding: 0.5rem;	
}
	
.bildergalerie {
				
				display: flex; 	/* ordnet die Elemente nebeneinander an */
				justify-content: space-evenly; /* Abstand zwischen den Bildern */
				flex-wrap: wrap;
				
				object-fit: cover;

				width: 100%;
				
				margin:1rem;
				padding: 0.5rem;
   						
   				
			}

			.bildergalerie a {
				background: none!important;
				object-fit: cover;
				
				width: 33.333%; /* z.B. für 3 Bilder */
				
				line-height: 0;
}
			.bildergalerie img{
				object-fit: cover;
				flex-grow: 1;	
				opacity: 1;
				height: 100%;
				width: 100%; 
				transition: all ease-in-out 0.3s;
				
				padding: 0.5rem;
			}
			.bildergalerie img:hover{
				object-fit: cover;
				opacity: 0.7;
				transition: all ease-in-out 0.3s;
		}


			.media img {
				
				height: 415px;
				
			}

			.menschen img {
				
				height: 250px;	
				
			}


		.webgalerie {
			
				display: flex; 	/* ordnet die Elemente nebeneinander an */
				justify-content: space-between; /* Abstand zwischen den Bildern */
				flex-wrap: wrap;				
				
				line-height: 0;
				
			}

		.webgalerie img{
				object-fit: cover;
				flex-grow: 1;	
				opacity: 1;
			
				width: 100%; 
			
				padding: 2.2rem;
			
				line-height: 0;		
			
		}

		.webgalerie a {
			background: none!important;
			line-height: 0;
}

		.web {
		
			/*margin:0 auto;*/
			height:100%;
			width: 100%;
			 /*aussenbereich nicht zeigen*/
			overflow:hidden;
			
			/* damit innerhalb mit absolute gearbeitet werden kann */
			position:relative;
			
		
		}
        
	.web img {
			object-fit:cover;
			height:100%;
			width:100%;
		
			padding: 2rem;
			margin: 0;
			
		}

	.web img:hover{
				filter: grayscale();
				object-fit: cover;
				opacity: 0.3;
			
				transition: all ease-in-out 0.4s;
			
}
			
	.web:hover .bildtitel {
			
			color:#94741A;
			font-size: 3.5rem;
			font-weight: bold;
			
			height:100%;
			width:100%;
			/* positionierung absolute geht nur innerhalb relativer elemente */
			position:absolute;
			bottom:0;
			opacity:1;
			
			transition:all ease-in-out 0.4s;
			text-align:center;
			/* zentrieren vertikal */
			display:flex;
			justify-content:space-around;
			align-items: center;
			/* untereinander darstellen */
			flex-direction:column;
							
		}
		.web .bildtitel {
			bottom:-100%;
			opacity:0;
	
		}
			
/*=============================================================================================*/
/*Überschriften & Abschnitte
/*=============================================================================================*/
	/*Überschriften (Gruppenselektoren)*/		
	h1, h2, h3, h4 {
		color: silver;
		padding:1.5rem;  /*Abstand oben/unten und rechts/links*/
	}
	
	h1	{
		font-family: "delaney", "Verdana", "sans-serif";
		font-size: 3.5rem;
		font-style: normal;
		font-weight: 400;
		
		padding-top: 3rem; 
		
		text-align: center;
		}

	h2	{
		color: antiquewhite;
		font-family: all-round-gothic,  "Verdana", "sans-serif";
		font-size: 2rem;
		font-style: normal;
		font-weight: 400;
		
		}	

	h3	{
		color: #94741A;
		font-family: 'Poppins', "Verdana", "sans-serif";
		font-size: 1.7rem;
		font-style: normal;
		font-weight: 400;
		
		padding:0.5rem 3rem;
		
		}	

	h4	{
		color:silver;
		font-family: 'Poppins', "Verdana", "sans-serif";
		font-size: 2.2rem;
		font-style: normal;
		font-weight: 400;
		
		padding:0.5rem 3rem;
		
		}	


	hr {
		height: 1px;
		border-bottom: 0;
		border-top: 1px solid #755C15;
		border-right: none;
		border-left: none;
}

/*=============================================================================================*/
/*Klassen
/*=============================================================================================*/

	/*Schriftgrössen und Grad*/		

		.klein {
		font-size: 1.1rem;
		}

		.gross {
		font-size: 2rem;
		}

		.light {
		font-weight: 300;
		}
	
	/*Gross und Kleinschreibung*/
		.grossbuchstaben {
		text-transform: uppercase
		}

		.kleinbuchstaben {
		text-transform: lowercase
			
		}

		.rechts {
		font-style: normal;
		text-align: right;
		}
		
		.spaltentext {
		column-count: 2;
		column-gap: 2rem;
		}	

		.zentriert {
		text-align: center;
		display: flex; 
    	justify-content: center; 
    	align-items: center;
			
	}

	.zitat {
		color: antiquewhite;
		font-family:"delaney", "Lucida Sans", "Verdana", "sans-serif";
		font-size: 2.3rem;	
			
		text-align: center;
		
		padding:2rem;
		
		}

	.kreis {		
		border-radius: 50%;
	}


	.button {
		display: flex;
		
  		background-color:none;
		color: #755C15;
		border: 2px solid silver;
		
		padding: 15px 30px;
		
		text-decoration: none;
		font-size: 25px;
	
		justify-content: center;
		align-items: center;
		
		position: absolute;
		
		left: 50%;
		transform: translate(-50%, -50%);
	}


	.button:hover {
		background-color:#755C15;
		color: black;
		border: 2px solid black;
		
}	

/*=============================================================================================*/	
/* Links */
/*=============================================================================================*/		
		
/* Pseudoklassen mit: definiert */
			a:link { /* link, visited, hover, active */
				color: #94741A;
				text-decoration: none;
				font-weight: normal;
			}
			a:visited {
				color: #94741A;
			
			}
			a:hover {
				background-color:#755C15;
				color: black;
				
			}
			a:active {
				color: silver;				
			}		

/*=============================================================================================*/		
/* Listen & Formulare */
/*=============================================================================================*/

 	ul {
		
		font-family: all-round-gothic, "Lucida Sans", "Verdana", "sans-serif";
		font-size: 1.5rem;
		
		list-style-type: none;
		margin-left: 5rem; /* Einzug */
	
	}

	input, textarea {
		
		font-family: 'Poppins', "Lucida Sans", "Verdana", "sans-serif";
		
		background-color:rgba(255,255,255,0.5);
		border: solid 0.1rem black;
	
		padding: 0.7rem;
		font-size: 1.3rem;
	
		width: 100%;

}

	textarea {
	
		height: 13rem;
}

/* Button für Formular */

	#button {
	
		background-color:rgba(117,92,21,0.7);
		color: antiquewhite;
	}

	#button:hover {
	
		background-color:rgba(255,255,255,0.55);
		color: black;
	
	}

/*=============================================================================================*/
/* Topbutton */
/*=============================================================================================*/
		#topbutton {
			
			position: sticky;
			
			font-size: 2.5rem;
			
			margin: 0 auto;
			padding: 0.5rem 2rem;
			
			bottom: 0rem;
			right:-7rem;
			
			text-align: center;			
		}
/*=============================================================================================*/		
/* Footer */
/*=============================================================================================*/
	footer {
		
    	border-top: 1px solid #755C15;
		
		display: flex;
    	font-size: 0.9rem;
		justify-content: space-between;
		  
    	margin-top: 1rem;	/*Aussennabstand*/
		padding-top: 1rem; /*Innenabstand*/
		padding-bottom: 0.5rem;
	}
	
/* ============================================================================== */
/* MEDIA QUERY * - Grundeinstellungen (Header, Body, Container)
/* ============================================================================== */			
	@media all and (max-width:900px){
		
		@viewport {
   		width: device-width;
		}
				
		header {
			height: 13rem;
			padding: auto;
    		margin-bottom: 0.5rem;
			
			flex: 1 100%;
    }
		html, body {
			flex-flow: 1 100%;
			font-size: 1.1rem; /*Standardgrösse de Textes 16px*/
			
			padding:1rem;
			
				}
		main {
			padding: 0.3rem;
		}
	
		
		#container {
			flex: 1 100%;
			
			margin: 0;
			padding: 0;
			
			width: 100%;
			min-height: 100vh;
			
			position: relative; 
			
		}
		p { 
			padding:0.5rem 0rem;
			text-align: center;
		
		
		}
	
		.hintergrundhome {
	
			background-position:90% bottom;   	
		
	}
/* ============================================================================== */
/* Navigation - Hamburger */
/* ============================================================================== */
	
	nav {
			display: none;
		
		}
		
	#menu {		
				position: fixed;
		
				display:flex;
				flex-direction: column;
				justify-content:space-around;
		
				flex-wrap:wrap;
				
				right: 1rem;
				top: 3.5rem;
				padding: 0rem;
				
				font-size: 1.2rem;
				width: 50%;
		
				z-index: 10000;
		
				}	
		
					
	#menu a:link {
				background:rgba(149,119,36,0.85);
				color: black;
		
				padding:0.5rem 0rem; /* Abstand */
				text-align: center;
				text-transform: lowercase;
				flex-grow: 1;
				font-weight: normal;
				
			}
		
	#menu a:hover {
				background:rgba(149,119,36,0.60);
				color: antiquewhite!important;
			}
		
	#menu a:visited {
				
				color: black;
			}
		
	#menu .aktivmenu{
			background:rgba(149,119,36,0.85);
			color:antiquewhite!important;
				
			
		}
			
		#hamburger{
		
			display: block;
            padding:0.5rem 1rem;
			
			position:fixed;
			
			top: 1rem;	
			right: 1rem;
			
			z-index: 10000;
        }
		
     	#hamburger .fas {
			
			color: #94741A;
			font-size:2rem;
			transition: all ease-in-out 0.7s;
  
        } 
		
		#hamburger .fas:hover {
			
			color: antiquewhite;
			
			transform:scale(1.2); /*vergrössert die Icons*/
			transition: all ease-in-out 0.7s;
			
		}
		
/* ============================================================================== */
/* Logo, Socila-Media */
/* ============================================================================== */
		
			#hauptlogo {	
				
				width: 100%;
				
				margin:0.5rem 0rem;
		}
		
		
			#logo {
				min-width: 90%;
				
				position: absolute; /*ausgehend vom body*/
				top: 7rem;
				
				
				display: flex;
				flex-wrap: wrap;
				
				align-items: center;
				justify-content: center; 
				margin-left: -0.5rem;
				
		}

			#socialmedia {	
				
				position: absolute;
				
				height: 3rem;
				width: 6rem;
					
				left: 0.5rem;
				top: 100%;

				display: flex;
				flex-direction: row;	
		}
		
/* ============================================================================== */
/* Überschriften */
/* ============================================================================== */
					
	h1, h2, h3, h4 {
		padding:1.5rem 0em;  /*Abstand oben/unten und rechts/links*/
		text-align: center;	
	}
				
		
	h1	{
				
		font-size: 2.5rem;
		padding: 3rem 0rem;

		}

	h2	{
		
		font-size: 1.8rem;

		}	
		
	h3	{
		font-size: 1.3rem;
		padding: 1rem 0rem;
		
		}	
		
		h4	{
		font-size: 1.8rem;
		padding: 0rem;
		
		}	

/* ============================================================================== */
/* Bilder und Klassen */
/* ============================================================================== */
		
		.bilder img{
				
				height: auto;
				width: 100%;
		}
		
		.bildergalerie {
				
				flex-direction: column;	
				margin:0rem;
				width: 100%; 

		}
		
		.bildergalerie a {

				width: 100%;
		}
		
		.menschen img {
				
				height: auto;
				width: 100%;
				
			}
	
		.web {
						
				padding: 0rem;
			
			}
		
		.web img {
		
			padding: 0.5rem;
			
			
		}
		
		.web:hover .bildtitel {
			font-size: 1.3rem;
			
		}
		
		.media img {
				
				height: auto;	
				width: 100%;
			
			}
		
		.zweiboxen {	
			
				flex-direction: column;
	
		}
		
		.boxlinks, .boxrechts{
			
				
				padding: 0;
				width: 100%;
		}
		
		.zitat {
		
			font-size: 1.8rem;
			
			padding-top: 1.5rem;
			padding-bottom: 0.5rem;
	
		}
		
		.button {
		
			width: 70%;
			
			padding: 13px 22px;
			font-size: 22px;
			
	}
		
			
	ul {
		
		margin-left: 2rem; /* Einzug */
		
		font-size: 1.2rem;		
		
	}
		
	input, textarea {
	
		padding: 0.5rem;
		
		font-size: 1rem;
	
		}
		
	footer {	
		
		position: relative;
		width: 100%;
		
		padding: 0rem 0.5rem;
		
		font-size: 0.7rem;
		
			}
		
} /*ENDE MEDIA QUERY*/