/* ==================================== */
/* 1. GRUNDLEGENDE EINSTELLUNGEN (BODY) */
/* ==================================== */

body {
    margin: 0; /* Entfernt den Standardrand des Browsers */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, 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 */
}

/* ==================================== */
/* 2. TITEL-BOX (h1) */
/* ==================================== */

.titel-box {
    /* Box-Stil */
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparenter weißer Hintergrund */
    color: #333; 
    
    /* Abstände und Größe */
    padding: 20px; /* Innenabstand */
    margin: 40px auto; /* Außenabstand und Zentrierung */
    max-width: 600px; /* Maximale Breite */
    
    /* Optische Effekte */
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/* ==================================== */
/* 3. BUTTON-STYLING */
/* ==================================== */

#meinButton {
    padding: 30px 60px;
    background-image: url("img/nmzs.jpg");
    background-position: cover;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

#meinButton:hover {
    background-color: #ff0000;
}

/* ==================================== */
/* 4. GRID-LAYOUT (Das Menü) */
/* ==================================== */

/* ⛔ KRITISCHE REGEL: Diese blendet das Grid anfangs aus */
#haupt-grid.verborgen { 
    display: none;
}

#haupt-grid {
    display: grid; /* Das Container-Element wird zum Grid */
    grid-template-columns: repeat(2, 1fr); /* 2x2 Raster */
    gap: 20px; /* Abstand zwischen den Fenstern */
    
    max-width: 900px; /* Begrenzt die Gesamtbreite */
    margin: 40px auto; /* Zentriert das Grid horizontal */
    padding: 20px;
}

/* Styling der einzelnen Grid-Fenster (bleibt wie es war) */
.grid-fenster {
    display: block; 
    
    /* 🌑 Schwarz & Rechteckig */
    background-color: #000000; 
    border: 1px solid #555555; 
    color: white; 
    border-radius: 0; 
    
    padding: 25px; 
    text-decoration: none;
    
    /* Einheitliche rechteckige Höhe */
    min-height: 100px;
    
    /* Hover-Effekte */
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
}

.fenster-1 {
    background-image: url("img/knight1.jpg");
    background-size: cover;
    background-position: center -50px;
}

/* Hintergrund für Fenster 2: Galerie */
.fenster-2 {
    background-image: url("img/knight2.jpg");
    background-size: cover;
    background-position: center center;
}

/* Hintergrund für Fenster 3: Über uns */
.fenster-3 {
    background-image: url("img/knight3.jpg");
    background-size: cover;
    background-position: center -150px;
}

/* Hintergrund für Fenster 4: Kontakt */
.fenster-4 {
    background-image: url("img/knight4.jpg");
    background-size: cover;
    background-position: center -100px;
}

/* Stile für Überschriften und Text in den schwarzen Fenstern */
.grid-fenster h2 {
    color: white;
    margin-top: 0;
    font-size: 1.2em;
}

.grid-fenster p {
    color: #cccccc;
}

/* Hover-Effekt */
.grid-fenster:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
    border-color: #ffffff;
}

/* Galerie ab hier */

.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;
}