html, body {
            padding-top: 25px; /* Adds padding to make room for the fixed navbar */
            background-color: #121212; /* Dark mode background */
            color: #e0e0e0; /* Light text for dark mode */
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Flex container for the body content */
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This ensures the footer goes to the bottom when content is short */
}


        .navbar-dark .navbar-nav .nav-link {
            color: white; /* Red color for nav links */
        }

        .navbar-dark .navbar-brand {
            color: #f44336;
        }

        /* Hero Section */
        .hero-section {
            background-image: url('img/Kneipenkrimi_20er.webp'); /* Background image */
            background-size: cover;
            background-position: center;
            padding: 100px 0;
            text-align: center;
            color: white;
        }
       .hero-section .container {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    padding: 80px 20px; /* Padding around the content */
    border-radius: 10px; /* Optional: rounded corners */
    text-align: center; /* Center the text */
    color: white; /* White text color */
}

.hero-section h1, .hero-section p {
    font-weight: bold; /* Makes the text bold */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); /* Adds shadow to text */
}

.btn {
    background-color: #e81515;
    border-color: #e81515;
     margin-right: 10px; /* Abstand nach rechts */
    margin-bottom: 10px; /* Abstand nach unten */
}

.btn:hover {
    background-color: #d32f2f;
    border-color: #d32f2f;
     margin-right: 10px; /* Abstand nach rechts */
        margin-bottom: 10px; /* Abstand nach unten */
}

/* Style the footer */
.footer {
    background-color: #343a40; /* Dark gray background */
    color: white; /* White text */
    padding: 20px 0; /* Padding for top and bottom spacing */
    text-align: center; /* Center the text */
    width: 100%; /* Ensure it spans across the whole width */
}

/* Optional: Change the link color to white */
.footer a {
    color: white;
    text-decoration: none;
}

/* Optional: Add a hover effect to links */
.footer a:hover {
    text-decoration: underline;
}

        .btn-danger {
            background-color: #e81515;
            border-color: #e81515;
        }

        .btn-danger:hover {
            background-color: #e81515;
            border-color: #e81515;
        }

        /* Swiper Styles */
        .swiper {
            width: 100%;
            height: 500px;
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2c2c2c;
            border-radius: 10px;
            height: 400px;
        }

        .swiper-slide img {
            width: 100%;
            border-radius: 10px;
        }
                /* Standardgröße für das Logo */
        .navbar-brand img {
            width: auto;
            height: 50px; /* Standardhöhe für das Logo */
        }

        /* Logo für kleine Bildschirme (Smartphones) anpassen */
        @media (max-width: 768px) {
            .navbar-brand img {
                height: 40px; /* Kleinere Höhe für Smartphones */
            }
.btn {
            margin-right: 15px;
            margin-bottom: 15px; /* Etwas mehr Abstand */
/*            display: block;*/
/*            width: 100%; /* Buttons auf mobilen Geräten untereinander anordnen */*/
            text-align: center;
            }
        }

        /* Optional: Logo bei sehr kleinen Bildschirmen noch kleiner machen */
        @media (max-width: 480px) {
            .navbar-brand img {
                height: 30px; /* Noch kleinere Höhe für sehr kleine Geräte */
            }     
.btn {
            margin-right: 15px;
            margin-bottom: 15px; /* Etwas mehr Abstand */
/*            display: block;*/
/*            width: 100%; /* Buttons auf mobilen Geräten untereinander anordnen */*/
            text-align: center;
            }
        }
   
    
/* Stellen Sie sicher, dass das Bild immer eine Höhe von 100px hat */
.card-img-left {
    width: 100px; /* Breite des Bildes */
    height: 100px; /* Höhe des Bildes */
    object-fit: cover; /* Das Bild wird skaliert, um den Raum auszufüllen, ohne das Seitenverhältnis zu verzerren */
    margin-right: 15px; /* Abstand zum Text */
}

/* Flexbox für die Karteninhalte */
.d-flex {
    display: flex;
    align-items: flex-start; /* Ausrichtung der Elemente auf der linken Seite */
}

/* Jede Karte wird in einer eigenen Reihe angezeigt */
.event-card {
    margin-bottom: 15px; /* Abstand zwischen den Karten */
}

/* Optional: Padding für den Card-Body anpassen */
.card-body {
    padding: 15px;
}

/* Falls Sie möchten, dass die Karten auf allen Bildschirmgrößen untereinander angezeigt werden */
#event-cards .row {
    display: block; /* Setzt die Karten in einer einzigen vertikalen Reihe */
}

    .responsive-img {
        width: 100%; /* Nimmt die gesamte verfügbare Breite ein */
        max-width: 800px; /* Maximale Breite für größere Bildschirme (Desktop) */
        height: auto; /* Beibehaltung der Proportionen */
    }

    /* Optional: Für noch bessere Kontrolle auf kleineren Geräten */
    @media (max-width: 576px) {
        .responsive-img {
            max-width: 100%; /* Auf kleinen Geräten keine Begrenzung der Breite */
        }
    }