body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		background-color: #f4f4f4;
	}
	/* Social Media Bar */
	.social-bar {
		display: flex;
		justify-content: right; /* Verschiebt die Icons nach rechts */
		background-color: #CCCCCC;
		padding: 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; /* Volle Breite der Social Bar */
		z-index: 999;
		transition: top 0.3s;
	}
	.social-icons {
		display: flex;
		justify-content: right; /* Rechtsbündige Anordnung */
		margin-right: calc((100% - 1000px) / 2); /* Sorgt dafür, dass die Icons bündig mit dem Textblock abschließen */
	}
	.social-icons a {
		display: inline-block;
		width: 30px;
		height: 30px;
		text-align: center;
		margin: 0 10px;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}
	/* Hover-Effekt: Füllung von oben nach unten */
	.social-icons a::before {
		content: "";
		position: absolute;
		top: -100%; /* Beginnt über der Box */
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.1); /* Beispiel: Grauer Hintergrund, passt an für deine Farben */
		transition: top 0.3s ease; /* Animation des Hover-Effekts */
		z-index: 0; /* Hinter dem Bild */
	}
	.social-icons a:hover::before {
		top: 0; /* Füllt die Box von oben nach unten */
	}
	/* Grundlegendes Styling für die Social Media Icons */
	.social-icons a img {
		width: 80%;
		height: auto;
		margin-top: 3px;
		filter: grayscale(100%); /* Mach das Bild standardmäßig schwarz-weiß */
		z-index: 1;
		transition: filter 1s ease;
		
	}
	/* Hover-Effekt: Farben beim Überfahren */
	.social-icons a:hover img {
		filter: invert(100%) grayscale(100%);
	}
	
	/* Spezifische Hintergrundfarben für Social Media Icons */
	.social-icons a.facebook::before{
		background-color: #3b5998; /* Facebook-Blau */
	}
	
	.social-icons a.instagram::before {
		background-color: #E1306C; /* Instagram Pink */
	}
	
	.social-icons a.pinterest::before {
		background-color: #bd081c; /* Pinterest Rot */
	}
	/* Header */
	header {
		text-align: center;
		background-color: #fff;
		padding: 20px;
		border-bottom: 1px solid #eaeaea;
		position: sticky;
		top: 20px;
		z-index: 998;
	}
	
	.logo h1 {
		font-size: 1.5em;
		margin: 0;
	}
	
	.logo {
		margin-bottom: 20px;  /* Abstand zwischen Logo und Navigation */
	}
	
	.logo img {
		width: 250px; /* Passe die Größe des Logos an */
		height: auto;
	}
	/* Navigation Styling */
	.main-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
	}
	
	.main-nav ul li {
		margin: 0 30px 0 0;
	}
	
	.main-nav ul li a {
		text-decoration: none;
		color: #333;
		font-size: 1.2em;
		margin: 0 !important;
	}
	/* Unterstreichung beim Hover für die Hauptnavigation */
	.main-nav ul li a:hover {
		text-decoration: underline; /* Unterstreichen beim Hover */
	}
	
	/* Dropdown-Menü */
	.dropdown-content {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 100%; /* Positioniere es direkt unter dem Hauptmenü */
		background-color: white;
		box-shadow: 0 8px 16px rgba(0,0,0,0.2);
		transition: opacity 1s ease, visibility 1s ease;
		display: flex;
		flex-direction: column;
	}
	
	.dropdown-content li {
		list-style: none;
		width: 100%;
	}
	/* Übergeordneter Container für das Dropdown (About) */
	.dropdown {
		position: relative;
		display: inline-block;
	}
	.dropdown-content li a {
		color: #333; 
		text-decoration: none;
		text-align: left !important;
		display: block;
		padding: 10px 20px;
		margin: 0 !important;
	}
	
	/* Zeige das Dropdown-Menü, wenn über "About" gehovert wird */
	.dropdown:hover .dropdown-content {
		opacity: 1; 
		visibility: visible;
	}
	/* Hover-Effekte für die Dropdown-Links */
	.dropdown-content li a:hover {
		background-color: #d4b4a4;
		color: white;
		text-decoration: none !important;
		padding: 10px 20px;
	}
	
	
	
	/* Hauptinhalt */
	main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/*min-height: calc(100vh - 100px);*/
		
		padding: 20px;
		margin-top: 20px;
	}
	
	main .intro {
		margin: 0 auto;
		text-align: left;
	}
	
	
	
	main .intro p {
		font-size: 1.2em;
		line-height: 1.6;
		max-width: 950px;
		margin-bottom: 20px;
	}
	main .intro img{
		display: block; /* Bild als Blockelement behandeln */
		margin-left: auto; 
		margin-right: auto; 
		margin-top: 20px; 
		max-width: 100%; /* Sicherstellen, dass das Bild nicht breiter als sein Container ist */
		height: auto; 
	}
	input, textarea {
		width: 100%;
		padding: 10px;
		margin: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 1em;
	}
	input[type="submit"] {
		background-color: #333;
		color: #fff;
		border: none;
		cursor: pointer;
		padding: 10px 20px;
	}
	input[type="submit"]:hover {
		background-color: #555;
	}
	form {
		max-width: 800px;
		margin: 0;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	/* Footer */
	footer {
		background-color: #CCCCCC;
		color: grey;
		text-align: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 1000;
		font-size: 12px
	}
	footer p {
	line-height: 1.6;
	margin: 0;