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


#main-container {
    /* Wichtig: Nimmt die volle Breite ein, damit die Zentrierung von body funktioniert */
    width: 100%; 
    max-width: 1000px; /* Kann optional die Breite des Gesamtinhalts begrenzen */
    text-align: center; /* Zentriert block-fremde Elemente wie Button oder Text */
}

/* ⚠️ WICHTIG: Die Margin-Regel für die große Box */
.titel-box {
    /* ... andere Styles ... */
    
    /* Das muss bleiben, um die Box selbst horizontal im main-container zu zentrieren */
    margin: 40px auto; 
    
    /* ... andere Styles ... */
}
.about-me-box {
    /* Erhöht die maximale Breite für Text auf Unterseiten */
    max-width: 800px; /* Zum Beispiel von 600px auf 800px erhöht */
    
    /* Stellt sicher, dass der Text linksbündig ist, nicht zentriert wie der h1-Titel auf der Startseite */
    text-align: center; 
    
    /* Vergrößert den Innenabstand für ein besseres Aussehen */
    padding: 30px; 
}



.text-separator {
    /* Fügt oben und unten einen kleinen Abstand zur Überschrift/Fußzeile hinzu */
    margin: 20px 0; 
    
    /* Fügt einen sehr leichten grauen Rahmen hinzu, um den Text zu separieren */
    border: 1px solid rgba(0, 0, 0, 0.1); 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, sans-serif;
    text-align: center;
    
    /* Fügt eine sehr leicht abgetönte Hintergrundfarbe hinzu, um den Kasten optisch zu füllen */
    background-color: rgba(255, 255, 255, 0.5); /* Ein leicht weißer Hintergrund */
    
    /* Innenabstand für den Text, damit er nicht direkt am Rahmen klebt */
    padding: 15px; 
    
    border-radius: 5px; /* Leichte Abrundung der Ecken */
}

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