/* ============================================
   NAVIGATION LAYER – STYLES
   3D-Buchstaben via Three.js WebGL
   ============================================ */

/* Nav Viewport - liegt über dem Content */
#nav-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Klicks/Scroll gehen durch zum Content */
    z-index: 100;
}

/* Three.js WebGL Canvas – fullscreen, transparent */
#nav-viewport canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Events gehen durch zum Content */
}

/* Status-Anzeige */
.status-display {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(233, 233, 233, 0.7);
    color: rgb(123, 123, 123);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 101;
    pointer-events: none;
}