body {
    margin: 0;
    padding: 0;
    background-image: url('../Images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* Passt das Bild an, sodass es die gesamte Fläche bedeckt */
    background-position: center; /* Zentriert das Bild */
    background-attachment: fixed; /* Fixiert das Bild beim Scrollen */
    background-color: #000;
    height: 100vh; /* Setzt die Höhe des Bildes auf 100% des Viewports */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-repeat: inherit;
    background-size: cover; /* Gleiche Anpassung für den Overlay-Effekt */
    filter: blur(2.5px) brightness(60%);
    z-index: -1;
}


html, body {
    overflow-x: hidden;
}

/* Stelle sicher, dass Bilder niemals den Viewport sprengen */
img {
    max-width: 100%;
    height: auto;
}

/* Footer Styling */
/* Footer dynamisch positionieren bei Scrollbarkeit */
.footer {
    background-color: #241342; /* Hintergrundfarbe des Footers */
    color: #ffffff;            /* Textfarbe */
    padding: 20px 0;           /* Innenabstand oben und unten */
    text-align: center;        /* Zentrierter Text */
}

/* Footer am Ende bei Scrollen */
.footer-scrollable {
    position: static; /* Lässt den Footer im Dokumentenfluss */
}

/* Footer fixiert bei keiner Scrollbarkeit */
.footer-fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
}

.footer-links {
    list-style: none;          /* Entfernt Aufzählungszeichen */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;   /* Zentriert die Links horizontal */
    flex-wrap: wrap;           /* Ermöglicht Zeilenumbrüche bei kleinen Bildschirmen */
}

.footer-links li {
    margin: 0 15px;            /* Abstand zwischen den Links */
    padding: 4px;
}

.footer-links a {
    color: #ffffff;            /* Linkfarbe */
    text-decoration: none;     /* Entfernt Unterstreichung */
    font-size: 14px;           /* Schriftgröße */
    transition: color 0.3s;    /* Übergangseffekt beim Hover */
}

.footer-links a:hover {
    color: #93c2d6;            /* Farbe beim Hover */
}


.footer-sponsors {
    margin-top: 15px;
    text-align: center;
}

.footer-sponsors img {
    vertical-align: middle;
    height: 5vh;
    margin: 15px 15px;

}

.sponsors-span {
    font-size: 1.2rem;
}


.error-message {
    color: red;
    font-size: 0.9em;
    margin-bottom: 5px;
}
.input-container input.invalid,
.input-container-address input.invalid {
    border-color: red;
}