.scene-container {
                position: relative;
                width: 100%;
                height: 600px;
                background: #0f172a;
                border-radius: 8px;
                border: 2px solid #334155;
                overflow: hidden;
                box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
            }

            .scene-container:fullscreen {
                height: 100vh;
                width: 100vw;
                border: none;
                border-radius: 0;
                background: #0f172a;
            }

            #garage3DCanvas {
                width: 100%;
                height: 100%;
                cursor: grab;
                display: block;
            }

            #garage3DCanvas:active {
                cursor: grabbing;
            }

            .spatial-input {
                position: absolute;
                background: white;
                border: 2px solid #38bdf8;
                border-radius: 4px;
                width: 50px;
                height: 22px;
                font-size: 11px;
                font-weight: bold;
                text-align: center;
                color: #0f172a;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
                z-index: 100;
                transition: transform 0.1s;
                padding: 0;
                box-sizing: border-box;
            }

            .spatial-input:focus {
                border-color: #f1c40f;
                outline: none;
                transform: scale(1.15);
                box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
            }

            .spatial-input.input-error {
                background-color: #fee2e2 !important;
                /* Leichtes Rot */
                border: 2px solid #ef4444 !important;
                /* Roter Rand */
                color: #b91c1c !important;
                animation: shake 0.4s ease-in-out;
                /* Kurzes Wackeln bei Fehler */
            }

            /* --- QUICK INPUT PANEL (LINKS) --- */
            .quick-inputs-panel {
                position: absolute;
                top: 15px;
                left: 15px;
                z-index: 110;
                background: rgba(15, 23, 42, 0.85);
                border: 1px solid #334155;
                border-radius: 6px;
                padding: 10px;
                display: flex;
                flex-direction: column;
                gap: 6px;
                backdrop-filter: blur(4px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            }

            .quick-input-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }

            .quick-input-row label {
                color: #38bdf8;
                font-weight: bold;
                font-size: 12px;
                margin: 0;
                width: 22px;
                cursor: help;
            }

            .quick-input-row input {
                width: 60px;
                height: 24px;
                border: 1px solid #475569;
                background: #1e293b;
                color: white;
                border-radius: 3px;
                font-size: 12px;
                font-weight: bold;
                text-align: center;
                outline: none;
                transition: all 0.2s;
            }

            .quick-input-row input:focus {
                border-color: #f1c40f;
                background: #0f172a;
            }

            /* --- SYNCHRONER FOKUS (GELBES LEUCHTEN) --- */
            .spatial-input.input-highlight {
                border-color: #f1c40f !important;
                transform: scale(1.15);
                box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
                z-index: 1000 !important;
                /* Zwingt das Feld in den Vordergrund */
            }

            .quick-input-row input.input-highlight {
                border-color: #f1c40f !important;
                background: #0f172a !important;
            }

            .quick-input-row input.input-error {
                background-color: #fee2e2 !important;
                border: 2px solid #ef4444 !important;
                color: #b91c1c !important;
                animation: shake 0.4s ease-in-out;
            }

            .quick-input-row input::-webkit-outer-spin-button,
            .quick-input-row input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            .spatial-label {
                position: absolute;
                /* --- NEU: Kontrast & Hintergrund --- */
                background-color: rgba(15, 23, 42, 0.85);
                /* Dunkler, leicht transparenter Hintergrund */
                color: #ffffff;
                /* Weißer Text für perfekten Kontrast */
                padding: 3px 6px;
                border-radius: 4px;
                border: 1px solid rgba(56, 189, 248, 0.4);
                /* Zarter hellblauer Rand passend zum Theme */
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);

                /* --- Bestehende Eigenschaften --- */
                font-size: 9px;
                font-weight: bold;
                text-transform: uppercase;
                pointer-events: none;
                z-index: 101;
                white-space: nowrap;

                /* --- Positionierung minimal korrigieren wegen des neuen Paddings --- */
                transform: translate(-3px, -5px);
            }

            /* Optional: Die Hauptbuchstaben (A, B, C...) nochmal farblich abheben */
            .spatial-label {
                color: #38bdf8;
                /* Hellblau für den Hauptbuchstaben */
            }

            .spatial-label .label-text {
                color: #ffffff;
                /* Weiß für die Beschreibung (z.B. ": BREITE") */
            }

            .spatial-input::-webkit-outer-spin-button,
            .spatial-input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            .warn-overlay {
                position: absolute;
                bottom: 20px;
                left: 20px;
                right: 290px;
                /* Lässt rechts ausreichend Platz für das Menü */
                z-index: 150;
                pointer-events: none;
                /* Verhindert, dass die Warnung Klicks blockiert */
            }

            .view-controls {
                position: absolute;
                top: 15px;
                right: 20px;
                z-index: 110;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 8px;
            }

            .view-toggle-btn {
                background: #38bdf8;
                color: #0f172a;
                border: none;
                padding: 6px 12px;
                border-radius: 4px;
                font-size: 11px;
                font-weight: bold;
                cursor: pointer;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                gap: 5px;
                width: 100%;
                justify-content: space-between;
            }

            .view-toggle-btn:hover {
                background: #0284c7;
                color: white;
            }

            .view-options {
                display: none;
                background: rgba(15, 23, 42, 0.95);
                border: 1px solid #334155;
                border-radius: 4px;
                padding: 8px;
                flex-direction: column;
                gap: 6px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
                position: absolute;
                top: 100%;
                right: 0;
                margin-top: 4px;
                width: 200px;
                z-index: 9999;
            }

            .view-options.active {
                display: flex;
            }

            .view-btn {
                background: #1e293b;
                color: white;
                border: 1px solid #38bdf8;
                padding: 6px 10px;
                font-size: 10px;
                font-weight: bold;
                cursor: pointer;
                border-radius: 3px;
                transition: all 0.2s;
                text-align: left;
                width: 100%;
            }

            .view-btn:hover {
                background: #38bdf8;
                color: #0f172a;
            }

            .settings-label {
                color: white;
                font-size: 10px;
                display: flex;
                align-items: center;
                gap: 6px;
                cursor: pointer;
            }

            .settings-label input {
                margin: 0;
                cursor: pointer;
            }

            .hide-label-text .label-text {
                display: none;
            }

            .hide-all-labels .spatial-label {
                display: none !important;
            }

            .hide-inputs .spatial-input {
                display: none !important;
            }

            .proposal-item {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-start !important;
                padding: 12px;
                border: 2px solid #cbd5e1;
                margin-bottom: 10px;
                border-radius: 6px;
                cursor: pointer;
                background: #f8fafc;
                transition: all 0.2s ease;
                color: #0f172a;
                text-align: left;
            }

            .proposal-item:hover {
                border-color: #38bdf8;
            }

            .proposal-item.active {
                background: #f0fdf4;
                border-color: #2ecc71;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .custom-radio {
                width: 22px;
                height: 22px;
                border: 2px solid #cbd5e1;
                border-radius: 50%;
                margin-right: 15px;
                flex-shrink: 0;
                position: relative;
                background: white;
                transition: all 0.2s ease;
            }

            .proposal-item.active .custom-radio {
                border-color: #2ecc71;
            }

            .proposal-item.active .custom-radio::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 12px;
                height: 12px;
                background: #2ecc71;
                border-radius: 50%;
            }

            .proposal-text-content {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                justify-content: center !important;
            }

            .proposal-title {
                color: #0369a1;
                font-weight: bold;
                margin-bottom: 4px;
                font-size: 15px;
            }

            .proposal-item.active .proposal-title {
                color: #15803d;
            }

            .proposal-size {
                color: #475569;
                font-size: 13px;
            }

            .raster-label {
                position: absolute;
                background: rgba(15, 23, 42, 0.9);
                color: #f1c40f;
                padding: 2px 4px;
                border-radius: 3px;
                font-size: 10px;
                font-weight: bold;
                pointer-events: none;
                white-space: nowrap;
                border: 1px solid rgba(241, 196, 15, 0.3);
                z-index: 105;
            }

            /* Styling für die schwebenden Proposal-Buttons in der 3D Ansicht */
            .scene-proposal-btn {
                background: #1e293b;
                color: #cbd5e1;
                border: 1px solid #334155;
                padding: 6px 10px;
                font-size: 11px;
                border-radius: 4px;
                cursor: pointer;
                text-align: left;
                transition: all 0.2s;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .scene-proposal-btn:hover {
                background: #334155;
                border-color: #475569;
            }

            .scene-proposal-btn.active {
                background: rgba(46, 204, 113, 0.1);
                border-color: #2ecc71;
                color: white;
            }

            .scene-proposal-btn.active .sp-title {
                color: #2ecc71;
            }

            .sp-title {
                font-weight: bold;
                color: #38bdf8;
                font-size: 12px;
            }

            .sp-size {
                font-size: 10px;
                color: #94a3b8;
            }

            /* Scrollbar für das Mini-Menü */
            #sceneProposalList::-webkit-scrollbar {
                width: 4px;
            }

            #sceneProposalList::-webkit-scrollbar-thumb {
                background-color: #475569;
                border-radius: 2px;
            }

            /* --- DIREKTSTEUERUNG KAMERA (KOMPASS-ANSICHT) --- */
            /* 1. Haupt-Container für den Kompass (120x120px) */
            .camera-compass {
                position: relative;
                width: 120px;
                height: 120px;
                background: rgba(15, 23, 42, 0.85);
                border: 1px solid #334155;
                border-radius: 8px;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(4px);
                margin: 4px auto;
                user-select: none;
                overflow: hidden;
            }

            /* 2. Der weiße Kreis in der Mitte ("ANSICHT") */
            /* MANUELL ANPASSEN: Wenn du den weißen Kreis verkleinern/vergrößern willst,
               passe 'width' und 'height' an, und setze 'top'/'left' auf calc(50% - halber Durchmesser) */
            .compass-center {
                position: absolute;
                top: calc(50% - 18px); /* Zentrierung: 50% - 18px (Hälfte von 36px) */
                left: calc(50% - 18px); /* Zentrierung: 50% - 18px (Hälfte von 36px) */
                width: 36px;  /* DURCHMESSER MITTLERER KREIS */
                height: 36px; /* DURCHMESSER MITTLERER KREIS */
                background: #ffffff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 7px;
                font-weight: 900;
                color: #0f172a;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
                z-index: 10;
                pointer-events: none;
            }

            /* 3. Die vier Bogen-Segmente um die Mitte herum (Highlight-Bögen) */
            /* MANUELL ANPASSEN: Wenn die Schrift zu nah am Bogen ist, kannst du den Durchmesser der Bögen verkleinern.
               Passe 'width' und 'height' an, und setze 'top'/'left' auf calc(50% - halbe Breite) */
            .compass-arc {
                position: absolute;
                top: calc(50% - 24px); /* Zentrierung: 50% - 24px (Hälfte von 48px) */
                left: calc(50% - 24px); /* Zentrierung: 50% - 24px (Hälfte von 48px) */
                width: 48px;  /* DURCHMESSER DER BÖGEN (Verkleinert von 54px für mehr Abstand zur Schrift) */
                height: 48px; /* DURCHMESSER DER BÖGEN */
                border-radius: 50%;
                border: 2px solid transparent;
                pointer-events: none;
                z-index: 5;
                transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .top-arc {
                border-top-color: rgba(255, 255, 255, 0.15);
            }
            .right-arc {
                border-right-color: rgba(255, 255, 255, 0.15);
            }
            .bottom-arc {
                border-bottom-color: rgba(255, 255, 255, 0.15);
            }
            .left-arc {
                border-left-color: rgba(255, 255, 255, 0.15);
            }

            /* 4. Die Richtungstasten-Behälter (Vorn, Rechts, Hinten, Links) */
            .compass-dir {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #cbd5e1;
                transition: all 0.2s ease;
                z-index: 12;
                width: 32px;  /* BREITE DER ENZELNEN TASTEN-CONTAINER (Kompakter gemacht) */
                height: 32px; /* HÖHE DER EINZELNEN TASTEN-CONTAINER (Kompakter gemacht) */
            }

            .compass-dir:hover {
                color: #38bdf8;
            }

            /* Die kleinen 3D-Vektor-Würfel-Symbole */
            /* MANUELL ANPASSEN: Wenn die Symbole zu groß/klein sind, ändere 'width' und 'height' */
            .compass-dir svg {
                width: 12px;  /* GRÖSSE DES SYMBOLS (Verkleinert für mehr Platz) */
                height: 12px; /* GRÖSSE DES SYMBOLS */
                margin-bottom: 1px;
                transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .compass-dir:hover svg {
                transform: scale(1.15) translateY(-1px);
            }

            /* Die Schriftzüge (Vorn, Rechts, Hinten, Links) */
            /* MANUELL ANPASSEN: Um die Schriftgröße anzupassen, ändere 'font-size' */
            .compass-dir span {
                font-size: 7.5px; /* SCHRIFTGRÖSSE */
                font-weight: bold;
                letter-spacing: 0.1px;
            }

            /* 5. Positionierung der Tasten im 120x120px-Kompass */
            /* MANUELL ANPASSEN: Ändere 'top', 'bottom', 'left', 'right', um die Tasten näher an den Rand
               (kleinerer Wert, z.B. 1px oder 2px) oder weiter nach innen zu schieben. */
            .compass-dir.top {
                top: 2px; /* Abstand zum oberen Rand */
                left: 50%;
                transform: translateX(-50%);
            }

            .compass-dir.bottom {
                bottom: 2px; /* Abstand zum unteren Rand */
                left: 50%;
                transform: translateX(-50%);
            }

            .compass-dir.left {
                left: 2px; /* Abstand zum linken Rand */
                top: 50%;
                transform: translateY(-50%);
            }

            .compass-dir.right {
                right: 2px; /* Abstand zum rechten Rand */
                top: 50%;
                transform: translateY(-50%);
            }

            /* 6. Interaktive Kopplung (Hover-Effekt auf die Bögen) */
            .compass-dir.top:hover ~ .top-arc {
                border-top-color: #38bdf8;
                border-width: 3px;
                transform: scale(1.05);
            }

            .compass-dir.right:hover ~ .right-arc {
                border-right-color: #38bdf8;
                border-width: 3px;
                transform: scale(1.05);
            }

            .compass-dir.bottom:hover ~ .bottom-arc {
                border-bottom-color: #38bdf8;
                border-width: 3px;
                transform: scale(1.05);
            }

            .compass-dir.left:hover ~ .left-arc {
                border-left-color: #38bdf8;
                border-width: 3px;
                transform: scale(1.05);
            }