/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-image: url('../images/Header-1024x594.jpg'); /* Hintergrundbild */
    background-size: cover; /* Deckt den gesamten Bereich ab */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    padding: 200px 0; /* Erhöhtes Padding für das Bild, das nach unten reicht */
    position: relative; /* Für das absolute Positionieren des Overlays und der Navigation */
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Über den gesamten Header */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Verlauf von Schwarz zu transparent */
    z-index: 1;
}


header nav {
    position: absolute; /* Absolute Positionierung, um die Navigation zu platzieren */
    top: 20px; /* Abstand vom oberen Rand */
    right: 20px; /* Abstand vom rechten Rand */
    z-index: 2; /* Stellt sicher, dass die Navigation über dem Bild bleibt */
}


header nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* Rechtsbündig */
    padding: 0;
}

header nav ul li {
    margin: 0 15px;
}


header nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

header nav ul li a:hover {
    color: #228bd6;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

/* Allgemeine Sektionen */
section {
    max-width: 5000px;
    margin: 20px auto;
    padding: 40px 20px;  /* Kombinierte Padding für alle Sektionen */
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;  /* Zentriere Text in allen Sektionen */
}

/* Hero-Section */
.hero {
    background-color: #f4f4f4;
    padding: 60px 0;
}

.hero h1 {
    font-size: 41px;         /* Große Schrift */
    font-family: "Amatic SC", Sans-serif;  /* Schriftart Amatic SC */
    font-weight: bold;
    text-transform: uppercase;
    color: #228bd6;             /* Blaue Schriftfarbe */
    letter-spacing: 2.5px;
    text-align: center;      /* Zentrieren der Überschrift */
}

.hero p {
    font-size: 18px;         /* Größe des normalen Textes */
    font-family: "Roboto", Sans-serif;  /* Schriftart Amatic SC */
    font-weight:
    text-align: center;      /* Zentrieren des Textes */
}

.hero img {
    display: block;
    margin: 0 auto;          /* Bild zentrieren */
    max-width: 100%;         /* Bild passt sich der Seite an */
    height: auto;
}

/* About-Section mit Parallax-Effekt */
.about {
    min-height: 600px; /* Sicherstellen, dass der Abschnitt sichtbar ist */
    background-image: url('../images/about-background.jpg'); /* Beispielbild */
    background-attachment: fixed; /* Fixiertes Hintergrundbild */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
}

.about h1 {
    font-size: 41px;         /* Große Schrift */
    font-family: "Amatic SC", Sans-serif;  /* Schriftart Amatic SC */
    font-weight: bold;
    text-transform: uppercase;
    color: #228bd6;             /* Blaue Schriftfarbe */
    letter-spacing: 2.5px;
    text-align: center;      /* Zentrieren der Überschrift */
}

.about p {
    font-size: 18px;         /* Größe des normalen Textes */
    font-family: "Roboto", Sans-serif;  /* Schriftart Roboto */
    color: #f4f4f4;             /* weisse Schriftfarbe */
    text-align: center;      /* Zentrieren des Textes */
}

.about img {
    display: block;
    margin: 0 auto;          /* Bild zentrieren */
    max-width: 100%;         /* Bild passt sich der Seite an */
    height: auto;
}


/* Sponsoren-Section */
.sponsoren {
    background-color: #f4f4f4;
    padding: 60px 0;
}

.sponsoren h1 {
    font-size: 41px;         /* Große Schrift */
    font-family: "Amatic SC", Sans-serif;  /* Schriftart Amatic SC */
    font-weight: bold;
    text-transform: uppercase;
    color: #228bd6;             /* Blaue Schriftfarbe */
    letter-spacing: 2.5px;
    text-align: center;      /* Zentrieren der Überschrift */
}

.sponsoren p {
    font-size: 18px;         /* Größe des normalen Textes */
    font-family: "Roboto", Sans-serif;  /* Schriftart Amatic SC */
    text-align: center;      /* Zentrieren des Textes */
}

.sponsoren img {
    display: block;
    margin: 0 auto;          /* Bild zentrieren */
    max-width: 60%;         /* Bild passt sich der Seite an */
    height: auto;
}

/* Kontakt-Section mit Parallax-Effekt */
.kontakt {
    min-height: 600px; /* Sicherstellen, dass der Abschnitt sichtbar ist */
    background-image: url('../images/about-background.jpg'); /* Beispielbild */
    background-attachment: fixed; /* Fixiertes Hintergrundbild */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
}

.kontakt h2 {
    font-size: 24px;         /* Große Schrift */
    font-family: "Comic Sans MS", Sans-serif;
    font-weight: bold;
    letter-spacing: 2.5px;
    text-align: left;      /* Linksbündige Ausrichtung des Textes */
}

.kontakt p {
    font-size: 18px;         /* Größe des normalen Textes */
    font-family: "Roboto", Sans-serif;
    text-align: left;      /* Linksbündige Ausrichtung des Textes */
}

.kontakt-container {
    display: flex; /* Flexbox Layout für die Ausrichtung von Text, Adresse und Bild nebeneinander */
    justify-content: space-between; /* Abstand zwischen den Spalten */
    align-items: flex-start; /* Elemente oben ausrichten */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Optionaler Hintergrund für den Abschnitt */
}

.kontakt-text {
    flex: 2; /* Textblock nimmt 33% der Breite ein */
    color: white; /* Weiße Schrift für den Text */
    margin-right: 20px; /* Abstand zur mittleren Spalte */
    text-align: left; /* Linksbündiger Text */
}

.kontakt-adresse {
    flex: 1; /* Adressblock nimmt ebenfalls 33% der Breite ein */
    margin-right: 20px; /* Abstand zur rechten Spalte */
    color: white; /* Weiße Schrift für den Text */
    text-align: left; /* Linksbündiger Text */
}

.kontakt-image {
    flex: 1; /* Bildblock nimmt 33% der Breite ein */
    display: flex;
    justify-content: flex-end; /* Bild rechts ausrichten */
}

.kontakt-image img {
    max-width: 100%; /* Bild passt sich an */
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optionaler Schatteneffekt um das Bild */
}


/* Galerie-Section */
.gallery {
    display: flex;
    flex-direction: column; /* Ändert die Anordnung, damit Text und Bilder untereinander angezeigt werden */
    align-items: center; /* Zentriert den Inhalt horizontal */
    gap: 10px;
    background-image: url('../images/galerie_background.jpg'); /* Hintergrundbild hinzufügen */
    background-size: cover; /* Deckt den gesamten Bereich ab */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    padding: 60px 0; /* Optional: Padding hinzufügen, um Inhalt von den Rändern abzusetzen */
    color: black; /* Standardfarbe für Text */
}

/* Galerie Überschrift */
.gallery h1 {
    font-size: 48px; /* Größe der Überschrift */
    font-family: "Amatic SC", sans-serif; /* Schriftart der Überschrift */
    font-weight: bold;
    text-align: center; /* Überschrift zentrieren */
    margin-bottom: 25px; /* Abstand nach unten */
    color: black; /* Standardfarbe für Text */
}

/* Galerie Text */
.gallery p {
    font-size: 18px; /* Größe des Textes */
    font-family: "Roboto", sans-serif; /* Schriftart des Textes */
    text-align: center; /* Text zentrieren */
    margin-bottom: 40px; /* Abstand nach unten */
    color: black; /* Standardfarbe für Text */
}

/* Galerie Grid für die Vorschau der Galerien */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Fünf Spalten für die Galerien */
    gap: 80px; /* Abstand zwischen den Galerien */
    width: 100%;
    max-width: 1200px; /* Maximale Breite für die Galerieübersicht */
    margin: 0 auto; /* Zentriere das Grid */
}

/* Galerie Box für jede einzelne Galerie */
.gallery-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Galerie Vorschau-Bilder (Thumbnails) */
.gallery-box img {
    width: 200px; /* Feste Breite für die Thumbnails */
    height: 200px; /* Feste Höhe für die Thumbnails */
    object-fit: cover; /* Stellt sicher, dass das Bild das Seitenverhältnis beibehält */
    border-radius: 10px; /* Abgerundete Ecken für die Thumbnails */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten für die Thumbnails */
    cursor: pointer; /* Cursor bei Hover */
    transition: transform 0.3s ease-in-out; /* Animation für Hover-Effekt */
}

.gallery-box img:hover {
    transform: scale(1.05); /* Vergrößert das Bild bei Hover leicht */
}

.gallery-box h3 {
    margin-top: 10px;
    font-size: 20px;
    color: black;
}

/* Responsive Anpassungen für mittlere Bildschirme */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* Drei Spalten auf mittleren Bildschirmen */
    }
}

/* Responsive Anpassungen für kleine Bildschirme */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten auf kleinen Bildschirmen */
    }
}

/* Responsive Anpassungen für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf sehr kleinen Bildschirmen */
    }
}