/* CSS File für die Webseiten der CSC Badenwürtemberg */
		.hero-section {
		     background: url('bilder/default-header.jpg') no-repeat center center;
		     background-size: cover;
		     color: #fff;
		     text-align: center;
		     padding: 150px 0;
		}
		.header-container {
			 height: 700px; 
			 width: 100%;
			 background-size: cover; 
			 background-position: center; 
			 display: flex;
			 justify-content: center; 
			 align-items: center; 
		}
		.header-content {
			 background-color: rgba(0, 0, 0, 0.5); 
			 color: white; 
			 padding: 20px;
			 border-radius: 12px; 
			 text-align: center;
		}
		.section img {
		     width: 100%;
		     height: auto;
		     margin-bottom: 15px;
		}
        .header-image {
            width: 100%;
            height: auto;
            opacity: 0.8;
        }
        .header-text {
            position: absolute;
            top: 20%;
            left: 10%;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
		.container-top {
			margin-top:20px;
		 	display: flex;
		 	justify-content: center; 
		 	align-items: center; 
		}
		.container-form {
			margin-top:20px;
		}
		.footer-text {
			font-size: 9px;
		}
		h1 {
			  font-family: "Bebas Neue", cursive;
			  font-weight: 400;
			  font-style: normal;
		}
		h2 {
			  font-family: "Bebas Neue", cursive;
			  font-weight: 400;
			  font-style: normal;
		}
		h3 {
			  font-family: "Bebas Neue", cursive;
			  font-weight: 400;
			  font-style: normal;
		}
		.bebas-neue-regular {
		  font-family: "Bebas Neue", sans-serif;
		  font-weight: 400;
		  font-style: normal;
		}
		.patrick-hand sc-regular {
		  font-family: "Patrick Hand SC", cursive;
		  font-weight: 400;
		  font-style: normal;
		}
		.formular-container {
		        background-color: #979b2f; /* Hintergrundfarbe */
		        border-radius: 12pt; /* Abrundung der Ecken */
		        padding: 20px; /* Innenabstand */
		        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Leichter Schatten für Tiefe */
		    }

		    .form-group {
		        margin-bottom: 15px; /* Abstand zwischen Formularfeldern */
		    }

		    .form-control {
		        border-radius: 12pt; /* Abrundung der Ecken der Eingabefelder */
		    }

		    .btn-primary {
		        border-radius: 12pt; /* Abrundung der Ecken des Buttons */
		    }
			.btn-primary {
			    background-color: #0c2803; /* Hintergrundfarbe des Buttons */
			    color: #979b2f; /* Schriftfarbe */
			    border: none; /* Entfernt den Standard-Rand */
			}

			.btn-primary:hover {
			    background-color: #0a1f02; /* Dunklere Hintergrundfarbe beim Hover für einen visuellen Effekt */
			}
		    #error-message {
		        margin-bottom: 20px; /* Abstand zwischen Fehlermeldung und Formular */
		        color: red;
		        display: none;
		    }
			#zumSeitenanfangBtn {
			    position: fixed;
			    bottom: 20px;
			    right: 30px;
			    z-index: 99;
			    font-size: 18px;
			    border: none;
			    outline: none;
			    background-color: #0c2803;
			    color: #979b2f;
			    cursor: pointer;
			    padding: 15px;
			    border-radius: 5px;
			}

			#zumSeitenanfangBtn:hover {
			    background-color: #555; /* Farbe beim Hovern */
			}
			html {
			    scroll-behavior: smooth;
			}
			.stadt-name::first-letter  {
				    text-transform: uppercase;
			}