/* Grundfarben */
	:root {
	    --main-color: #5A2389;
	    --alternate-color: #8A89A4;
	    --text-color: #333;
	}

	/* Globales Styling */
	
	html {
        scroll-behavior: smooth;
    }
	
	body, p, .nav-link, .navbar-brand {
	    font-family: 'DM Sans', sans-serif;
	    color: var(--text-color);
	}

	h2, h3, h4 {
	    font-family: 'Nunito', sans-serif;
	    /* color: var(--main-color); */
	    margin-bottom: 30px; /* Abstand zur Überschrift */
	}
	
	h2 {
		font-size: 40px; 
	}
	
	h4 {
		color: #000;
		font-size: 28px; 
	}
	
	h6 {
	    font-family: 'Nunito', sans-serif;
	    color: #000;
	    font-style: italic; 
	    line-height: 1.25;
	    font-size: 40px; 
	}
		
	#start {
		height: 100vh; /* Höhe auf 100% der Viewport-Höhe setzen */
		display: flex; /* Flexbox für vertikale Zentrierung verwenden */
		align-items: center; /* Inhalt vertikal zentrieren */
	}

	/* Bild für mobile Geräte anpassen */
	@media (max-width: 768px) {
		#start img {
			max-width: 100%;
			height: auto;
		}
		/* Optional: Reduzieren Sie die Höhe des Startbereichs */
		#start {
			height: auto;
			padding-top: 20px;
			padding-bottom: 20px;
		}
	}
	
	.offer-title {
		word-wrap: break-word; /* Ermöglicht Umbruch für lange Wörter */
	}

	@media (max-width: 768px) {
		.offer-title {
			font-size: 1.8rem; /* Verkleinert die Schriftgröße auf mobilen Geräten */
			line-height: 1.2; /* Verringert den Zeilenabstand */
			word-break: break-word; /* Bricht lange Wörter um, falls nötig */
		}
	}

	@media (max-width: 768px) {
		/* Reduziert die Größe des Icons und fügt Abstand hinzu */
		#about .bi-person-circle {
			font-size: 40px; /* Größe des Icons verkleinern */
			margin: 20px; /* Abstand zum unteren Bereich */
		}

		/* Überprüft die Textausrichtung und Abstände im mobilen Layout */
		#about .col-md-6 {
			text-align: center; /* Zentriert den Inhalt auf mobilen Geräten */
		}

		#about img {
			max-width: 80%; /* Verkleinert das Bild, um mehr Platz zu schaffen */
			margin: 0 auto; /* Zentriert das Bild */
		}
	}

	/* Navbar-Styling */
	.navbar {
		background-color: white;
		border-bottom: 2px solid var(--main-color);
		position: sticky; /* Macht die Navbar oben fixiert, bleibt beim Scrollen sichtbar */
		top: 0;
		z-index: 1000; /* Hoch genug, um über anderen Inhalten zu bleiben */
	}

	/* Nav-Link-Styling */
	.navbar .nav-link {
		padding: 10px;
		color: var(--main-color) !important;
		font-weight: bold;
		transition: color 0.3s ease;
	}

	.navbar .nav-link:hover {
		color: var(--alternate-color) !important;
	}

	/* Anpassungen für kleinere Bildschirme */
	@media (max-width: 768px) {
		h2 {
			font-size: 1.5rem;
		}

		.navbar .nav-link {
			font-size: 0.9rem;
		}

		/* Korrektur für mobile Ansicht */
		#start {
			flex-direction: column;
			text-align: center;
		}

		/* Optional: Navbar-Links auf Block umstellen, um vertikales Layout zu erzwingen */
		.navbar-collapse {
			text-align: center;
		}

		.navbar .nav-link {
			display: block; /* Ermöglicht Stapeln der Links untereinander im mobilen Menü */
			padding: 8px 0; /* Reduziert den Abstand für das mobile Menü */
		}
	}

	/* Abschnittsstyling */
	.content-section {
		color: var(--main-color);
	    padding-top: 80px; /* Abstand für fixierte Navigation */
	    padding-bottom: 50px;
	}

	.bg-alternate {
	    background-color: var(--alternate-color);
		padding-top: 80px; /* Abstand für fixierte Navigation */
	    color: white;
	}
	
	.offer-title {
		color: var(--main-color) !important; 
		font-size: 60px; 
		font-family: 'DM Sans', sans-serif;
	}
	
	.text-time {
		padding-left: 15px; 
		font-weight: bold; 
		font-size: 16px;
	}
	
	.text-about {
		color: #fff;
		font-size: 20px; 
	}
	
	.img-fluid {
		width: 36em; 
	}
	
	/* Abgerundete Boxen */
	.rounded-box {
	    background-color: white;
	    border-radius: 15px;
	    padding: 20px;
	    margin: 15px 0;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
    .service-box {
        height: 100%;  /* Gleiche Höhe für alle Boxen */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
	
	.row {
		margin-bottom: 20px; 
	}
	
    .price-tag {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--main-color);
        margin: 1rem 0;
    }
	
	/* Preis Styling */
	.btn-service {
		background-color: #5A2389; 
		color: white; 
		border-radius: 20px; 
		width: 100%;
		margin-top: 20px; 
	}
	.price-button {
	    background-color: #5A2389; /* Lila Farbe */
	    color: white;
	    border-radius: 25px; /* Runde Ecken */
	    border: none;
	    padding: 10px 20px;
	}
	
	.price-button:hover {
	    background-color: #8A89A4; /* Alternativfarbe */
	}
	
	/* Footer Styling */
	.footer {
	    background-color: white;

	}

	.footer a {
	    text-decoration: none;
		color: var(--main-color);
		font-weight: bold; 
	}

	.footer a:hover {
	    color: var(--alternate-color);
	}

	/* Modal Styling */
	.modal-content {
	    border-radius: 10px;
	}

	/* Kontaktformular Styling */

	/* Breite des Formulars */
	#contact .container {
		max-width: 600px; /* Maximale Breite des Formulars */
	}

	textarea {
		height: 150px; /* Höhe von 6 Zeilen */
	}

	.contact-info {
		color: var(--main-color); /* Stellt sicher, dass der Text in weiß angezeigt wird */
	}

	.contact-info p {
		color: var(--main-color);
		margin-top: 20px; 
		margin-bottom: 5px; /* Abstand zwischen den Textzeilen */
	}
	
	.form-control {
		border-radius: 25px; /* Rundung der Ecken für das Textfeld */
	}

	#contact .form-control {
		margin-bottom: 10px;
		font-size: 1rem;
	}

	.btn-primary {
		background-color: var(--main-color); /* Hauptfarbe des Buttons */
		border-color: var(--main-color); 
		color: white;
		width: 100%;
		border-radius: 25px; /* Rundung der Ecken für den Button */
		transition: background-color 0.3s ease; /* Sanfte Übergänge */
	}

	.btn-primary:hover {
		background-color: #6B338C; /* Ändere die Hintergrundfarbe beim Hover */
		border-color: #6B338C); /* Rahmenfarbe beim Hover */
		color: white; /* Textfarbe beim Hover */
	}

	.input-group {
		display: flex; /* Flexbox für die E-Mail und Button-Positionierung */
		align-items: center; /* Vertikale Ausrichtung */
	}

	.input-group .form-control {
		flex: 1; /* Das E-Mail-Feld nimmt den verfügbaren Platz ein */
	}

	.input-group .btn {
		margin-left: 10px; /* Abstand zwischen E-Mail-Feld und Button */
		border-radius: 25px; /* Sicherstellen, dass der Button abgerundet ist */
	}

	.cookie-banner {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #f8f9fa;
		padding: 10px;
		box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
		z-index: 1000;
	}