/* Basisanpassungen für das Layout */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Standard Hintergrundfarbe */
    padding-top: 80px; /* Platz für den fixierten Header */
}

body.home {
    background-color: black !important; /* Hintergrundfarbe auf Schwarz ändern */
}

#header-img {
    max-height: 50px;
}

.nav-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Vergrößerung und Schatten */
}

.nav-hover-effect:hover {
    transform: scale(1.15); /* Bild leicht vergrößern beim Hover */
}

#nav-bar a {
    padding: 15px;
    text-decoration: none;
    color: #000000;
}

#nav-bar a:hover {
    background-color: #f0f0f0;
}

/* Bild des Logos */
#picture-img {
    align-items: center;
    justify-content: center;
    border: 5px solid #333;
    width: 300px; /* oder wie groß das Bild sein soll */
    height: auto; /* damit die Höhe automatisch angepasst wird, um das Seitenverhältnis zu wahren */
}

/* Flexbox für Titel und Bild */
.title-image-container {
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Ausrichtung der Elemente in der Mitte */
    justify-content: center; /* Horizontale Zentrierung der Elemente */
}

#sections {
    margin-top: 80px; /* Oder einen anderen Wert, um die Boxen weiter nach unten zu verschieben */
}

/* Spezifischer Hover-Effekt nur für Bilder mit der Klasse "hover-effect" */
.rideouts-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Vergrößerung und Schatten */
    width: 400px;
}

.rideouts-hover-effect:hover {
    transform: scale(1.1); /* Bild leicht vergrößern beim Hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 1); /* Schatten beim Hover hinzufügen */
}

#section2 {
    margin-top: 50px;
    justify-content: center;
}

/* Abschnitte */
section h2 {
    font-weight: bold;
}

section a {
    text-decoration: none;
    color: #007bff;
}

section a:hover {
    color: #0056b3;
}

/* Media Queries für mobile Geräte */
@media (max-width: 768px) {
    #header-img {
        max-width: 40px;
    }

    #picture-img {
        max-width: 250px;
    }

    h1 {
        font-size: 2em; /* Kleinere Schriftgröße für mobile Geräte */
        margin: 0; /* Abstand entfernen */
    }

    .d-flex {
        flex-direction: column; /* Stelle sicher, dass das Bild und der Titel untereinander sind */
        align-items: center; /* Zentriere die Inhalte */
    }
}

/* Schriftgrößen-Anpassungen für h1 */
h1 {
    color: #f0f0f0; /* Schriftfarbe für den Titel */
    font-size: 5.5em; /* Standard Schriftgröße */
    text-align: center; /* Zentriere den Titel */
    justify-content: center;
    margin: 0 20px; /* Abstand anpassen */
    font-weight: bold; /* Macht den Text fett */
    margin-top: 50px;
}

/* Media Queries für verschiedene Bildschirmgrößen */
@media (max-width: 1200px) {
    h1 {
        font-size: 4em; /* Schriftgröße für große Tablets und kleine Desktops */
    }
}

@media (max-width: 992px) {
    h1 {
        font-size: 3em; /* Schriftgröße für Tablets */
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 2em; /* Schriftgröße für kleinere Smartphones */
    }
}

.img-max-height {
    max-width: 500px;
    height: auto; /* Damit die Höhe automatisch angepasst wird, um das Seitenverhältnis zu wahren */
}

.custom-margin {
    margin-top: 20px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
}

.list-group-item {
    text-align: center; /* Zentriert den Text und die Bilder */
    margin-bottom: 0; /* Entfernt den unteren Abstand des Listenelements */
    border: none; /* Entfernt eventuelle Ränder um das Listenelement */
    padding-bottom: 0; /* Optional: Entfernt zusätzliche Polsterung */
}

.list-group {
    margin-bottom: 0; /* Entfernt den unteren Abstand der gesamten Liste */
    padding-left: 0; /* Entfernt eventuelle Einrückungen der Liste */
}

.custom-margin img {
    margin-bottom: 0; /* Falls die Bilder selbst Abstände haben */
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: scale(1.05);
}

.btn {
    transition: all 0.2s ease; /* Sanfte Übergänge für alle Änderungen */
    background-color: black; /* Hier die gewünschte Hintergrundfarbe festlegen */
    color: #ffffff; /* Textfarbe */
    border: none; /* Rand entfernen */
}

.btn:hover {
    background-color: black; /* Hier die Hintergrundfarbe beim Hover ändern */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); /* Schatten hinzufügen */
    transform: scale(1.05); /* Button vergrößern */
}

.hidden {
    display: none; /* Oder visibility: hidden; um den Platz zu behalten */
}

.navbar-nav {
    display: flex;
    align-items: center; /* Zentriert die Items vertikal */
}

/* Grid für die Bildergalerie */
#gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Anzahl der Spalten anpassen */
    gap: 10px; /* Abstand zwischen den Bildern */
    margin-top: 20px; /* Abstand nach oben */
}

figure {
    margin: 0; /* Entferne standardmäßige Margen */
}

img {
    width: 100%; /* Bilder nehmen die gesamte Breite der Spalte ein */
    height: auto; /* Bildhöhe automatisch anpassen */
    border-radius: 5px; /* Runde Ecken der Bilder */
}

figcaption {
    text-align: center; /* Zentriert die Bildunterschrift */
    margin-top: 5px; /* Abstand nach oben */
}

.custom-image-size {
    width: 300px; /* Festgelegte Breite */
    height: auto; /* Höhe passt sich automatisch an */
    max-width: 100%; /* Stellt sicher, dass das Bild nicht größer als sein Container wird */
}

.login-container {
    display: flex;
    justify-content: center; /* Horizontales Zentrieren */
    align-items: center; /* Vertikales Zentrieren */
    height: 100vh; /* Vollständige Höhe der Ansicht */
}

.login-form {
    width: 100%; /* Vollständige Breite */
    max-width: 400px; /* Maximale Breite des Formulars */
    padding: 20px; /* Innenabstand für das Formular */
    border: 1px solid #ddd; /* Rahmen um das Formular */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten für das Formular */
    background-color: #fff; /* Hintergrundfarbe */
}