/*-----ALLGEMEIN-----*/

		body {
			font-size: 1rem;
			font-family: 'Montserrat', sans-serif;
			line-height: 1.5;
		}		
		
		/* Das CSS-Box-Modell (Berechnung ohne Padding) wird mit folgendem Befehl außer Kraft gesetzt. */
		html {
			font-size: 100%;
			box-sizing: border-box;
		}
		*, *:before, *:after {
			box-sizing: inherit;
		}

		h1 {
			background-color: rgb(0, 0, 0, 0.3);
			text-align: center;
			padding-top: 70vh;
			margin-top: 0vh;
			color: white;
			height: 100%;
			font-size: 9.375rem;
			font-family: 'Oswald', sans-serif;
		}
		
		/* 20px nach oben, 0px nach rechts, 10px nach unten, 0px nach links */
		h2 {
			margin: 20px 0px 20px 0px;
		}
		
		/* 10px oben und unten zwischen Absätzen, 0px links und rechts */
		p {
			margin: 10px 0px;
		}

	/* Cookie-Banner*/

	.cookie-banner {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #f5df4d;
		color: black;
		padding: 20px;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: inherit;
	  }
	  
	  .cookie-banner p {
		text-align: center;
		margin: 0 0 10px;
	  }
	  .cookie-banner a {
		color: black;
		text-decoration: underline;
		margin: 0 0 10px;
	  }
	  	  
	  .cookie-banner a:hover {
		color: white;
		}	
	  
	  .cookie-banner button {
		-webkit-appearance: none;   /* iOS Safari */
		-moz-appearance: none;      /* Firefox */
		appearance: none;
		background-color: #939597;  /* Deine Wunschfarbe */
		color: white;               /* Schriftfarbe */
		border: none;               /* Kein Rahmen */
		border-radius: 5px;
		padding: 5px 10px;
		cursor: pointer;
		font-size: 14px;
		font-family: inherit;
		text-decoration: underline; /* Falls gewünscht */
	  }
	  
	  .cookie-banner button:hover,
	  .cookie-banner button:focus,
	  .cookie-banner button:active {
		background-color: darkgray;
		color: black;
		text-decoration: underline;
	  }


		
		
	/*-----KOPFBEREICH-----*/
		
		
		.parallax { 
  			background-image: url("../Bilder/BildCH.jpg");
  			height: 100vh;
  			width: 100%;
  			/* Create the parallax scrolling effect */
  			background-size: cover;
  			background-position: center;
  			background-repeat: no-repeat;
  			overflow: hidden;
  			background-attachment: fixed;
		}
		
		.parallaxinteressen { 
  			background-image: url("../Bilder/BildSGLCH.jpeg");
  			height: 100vh;
  			width: 100%;
  			/* Create the parallax scrolling effect */
  			background-size: cover;
  			background-position: center;
  			background-repeat: no-repeat;
  			overflow: hidden;
  			background-attachment: fixed;
		}

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

		/*
		"border-top" und "border-bottom" legt die Rahmenart des oberen bzw. unteren Rahmens fest"."solid" gibt dem Rahmen eine durchgehende Linie
		
		"display: flex;"  macht aus der Navigationsleiste eine Flexbox.
		"justify-content: space-evenly;" die Navigationspunkte sind in gleichmäßigen Abständen zueinander.
		*/
		nav {
			background-color: #F5DF4D;
			color: black;
			float: left;
			width: 100%;
			height: 100%;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			padding-left: 15%;
			padding-right: 15%;
			margin-top: 10px;
			margin-bottom: 10px;
			display: flex;
			justify-content: center;
		}

		nav a {
			color: black;
		}	
		
		nav a:hover {
			color: white;
		}	

		nav p {
			padding: 30px 30px;
			margin: 0px;
			font-size: 1.3rem;
		}

	/*-----SEITENLEISTE-----*/

		aside {
			background-color: #939597;
			color: white;
			float: left;
			height: 100%;
			min-height: 200px;
			width: 15%;
			min-width: 200px;
			overflow: auto;
			margin-left: 4.5%;
			margin-bottom: 10px;
			padding-left: 10px;			
			padding-top: 10px;	
			display: flex;
			flex-direction: column;
			font-size: 1.1rem;	
		}
		
		aside p {
			padding-left: 20px;
		}
		
		aside a {
			color: white;	
		}

		aside a:hover {
			color: black;	
		}
				

				
	/*-----HAUPTBEREICH-----*/
	
		/* 
		calc()-Funktion
		Syntax: calc([wert] [operator] [wert])
		*/
		main {
			width: 59%;
			float: left;
			padding-left: 30px;
			margin-bottom: 30px;
		}
		
		main p {
			margin-left: 2%;
		}

		main a {
			color: black;
		}

		.verlinkung:hover {
			color: #939597;
		}
			
		.verlinkung {
			color: black;
		}
					
		main i {
			color: black;
		}

		main blockquote p {
			font-family: 'Montserrat', sans-serif;
			font-style: italic;
			text-align: center;
			font-size: 1.3rem;
			margin: 0px 0px;
		}
		
		main cite {
			font-style: normal;
			margin: 0px 0px;
		}

		hr {
			border: solid #DDDBDC 1px;
		}
				
		#containertags	{
			margin-left: -5px;
		}
		
		#containerbuttons	{
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#containerbuttonsvideo	{
			display: flex;
			justify-content: left;
			align-items: center;
		}								
																								
		.tags {
			padding: 5px 5px 5px 5px;
			margin: 5px 5px;
			background-color: #939597;
			color: white;
			border-radius: 5px 5px 5px 5px;
			display: block;
			float: left;
			text-align: center;
			max-width: 330px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;			
		}

		a .tags:hover {
			padding: 5px 5px 5px 5px;
			margin: 5px 5px;
			background-color: #F5DF4D;
			color: black;
			border-radius: 5px 5px 5px 5px;
			display: block;
			float: left;
			text-align: center;
			max-width: 330px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;			
		}		

		.buttons {
			padding: 5px 5px 5px 5px;
			margin: 5px 5px;
			background-color: #939597;
			color: white;
			border-radius: 5px 5px 5px 5px;
			float: left;
			text-align: center;
			max-width: 330px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;			
		}

		.buttons:hover {
			padding: 5px 5px 5px 5px;
			margin: 5px 5px;
			background-color: #F5DF4D;
			color: black;
			border-radius: 5px 5px 5px 5px;
			display: block;
			float: left;
			text-align: center;
			max-width: 330px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;			
		}							
																		
		.tags2 {
			clear:left;
			padding: 5px;
			margin-right: 2%;
			display: block;
			text-align: center;
			max-width: 330px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;			
		}	


		
		#ContainerBilder {
			margin-left: 2%;
			margin-right: 2%;
			height: auto;
			max-width: 100%;	
			display: flex;
			flex-direction: column;
		}

		#ContainerBilder img {
			padding-bottom: 2%;
			height: auto;
			max-width: 100%;	
		}
							
		.Abstand {
			margin-bottom: 40px;
			margin-left: 4%;
		}	
	
		form fieldset {
			margin-top: 25px;
			padding: 10px;
			width: 450px;
		}
		
		form legend {
			padding: 0 10px;
			font-weight: bold;
			}
		
		form label {
			float: left;
			width: 150px;
		}

		form input {
			width: 220px;
			margin-bottom: 5px;
		}
		
		form textarea {
			width: 370px;
			height: 150px;
			margin-top: 10px;
		}
		
	/*-----FUSSBEREICH-----*/
			
		footer {
			background-color: #F5DF4D;
			color: black;
			width: 100%;
			height: 100%;
			margin-top: 30px;
			padding-left: 15%;
			padding-right: 15%;
			display: flex;
			justify-content: center;
			font-size: 1.1rem;	
		}
				
		footer p {
			padding: 30px 30px;
			margin: 0px;
		}
		
		footer a {
			color: black;
		}
		
		footer a:hover {
			color: white;
		}

		footer p:hover {
			color: white;	
		}		

