body {
    font-family: sans-serif;
    margin: 0;
    padding: 0; /* Kein Padding mehr nötig bei fixed Menu */
    overflow: hidden;
    background-color: #f0f0f0;
    /* display: flex; flex-direction: column; align-items: center; wird nicht mehr zentral benötigt */
}

/* Seitenmenü links positionieren */
#side-menu {
    position: fixed; /* Bleibt beim Scrollen an der Position */
    left: 15px;      /* Abstand vom linken Rand */
    top: 15px;       /* Abstand vom oberen Rand */
    width: 160px;    /* Breite des Menüs */
    background-color: #e8e8e8;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15);
    z-index: 10;     /* Über anderen Elementen */
    display: flex;
    flex-direction: column; /* Elemente untereinander */
    gap: 10px;       /* Abstand zwischen Elementen im Menü */
}

#side-menu h2 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.2em;
    color: #333;
}

#side-menu button {
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    border: 1px solid #bbb;
    border-radius: 5px;
    background-color: #fff;
    transition: background-color 0.2s ease; /* Sanfter Hover-Effekt */
}

#side-menu button:hover {
    background-color: #f0f0f0;
}

#side-menu button:active {
    background-color: #ddd;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
}

/* Hauptinhalt zentrieren (mit Platz für Menü) */
#main-content {
    /* Wir verwenden margin: auto für die Zentrierung statt Flexbox am body */
    max-width: 85%; /* Oder eine feste Breite */
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px; /* Etwas Abstand oben */
    /* Optional: Wenn Menü NICHT fixed wäre: margin-left: 210px; */
}


h1, #info {
    text-align: center;
    margin-bottom: 5px;
}
#info {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

#cube-container {
    width: 80vmin;
    max-width: 700px; /* Maximale Größe, um nicht riesig zu werden */
    height: 65vmin;
    max-height: 550px;
    margin: 0 auto; /* Zentriert den Container selbst */
    background-color: #ddd;
    position: relative;
    border: 1px solid #aaa;
    cursor: grab;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#cube-container canvas {
    display: block;
}

#cube-container:active {
     cursor: grabbing;
}


/* ----- Navigation Bar Styles ----- */
nav.main-nav {
    background-color: #333; /* Dunkler Hintergrund für die Nav-Leiste */
    padding: 0 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: sticky; /* Bleibt oben beim Scrollen, wenn Platz da ist */
    top: 0;           /* Positioniert es ganz oben */
    z-index: 20;      /* Über dem Seitenmenü */
    width: 100%;      /* Volle Breite */
    box-sizing: border-box; /* Padding wird in Breite eingerechnet */
}

nav.main-nav ul {
    list-style: none; /* Keine Aufzählungszeichen */
    padding: 0;
    margin: 0;
    display: flex; /* Elemente nebeneinander */
    justify-content: center; /* Zentriert die Links horizontal */
}

nav.main-nav li {
    margin: 0 10px; /* Abstand zwischen den Links */
}

nav.main-nav a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

nav.main-nav a:hover,
nav.main-nav a:focus {
    background-color: #555; /* Hintergrund beim Hover */
}

/* Styling für den Hauptinhalt-Bereich */
/* Sorgt dafür, dass der Inhalt nicht unter die fixe Nav-Leiste rutscht */
div.page-content {
    padding: 20px;
    max-width: 1200px; /* Maximale Breite für den Inhalt */
    margin: 20px auto; /* Zentriert den Inhaltsblock und schafft Abstand oben/unten*/
    /* Kein margin-top mehr nötig, da padding da ist */
}

/* Anpassung für das Seitenmenü auf der Rubik-Seite */
/* Stelle sicher, dass es nicht mit der oberen Navleiste kollidiert */
#side-menu {
    top: 85px; /* Mehr Abstand von oben (Höhe der Navleiste + etwas Puffer) */
    left: 15px;
    /* Restliche Styles für #side-menu bleiben wie zuvor */
    position: fixed;
    width: 160px;
    background-color: #e8e8e8;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15);
    z-index: 10; /* Unter der Hauptnavigation (z-index: 20) */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Bestehende Styles für #side-menu h2 und button bleiben wie sie waren */
#side-menu h2 {
    margin-top: 0; margin-bottom: 10px; text-align: center; font-size: 1.2em; color: #333;
}
#side-menu button {
    padding: 10px 15px; font-size: 1em; cursor: pointer; border: 1px solid #bbb; border-radius: 5px; background-color: #fff; transition: background-color 0.2s ease;
}
#side-menu button:hover { background-color: #f0f0f0; }
#side-menu button:active { background-color: #ddd; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1); }


/* --- Bestehende Styles darunter --- */
/* Stelle sicher, dass die restlichen Styles für body, #main-content, h1, #info, #cube-container etc. */
/* noch vorhanden sind und ggf. angepasst werden, falls nötig.                */
/* Wichtig: Entferne ggf. alte body { display: flex; ... } Regeln, wenn du   */
/* jetzt margin: auto für .page-content oder #main-content nutzt.            */

/* Beispiel für body, falls vorher flexbox verwendet wurde: */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Horizontales Scrollen verhindern */
    background-color: #f0f0f0;
}

/* Beispiel für #main-content (falls vorher nicht vorhanden) */
#main-content {
    /* Kann leer sein oder spezifische Styles haben */
}

/* Bestehende Styles für h1, #info, #cube-container etc. hinzufügen/beibehalten */
h1, #info { text-align: center; margin-bottom: 5px; }
h1 { margin-top: 0; /* Kein extra Abstand oben, da .page-content padding hat */ }
#info { font-size: 0.9em; color: #555; margin-bottom: 15px; }
#cube-container { width: 80vmin; max-width: 700px; height: 65vmin; max-height: 550px; margin: 0 auto; background-color: #ddd; position: relative; border: 1px solid #aaa; cursor: grab; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
#cube-container canvas { display: block; }
#cube-container:active { cursor: grabbing; }