body {
    margin: 0; /* Entfernt den Standardrand des Browsers */
    font-family: Arial, sans-serif;
    color: #333; /* Dunkelgraue Standard-Textfarbe */
    text-align: center; 
    
    /* Stellt sicher, dass der Body den gesamten Viewport einnimmt */
    min-height: 100vh;
    
    /* HINTERGRUNDBILD-EIGENSCHAFTEN */
    background-image: url("img/knightBG.jpg"); 
    background-repeat: no-repeat;
    background-position: center center; /* Zentriert das Bild */
    background-size: cover; /* Skaliert das Bild, um den Bereich abzudecken */
    background-attachment: fixed; /* Hält das Bild beim Scrollen fest */
}
.bilder-grid {
    display: grid;
    /* 3 Spalten mit gleicher Breite (passt gut für eine Galerie-Übersicht) */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Abstand zwischen den Bildern */
    
    max-width: 1200px; /* Das Grid soll etwas breiter sein */
    margin: 40px auto; /* Zentrieren */
    padding: 20px;
}

/* Styling für die einzelnen Bilder-Links */
.galerie-item {
    display: block;
    overflow: hidden; /* Wichtig, um das Bild innerhalb des Rahmens zu halten */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

/* Styling für das Bild selbst */
.galerie-item img {
    width: 100%; /* Das Bild füllt 100% der Breite des Containers aus */
    height: 250px; /* Feste Höhe für einheitliche Kacheln */
    object-fit: cover; /* Skaliert das Bild so, dass es die Fläche füllt (wichtig!) */
    display: block;
}

/* Hover-Effekt für die Bilder */
.galerie-item:hover {
    transform: scale(1.05); /* Bild wird leicht vergrößert */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

#backToGridBtn {
    /* 1. Feste Positionierung */
    position: fixed; /* 💡 Hält den Button relativ zum Browserfenster fest */
    bottom: 20px;    /* 20 Pixel Abstand vom unteren Rand des Fensters */
    
    /* 2. Zentrierung */
    left: 50%; /* Startet den Button bei 50% der Breite */
    transform: translateX(-50%); /* Zieht den Button um die Hälfte seiner eigenen Breite nach links zurück (echte Zentrierung) */
    
    /* 3. Styling */
    padding: 12px 25px;
    background-color: #ffc107; /* Helle Farbe für gute Sichtbarkeit */
    color: #333;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    z-index: 1000; /* Stellt sicher, dass der Button über allen anderen Inhalten liegt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
}

#backToGridBtn:hover {
    background-color: #e0a800;
}