/* ----- KONTAKTFORMULAR ----- */

/* Checkbox + Text nebeneinander, Label über volle Zeile */
.form-privacy {
    display: flex;
    align-items: flex-start;   /* Text oben ausrichten, nicht zentriert */
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;           /* Text kann umbrechen */
}

.form-privacy input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;           /* optisch an Text ausrichten */
    width: 18px;
    height: 18px;
    flex-shrink: 0;            /* Checkbox bleibt gleich groß */
}

.form-privacy label {
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;                   /* Label nimmt volle Restbreite */
}

/* Link innerhalb des Labels */
.form-privacy a {
    color: black;
    text-decoration: underline;
}

.form-privacy a:hover {
    color: #939597;
}

/* Button unter der Checkbox, gleiche Schriftart wie restliches Formular */
.form-submit {
    margin-top: 10px;
}

.form-submit button {
    background-color: #939597;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 1rem;
    font-family: inherit;       /* SCHRIFTART ANGLEICHEN */
    cursor: pointer;
}

.form-submit button:hover,
.form-submit button:focus,
.form-submit button:active {
    background-color: darkgray;
    color: black;
}

	

	/*-----Responsives Design-----*/						
																						
		@media (max-width: 1115px) {
			header {
				padding-left: 0%;
				padding-right: 0%;
			}

			h1 {
				font-size: 6.25rem;
				padding-top: 75vh;
			}			

  			.parallax {
    			background-attachment: scroll;
  			}

  			.parallaxinteressen {
    			background-attachment: scroll;
  			}
  					
			nav {
				padding-left: 0%;
				padding-right: 0%;
			}
			aside {
				margin-left: 0%;
			}

			main {
				width: 76%;
			}
					
			#containerbuttons	{
				margin-right: 20%;
			}
			
			main blockquote p {
				margin-right: 20%;
			}
		
			main cite {
				margin-right: 5%;
			}

			/* Photo Grid - Zwei anstatt vier Spalten */
			.column {
				-ms-flex: 50%;
				flex: 50%;
				max-width: 50%;
			}

			footer {
				padding-left: 0%;
				padding-right: 0%;
			}		
		}

		@media (max-width: 910px) {

			header img {
				float: left;
				margin-top: 1px;
				object-fit: cover;
				height: 100%;
				width: 100%;			
			}	

			aside {
				display: none;
			}		

			main {
				width: 100%;
				padding-left: 0px;
			}

			#containerbuttons	{
				margin-right: 0%;
			}

			main blockquote p {
				margin-right: 0%;
			}
		
			main cite {
				margin-right: 0%;
			}			
		}
																						
		@media (max-width: 800px) {
			nav {
				flex-direction: column;
				justify-content: center;
			}

			h1 {
				padding-top: 80vh;
				font-size: 4.688rem;
			}	

			nav p {
				padding: 5px 30px;
				text-align: center;
			}

			iframe {
				margin-left: 2%;
				margin-right: 2%;
				height: 225px;
				max-width: 400px;
			}

			/* Photo Grid - Eine statt Zwei Spalten */
			.column {
				-ms-flex: 100%;
				flex: 100%;
				max-width: 100%;
			}
		
			footer {
				flex-direction: column;
				text-align: center;
				justify-content: center;
			}

			footer p {
				padding: 5px 30px;
			}
		}

		@media (max-width: 500px) {
			h1 {
				font-size: 3.438rem;
			}
		}					

		@media (max-width: 350px) {
			h1 {
				font-size: 2.5rem;
			}
		}	

		@media (orientation: landscape) and (max-height: 600px) { 
		     		     		     
			h1 {
                padding-top: 60vh;
                font-size: 4.688rem;
			}	

        		body {
                font-size: 0.7rem;
			}
                
        		td {
                font-size: 1rem;
			}                                			}
        
        @media (orientation: landscape) and (max-height: 350px) {

			h1 {
                padding-top: 65vh;
                font-size: 3.438rem;
			}	
        }