diff --git a/package-lock.json b/package-lock.json
index d2eafdb..dc9cd61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1454,9 +1454,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.20.7",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.7.tgz",
-			"integrity": "sha512-dVbLMubpJJSLI4OYB+yWYNHGAhgc2bVevWuBjDj8jFUXIJOAnLwYP3vsmtcgoxNGUXoq0rHS5f7MFCsryb6nzg==",
+			"version": "2.20.8",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.8.tgz",
+			"integrity": "sha512-ep9qTxL7WALhfm0kFecL3VHeuNew8IccbYGqv5TqL/KSqWRKzEgDG8blNlIu1CkLTTua/kHjI+f5T8eCmWIxKw==",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^0.6.0",
@@ -3242,10 +3242,9 @@
 			}
 		},
 		"node_modules/fdir": {
-			"version": "6.4.3",
-			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-			"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
-			"license": "MIT",
+			"version": "6.4.4",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+			"integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
 			"peerDependencies": {
 				"picomatch": "^3 || ^4"
 			},
@@ -5959,6 +5958,21 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.13",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+			"integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+			"dependencies": {
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
 		"node_modules/tinypool": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -6227,14 +6241,16 @@
 			"license": "MIT"
 		},
 		"node_modules/vite": {
-			"version": "6.2.6",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
-			"integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
-			"license": "MIT",
+			"version": "6.3.5",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+			"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
 			"dependencies": {
 				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
 				"postcss": "^8.5.3",
-				"rollup": "^4.30.1"
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index a80e599..56d07ad 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -3,22 +3,53 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	.vertical-slider {
+    writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
+    transform: rotate(270deg); /* Slider um 270° drehen */
+    height: 200px;
+  }
+
+
 </style>
 
 <script>
 	import { preloadCode } from '$app/navigation';
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import { onMount } from 'svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import autoprefixer from 'autoprefixer';
+	
 	export let data;
 
 	onMount(() => {
 		import('@google/model-viewer');
+		console.log(modelViewer.getAttribute('camera-orbit'), modelViewer.getAttribute('camera-target'), modelViewer.getAttribute('rotation'))
 	});
 
 	let progress = 0;
 	let hideProgressScreen = false;
+
+	let cameraOrbit = '0deg 0deg 0m';
+	let cameraTarget ="0m 0m 0m";
+	let fieldOfView = '0deg';
+
+	let cameraAzimuth = 0;
+	let cameraPolar = 0;
+	let cameraZoom = 0;
+	let xRotation=0;
+	let yRotation=0;
+	let zRotation=0;
+
+	/**
+	 * @type {any}
+	 */
+	let modelViewer;
+
+
 	$: style = `width: ${progress}%`;
 
+	// @ts-ignore
 	function onProgress({ detail }) {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
@@ -27,20 +58,169 @@
 			}, 250);
 		} else hideProgressScreen = false;
 	}
+
+
+	function onResetView() {
+		//  cameraOrbit = '0deg 0deg 50m';
+		//  cameraTarget ="0m 0m 0m"
+		console.log("show cameraOrbit:", modelViewer.getAttribute('camera-orbit'), modelViewer.cameraOrbit, modelViewer.getAttribute('rotation'))
+		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('orientation'))
+
+		//  modelViewer.cameraOrbit = cameraOrbit;
+		//  modelViewer.cameraTarget = cameraTarget;
+
+	}
+
+	/**
+	 * @param {string} newOrbit
+	 */
+	function updateCameraOrbit(newOrbit) {
+		 
+	   cameraTarget ="0m 0m 0m"
+		console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
+		  modelViewer.cameraOrbit = newOrbit;
+		  modelViewer.cameraTarget = cameraTarget;
+
+	}
+
+	function slideCameraOrbit(){
+		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`;
+	}
+
+	function slideRotation(){
+		modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
+	}
+
+	const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
+    event.preventDefault(); // Blockiert das Mausrad-Ereignis
+  };
+
 </script>
 
+<!-- 		<Button
+			on:click={toggleShowOptions}
+			{disabled}
+			type="button"
+			variant="white"
+			fullWidth
+			align="left"
+			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+		> -->
+
 <div class="h-full w-full bg-neutral-100 p-4">
-	<model-viewer
-		src={data.url}
-		camera-controls
+	<div class="bg-redx-500 p-4 flex">
+	<div class="flex flex-col">
+			<!--3 Buttons-->
+			<div>
+				<Button
+				on:click={()=>{updateCameraOrbit('0deg 180deg 0m')}}
+				type="button"
+				variant="white"
+				
+				align="left"
+				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+				>
+				Draufsicht
+				</Button>
+				<Button
+				on:click={()=>{onResetView()}}
+				type="button"
+				variant="white"
+				
+				align="left"
+				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+				>
+				Camera-Orbit Attribute
+				</Button>
+	
+				<Button
+				
+				on:click={()=>{updateCameraOrbit('0deg 90deg 0m')}}
+	
+				type="button"
+				variant="white"
+				
+				align="left"
+				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+				>
+				Frontansicht
+				</Button>
+			
+			</div>
+			
+			<!--Horizontal-->
+			<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
+						<label>Horizontal drehen (Azimut):</label>
+						<input 
+						type="range" 
+						min="0" max="360" 
+						bind:value={cameraAzimuth} 
+						 />
+						 <!-- on:input={slideCameraOrbit} -->
+			</div>
+					<!--Vertikal-->
+		<div class="">
+			<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+			<input id="polarSlider"  type="range" min=0 max=90 bind:value={cameraPolar}  /> 
+			<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+			<!--Zoom/Distanz-->
+			<div>
+				<label for="cZoom">Zoomen</label>
+				<input id="cZoom" type="range"
+				min="0"
+				max="10"
+			  step="0.1"
+				 bind:value={cameraZoom} 
+				 on:input={slideCameraOrbit}/>
+			</div>
+	</div>
+		<!--Rotationen-->
+		<div class="flex  mt-2 ml-2">
+			
+		<div class="">
+			<label class="" for="polarSlider">Rotation X:</label>
+			<input id="polarSlider"  type="range" min=0 max=360 bind:value={xRotation}  /> 
+			<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+<div class="">
+	<label class="" for="polarSlider">Rotation Y:</label>
+	<input id="polarSlider"  type="range" min=0 max=360 bind:value={yRotation}  /> 
+	<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+<div class="">
+	<label class="" for="polarSlider">Rotation Z:</label>
+	<input id="polarSlider"  type="range" min=0 max=360 bind:value={zRotation}  /> 
+	<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+		</div>
+		
+			</div>
+			<!-- field-of-view="auto" -->
+		<!--
+				camera-controls
+		model-rotation="0rad 0rad 0rad"
+		
+		camera-target="0m 0m 10m"
+		
 		field-of-view="auto"
 		max-field-of-view="10deg"
-		min-field-of-view="0.1deg"
+		min-field-of-view="0.1deg"-->
+	<model-viewer
+		src={data.url}
+		bind:this={modelViewer}
+		shadow-intensity="50"
+	
+	orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
+		camera-target="0m 0m 0m"
+		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`}
 		on:progress={onProgress}
 	>
+		<!--Loading-->
 		<div
 			slot="progress-bar"
-			class="flex items-center justify-center h-full w-full transition-all delay-250"
+			class="flex items-center justify-center h-5/6 w-full transition-all delay-250"
 			class:opacity-0={hideProgressScreen}
 			class:hidden={hideProgressScreen}
 		>