Initial commit — Superfice.de website

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.env
+.DS_Store
+*.log
+api/config.php
+.claude/
+memory/
+Thumbs.db

api/.htaccess

@@ -0,0 +1,22 @@
+# Block direct access to config file
+<Files "config.php">
+    Order Allow,Deny
+    Deny from all
+</Files>
+
+# CORS headers for API endpoints
+<IfModule mod_headers.c>
+    Header always set Access-Control-Allow-Origin "https://superfice.de"
+    Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
+    Header always set Access-Control-Allow-Headers "Content-Type"
+    Header always set Access-Control-Max-Age "86400"
+</IfModule>
+
+# Handle OPTIONS preflight
+RewriteEngine On
+RewriteCond %{REQUEST_METHOD} OPTIONS
+RewriteRule .* - [R=204,L]
+
+# PHP settings
+php_flag display_errors Off
+php_flag log_errors On

api/contact.php

@@ -0,0 +1,133 @@
+<?php
+/**
+ * Superfice – Contact Form API
+ *
+ * POST /api/contact.php
+ * Content-Type: application/json
+ *
+ * Body:
+ * {
+ *   "name":        string (required),
+ *   "contact":     string (required, email or phone),
+ *   "serviceType": string (optional),
+ *   "message":     string (optional)
+ * }
+ *
+ * Returns JSON: { "success": true }
+ * or            { "success": false, "error": "<message>" }
+ */
+
+require_once __DIR__ . '/config.php';
+require_once __DIR__ . '/helpers.php';
+
+header('Content-Type: application/json; charset=utf-8');
+cors_headers();
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(204);
+    exit;
+}
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    json_error('Method not allowed', 405);
+}
+
+// -------------------------------------------------------
+// Parse body
+// -------------------------------------------------------
+$raw = file_get_contents('php://input');
+$body = json_decode($raw, true);
+
+if (!is_array($body)) {
+    json_error('Ungültige Anfrage.');
+}
+
+// -------------------------------------------------------
+// Rate limiting
+// -------------------------------------------------------
+rate_limit('contact_' . client_ip(), RATE_LIMIT_CONTACT, RATE_LIMIT_WINDOW);
+
+// -------------------------------------------------------
+// Validate
+// -------------------------------------------------------
+$name        = trim($body['name'] ?? '');
+$contact     = trim($body['contact'] ?? '');
+$serviceType = trim($body['serviceType'] ?? '');
+$message     = trim($body['message'] ?? '');
+
+if ($name === '') {
+    json_error('Bitte geben Sie Ihren Namen an.');
+}
+
+if ($contact === '') {
+    json_error('Bitte geben Sie eine E-Mail-Adresse oder Telefonnummer an.');
+}
+
+if (mb_strlen($name) > 200 || mb_strlen($contact) > 300 || mb_strlen($message) > 5000) {
+    json_error('Ein Feld überschreitet die maximale Länge.');
+}
+
+// Sanitize
+$name        = htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
+$contact     = htmlspecialchars($contact, ENT_QUOTES, 'UTF-8');
+$serviceType = htmlspecialchars($serviceType, ENT_QUOTES, 'UTF-8');
+$message     = htmlspecialchars($message, ENT_QUOTES, 'UTF-8');
+
+// -------------------------------------------------------
+// Build e-mail
+// -------------------------------------------------------
+$subject = 'Neue Anfrage über superfice.de – ' . ($serviceType ?: 'Allgemein');
+
+$body_text = <<<TXT
+Neue Anfrage über superfice.de
+
+Name:        {$name}
+Kontakt:     {$contact}
+Aufmaß-Typ:  {$serviceType}
+
+Nachricht:
+{$message}
+
+---
+IP: {$_SERVER['REMOTE_ADDR']}
+Zeit: {$_SERVER['REQUEST_TIME']}
+TXT;
+
+$headers  = "From: " . MAIL_FROM_NAME . " <" . MAIL_FROM . ">\r\n";
+$headers .= "Reply-To: {$contact}\r\n";
+$headers .= "MIME-Version: 1.0\r\n";
+$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
+$headers .= "X-Mailer: Superfice-Website/1.0\r\n";
+
+// -------------------------------------------------------
+// Send e-mail
+// -------------------------------------------------------
+if (USE_SMTP) {
+    send_smtp($subject, $body_text, $headers);
+} else {
+    $sent = @mail(MAIL_TO, $subject, $body_text, $headers);
+    if (!$sent) {
+        error_log('Superfice contact mail() failed for: ' . $contact);
+        json_error('Beim Senden ist ein Fehler aufgetreten. Bitte schreiben Sie uns direkt an info@superfice.de');
+    }
+}
+
+// -------------------------------------------------------
+// Optional webhook (Slack / CRM)
+// -------------------------------------------------------
+if (defined('WEBHOOK_URL') && WEBHOOK_URL !== '') {
+    $payload = json_encode([
+        'text' => "*Neue Superfice-Anfrage*\nName: {$name}\nKontakt: {$contact}\nTyp: {$serviceType}\nNachricht: {$message}",
+    ]);
+    $wh_ctx = stream_context_create([
+        'http' => [
+            'method'  => 'POST',
+            'header'  => "Content-Type: application/json\r\n",
+            'content' => $payload,
+            'timeout' => 3,
+        ],
+    ]);
+    @file_get_contents(WEBHOOK_URL, false, $wh_ctx);
+}
+
+echo json_encode(['success' => true]);

api/distance.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * Superfice – Distance API
+ *
+ * GET /api/distance.php?plz=XXXXX
+ *
+ * Returns JSON: { "distance": <km>, "plz": "XXXXX" }
+ * or            { "error": "<message>" }
+ *
+ * Uses OpenStreetMap Nominatim for geocoding (free, no API key needed).
+ * For production traffic, replace with Google Maps or a local PLZ dataset.
+ */
+
+require_once __DIR__ . '/config.php';
+require_once __DIR__ . '/helpers.php';
+
+header('Content-Type: application/json; charset=utf-8');
+cors_headers();
+
+// -------------------------------------------------------
+// Input validation
+// -------------------------------------------------------
+$plz = isset($_GET['plz']) ? preg_replace('/[^0-9]/', '', trim($_GET['plz'])) : '';
+
+if (strlen($plz) !== 5) {
+    json_error('Ungültige PLZ. Bitte geben Sie eine 5-stellige Postleitzahl ein.');
+}
+
+// -------------------------------------------------------
+// Rate limiting
+// -------------------------------------------------------
+rate_limit('dist_' . client_ip(), RATE_LIMIT_DISTANCE, RATE_LIMIT_WINDOW);
+
+// -------------------------------------------------------
+// Geocode PLZ via Nominatim
+// -------------------------------------------------------
+$url = sprintf(
+    'https://nominatim.openstreetmap.org/search?postalcode=%s&country=de&format=json&limit=1&addressdetails=0',
+    urlencode($plz)
+);
+
+$ctx = stream_context_create([
+    'http' => [
+        'header'          => "User-Agent: SuperficeWebsite/1.0 (info@superfice.de)\r\n",
+        'timeout'         => 5,
+        'ignore_errors'   => true,
+    ],
+    'ssl' => [
+        'verify_peer'     => true,
+        'verify_peer_name'=> true,
+    ],
+]);
+
+$raw = @file_get_contents($url, false, $ctx);
+
+if ($raw === false) {
+    json_error('PLZ-Suche momentan nicht verfügbar. Bitte versuchen Sie es später erneut.');
+}
+
+$data = json_decode($raw, true);
+
+if (empty($data) || !isset($data[0]['lat'], $data[0]['lon'])) {
+    json_error('PLZ nicht gefunden. Bitte prüfen Sie Ihre Eingabe.');
+}
+
+$lat = (float) $data[0]['lat'];
+$lon = (float) $data[0]['lon'];
+
+// -------------------------------------------------------
+// Haversine distance to HQ
+// -------------------------------------------------------
+$distance = haversine(HQ_LAT, HQ_LON, $lat, $lon);
+
+echo json_encode([
+    'distance' => $distance,
+    'plz'      => $plz,
+]);

api/helpers.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Superfice – API Helpers
+ *
+ * Shared utility functions for API endpoints.
+ * Not directly accessible (no public entry point).
+ */
+
+// -------------------------------------------------------
+// CORS
+// -------------------------------------------------------
+function cors_headers(): void {
+    $allowed = defined('SITE_ORIGIN') ? SITE_ORIGIN : '*';
+    header('Access-Control-Allow-Origin: ' . $allowed);
+    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
+    header('Access-Control-Allow-Headers: Content-Type');
+}
+
+// -------------------------------------------------------
+// JSON error response
+// -------------------------------------------------------
+function json_error(string $msg, int $code = 400): never {
+    http_response_code($code);
+    echo json_encode(['error' => $msg]);
+    exit;
+}
+
+// -------------------------------------------------------
+// Client IP (respects proxy headers cautiously)
+// -------------------------------------------------------
+function client_ip(): string {
+    // Only trust X-Forwarded-For if behind a known proxy
+    if (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
+        $ips = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
+        return trim($ips[0]);
+    }
+    return $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
+}
+
+// -------------------------------------------------------
+// File-based rate limiting
+// -------------------------------------------------------
+function rate_limit(string $key, int $maxRequests, int $window): void {
+    $dir = defined('RATE_LIMIT_DIR') ? RATE_LIMIT_DIR : sys_get_temp_dir() . '/sf_rl';
+    if (!is_dir($dir)) {
+        @mkdir($dir, 0700, true);
+    }
+
+    $file = $dir . '/' . hash('sha256', $key) . '.json';
+    $now  = time();
+    $data = ['count' => 0, 'reset' => $now + $window];
+
+    if (file_exists($file)) {
+        $stored = json_decode(file_get_contents($file), true);
+        if (is_array($stored) && $stored['reset'] > $now) {
+            $data = $stored;
+        }
+    }
+
+    $data['count']++;
+    file_put_contents($file, json_encode($data), LOCK_EX);
+
+    if ($data['count'] > $maxRequests) {
+        http_response_code(429);
+        echo json_encode(['error' => 'Zu viele Anfragen. Bitte versuchen Sie es später erneut.']);
+        exit;
+    }
+}
+
+// -------------------------------------------------------
+// Haversine distance (km)
+// -------------------------------------------------------
+function haversine(float $lat1, float $lon1, float $lat2, float $lon2): int {
+    $R    = 6371;
+    $dLat = deg2rad($lat2 - $lat1);
+    $dLon = deg2rad($lon2 - $lon1);
+    $a    = sin($dLat / 2) ** 2
+          + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dLon / 2) ** 2;
+    $c    = 2 * atan2(sqrt($a), sqrt(1 - $a));
+    return (int) round($R * $c);
+}
+
+// -------------------------------------------------------
+// SMTP send (basic, without PHPMailer)
+// For production, install PHPMailer via Composer and
+// replace this function body accordingly.
+// -------------------------------------------------------
+function send_smtp(string $subject, string $body, string $headers): void {
+    // Placeholder – integrate PHPMailer here:
+    //
+    // require __DIR__ . '/../vendor/autoload.php';
+    // $mail = new PHPMailer\PHPMailer\PHPMailer(true);
+    // $mail->isSMTP();
+    // $mail->Host       = SMTP_HOST;
+    // $mail->SMTPAuth   = true;
+    // $mail->Username   = SMTP_USER;
+    // $mail->Password   = SMTP_PASS;
+    // $mail->SMTPSecure = SMTP_SECURE;
+    // $mail->Port       = SMTP_PORT;
+    // $mail->setFrom(MAIL_FROM, MAIL_FROM_NAME);
+    // $mail->addAddress(MAIL_TO);
+    // $mail->Subject = $subject;
+    // $mail->Body    = $body;
+    // $mail->send();
+
+    // Fallback to mail() until PHPMailer is integrated
+    $sent = @mail(MAIL_TO, $subject, $body, $headers);
+    if (!$sent) {
+        error_log('Superfice SMTP fallback mail() failed');
+        json_error('Beim Senden ist ein Fehler aufgetreten. Bitte schreiben Sie uns direkt.');
+    }
+}

index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Millimetergenaue 3D-Aufmaße für Handwerk, Innenausbau und Architektur. Fertig aufbereitet für Ihre Planungssoftware." />
+    <meta name="robots" content="index, follow" />
+    <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e49bbfc0-7402-4cda-9ae4-5bd1201ea9b5" data-blockingmode="auto" type="text/javascript"></script>
+    <meta property="og:title" content="Superfice – Präzision beginnt beim Aufmaß" />
+    <meta property="og:description" content="Millimetergenaue 3D-Aufmaße für Handwerk, Innenausbau und Architektur." />
+    <meta property="og:type" content="website" />
+    <title>Superfice – Präzision beginnt beim Aufmaß</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "superfice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/inter": "^5.2.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0"
+  }
+}

public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="4" fill="#0B0B0B"/>
+  <rect x="6" y="10" width="3" height="12" fill="#8B3DB8"/>
+  <text x="12" y="22" font-family="Inter, sans-serif" font-size="11" font-weight="700" fill="#F0F0F0">SF</text>
+</svg>

src/App.css

@@ -0,0 +1,5 @@
+main {
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}

src/App.jsx

@@ -0,0 +1,55 @@
+import { useState, lazy, Suspense } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import CustomCursor from './components/CustomCursor/CustomCursor'
+import SpaceBackground from './components/SpaceBackground/SpaceBackground'
+import Navigation from './components/Navigation/Navigation'
+import Hero from './components/Hero/Hero'
+import PainPoint from './components/PainPoint/PainPoint'
+import Services from './components/Services/Services'
+import WhatWeMeasure from './components/WhatWeMeasure/WhatWeMeasure'
+import CostCalculator from './components/CostCalculator/CostCalculator'
+import WhySuperfice from './components/WhySuperfice/WhySuperfice'
+import References from './components/References/References'
+import Contact from './components/Contact/Contact'
+import Footer from './components/Footer/Footer'
+import './App.css'
+
+const Impressum   = lazy(() => import('./pages/Impressum'))
+const Datenschutz = lazy(() => import('./pages/Datenschutz'))
+
+function HomePage() {
+  return (
+    <>
+      <section id="hero"><Hero /></section>
+      <section id="schmerzpunkt"><PainPoint /></section>
+      <section id="leistung"><Services /></section>
+      <section id="aufmass"><WhatWeMeasure /></section>
+      <section id="rechner"><CostCalculator /></section>
+      <section id="warum"><WhySuperfice /></section>
+      <section id="referenzen"><References /></section>
+      <section id="kontakt"><Contact /></section>
+    </>
+  )
+}
+
+export default function App() {
+  const [customCursor, setCustomCursor] = useState(true)
+
+  return (
+    <>
+      <CustomCursor enabled={customCursor} />
+      <SpaceBackground />
+      <Navigation customCursor={customCursor} onToggleCursor={() => setCustomCursor(v => !v)} />
+      <main>
+        <Suspense fallback={null}>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/impressum" element={<Impressum />} />
+            <Route path="/datenschutz" element={<Datenschutz />} />
+          </Routes>
+        </Suspense>
+      </main>
+      <Footer />
+    </>
+  )
+}

src/components/BathViewer/BathViewer.css

@@ -0,0 +1,162 @@
+.bv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: bv-fade-in 0.22s ease;
+}
+
+@keyframes bv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.bv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: bv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes bv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.bv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.bv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.bv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.bv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.bv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.bv-close svg { width: 14px; height: 14px; }
+
+.bv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.bv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.bv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.bv-canvas--ready { opacity: 1; }
+.bv-canvas:active { cursor: grabbing; }
+
+.bv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.bv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: bv-spin 0.85s linear infinite;
+}
+
+@keyframes bv-spin { to { transform: rotate(360deg); } }
+
+.bv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: bv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes bv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.bv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.bv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/BathViewer/BathViewer.jsx

@@ -0,0 +1,559 @@
+import { useEffect, useRef, useState } from 'react'
+import './BathViewer.css'
+
+// =================================================================
+//  BATHROOM GEOMETRY
+// =================================================================
+
+function buildBathroom() {
+  const V = [], E = []
+
+  // ring in x-z plane (horizontal)
+  function ring(cx, y, cz, rx, rz, n = 32) {
+    const b = V.length
+    for (let i = 0; i < n; i++) {
+      const a = (i / n) * Math.PI * 2
+      V.push([cx + rx * Math.cos(a), y, cz + rz * Math.sin(a)])
+    }
+    for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    return b
+  }
+
+  // ring in y-z plane (vertical, facing x-axis) — for washing machine door etc.
+  function ringYZ(x0, cy, cz, r, n = 20) {
+    const b = V.length
+    for (let i = 0; i < n; i++) {
+      const a = (i / n) * Math.PI * 2
+      V.push([x0, cy + r * Math.cos(a), cz + r * Math.sin(a)])
+    }
+    for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    return b
+  }
+
+  function connectRings(b1, b2, n) {
+    for (let i = 0; i < n; i++) E.push([b1 + i, b2 + i])
+  }
+
+  function box(x1, y1, z1, x2, y2, z2) {
+    const b = V.length
+    V.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    E.push(
+      [b,b+1],[b+1,b+2],[b+2,b+3],[b+3,b],
+      [b+4,b+5],[b+5,b+6],[b+6,b+7],[b+7,b+4],
+      [b,b+4],[b+1,b+5],[b+2,b+6],[b+3,b+7],
+    )
+  }
+
+  function line(x1,y1,z1, x2,y2,z2) {
+    const b = V.length
+    V.push([x1,y1,z1],[x2,y2,z2])
+    E.push([b,b+1])
+  }
+
+  // cylinder (2 rings + verticals)
+  function cylinder(cx, y1, cz, rx, rz, y2, n = 20) {
+    const b1 = ring(cx, y1, cz, rx, rz, n)
+    const b2 = ring(cx, y2, cz, rx, rz, n)
+    connectRings(b1, b2, n)
+  }
+
+  // ── ROOM ──────────────────────────────────────────────────────
+  const RX = 1.55, RZ = 2.20, FL = -0.50, CL = 1.30
+
+  const rc = V.length
+  V.push(
+    [-RX,FL,-RZ],[RX,FL,-RZ],[RX,FL, RZ],[-RX,FL, RZ],
+    [-RX,CL,-RZ],[RX,CL,-RZ],[RX,CL, RZ],[-RX,CL, RZ],
+  )
+  E.push(
+    [rc,rc+1],[rc+1,rc+2],[rc+2,rc+3],[rc+3,rc],
+    [rc+4,rc+5],[rc+5,rc+6],[rc+6,rc+7],[rc+7,rc+4],
+    [rc,rc+4],[rc+1,rc+5],[rc+2,rc+6],[rc+3,rc+7],
+  )
+
+  // Door frame (front wall z=-RZ)
+  {
+    const d = V.length
+    V.push([0.28,FL,-RZ],[0.28,FL+1.72,-RZ],[1.04,FL,-RZ],[1.04,FL+1.72,-RZ])
+    E.push([d,d+1],[d+2,d+3],[d+1,d+3])
+  }
+
+  // Door panel (open ~40°, hinge at x=1.04)
+  {
+    const hw = 0.76, hh = 1.72, ang = 0.70
+    const fx  = 1.04 - hw * Math.cos(ang)
+    const fz  = -RZ  + hw * Math.sin(ang)
+    const d = V.length
+    V.push(
+      [1.04, FL,      -RZ], [1.04, FL+hh,    -RZ],
+      [fx,   FL,       fz], [fx,   FL+hh,     fz],
+    )
+    E.push([d,d+1],[d+2,d+3],[d,d+2],[d+1,d+3])
+
+    // Horizontal mid-panel line
+    line(1.04, FL+0.86, -RZ, fx, FL+0.86, fz)
+
+    // Lever handle
+    const hpx = 1.04 - 0.58*hw*Math.cos(ang)
+    const hpz = -RZ  + 0.58*hw*Math.sin(ang)
+    box(hpx-0.025, FL+0.86, hpz-0.025, hpx+0.025, FL+0.96, hpz+0.025)
+    line(hpx, FL+0.96, hpz, hpx+0.06, FL+0.90, hpz-0.04)
+
+    // Hinges (3, on hinge-side frame)
+    for (const hy of [FL+0.08, FL+0.86, FL+1.60]) {
+      box(1.02, hy, -RZ, 1.06, hy+0.06, -RZ+0.04)
+    }
+  }
+
+  // Window (right wall x=RX) with cross bar + sill
+  {
+    const w = V.length
+    V.push([RX,0.28,-0.44],[RX,0.28,0.54],[RX,0.94,-0.44],[RX,0.94,0.54])
+    E.push([w,w+1],[w+2,w+3],[w,w+2],[w+1,w+3])
+    V.push([RX,0.61,-0.44],[RX,0.61,0.54])
+    E.push([w+4,w+5])
+    box(RX-0.06, 0.24, -0.48, RX, 0.28, 0.58)
+  }
+
+  // Ceiling light
+  ring(0.10, CL, -0.20, 0.20, 0.20, 20)
+  ring(0.10, CL, -0.20, 0.09, 0.09, 14)
+  line(0.10, CL, -0.20, 0.10, CL-0.20, -0.20)
+
+  // ── BATHTUB (back wall, long axis = x) ────────────────────────
+  const TCX = -0.20, TCZ = 1.80, TN = 32
+
+  const toR = [
+    { y:  0.16, rx: 1.00, rz: 0.37 },
+    { y:  0.07, rx: 1.04, rz: 0.40 },
+    { y: -0.06, rx: 0.99, rz: 0.37 },
+    { y: -0.20, rx: 0.92, rz: 0.31 },
+    { y: -0.32, rx: 0.86, rz: 0.29 },
+    { y: -0.38, rx: 0.82, rz: 0.32 },
+  ]
+  const tiR = [
+    { y:  0.16, rx: 0.84, rz: 0.26 },
+    { y: -0.06, rx: 0.81, rz: 0.23 },
+    { y: -0.28, rx: 0.77, rz: 0.20 },
+  ]
+
+  const toRings = toR.map(({ y, rx, rz }) => ring(TCX, y, TCZ, rx, rz, TN))
+  for (let r = 0; r < toRings.length - 1; r++) connectRings(toRings[r], toRings[r+1], TN)
+  const tiRings = tiR.map(({ y, rx, rz }) => ring(TCX, y, TCZ, rx, rz, TN))
+  for (let r = 0; r < tiRings.length - 1; r++) connectRings(tiRings[r], tiRings[r+1], TN)
+  for (let i = 0; i < TN; i++) E.push([toRings[0]+i, tiRings[0]+i])
+
+  // Faucet
+  box(TCX+0.82, 0.16, TCZ-0.09, TCX+0.96, 0.36, TCZ+0.09)
+  box(TCX+0.66, 0.16, TCZ-0.20, TCX+0.74, 0.27, TCZ-0.11)
+  box(TCX+0.66, 0.16, TCZ+0.11, TCX+0.74, 0.27, TCZ+0.20)
+  line(TCX+0.89, 0.36, TCZ, TCX+0.89, 0.44, TCZ-0.14)
+
+  // Drain + soap dish
+  ring(TCX-0.28, -0.38, TCZ, 0.06, 0.06, 12)
+  box(TCX+0.28, 0.16, TCZ-0.38, TCX+0.50, 0.20, TCZ-0.32)
+
+  // Claw feet — (0.58/0.82)²+(0.21/0.32)²=0.501+0.431=0.932 < 1 ✓
+  for (const [lx, lz] of [
+    [TCX-0.58, TCZ-0.21],[TCX-0.58, TCZ+0.21],
+    [TCX+0.58, TCZ-0.21],[TCX+0.58, TCZ+0.21],
+  ]) {
+    cylinder(lx, FL, lz, 0.055, 0.055, -0.38, 14)
+    ring(lx, -0.38, lz, 0.09, 0.09, 14)
+    ring(lx, FL,    lz, 0.09, 0.09, 14)
+  }
+
+  // Shower pipe + head + curtain rail
+  {
+    const shx = TCX - 0.80, shz = TCZ
+    cylinder(shx, 0.16, shz, 0.025, 0.025, 1.10, 8)
+    ring(shx, 1.10, shz, 0.15, 0.15, 16)
+    box(-RX, 1.05, shz-0.025, shx, 1.10, shz+0.025)
+    ring(TCX, CL-0.06, TCZ, 1.05, 0.42, 28)
+  }
+
+  // ── TOILET — wall-hung modern (left wall, between sink and tub)
+  const TOLX = -1.27, TOLZ = 0.20, TolN = 28
+
+  // Bowl: tapers at bottom, widens at rim (wall-hung, no floor contact)
+  const tolR = [
+    { y: FL+0.24, rx: 0.21, rz: 0.17 },
+    { y: FL+0.31, rx: 0.25, rz: 0.20 },
+    { y: FL+0.39, rx: 0.28, rz: 0.22 },
+    { y: FL+0.44, rx: 0.28, rz: 0.22 },
+  ]
+  const tolRings = tolR.map(({ y, rx, rz }) => ring(TOLX, y, TOLZ, rx, rz, TolN))
+  for (let r = 0; r < tolRings.length - 1; r++) connectRings(tolRings[r], tolRings[r+1], TolN)
+
+  // Seat (two rings = thickness of seat edge)
+  ring(TOLX, FL+0.455, TOLZ, 0.29, 0.23, TolN)
+  ring(TOLX, FL+0.455, TOLZ, 0.24, 0.18, TolN)
+  // Lid (slightly above seat)
+  ring(TOLX, FL+0.475, TOLZ, 0.28, 0.22, TolN)
+  ring(TOLX, FL+0.510, TOLZ, 0.28, 0.22, TolN)
+
+  // Wall-hung support brackets
+  line(-RX, FL+0.28, TOLZ-0.12, TOLX+0.27, FL+0.28, TOLZ-0.12)
+  line(-RX, FL+0.28, TOLZ+0.12, TOLX+0.27, FL+0.28, TOLZ+0.12)
+
+  // In-wall cistern flush panel on wall
+  box(-RX, FL+0.64, TOLZ-0.16, -RX+0.05, FL+0.92, TOLZ+0.16)
+  // Two flush buttons
+  box(-RX+0.01, FL+0.74, TOLZ-0.10, -RX+0.05, FL+0.86, TOLZ-0.02)
+  box(-RX+0.01, FL+0.74, TOLZ+0.02, -RX+0.05, FL+0.86, TOLZ+0.10)
+
+  // Toilet paper holder (left wall)
+  {
+    const ph = V.length
+    V.push([-RX, 0.08, TOLZ+0.48],[-RX+0.16, 0.08, TOLZ+0.48])
+    E.push([ph, ph+1])
+    cylinder(-RX+0.16, 0.02, TOLZ+0.48, 0.0, 0.09, 0.12, 12)
+  }
+
+  // Trash can — against left wall, between toilet and sink
+  cylinder(-1.38, FL, -0.20, 0.10, 0.10, FL+0.30, 16)
+  ring(-1.38, FL+0.30, -0.20, 0.12, 0.12, 16)
+
+  // ── WASHING MACHINE (right wall, under window z≈-0.44..0.54) ──
+  box(RX-0.58, FL, -0.30, RX, FL+0.64, 0.40)
+  // Porthole door: gasket ring + glass ring + drum
+  ringYZ(RX-0.58, FL+0.32,  0.05, 0.26, 22)   // outer gasket
+  ringYZ(RX-0.58, FL+0.32,  0.05, 0.23, 22)   // glass ring
+  ringYZ(RX-0.58, FL+0.32,  0.05, 0.10, 12)   // drum ring
+  // Drum paddles (4 lines from center to drum)
+  for (let i = 0; i < 4; i++) {
+    const a = (i / 4) * Math.PI * 2
+    line(RX-0.58, FL+0.32, 0.05,
+         RX-0.58, FL+0.32 + 0.10*Math.cos(a), 0.05 + 0.10*Math.sin(a))
+  }
+  // Porthole handle
+  box(RX-0.60, FL+0.28, 0.26, RX-0.54, FL+0.36, 0.30)
+  // Control panel + buttons
+  box(RX-0.58, FL+0.64, -0.24, RX, FL+0.70, 0.40)
+  ringYZ(RX-0.58, FL+0.67, -0.10, 0.05, 10)   // main dial
+  // Button row
+  for (let i = 0; i < 4; i++) {
+    const bz = 0.10 + i * 0.06
+    box(RX-0.58, FL+0.655, bz, RX-0.54, FL+0.685, bz+0.04)
+  }
+
+  // ── TOWEL RADIATOR (right wall, mid) ─────────────────────────
+  {
+    const RY1 = -0.20, RY2 = 0.88
+    const RZ1 = 0.65,  RZ2 = 1.25
+    const RXf = RX - 0.10
+    line(RXf, RY1, RZ1, RXf, RY2, RZ1)
+    line(RXf, RY1, RZ2, RXf, RY2, RZ2)
+    for (let i = 0; i <= 7; i++) {
+      const y = RY1 + (RY2 - RY1) * i / 7
+      line(RXf, y, RZ1, RXf, y, RZ2)
+    }
+    line(RX, RY1+0.12, RZ1, RXf, RY1+0.12, RZ1)
+    line(RX, RY1+0.12, RZ2, RXf, RY1+0.12, RZ2)
+    line(RX, RY2-0.12, RZ1, RXf, RY2-0.12, RZ1)
+    line(RX, RY2-0.12, RZ2, RXf, RY2-0.12, RZ2)
+  }
+
+  // ── SINK (left wall, front) ───────────────────────────────────
+  const SNX = -1.55, SNZ = -1.46
+
+  // sink bowl as oval rings
+  const sn0 = ring(SNX+0.19, 0.28, SNZ, 0.20, 0.25, 24)
+  const sn1 = ring(SNX+0.17, 0.08, SNZ, 0.17, 0.21, 24)
+  connectRings(sn0, sn1, 24)
+  // rim ledge
+  ring(SNX+0.20, 0.30, SNZ, 0.24, 0.28, 24)
+  // faucet body
+  cylinder(SNX+0.19, 0.30, SNZ, 0.025, 0.025, 0.50, 8)
+  ring(SNX+0.19, 0.50, SNZ, 0.06, 0.06, 10)
+  // handles
+  box(SNX+0.06, 0.38, SNZ-0.14, SNX+0.14, 0.42, SNZ-0.08)
+  box(SNX+0.06, 0.38, SNZ+0.08, SNX+0.14, 0.42, SNZ+0.14)
+  // Supply pipes (from wall → into room → up to faucet)
+  line(-RX, 0.10, SNZ-0.12, SNX+0.12, 0.10, SNZ-0.12)   // cold horizontal
+  line(SNX+0.12, 0.10, SNZ-0.12, SNX+0.08, 0.38, SNZ-0.12) // cold up
+  ring(SNX+0.12, 0.19, SNZ-0.12, 0.0, 0.032, 8)           // cold shutoff valve
+
+  line(-RX, 0.10, SNZ+0.12, SNX+0.12, 0.10, SNZ+0.12)   // hot horizontal
+  line(SNX+0.12, 0.10, SNZ+0.12, SNX+0.08, 0.38, SNZ+0.12) // hot up
+  ring(SNX+0.12, 0.19, SNZ+0.12, 0.0, 0.032, 8)           // hot shutoff valve
+
+  // P-trap drain
+  const DX = SNX+0.19
+  line(DX, 0.06, SNZ, DX, -0.14, SNZ)              // vertical drop
+  line(DX, -0.14, SNZ, DX, -0.14, SNZ+0.14)        // trap horizontal →
+  line(DX, -0.14, SNZ+0.14, DX, -0.08, SNZ+0.14)  // trap back up (U)
+  line(DX, -0.08, SNZ+0.14, DX, -0.08, SNZ+0.28)  // exit horizontal
+  line(DX, -0.08, SNZ+0.28, DX, -0.22, SNZ+0.28)  // drop to floor
+
+  // Large mirror above sink (spans wide)
+  {
+    const m = V.length
+    V.push(
+      [-RX, 0.44, SNZ-0.52],[-RX, 0.44, SNZ+0.52],
+      [-RX, 1.18, SNZ-0.52],[-RX, 1.18, SNZ+0.52],
+    )
+    E.push([m,m+1],[m+2,m+3],[m,m+2],[m+1,m+3])
+    // mirror shelf below
+    box(-RX, 0.38, SNZ-0.54, -RX+0.06, 0.44, SNZ+0.54)
+  }
+
+  // Towel ring next to sink
+  {
+    const b = V.length
+    V.push([-RX, 0.46, SNZ+0.68],[-RX+0.04, 0.46, SNZ+0.68])
+    E.push([b, b+1])
+    ring(-RX+0.04, 0.46, SNZ+0.68, 0.0, 0.11, 14)
+  }
+
+  // ── CARPET (floor oval, room center-front) ────────────────────
+  ring(0.20, FL+0.01, -0.55, 0.85, 0.62, 40)
+  ring(0.20, FL+0.01, -0.55, 0.72, 0.50, 40)
+
+  return { verts: V, edges: E }
+}
+
+const { verts, edges } = buildBathroom()
+
+// =================================================================
+//  ENGINE — do not touch below this line
+// =================================================================
+
+export default function BathViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.30, rotY: -0.55,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.78, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+
+      return {
+        x: (x1  / d) * fov * scale + W / 2,
+        y: (-y2 / d) * fov * scale + H / 2,
+        z: z2,
+      }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+
+      if (verts.length === 0) return
+
+      const proj = verts.map(v => project(v))
+
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) {
+        if (p.z < zMin) zMin = p.z
+        if (p.z > zMax) zMax = p.z
+      }
+      const zRange = zMax - zMin || 1
+
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a]
+        const pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+
+        ctx.beginPath()
+        ctx.moveTo(pa.x, pa.y)
+        ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3
+        ctx.stroke()
+      }
+
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`
+        ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => {
+      state.dragging = true
+      state.lastX = e.clientX
+      state.lastY = e.clientY
+      stopAutoRotate()
+    }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX - state.lastX) * 0.008
+      state.rotX += (e.clientY - state.lastY) * 0.008
+      state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+      state.lastX  = e.clientX
+      state.lastY  = e.clientY
+    }
+    const onMouseUp = () => { state.dragging = false }
+
+    const onWheel = (e) => {
+      e.preventDefault()
+      state.zoom *= e.deltaY > 0 ? 0.93 : 1.07
+      state.zoom  = Math.max(0.35, Math.min(3.0, state.zoom))
+      stopAutoRotate()
+    }
+
+    let lastTX = 0, lastTY = 0, lastPinchDist = 0
+
+    const onTouchStart = (e) => {
+      stopAutoRotate()
+      state.dragging = true
+      if (e.touches.length === 1) {
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        lastPinchDist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+      }
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length === 1) {
+        state.rotY += (e.touches[0].clientX - lastTX) * 0.008
+        state.rotX += (e.touches[0].clientY - lastTY) * 0.008
+        state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+        if (lastPinchDist) state.zoom *= dist / lastPinchDist
+        state.zoom = Math.max(0.35, Math.min(3.0, state.zoom))
+        lastPinchDist = dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging = false; lastPinchDist = 0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+
+    const onKeyDown = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId)
+      clearTimeout(state.idleTimer)
+      ro.disconnect()
+      setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown)
+      window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp)
+      canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart)
+      canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd)
+      window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="bv-overlay" onClick={onClose}>
+      <div className="bv-modal" onClick={e => e.stopPropagation()}>
+
+        <div className="bv-header">
+          <div className="bv-title-group">
+            <span className="bv-label">3D Modell</span>
+            <h3 className="bv-title">Bad</h3>
+          </div>
+          <button className="bv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+
+        <div className="bv-canvas-wrap">
+          <canvas ref={canvasRef} className={`bv-canvas${ready ? ' bv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="bv-loader" aria-label="Wird geladen">
+              <div className="bv-loader-ring" />
+              <span className="bv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+
+        <div className="bv-footer">
+          <span className="bv-hint">Ziehen zum Drehen</span>
+          <span className="bv-hint">Scrollen zum Zoomen</span>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/components/BedroomViewer/BedroomViewer.css

@@ -0,0 +1,162 @@
+.bdv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: bdv-fade-in 0.22s ease;
+}
+
+@keyframes bdv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.bdv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: bdv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes bdv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.bdv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.bdv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.bdv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.bdv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.bdv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.bdv-close svg { width: 14px; height: 14px; }
+
+.bdv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.bdv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.bdv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.bdv-canvas--ready { opacity: 1; }
+.bdv-canvas:active { cursor: grabbing; }
+
+.bdv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.bdv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: bdv-spin 0.85s linear infinite;
+}
+
+@keyframes bdv-spin { to { transform: rotate(360deg); } }
+
+.bdv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: bdv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes bdv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.bdv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.bdv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/BedroomViewer/BedroomViewer.jsx

@@ -0,0 +1,480 @@
+import { useEffect, useRef, useState } from 'react'
+import './BedroomViewer.css'
+
+// =================================================================
+//  BEDROOM GEOMETRY
+// =================================================================
+
+function buildBedroom() {
+  const V = [], E = []
+
+  function ring(cx, y, cz, rx, rz, n = 24) {
+    const b = V.length
+    for (let i = 0; i < n; i++) {
+      const a = (i / n) * Math.PI * 2
+      V.push([cx + rx * Math.cos(a), y, cz + rz * Math.sin(a)])
+    }
+    for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    return b
+  }
+
+  function connectRings(b1, b2, n) {
+    for (let i = 0; i < n; i++) E.push([b1 + i, b2 + i])
+  }
+
+  function box(x1, y1, z1, x2, y2, z2) {
+    const b = V.length
+    V.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    E.push(
+      [b,b+1],[b+1,b+2],[b+2,b+3],[b+3,b],
+      [b+4,b+5],[b+5,b+6],[b+6,b+7],[b+7,b+4],
+      [b,b+4],[b+1,b+5],[b+2,b+6],[b+3,b+7],
+    )
+  }
+
+  function line(x1,y1,z1, x2,y2,z2) {
+    const b = V.length
+    V.push([x1,y1,z1],[x2,y2,z2])
+    E.push([b,b+1])
+  }
+
+  function cylinder(cx, y1, cz, rx, rz, y2, n = 16) {
+    const b1 = ring(cx, y1, cz, rx, rz, n)
+    const b2 = ring(cx, y2, cz, rx, rz, n)
+    connectRings(b1, b2, n)
+  }
+
+  // ── ROOM ──────────────────────────────────────────────────────
+  const RX = 2.30, RZ = 2.50, FL = -0.50, CL = 1.34
+
+  const rc = V.length
+  V.push(
+    [-RX,FL,-RZ],[RX,FL,-RZ],[RX,FL, RZ],[-RX,FL, RZ],
+    [-RX,CL,-RZ],[RX,CL,-RZ],[RX,CL, RZ],[-RX,CL, RZ],
+  )
+  E.push(
+    [rc,rc+1],[rc+1,rc+2],[rc+2,rc+3],[rc+3,rc],
+    [rc+4,rc+5],[rc+5,rc+6],[rc+6,rc+7],[rc+7,rc+4],
+    [rc,rc+4],[rc+1,rc+5],[rc+2,rc+6],[rc+3,rc+7],
+  )
+
+  // ── DOOR (front wall, right side) ─────────────────────────────
+  {
+    const d = V.length
+    V.push([0.40,FL,-RZ],[0.40,FL+1.78,-RZ],[1.18,FL,-RZ],[1.18,FL+1.78,-RZ])
+    E.push([d,d+1],[d+2,d+3],[d+1,d+3])
+  }
+  {
+    const hw = 0.78, hh = 1.78, ang = 0.65
+    const fx = 0.40 + hw * Math.cos(ang), fz = -RZ + hw * Math.sin(ang)
+    const d = V.length
+    V.push([0.40,FL,-RZ],[0.40,FL+hh,-RZ],[fx,FL,fz],[fx,FL+hh,fz])
+    E.push([d,d+1],[d+2,d+3],[d,d+2],[d+1,d+3])
+    line(0.40, FL+0.89, -RZ, fx, FL+0.89, fz)
+    for (const hy of [FL+0.08, FL+0.89, FL+1.66]) box(0.38,hy,-RZ,0.42,hy+0.06,-RZ+0.04)
+    const hpx = 0.40 + 0.58*hw*Math.cos(ang), hpz = -RZ + 0.58*hw*Math.sin(ang)
+    box(hpx-0.025,FL+0.89,hpz-0.025,hpx+0.025,FL+0.99,hpz+0.025)
+    line(hpx,FL+0.99,hpz,hpx+0.05,FL+0.93,hpz-0.04)
+  }
+
+  // ── WINDOW (right wall x=RX, large) ───────────────────────────
+  {
+    const w = V.length
+    V.push([RX,0.56,-1.20],[RX,0.56,1.20],[RX,CL-0.10,-1.20],[RX,CL-0.10,1.20])
+    E.push([w,w+1],[w+2,w+3],[w,w+2],[w+1,w+3])
+    V.push([RX,0.56,0.00],[RX,CL-0.10,0.00])   // center bar
+    E.push([w+4,w+5])
+    V.push([RX,0.92,-1.20],[RX,0.92,1.20])      // mid bar
+    E.push([w+6,w+7])
+    box(RX-0.08,0.52,-1.24,RX,0.56,1.24)        // sill
+  }
+
+  // ── CEILING LIGHT ──────────────────────────────────────────────
+  ring(0.0, CL, 0.10, 0.26, 0.26, 20)
+  ring(0.0, CL, 0.10, 0.10, 0.10, 14)
+  line(0.0, CL, 0.10, 0.0, CL-0.24, 0.10)
+  ring(0.0, CL-0.24, 0.10, 0.24, 0.24, 18)
+  ring(0.0, CL-0.34, 0.10, 0.16, 0.16, 14)
+
+  // ── DOUBLE BED (back wall z=RZ) ────────────────────────────────
+  const BX1 = -0.86, BX2 = 0.86, BZ1 = 0.72, BZ2 = 2.44
+  // Bed frame
+  box(BX1, FL, BZ1, BX2, FL+0.28, BZ2)
+  // Mattress
+  box(BX1+0.04, FL+0.28, BZ1+0.04, BX2-0.04, FL+0.44, BZ2-0.06)
+  // Headboard (tall, slatted)
+  box(BX1, FL+0.28, BZ2-0.06, BX2, FL+0.88, BZ2)
+  // Headboard slats (5 vertical lines)
+  for (let i = 1; i <= 4; i++) {
+    const sx = BX1 + (BX2 - BX1) * i / 5
+    line(sx, FL+0.32, BZ2-0.02, sx, FL+0.84, BZ2-0.02)
+  }
+  // Footboard
+  box(BX1, FL+0.28, BZ1, BX2, FL+0.46, BZ1+0.06)
+  // Duvet — two panels with centre seam and quilting lines
+  box(BX1+0.04, FL+0.44, BZ1+0.10, BX2-0.04, FL+0.50, BZ2-0.10)
+  line(0.0, FL+0.50, BZ1+0.10, 0.0, FL+0.50, BZ2-0.10)   // centre seam
+  for (let i = 1; i <= 4; i++) {
+    const qz = BZ1 + 0.10 + (BZ2 - BZ2*0 - BZ1 - 0.20) * i / 5
+    line(BX1+0.06, FL+0.50, qz, BX2-0.06, FL+0.50, qz)
+  }
+  // Two pillows
+  box(BX1+0.06, FL+0.44, BZ2-0.38, -0.06, FL+0.56, BZ2-0.12)
+  box(0.06, FL+0.44, BZ2-0.38, BX2-0.06, FL+0.56, BZ2-0.12)
+  // Bed legs (4)
+  for (const [lx,lz] of [[BX1+0.08,BZ1+0.08],[BX2-0.08,BZ1+0.08],[BX1+0.08,BZ2-0.08],[BX2-0.08,BZ2-0.08]])
+    box(lx-0.04,FL-0.08,lz-0.04,lx+0.04,FL,lz+0.04)
+
+  // ── NIGHTSTANDS ────────────────────────────────────────────────
+  for (const [nx1, nx2] of [[BX1-0.40,BX1-0.04],[BX2+0.04,BX2+0.40]]) {
+    box(nx1, FL, BZ2-0.50, nx2, FL+0.54, BZ2-0.04)
+    // drawer line
+    line(nx1+0.02, FL+0.28, BZ2-0.48, nx2-0.02, FL+0.28, BZ2-0.06)
+    // small handle
+    const mx = (nx1+nx2)/2
+    box(mx-0.06,FL+0.38,BZ2-0.48,mx+0.06,FL+0.42,BZ2-0.46)
+    // table lamp
+    cylinder(mx, FL+0.54, BZ2-0.27, 0.020, 0.020, FL+0.78, 8)
+    ring(mx, FL+0.54, BZ2-0.27, 0.06, 0.06, 10)
+    ring(mx, FL+0.64, BZ2-0.27, 0.10, 0.10, 12)
+    ring(mx, FL+0.78, BZ2-0.27, 0.06, 0.06, 10)
+    {
+      const sa = ring(mx, FL+0.78, BZ2-0.27, 0.06, 0.06, 10)
+      const sb = ring(mx, FL+0.66, BZ2-0.27, 0.12, 0.12, 10)
+      connectRings(sa, sb, 10)
+    }
+  }
+
+  // ── WARDROBE (left wall, full height) ─────────────────────────
+  {
+    const WX1 = -RX, WX2 = -RX + 0.62
+    const WZ1 = -1.80, WZ2 = 2.42, WH = CL - 0.04
+    box(WX1, FL, WZ1, WX2, WH, WZ2)
+    box(WX1, WH, WZ1-0.01, WX2+0.01, WH+0.03, WZ2+0.01)  // cornice
+    box(WX1, FL, WZ1, WX2, FL+0.07, WZ2)                   // kick plate
+    const seg = (WZ2 - WZ1) / 4
+    for (let i = 1; i < 4; i++) {
+      const dz = WZ1 + seg * i
+      line(WX2, FL+0.04, dz, WX2, WH-0.04, dz)
+    }
+    // handles + groove
+    for (let i = 0; i < 4; i++) {
+      const hz = WZ1 + seg*i + seg*0.5
+      box(WX2, 0.82, hz-0.03, WX2+0.02, 0.94, hz-0.01)
+    }
+    line(WX2, WH*0.66, WZ1, WX2, WH*0.66, WZ2)
+  }
+
+  // ── DRESSING TABLE (front wall left) ──────────────────────────
+  box(-RX, FL, -RZ+0.02, -RX+0.50, FL+0.76, -RZ+0.52)
+  // Table top
+  box(-RX-0.01, FL+0.74, -RZ+0.01, -RX+0.52, FL+0.78, -RZ+0.53)
+  // Drawer bank (facing door, on +x face at x = -RX+0.50)
+  for (let i = 0; i < 3; i++)
+    line(-RX+0.50, FL+0.16+i*0.18, -RZ+0.04, -RX+0.50, FL+0.16+i*0.18, -RZ+0.48)
+  // Handles
+  for (let i = 0; i < 3; i++)
+    box(-RX+0.50, FL+0.22+i*0.18, -RZ+0.30, -RX+0.54, FL+0.26+i*0.18, -RZ+0.22)
+  // Mirror above table
+  {
+    const m = V.length
+    V.push(
+      [-RX, FL+0.84, -RZ+0.04],[-RX, FL+0.84, -RZ+0.48],
+      [-RX, CL-0.10, -RZ+0.48],[-RX, CL-0.10, -RZ+0.04],
+    )
+    E.push([m,m+1],[m+1,m+2],[m+2,m+3],[m+3,m])
+    // mirror frame inner
+    const ins = 0.03
+    const n = V.length
+    V.push(
+      [-RX, FL+0.84+ins, -RZ+0.04+ins],[-RX, FL+0.84+ins, -RZ+0.48-ins],
+      [-RX, CL-0.10-ins, -RZ+0.48-ins],[-RX, CL-0.10-ins, -RZ+0.04+ins],
+    )
+    E.push([n,n+1],[n+1,n+2],[n+2,n+3],[n+3,n])
+    E.push([m,n],[m+1,n+1],[m+2,n+2],[m+3,n+3])
+  }
+
+  // ── WORKSPACE (under window, right wall) ──────────────────────
+  {
+    const DX1 = RX - 0.68, DX2 = RX - 0.04   // depth 0.64m from right wall
+    const DZ1 = -1.06, DZ2 = 1.06             // width 2.12m spanning under window
+    const DTY = FL + 0.76
+
+    // Desk surface
+    box(DX1, DTY, DZ1, DX2, DTY+0.04, DZ2)
+    // Legs (4 corners + centre support for wide span)
+    for (const [lx,lz] of [[DX1+0.06,DZ1+0.06],[DX2-0.06,DZ1+0.06],[DX1+0.06,DZ2-0.06],[DX2-0.06,DZ2-0.06]])
+      box(lx-0.03, FL, lz-0.03, lx+0.03, DTY, lz+0.03)
+    box(DX1+0.04, FL, -0.06, DX1+0.10, DTY, 0.06)  // centre leg
+    // Back panel against wall
+    box(DX2, FL+0.08, DZ1, RX, DTY, DZ2)
+    // Under-desk shelf (right end)
+    box(DX1+0.04, FL+0.28, DZ2-0.42, DX2-0.02, FL+0.32, DZ2-0.06)
+
+    // Main monitor (centre, taller)
+    box(DX2-0.06, DTY+0.04, -0.32, DX2+0.02, DTY+0.40, 0.32)   // screen
+    box(DX2-0.06, DTY+0.06, -0.29, DX2+0.01, DTY+0.38, 0.29)   // bezel
+    cylinder(DX2-0.04, DTY+0.04, 0.0, 0.025, 0.025, DTY+0.16, 8)
+    box(DX2-0.16, DTY+0.04, -0.14, DX2+0.08, DTY+0.06, 0.14)   // base
+
+    // Second monitor (right side, slightly smaller)
+    box(DX2-0.06, DTY+0.04, 0.52, DX2+0.02, DTY+0.32, 0.96)
+    box(DX2-0.06, DTY+0.06, 0.54, DX2+0.01, DTY+0.30, 0.94)
+    cylinder(DX2-0.04, DTY+0.04, 0.74, 0.022, 0.022, DTY+0.14, 8)
+    box(DX2-0.14, DTY+0.04, 0.64, DX2+0.06, DTY+0.06, 0.84)
+
+    // Keyboard + mouse
+    box(DX1+0.08, DTY+0.04, -0.22, DX1+0.44, DTY+0.06, 0.22)
+    box(DX1+0.08, DTY+0.04,  0.28, DX1+0.18, DTY+0.07, 0.40)
+
+    // PC tower (left end under desk)
+    box(DX1+0.04, FL, DZ1+0.08, DX1+0.22, FL+0.44, DZ1+0.30)
+    for (let i = 0; i < 3; i++)
+      line(DX1+0.04, FL+0.08+i*0.10, DZ1+0.08, DX1+0.04, FL+0.08+i*0.10, DZ1+0.30)
+    box(DX1+0.06, FL+0.38, DZ1+0.07, DX1+0.12, FL+0.42, DZ1+0.08)  // power btn
+
+    // Desk lamp (left side of desk surface)
+    cylinder(DX1+0.10, DTY+0.04, DZ1+0.24, 0.018, 0.018, DTY+0.30, 8)
+    line(DX1+0.10, DTY+0.30, DZ1+0.24, DX1+0.28, DTY+0.32, DZ1+0.12)
+    box(DX1+0.22, DTY+0.28, DZ1+0.06, DX1+0.40, DTY+0.32, DZ1+0.18)
+
+    // Notepad / papers on desk
+    box(DX1+0.06, DTY+0.04, DZ2-0.34, DX1+0.26, DTY+0.055, DZ2-0.10)
+    line(DX1+0.08, DTY+0.055, DZ2-0.30, DX1+0.24, DTY+0.055, DZ2-0.30)
+    line(DX1+0.08, DTY+0.055, DZ2-0.24, DX1+0.24, DTY+0.055, DZ2-0.24)
+  }
+
+  // ── OFFICE CHAIR (in front of desk, facing right wall) ────────
+  {
+    const CX = RX - 1.14, CZ = 0.10
+    box(CX-0.24, FL+0.48, CZ-0.24, CX+0.24, FL+0.54, CZ+0.24)  // seat
+    box(CX-0.24, FL+0.54, CZ-0.22, CX-0.14, FL+0.94, CZ+0.22)  // backrest
+    line(CX-0.22, FL+0.68, CZ-0.20, CX-0.22, FL+0.68, CZ+0.20) // lumbar
+    box(CX-0.20, FL+0.64, CZ-0.28, CX+0.20, FL+0.68, CZ-0.24)  // armrest L
+    box(CX-0.20, FL+0.64, CZ+0.24, CX+0.20, FL+0.68, CZ+0.28)  // armrest R
+    cylinder(CX, FL+0.10, CZ, 0.028, 0.028, FL+0.48, 8)
+    for (let i = 0; i < 5; i++) {
+      const a = (i / 5) * Math.PI * 2
+      line(CX, FL+0.10, CZ, CX+0.28*Math.cos(a), FL+0.04, CZ+0.28*Math.sin(a))
+    }
+    ring(CX, FL+0.04, CZ, 0.28, 0.28, 20)
+  }
+
+  // ── CARPET (in front of bed) ────────────────────────────────────
+  ring(0.0, FL+0.01, 0.14, 1.10, 0.76, 40)
+  ring(0.0, FL+0.01, 0.14, 0.94, 0.62, 40)
+
+  // ── DECORATIVE ITEMS ───────────────────────────────────────────
+  // Small plant on nightstand (left)
+  cylinder(BX1-0.22, FL+0.54, BZ2-0.27, 0.06, 0.06, FL+0.68, 10)
+  ring(BX1-0.22, FL+0.68, BZ2-0.27, 0.08, 0.08, 10)
+  for (let i = 0; i < 5; i++) {
+    const a = (i / 5) * Math.PI * 2
+    line(BX1-0.22, FL+0.68, BZ2-0.27,
+         BX1-0.22 + 0.10*Math.cos(a), FL+0.84, BZ2-0.27 + 0.10*Math.sin(a))
+  }
+
+  // Picture on back wall above bed
+  {
+    const p = V.length
+    V.push(
+      [-0.44, FL+0.96, RZ],[ 0.44, FL+0.96, RZ],
+      [ 0.44, CL-0.12, RZ],[-0.44, CL-0.12, RZ],
+    )
+    E.push([p,p+1],[p+1,p+2],[p+2,p+3],[p+3,p])
+    const ins = 0.04, q = V.length
+    V.push(
+      [-0.44+ins, FL+0.96+ins, RZ],[ 0.44-ins, FL+0.96+ins, RZ],
+      [ 0.44-ins, CL-0.12-ins, RZ],[-0.44+ins, CL-0.12-ins, RZ],
+    )
+    E.push([q,q+1],[q+1,q+2],[q+2,q+3],[q+3,q])
+    E.push([p,q],[p+1,q+1],[p+2,q+2],[p+3,q+3])
+    // simple artwork lines
+    line(0.0, FL+1.04, RZ, -0.22, CL-0.20, RZ)
+    line(0.0, FL+1.04, RZ,  0.22, CL-0.20, RZ)
+    line(-0.30, FL+1.00, RZ, 0.30, FL+1.00, RZ)
+  }
+
+  return { verts: V, edges: E }
+}
+
+const { verts, edges } = buildBedroom()
+
+// =================================================================
+//  ENGINE
+// =================================================================
+
+export default function BedroomViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.30, rotY: -0.52,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.70, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+      return { x: (x1/d)*fov*scale + W/2, y: (-y2/d)*fov*scale + H/2, z: z2 }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+      if (verts.length === 0) return
+      const proj = verts.map(v => project(v))
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) { if (p.z < zMin) zMin = p.z; if (p.z > zMax) zMax = p.z }
+      const zRange = zMax - zMin || 1
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a], pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+        ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3; ctx.stroke()
+      }
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath(); ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`; ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => { state.dragging=true; state.lastX=e.clientX; state.lastY=e.clientY; stopAutoRotate() }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX-state.lastX)*0.008; state.rotX += (e.clientY-state.lastY)*0.008
+      state.rotX = Math.max(-0.75,Math.min(0.75,state.rotX)); state.lastX=e.clientX; state.lastY=e.clientY
+    }
+    const onMouseUp = () => { state.dragging=false }
+    const onWheel = (e) => {
+      e.preventDefault(); state.zoom *= e.deltaY>0 ? 0.93 : 1.07
+      state.zoom = Math.max(0.35,Math.min(3.0,state.zoom)); stopAutoRotate()
+    }
+
+    let lastTX=0, lastTY=0, lastPinchDist=0
+    const onTouchStart = (e) => {
+      stopAutoRotate(); state.dragging=true
+      if (e.touches.length===1) { lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY }
+      else if (e.touches.length===2) lastPinchDist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length===1) {
+        state.rotY+=(e.touches[0].clientX-lastTX)*0.008; state.rotX+=(e.touches[0].clientY-lastTY)*0.008
+        state.rotX=Math.max(-0.75,Math.min(0.75,state.rotX)); lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY
+      } else if (e.touches.length===2) {
+        const dist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+        if (lastPinchDist) state.zoom*=dist/lastPinchDist
+        state.zoom=Math.max(0.35,Math.min(3.0,state.zoom)); lastPinchDist=dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging=false; lastPinchDist=0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+    const onKeyDown = (e) => { if (e.key==='Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId); clearTimeout(state.idleTimer); ro.disconnect(); setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown); window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp);   canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart);canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd);  window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="bdv-overlay" onClick={onClose}>
+      <div className="bdv-modal" onClick={e => e.stopPropagation()}>
+        <div className="bdv-header">
+          <div className="bdv-title-group">
+            <span className="bdv-label">3D Modell</span>
+            <h3 className="bdv-title">Schlafzimmer</h3>
+          </div>
+          <button className="bdv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="bdv-canvas-wrap">
+          <canvas ref={canvasRef} className={`bdv-canvas${ready ? ' bdv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="bdv-loader" aria-label="Wird geladen">
+              <div className="bdv-loader-ring" />
+              <span className="bdv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+        <div className="bdv-footer">
+          <span className="bdv-hint">Ziehen zum Drehen</span>
+          <span className="bdv-hint">Scrollen zum Zoomen</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/ClosetViewer/ClosetViewer.css

@@ -0,0 +1,162 @@
+.skv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: skv-fade-in 0.22s ease;
+}
+
+@keyframes skv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.skv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: skv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes skv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.skv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.skv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.skv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.skv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.skv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.skv-close svg { width: 14px; height: 14px; }
+
+.skv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.skv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.skv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.skv-canvas--ready { opacity: 1; }
+.skv-canvas:active { cursor: grabbing; }
+
+.skv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.skv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: skv-spin 0.85s linear infinite;
+}
+
+@keyframes skv-spin { to { transform: rotate(360deg); } }
+
+.skv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: skv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes skv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.skv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.skv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/ClosetViewer/ClosetViewer.jsx

@@ -0,0 +1,317 @@
+import { useEffect, useRef, useState } from 'react'
+import './ClosetViewer.css'
+
+// =================================================================
+//  FREESTANDING WARDROBE (Armoire) GEOMETRY
+// =================================================================
+
+function buildCloset() {
+  const V = [], E = []
+
+  function box(x1, y1, z1, x2, y2, z2) {
+    const b = V.length
+    V.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    E.push(
+      [b,b+1],[b+1,b+2],[b+2,b+3],[b+3,b],
+      [b+4,b+5],[b+5,b+6],[b+6,b+7],[b+7,b+4],
+      [b,b+4],[b+1,b+5],[b+2,b+6],[b+3,b+7],
+    )
+  }
+
+  function line(x1,y1,z1, x2,y2,z2) {
+    const b = V.length
+    V.push([x1,y1,z1],[x2,y2,z2])
+    E.push([b,b+1])
+  }
+
+  // ── DIMENSIONS ────────────────────────────────────────────────
+  const WX = 0.76   // half-width  → total 1.52 m
+  const WZ = 0.29   // half-depth  → total 0.58 m
+  const WH = 2.10   // carcass height
+  const FH = 0.10   // foot height below carcass base
+
+  // ── FEET (4 block feet) ────────────────────────────────────────
+  for (const [fx, fz] of [
+    [-WX+0.14, -WZ+0.08], [ WX-0.14, -WZ+0.08],
+    [-WX+0.14,  WZ-0.08], [ WX-0.14,  WZ-0.08],
+  ]) {
+    box(fx-0.04, -FH-0.04, fz-0.04, fx+0.04, -FH, fz+0.04)
+    box(fx-0.05, -FH, fz-0.05, fx+0.05, 0, fz+0.05)
+  }
+
+  // ── PLINTH (base rail, slightly proud of carcass) ──────────────
+  box(-WX-0.018, 0, -WZ-0.012, WX+0.018, 0.06, WZ+0.008)
+  box(-WX,       0.06, -WZ,    WX,       0.08, WZ)   // step in
+
+  // ── CARCASS SIDE PANELS ────────────────────────────────────────
+  const CB = 0.08   // carcass bottom (above plinth step)
+  const CT = WH     // carcass top
+  box(-WX,        CB, -WZ, -WX+0.022, CT, WZ)
+  box( WX-0.022,  CB, -WZ,  WX,       CT, WZ)
+
+  // ── TOP & BOTTOM HORIZONTALS ───────────────────────────────────
+  box(-WX+0.022, CT-0.022, -WZ, WX-0.022, CT, WZ)  // top panel
+  box(-WX+0.022, CB,       -WZ, WX-0.022, CB+0.022, WZ)  // bottom panel
+
+  // Back wall hint (just edges so depth reads cleanly)
+  line(-WX, CB, -WZ,  WX, CB, -WZ)
+  line(-WX, CT, -WZ,  WX, CT, -WZ)
+  line(-WX, CB, -WZ, -WX, CT, -WZ)
+  line( WX, CB, -WZ,  WX, CT, -WZ)
+
+  // ── CORNICE (3-step decorative top molding) ────────────────────
+  box(-WX-0.018, CT,      -WZ-0.012, WX+0.018, CT+0.048, WZ+0.006)  // step 1
+  box(-WX-0.040, CT+0.048,-WZ-0.032, WX+0.040, CT+0.090, WZ+0.020)  // step 2 (widest)
+  box(-WX-0.018, CT+0.090,-WZ-0.012, WX+0.018, CT+0.115, WZ+0.006)  // step 3 (cap)
+
+  // ── DOORS ──────────────────────────────────────────────────────
+  const LDX1 = -WX+0.024,  LDX2 = -0.013
+  const RDX1 =  0.013,     RDX2 =  WX-0.024
+  const DZ   = WZ+0.018    // door sits just proud of carcass front
+
+  box(LDX1, CB+0.010, WZ, LDX2, CT-0.010, DZ)
+  box(RDX1, CB+0.010, WZ, RDX2, CT-0.010, DZ)
+
+  // Door raised panel detail: each door has 2 panels (upper + lower)
+  const pI  = 0.055          // panel inset
+  const pMid = WH * 0.52     // horizontal mid-rail position
+
+  // Left door panels
+  box(LDX1+pI, CB+pI,      WZ+0.002, LDX2-pI, pMid-0.012, DZ-0.002)
+  box(LDX1+pI, pMid+0.012, WZ+0.002, LDX2-pI, CT-pI,      DZ-0.002)
+  // Right door panels
+  box(RDX1+pI, CB+pI,      WZ+0.002, RDX2-pI, pMid-0.012, DZ-0.002)
+  box(RDX1+pI, pMid+0.012, WZ+0.002, RDX2-pI, CT-pI,      DZ-0.002)
+
+  // ── HANDLES (vertical bar, inset toward centre gap) ────────────
+  const hY1 = 0.82, hY2 = 1.18
+  box(LDX2-0.050, hY1, WZ+0.018, LDX2-0.030, hY2, WZ+0.058)
+  box(RDX1+0.030, hY1, WZ+0.018, RDX1+0.050, hY2, WZ+0.058)
+  // Handle back brackets (top + bottom)
+  for (const hy of [hY1+0.04, hY2-0.04]) {
+    box(LDX2-0.052, hy-0.012, WZ+0.018, LDX2-0.028, hy+0.012, WZ+0.020)
+    box(RDX1+0.028, hy-0.012, WZ+0.018, RDX1+0.052, hy+0.012, WZ+0.020)
+  }
+
+  // ── HINGES ────────────────────────────────────────────────────
+  for (const hy of [CB+0.14, 1.05, CT-0.14]) {
+    box(LDX1-0.003, hy-0.026, WZ, LDX1+0.026, hy+0.026, WZ+0.010)
+    box(RDX2-0.026, hy-0.026, WZ, RDX2+0.003, hy+0.026, WZ+0.010)
+  }
+
+  // ── INTERIOR ────────────────────────────────────────────────────
+  // Mid shelf (splits interior into upper hanging + lower storage)
+  const MID_Y = 1.18
+  box(-WX+0.024, MID_Y, -WZ+0.016, WX-0.024, MID_Y+0.018, WZ-0.016)
+
+  // Upper: hanging rod
+  const rodY = MID_Y + 0.20 + (CT - MID_Y - 0.20) * 0.42
+  line(-WX+0.07, rodY, 0, WX-0.07, rodY, 0)
+  // 7 coat hangers on rod
+  for (let i = 0; i < 7; i++) {
+    const hx = -WX+0.14 + i * (WX*2 - 0.28) / 6
+    line(hx, rodY,      0, hx, rodY-0.04, 0)
+    line(hx, rodY-0.04, 0, hx-0.09, rodY-0.14, 0)
+    line(hx, rodY-0.04, 0, hx+0.09, rodY-0.14, 0)
+    line(hx-0.09, rodY-0.14, 0, hx+0.09, rodY-0.14, 0)
+  }
+  // Top inner shelf (above rod)
+  box(-WX+0.024, CT-0.19, -WZ+0.016, WX-0.024, CT-0.172, WZ-0.016)
+
+  // Lower: 2 drawers (front face lines)
+  const dh = (MID_Y - CB - 0.026) / 2
+  for (let i = 0; i < 2; i++) {
+    const dy1 = CB + 0.013 + i * dh
+    const dy2 = dy1 + dh
+    // Drawer front line (on back-plane as seen inside)
+    line(-WX+0.026, dy2, -WZ+0.018, WX-0.026, dy2, -WZ+0.018)
+    // Horizontal drawer handle
+    const mx = 0, hy_ = dy1 + dh*0.44
+    box(mx-0.12, hy_-0.012, WZ+0.019, mx+0.12, hy_+0.012, WZ+0.052)
+  }
+  // Small interior shelf in lower section
+  box(-WX+0.024, CB+0.55, -WZ+0.016, WX-0.024, CB+0.568, WZ-0.016)
+
+  return { verts: V, edges: E }
+}
+
+const { verts, edges } = buildCloset()
+
+// =================================================================
+//  ENGINE
+// =================================================================
+
+export default function ClosetViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.22, rotY: -0.40,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.92, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+      return { x: (x1/d)*fov*scale + W/2, y: (-y2/d)*fov*scale + H/2, z: z2 }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+      if (verts.length === 0) return
+      const proj = verts.map(v => project(v))
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) { if (p.z < zMin) zMin = p.z; if (p.z > zMax) zMax = p.z }
+      const zRange = zMax - zMin || 1
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a], pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+        ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3; ctx.stroke()
+      }
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath(); ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`; ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => { state.dragging=true; state.lastX=e.clientX; state.lastY=e.clientY; stopAutoRotate() }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX-state.lastX)*0.008; state.rotX += (e.clientY-state.lastY)*0.008
+      state.rotX = Math.max(-0.75,Math.min(0.75,state.rotX)); state.lastX=e.clientX; state.lastY=e.clientY
+    }
+    const onMouseUp = () => { state.dragging=false }
+    const onWheel = (e) => {
+      e.preventDefault(); state.zoom *= e.deltaY>0 ? 0.93 : 1.07
+      state.zoom = Math.max(0.30,Math.min(3.0,state.zoom)); stopAutoRotate()
+    }
+
+    let lastTX=0, lastTY=0, lastPinchDist=0
+    const onTouchStart = (e) => {
+      stopAutoRotate(); state.dragging=true
+      if (e.touches.length===1) { lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY }
+      else if (e.touches.length===2) lastPinchDist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length===1) {
+        state.rotY+=(e.touches[0].clientX-lastTX)*0.008; state.rotX+=(e.touches[0].clientY-lastTY)*0.008
+        state.rotX=Math.max(-0.75,Math.min(0.75,state.rotX)); lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY
+      } else if (e.touches.length===2) {
+        const dist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+        if (lastPinchDist) state.zoom*=dist/lastPinchDist
+        state.zoom=Math.max(0.30,Math.min(3.0,state.zoom)); lastPinchDist=dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging=false; lastPinchDist=0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+    const onKeyDown = (e) => { if (e.key==='Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId); clearTimeout(state.idleTimer); ro.disconnect(); setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown); window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp);   canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart);canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd);  window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="skv-overlay" onClick={onClose}>
+      <div className="skv-modal" onClick={e => e.stopPropagation()}>
+        <div className="skv-header">
+          <div className="skv-title-group">
+            <span className="skv-label">3D Modell</span>
+            <h3 className="skv-title">Schrank / Einbaumöbel</h3>
+          </div>
+          <button className="skv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="skv-canvas-wrap">
+          <canvas ref={canvasRef} className={`skv-canvas${ready ? ' skv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="skv-loader" aria-label="Wird geladen">
+              <div className="skv-loader-ring" />
+              <span className="skv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+        <div className="skv-footer">
+          <span className="skv-hint">Ziehen zum Drehen</span>
+          <span className="skv-hint">Scrollen zum Zoomen</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Contact/Contact.css

@@ -0,0 +1,192 @@
+.contact {
+  background: rgba(18, 18, 18, 0.68);
+  border-top: 1px solid var(--color-border);
+}
+
+.contact-inner {
+  display: grid;
+  grid-template-columns: 1fr 420px;
+  gap: var(--space-16);
+  align-items: start;
+}
+
+/* Left copy */
+.contact-copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.contact-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.contact-title {
+  font-size: clamp(2rem, 3.5vw, 3rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  line-height: 1.1;
+}
+
+.contact-body {
+  font-size: var(--font-size-md);
+  color: var(--color-text-muted);
+  line-height: 1.7;
+  max-width: 440px;
+}
+
+.contact-promises {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  margin-top: var(--space-4);
+}
+
+.contact-promise {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.contact-promise-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--color-accent-dim);
+  border: 1px solid var(--color-accent-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.contact-promise-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Right card */
+.contact-card {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  box-shadow: var(--shadow-accent);
+}
+
+.contact-card-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.contact-card-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-lg);
+  background: var(--color-accent-dim);
+  border: 1px solid var(--color-accent-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.contact-card-icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.contact-card-heading {
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1.2;
+}
+
+.contact-card-sub {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  margin-top: var(--space-1);
+}
+
+.contact-book-btn {
+  width: 100%;
+  justify-content: center;
+  font-size: 1rem;
+  padding: 1rem 1.5rem;
+  gap: var(--space-3);
+}
+
+.contact-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--color-text-faint);
+  font-size: var(--font-size-xs);
+}
+
+.contact-divider::before,
+.contact-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.contact-direct {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.contact-direct-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0.75rem 1rem;
+  background: var(--color-surface-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  transition: all var(--transition);
+}
+
+.contact-direct-link:hover {
+  border-color: var(--color-accent-border);
+  color: var(--color-text);
+  background: var(--color-accent-dim);
+}
+
+.contact-direct-link svg {
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.contact-card-note {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+  text-align: center;
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-border);
+}
+
+@media (max-width: 960px) {
+  .contact-inner {
+    grid-template-columns: 1fr;
+    max-width: 560px;
+  }
+}

src/components/Contact/Contact.jsx

@@ -0,0 +1,112 @@
+import './Contact.css'
+
+// Replace BOOKING_URL with your actual booking portal URL
+const BOOKING_URL = 'https://termine.superfice.de'
+
+export default function Contact() {
+  return (
+    <div className="contact section">
+      <div className="container">
+        <div className="contact-inner">
+
+          {/* Left: copy */}
+          <div className="contact-copy">
+            <span className="contact-label">Kontakt</span>
+            <h2 className="contact-title">Bereit für Ihr&nbsp;Aufmaß?</h2>
+            <p className="contact-body">
+              Buchen Sie Ihren Termin direkt online – wählen Sie Datum, Uhrzeit und
+              Aufmaßbereiche in unserem Buchungsportal. Schnell, unkompliziert, verbindlich.
+            </p>
+
+            <div className="contact-promises">
+              <div className="contact-promise">
+                <div className="contact-promise-icon" aria-hidden="true">
+                  <svg viewBox="0 0 20 20" fill="none">
+                    <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5"/>
+                    <path d="M10 6v4l2.5 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                  </svg>
+                </div>
+                Terminbestätigung innerhalb von Minuten
+              </div>
+              <div className="contact-promise">
+                <div className="contact-promise-icon" aria-hidden="true">
+                  <svg viewBox="0 0 20 20" fill="none">
+                    <path d="M4 10l4 4 8-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </div>
+                Aufmaß-Ergebnis innerhalb von 24 Stunden
+              </div>
+              <div className="contact-promise">
+                <div className="contact-promise-icon" aria-hidden="true">
+                  <svg viewBox="0 0 20 20" fill="none">
+                    <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                    <path d="M3 9h14M7 4V2M13 4V2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                  </svg>
+                </div>
+                Flexibel stornierbar bis 24 h vorher
+              </div>
+            </div>
+          </div>
+
+          {/* Right: CTA card */}
+          <div className="contact-card">
+            <div className="contact-card-top">
+              <div className="contact-card-icon" aria-hidden="true">
+                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <rect x="6" y="10" width="36" height="32" rx="3" stroke="currentColor" strokeWidth="2"/>
+                  <path d="M6 20h36" stroke="currentColor" strokeWidth="2"/>
+                  <path d="M16 6v8M32 6v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+                  <rect x="14" y="28" width="6" height="6" rx="1" fill="currentColor" opacity="0.6"/>
+                  <rect x="28" y="28" width="6" height="6" rx="1" fill="currentColor" opacity="0.3"/>
+                </svg>
+              </div>
+              <div>
+                <div className="contact-card-heading">Termin buchen</div>
+                <div className="contact-card-sub">Online · Sofort bestätigt</div>
+              </div>
+            </div>
+
+            <a
+              href={BOOKING_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn btn--primary contact-book-btn"
+            >
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+                <rect x="2" y="3" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                <path d="M2 8h14" stroke="currentColor" strokeWidth="1.5"/>
+                <path d="M6 1v4M12 1v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+              </svg>
+              Jetzt Termin wählen
+            </a>
+
+            <div className="contact-divider">
+              <span>oder direkt melden</span>
+            </div>
+
+            <div className="contact-direct">
+              <a href="mailto:info@superfice.de" className="contact-direct-link">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <rect x="1" y="3" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                  <path d="M1 5l7 5 7-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                </svg>
+                info@superfice.de
+              </a>
+              <a href="tel:+4930000000" className="contact-direct-link">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M3 2h3l1.5 3.5-2 1.5a8 8 0 003.5 3.5l1.5-2L14 10v3a1 1 0 01-1 1C6 14 2 8 2 3a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
+                </svg>
+                +49 30 000000
+              </a>
+            </div>
+
+            <p className="contact-card-note">
+              Mo–Fr, 8–18 Uhr · Antwort garantiert innerhalb von 24 h
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/CostCalculator/CostCalculator.css

@@ -0,0 +1,472 @@
+.calc {
+  background: rgba(13, 13, 13, 0.55);
+  border-top: 1px solid var(--color-border);
+}
+
+.calc-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.calc-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.calc-title {
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+
+.calc-subtitle {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+/* Card */
+.calc-card {
+  max-width: 760px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-10);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+/* Step indicator */
+.calc-steps {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.calc-step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1;
+}
+
+.calc-step-num {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+  transition: all var(--transition);
+}
+
+.calc-step-num svg {
+  width: 16px;
+  height: 16px;
+}
+
+.calc-step--active .calc-step-num {
+  background: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+
+.calc-step--done .calc-step-num {
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+  border-color: var(--color-accent-border);
+}
+
+.calc-step-label {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  transition: color var(--transition);
+  white-space: nowrap;
+}
+
+.calc-step--active .calc-step-label {
+  color: var(--color-text);
+}
+
+.calc-step-connector {
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+  margin: 0 var(--space-3);
+  min-width: 16px;
+}
+
+/* Panel */
+.calc-panel {
+  display: none;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.calc-panel--active {
+  display: flex;
+}
+
+.calc-panel-title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.4;
+}
+
+.calc-panel-title span {
+  color: var(--color-text-muted);
+  font-weight: 400;
+}
+
+.calc-panel-hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+  margin-top: calc(var(--space-6) * -1 + var(--space-2));
+}
+
+/* Service tiles */
+.calc-service-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+}
+
+.calc-service-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0.75rem var(--space-4);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all var(--transition);
+  text-align: left;
+}
+
+.calc-service-tile:hover {
+  border-color: var(--color-accent-border);
+  color: var(--color-text);
+  background: var(--color-surface-3);
+}
+
+.calc-service-tile--selected {
+  border-color: var(--color-accent) !important;
+  background: var(--color-accent-dim) !important;
+  color: var(--color-text) !important;
+}
+
+.calc-service-check {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1.5px solid var(--color-border);
+  background: var(--color-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all var(--transition);
+  color: var(--color-accent);
+}
+
+.calc-service-tile--selected .calc-service-check {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+}
+
+.calc-service-check svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Quantities */
+.calc-quantities {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.calc-qty-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.calc-qty-label {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.calc-qty-control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.calc-qty-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-size: var(--font-size-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition);
+  line-height: 1;
+}
+
+.calc-qty-btn:hover:not(:disabled) {
+  border-color: var(--color-accent-border);
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+}
+
+.calc-qty-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.calc-qty-value {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text);
+  min-width: 120px;
+  text-align: center;
+  padding: 0.5rem 1rem;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+
+/* Slider */
+.calc-slider {
+  width: 100%;
+  max-width: 360px;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: var(--color-surface-3);
+  border-radius: 2px;
+  outline: none;
+}
+
+.calc-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  cursor: pointer;
+  border: 2px solid var(--color-surface);
+  box-shadow: 0 0 0 2px var(--color-accent-border);
+}
+
+.calc-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  cursor: pointer;
+  border: 2px solid var(--color-surface);
+}
+
+/* PLZ row */
+.calc-plz-row {
+  display: flex;
+  gap: var(--space-4);
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.calc-plz-input-wrap {
+  flex: 1;
+  min-width: 180px;
+  max-width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.calc-plz-input {
+  width: 100%;
+  padding: 0.875rem 1rem;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  color: var(--color-text);
+  font-size: var(--font-size-base);
+  transition: border-color var(--transition);
+  outline: none;
+}
+
+.calc-plz-input:focus {
+  border-color: var(--color-accent);
+}
+
+.calc-plz-input--error {
+  border-color: #b03030 !important;
+}
+
+.calc-plz-error {
+  font-size: var(--font-size-xs);
+  color: #e05454;
+}
+
+/* Result */
+.calc-result {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.calc-result-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.calc-result-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.calc-result-row--note span:last-child {
+  color: var(--color-text-faint);
+  font-style: italic;
+}
+
+.calc-result-total {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.calc-result-price-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 500;
+}
+
+.calc-result-price {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.calc-result-tax {
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  color: var(--color-text-muted);
+  letter-spacing: 0;
+}
+
+.calc-result-cta {
+  align-self: flex-start;
+}
+
+.calc-result-hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+  line-height: 1.6;
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-4);
+}
+
+.calc-result-individual {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+/* Nav */
+.calc-nav {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-border);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .calc-card {
+    padding: var(--space-6);
+  }
+
+  .calc-service-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .calc-step-label {
+    display: none;
+  }
+
+  .calc-steps {
+    justify-content: center;
+  }
+
+  .calc-step {
+    flex: none;
+  }
+
+  .calc-plz-row {
+    flex-direction: column;
+  }
+
+  .calc-plz-input-wrap {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .calc-service-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/components/CostCalculator/CostCalculator.jsx

@@ -0,0 +1,381 @@
+import { useState, useCallback } from 'react'
+import {
+  BASE_PRICES,
+  QUANTITY_CONFIG,
+  calculateTotal,
+  calculateTravelCost,
+  calculateSubtotal,
+  hasIndividuell,
+} from '../../utils/pricing'
+import { fetchDistance } from '../../utils/api'
+import './CostCalculator.css'
+
+const BOOKING_URL = 'https://termin.superfice.de'
+
+const SERVICE_TILES = [
+  { id: 'kuche', label: 'Küche' },
+  { id: 'raum', label: 'Raum / Grundriss' },
+  { id: 'treppe', label: 'Treppe' },
+  { id: 'schrank', label: 'Schrank / Einbaumöbel' },
+  { id: 'bad', label: 'Bad' },
+  { id: 'fenster', label: 'Fenster & Fassade' },
+  { id: 'wintergarten', label: 'Wintergarten' },
+  { id: 'individuell', label: 'Individuell' },
+]
+
+function StepIndicator({ current }) {
+  const steps = ['Was?', 'Wie viel?', 'Wo?']
+  return (
+    <div className="calc-steps">
+      {steps.map((label, i) => {
+        const step = i + 1
+        const done = current > step
+        const active = current === step
+        return (
+          <div key={step} className={`calc-step${active ? ' calc-step--active' : ''}${done ? ' calc-step--done' : ''}`}>
+            <div className="calc-step-num">
+              {done ? (
+                <svg viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
+              ) : step}
+            </div>
+            <span className="calc-step-label">{label}</span>
+            {i < steps.length - 1 && <div className="calc-step-connector" />}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default function CostCalculator() {
+  const [step, setStep] = useState(1)
+  const [selectedServices, setSelectedServices] = useState([])
+  const [quantities, setQuantities] = useState({})
+  const [plz, setPlz] = useState('')
+  const [plzError, setPlzError] = useState('')
+  const [distance, setDistance] = useState(null)
+  const [loadingDist, setLoadingDist] = useState(false)
+  const [showResult, setShowResult] = useState(false)
+
+  const toggleService = (id) => {
+    setSelectedServices((prev) =>
+      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
+    )
+    if (!quantities[id]) {
+      setQuantities((prev) => ({
+        ...prev,
+        [id]: QUANTITY_CONFIG[id]?.min ?? 1,
+      }))
+    }
+  }
+
+  const setQty = (id, val) => {
+    const cfg = QUANTITY_CONFIG[id]
+    const clamped = Math.max(cfg.min, Math.min(cfg.max, Number(val)))
+    setQuantities((prev) => ({ ...prev, [id]: clamped }))
+  }
+
+  const handlePlzLookup = useCallback(async () => {
+    const cleaned = plz.replace(/\s/g, '')
+    if (!/^\d{5}$/.test(cleaned)) {
+      setPlzError('Bitte geben Sie eine gültige 5-stellige PLZ ein.')
+      return
+    }
+    setPlzError('')
+    setLoadingDist(true)
+    try {
+      const km = await fetchDistance(cleaned)
+      setDistance(km)
+      setShowResult(true)
+    } catch {
+      setPlzError('PLZ konnte nicht gefunden werden. Bitte prüfen Sie die Eingabe.')
+    } finally {
+      setLoadingDist(false)
+    }
+  }, [plz])
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') handlePlzLookup()
+  }
+
+  const canGoStep2 = selectedServices.length > 0
+  const canGoStep3 = canGoStep2
+
+  const total = showResult
+    ? calculateTotal(selectedServices, quantities, distance)
+    : null
+
+  const subtotal = calculateSubtotal(selectedServices, quantities)
+  const travelCost = calculateTravelCost(distance)
+  const isIndividuell = hasIndividuell(selectedServices)
+  const onlyIndividuell = selectedServices.length === 1 && isIndividuell
+
+  const buildBookingUrl = () => {
+    const params = new URLSearchParams()
+    if (plz) params.set('plz', plz)
+    if (total) params.set('preis', total)
+    selectedServices.forEach((id) => params.append('service', id))
+    return `${BOOKING_URL}?${params.toString()}`
+  }
+
+  return (
+    <div className="calc section">
+      <div className="container">
+        <div className="calc-header">
+          <span className="calc-label">Kostenrechner</span>
+          <h2 className="calc-title">Was kostet Ihr Aufmaß?</h2>
+          <p className="calc-subtitle">
+            Drei Schritte – und Sie haben einen Richtwert für Ihr Projekt.
+          </p>
+        </div>
+
+        <div className="calc-card">
+          <StepIndicator current={step} />
+
+          {/* Step 1 */}
+          <div className={`calc-panel${step === 1 ? ' calc-panel--active' : ''}`}>
+            <h3 className="calc-panel-title">
+              Schritt 1 – <span>Was möchten Sie aufmessen?</span>
+            </h3>
+            <p className="calc-panel-hint">Mehrfachauswahl möglich</p>
+            <div className="calc-service-grid">
+              {SERVICE_TILES.map(({ id, label }) => (
+                <button
+                  key={id}
+                  className={`calc-service-tile${selectedServices.includes(id) ? ' calc-service-tile--selected' : ''}`}
+                  onClick={() => toggleService(id)}
+                  type="button"
+                >
+                  <div className="calc-service-check">
+                    {selectedServices.includes(id) && (
+                      <svg viewBox="0 0 12 12" fill="none">
+                        <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    )}
+                  </div>
+                  {label}
+                </button>
+              ))}
+            </div>
+            <div className="calc-nav">
+              <button
+                className="btn btn--primary"
+                onClick={() => setStep(2)}
+                disabled={!canGoStep2}
+              >
+                Weiter
+              </button>
+            </div>
+          </div>
+
+          {/* Step 2 */}
+          <div className={`calc-panel${step === 2 ? ' calc-panel--active' : ''}`}>
+            <h3 className="calc-panel-title">
+              Schritt 2 – <span>Wie viel?</span>
+            </h3>
+
+            {onlyIndividuell ? (
+              <p className="calc-panel-hint" style={{ marginBottom: '1.5rem' }}>
+                Ihr Projekt ist individuell. Geben Sie Ihre PLZ ein – wir berechnen die Fahrtkosten und Sie buchen direkt Ihren Termin.
+              </p>
+            ) : (
+              <div className="calc-quantities">
+                {selectedServices
+                  .filter((id) => id !== 'individuell')
+                  .map((id) => {
+                    const cfg = QUANTITY_CONFIG[id]
+                    const tile = SERVICE_TILES.find((t) => t.id === id)
+                    const qty = quantities[id] ?? cfg.min
+                    return (
+                      <div key={id} className="calc-qty-row">
+                        <label className="calc-qty-label">{cfg.label}</label>
+                        <div className="calc-qty-control">
+                          <button
+                            className="calc-qty-btn"
+                            onClick={() => setQty(id, qty - cfg.step)}
+                            disabled={qty <= cfg.min}
+                            aria-label="Weniger"
+                          >−</button>
+                          <span className="calc-qty-value">
+                            {qty} {qty === 1 ? cfg.unit : cfg.unit + (cfg.unit.endsWith('e') ? 'n' : 'e')}
+                          </span>
+                          <button
+                            className="calc-qty-btn"
+                            onClick={() => setQty(id, qty + cfg.step)}
+                            disabled={qty >= cfg.max}
+                            aria-label="Mehr"
+                          >+</button>
+                        </div>
+                        {id === 'fenster' && (
+                          <input
+                            type="range"
+                            className="calc-slider"
+                            min={cfg.min}
+                            max={cfg.max}
+                            step={cfg.step}
+                            value={qty}
+                            onChange={(e) => setQty(id, e.target.value)}
+                          />
+                        )}
+                        {id === 'raum' && (
+                          <input
+                            type="range"
+                            className="calc-slider"
+                            min={cfg.min}
+                            max={cfg.max}
+                            step={cfg.step}
+                            value={qty}
+                            onChange={(e) => setQty(id, e.target.value)}
+                          />
+                        )}
+                      </div>
+                    )
+                  })}
+              </div>
+            )}
+
+            <div className="calc-nav">
+              <button className="btn btn--ghost" onClick={() => setStep(1)}>
+                Zurück
+              </button>
+              <button
+                className="btn btn--primary"
+                onClick={() => setStep(3)}
+                disabled={!canGoStep3}
+              >
+                Weiter
+              </button>
+            </div>
+          </div>
+
+          {/* Step 3 */}
+          <div className={`calc-panel${step === 3 ? ' calc-panel--active' : ''}`}>
+            <h3 className="calc-panel-title">
+              Schritt 3 – <span>Wo befindet sich das Objekt?</span>
+            </h3>
+            <p className="calc-panel-hint">
+              Wir berechnen die Fahrtkosten anhand der Entfernung zu unserem Standort.
+            </p>
+
+            <div className="calc-plz-row">
+              <div className="calc-plz-input-wrap">
+                <input
+                  type="text"
+                  className={`calc-plz-input${plzError ? ' calc-plz-input--error' : ''}`}
+                  placeholder="PLZ eingeben, z. B. 10115"
+                  value={plz}
+                  onChange={(e) => {
+                    setPlz(e.target.value)
+                    setPlzError('')
+                    setShowResult(false)
+                    setDistance(null)
+                  }}
+                  onKeyDown={handleKeyDown}
+                  maxLength={5}
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                />
+                {plzError && <p className="calc-plz-error">{plzError}</p>}
+              </div>
+              <button
+                className="btn btn--primary"
+                onClick={handlePlzLookup}
+                disabled={loadingDist}
+              >
+                {loadingDist ? 'Prüfe…' : 'Berechnen'}
+              </button>
+            </div>
+
+            {showResult && !onlyIndividuell && (
+              <div className="calc-result">
+                <div className="calc-result-breakdown">
+                  {selectedServices.filter((id) => id !== 'individuell').map((id) => {
+                    const qty = quantities[id] ?? QUANTITY_CONFIG[id]?.min ?? 1
+                    const tile = SERVICE_TILES.find((t) => t.id === id)
+                    return (
+                      <div key={id} className="calc-result-row">
+                        <span>{tile?.label} × {qty}</span>
+                        <span>{(BASE_PRICES[id] * qty).toLocaleString('de-DE')} €</span>
+                      </div>
+                    )
+                  })}
+                  {isIndividuell && (
+                    <div className="calc-result-row calc-result-row--note">
+                      <span>Individuell</span>
+                      <span>auf Anfrage</span>
+                    </div>
+                  )}
+                  {travelCost > 0 && (
+                    <div className="calc-result-row">
+                      <span>Fahrtkosten ({distance} km)</span>
+                      <span>{travelCost.toLocaleString('de-DE')} €</span>
+                    </div>
+                  )}
+                  {travelCost === 0 && distance !== null && (
+                    <div className="calc-result-row calc-result-row--note">
+                      <span>Fahrtkosten ({distance} km)</span>
+                      <span>inklusive</span>
+                    </div>
+                  )}
+                </div>
+
+                <div className="calc-result-total">
+                  <div className="calc-result-price-label">Geschätzter Preis ab</div>
+                  <div className="calc-result-price">
+                    {total.toLocaleString('de-DE')} €
+                    <span className="calc-result-tax">zzgl. MwSt.</span>
+                  </div>
+                </div>
+
+                <a
+                  href={buildBookingUrl()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="btn btn--primary calc-result-cta"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <rect x="1" y="2" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                    <path d="M1 7h14" stroke="currentColor" strokeWidth="1.5"/>
+                    <path d="M5 1v3M11 1v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                  </svg>
+                  Jetzt Termin buchen
+                </a>
+
+                <p className="calc-result-hint">
+                  Richtwert auf Basis typischer Projekte. Der finale Preis wird bei der Terminbuchung bestätigt.
+                </p>
+              </div>
+            )}
+
+            {showResult && onlyIndividuell && (
+              <div className="calc-result">
+                <p className="calc-result-individual">
+                  Für individuelle Projekte erstellen wir Ihnen gern ein maßgeschneidertes Angebot. Buchen Sie direkt einen Beratungstermin.
+                </p>
+                <a
+                  href={BOOKING_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="btn btn--primary calc-result-cta"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <rect x="1" y="2" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                    <path d="M1 7h14" stroke="currentColor" strokeWidth="1.5"/>
+                    <path d="M5 1v3M11 1v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                  </svg>
+                  Beratungstermin buchen
+                </a>
+              </div>
+            )}
+
+            <div className="calc-nav">
+              <button className="btn btn--ghost" onClick={() => { setStep(2); setShowResult(false) }}>
+                Zurück
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/CustomCursor/CustomCursor.css

@@ -0,0 +1,27 @@
+/* Hide native cursor on all elements when custom cursor is active */
+html:has(#venom-cursor),
+html:has(#venom-cursor) * {
+  cursor: none !important;
+}
+
+/* Canvas overlay — always on top */
+#venom-cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2147483647;
+}
+
+/* Touch / coarse pointer — restore system cursor */
+@media (pointer: coarse) {
+  html, html * {
+    cursor: auto !important;
+  }
+
+  #venom-cursor {
+    display: none !important;
+  }
+}

src/components/CustomCursor/CustomCursor.jsx

@@ -0,0 +1,231 @@
+/**
+ * CustomCursor
+ * Adapted from Experiment_backup/scripts/cursor.js
+ * — Segmented spinning reticle
+ * — Tentacles that spawn on movement and stretch toward the cursor
+ * — Web connections between nearby anchor points
+ * — Idle: cold silver-white  |  Hover: Superfice purple #8B3DB8
+ * Desktop / fine-pointer only. Touch devices fall back to system cursor.
+ */
+
+import { useEffect } from 'react'
+import './CustomCursor.css'
+
+const CONFIG = {
+  tentacleCount:  10,
+  triggerDist:    8,
+  maxLength:      300,
+  connectionDist: 150,
+  prediction:     3.5,
+
+  // Idle — cold silver-white
+  idleStroke: { r: 210, g: 220, b: 255 },
+  idleGlow:   { r: 160, g: 185, b: 255 },
+
+  // Hover — Superfice purple
+  hoverStroke: { r: 168, g:  85, b: 247 },
+  hoverGlow:   { r: 139, g:  61, b: 184 },
+}
+
+const HOVER_SEL = [
+  'a', 'button', '[role="button"]', 'select', 'label', 'input',
+  '.btn', '.wwm-tile', '.calc-service-tile', '.calc-qty-btn',
+  '.calc-service-tile', '.footer-link', '.footer-legal-link',
+  '.contact-direct-link', '.contact-book-btn',
+  '[onclick]', '.clickable',
+].join(',')
+
+function lerpColor(a, b, t) {
+  return {
+    r: (a.r + (b.r - a.r) * t) | 0,
+    g: (a.g + (b.g - a.g) * t) | 0,
+    b: (a.b + (b.b - a.b) * t) | 0,
+  }
+}
+
+class Tentacle {
+  constructor(x, y) {
+    this.anchor = { x, y }
+    this.dead   = false
+    this.dist   = 0
+    this.age    = 0
+  }
+
+  update(mx, my) {
+    const dx = mx - this.anchor.x
+    const dy = my - this.anchor.y
+    this.dist = Math.sqrt(dx * dx + dy * dy)
+    this.age++
+    if (this.dist > CONFIG.maxLength) this.dead = true
+  }
+
+  draw(ctx, mx, my, stroke, glow) {
+    if (this.dead) return
+    const tension   = Math.min(this.dist / CONFIG.maxLength, 1)
+    const fadeIn    = Math.min(this.age / 10, 1)
+    const lineAlpha = fadeIn * (1 - tension * 0.85) * 0.70
+    const dotAlpha  = fadeIn * (1 - tension) * 0.90
+    const lw        = Math.max(0.2, 1.1 * (1 - tension * 0.80))
+
+    // Glow pass
+    ctx.save()
+    ctx.shadowColor = `rgba(${glow.r},${glow.g},${glow.b},${lineAlpha * 0.55})`
+    ctx.shadowBlur  = 6
+    ctx.beginPath()
+    ctx.moveTo(mx, my)
+    ctx.lineTo(this.anchor.x, this.anchor.y)
+    ctx.strokeStyle = `rgba(${stroke.r},${stroke.g},${stroke.b},${lineAlpha})`
+    ctx.lineWidth   = lw
+    ctx.lineCap     = 'round'
+    ctx.stroke()
+    ctx.restore()
+
+    // Anchor dot
+    ctx.beginPath()
+    ctx.arc(this.anchor.x, this.anchor.y, 1.8 * (1 - tension), 0, Math.PI * 2)
+    ctx.fillStyle   = `rgba(${stroke.r},${stroke.g},${stroke.b},${dotAlpha})`
+    ctx.shadowColor = `rgba(${glow.r},${glow.g},${glow.b},${dotAlpha * 0.6})`
+    ctx.shadowBlur  = 4
+    ctx.fill()
+    ctx.shadowBlur  = 0
+  }
+}
+
+export default function CustomCursor({ enabled = true }) {
+  useEffect(() => {
+    // Touch / coarse pointer — skip entirely
+    if (window.matchMedia('(pointer: coarse)').matches) return
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+    if (!enabled) return
+
+    // Canvas
+    const canvas = document.createElement('canvas')
+    canvas.id = 'venom-cursor'
+    document.body.appendChild(canvas)
+    const ctx = canvas.getContext('2d')
+
+    const resize = () => {
+      canvas.width  = window.innerWidth
+      canvas.height = window.innerHeight
+    }
+    resize()
+    window.addEventListener('resize', resize)
+
+    // State
+    const mouse    = { x: 0, y: 0 }
+    const oldMouse = { x: 0, y: 0 }
+    let isHover    = false
+    let colorT     = 0
+    let rotation   = 0
+    const tentacles = []
+    let rafId
+
+    const onMouseMove = (e) => {
+      mouse.x = e.clientX
+      mouse.y = e.clientY
+      const el = document.elementFromPoint(e.clientX, e.clientY)
+      isHover = !!el && (el.matches(HOVER_SEL) || !!el.closest(HOVER_SEL))
+    }
+
+    // Hide native cursor
+    document.documentElement.style.cursor = 'none'
+
+    document.addEventListener('mousemove', onMouseMove, { passive: true })
+
+    function render() {
+      if (document.hidden) { rafId = requestAnimationFrame(render); return }
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      // Lerp colour
+      colorT += ((isHover ? 1 : 0) - colorT) * 0.12
+      const stroke = lerpColor(CONFIG.idleStroke, CONFIG.hoverStroke, colorT)
+      const glow   = lerpColor(CONFIG.idleGlow,   CONFIG.hoverGlow,   colorT)
+
+      // Spawn tentacle on movement
+      const moved = Math.hypot(mouse.x - oldMouse.x, mouse.y - oldMouse.y)
+      if (moved > CONFIG.triggerDist) {
+        const vx = mouse.x - oldMouse.x
+        const vy = mouse.y - oldMouse.y
+        const tx = mouse.x + vx * CONFIG.prediction + (Math.random() - 0.5) * 60
+        const ty = mouse.y + vy * CONFIG.prediction + (Math.random() - 0.5) * 60
+        tentacles.push(new Tentacle(tx, ty))
+        oldMouse.x = mouse.x
+        oldMouse.y = mouse.y
+      }
+      if (tentacles.length > CONFIG.tentacleCount) tentacles.shift()
+
+      // Update + draw tentacles
+      for (let i = tentacles.length - 1; i >= 0; i--) {
+        tentacles[i].update(mouse.x, mouse.y)
+        if (tentacles[i].dead) { tentacles.splice(i, 1); continue }
+        tentacles[i].draw(ctx, mouse.x, mouse.y, stroke, glow)
+      }
+
+      // Web connections between nearby anchors
+      for (let i = 0; i < tentacles.length; i++) {
+        for (let j = i + 1; j < tentacles.length; j++) {
+          const a = tentacles[i].anchor
+          const b = tentacles[j].anchor
+          const d = Math.hypot(a.x - b.x, a.y - b.y)
+          if (d < CONFIG.connectionDist) {
+            const alpha = (1 - d / CONFIG.connectionDist) * 0.28
+            ctx.beginPath()
+            ctx.moveTo(a.x, a.y)
+            ctx.lineTo(b.x, b.y)
+            ctx.strokeStyle = `rgba(${stroke.r},${stroke.g},${stroke.b},${alpha})`
+            ctx.lineWidth   = 0.5
+            ctx.stroke()
+          }
+        }
+      }
+
+      // Segmented reticle ring
+      rotation += isHover ? 0.040 : 0.016
+      const ringR   = isHover ? 9 : 7
+      const gapHalf = 0.28
+      const segs = [
+        [rotation + gapHalf,                    rotation + Math.PI * 0.5 - gapHalf],
+        [rotation + Math.PI * 0.5 + gapHalf,   rotation + Math.PI       - gapHalf],
+        [rotation + Math.PI       + gapHalf,   rotation + Math.PI * 1.5 - gapHalf],
+        [rotation + Math.PI * 1.5 + gapHalf,   rotation + Math.PI * 2.0 - gapHalf],
+      ]
+
+      ctx.save()
+      ctx.shadowColor = `rgba(${glow.r},${glow.g},${glow.b},0.75)`
+      ctx.shadowBlur  = isHover ? 14 : 8
+      ctx.strokeStyle = `rgba(${stroke.r},${stroke.g},${stroke.b},0.90)`
+      ctx.lineWidth   = isHover ? 1.4 : 1.1
+      ctx.lineCap     = 'round'
+      segs.forEach(([start, end]) => {
+        ctx.beginPath()
+        ctx.arc(mouse.x, mouse.y, ringR, start, end)
+        ctx.stroke()
+      })
+      ctx.restore()
+
+      // Centre dot
+      ctx.save()
+      ctx.shadowColor = `rgba(${glow.r},${glow.g},${glow.b},0.90)`
+      ctx.shadowBlur  = isHover ? 10 : 6
+      ctx.beginPath()
+      ctx.arc(mouse.x, mouse.y, isHover ? 2.2 : 1.6, 0, Math.PI * 2)
+      ctx.fillStyle = `rgba(${stroke.r},${stroke.g},${stroke.b},1)`
+      ctx.fill()
+      ctx.restore()
+
+      rafId = requestAnimationFrame(render)
+    }
+
+    render()
+
+    return () => {
+      cancelAnimationFrame(rafId)
+      window.removeEventListener('resize', resize)
+      document.removeEventListener('mousemove', onMouseMove)
+      document.documentElement.style.cursor = ''
+      canvas.remove()
+    }
+  }, [enabled])
+
+  return null  // DOM element created imperatively
+}

src/components/Footer/Footer.css

@@ -0,0 +1,127 @@
+.footer {
+  position: relative;
+  z-index: 1;
+  background: rgba(18, 18, 18, 0.82);
+  border-top: 1px solid var(--color-border);
+  padding: var(--space-16) 0 var(--space-10);
+}
+
+.footer-top {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-12);
+  margin-bottom: var(--space-12);
+  padding-bottom: var(--space-10);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-width: 320px;
+}
+
+.footer-logo {
+  display: inline-flex;
+}
+
+.footer-logo-svg {
+  height: 26px;
+  width: auto;
+}
+
+.footer-tagline {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: 1.65;
+}
+
+.footer-network {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+}
+
+.footer-links {
+  display: flex;
+  gap: var(--space-16);
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.footer-col-label {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-1);
+}
+
+.footer-link {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-faint);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+  transition: color var(--transition);
+}
+
+.footer-link:hover {
+  color: var(--color-text);
+}
+
+.footer-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-6);
+  flex-wrap: wrap;
+}
+
+.footer-address {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+}
+
+.footer-legal {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+}
+
+.footer-legal-link {
+  color: var(--color-text-muted);
+  transition: color var(--transition);
+}
+
+.footer-legal-link:hover {
+  color: var(--color-text);
+}
+
+.footer-sep {
+  color: var(--color-text-faint);
+}
+
+@media (max-width: 768px) {
+  .footer-top {
+    flex-direction: column;
+  }
+
+  .footer-links {
+    gap: var(--space-8);
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

src/components/Footer/Footer.jsx

@@ -0,0 +1,68 @@
+import { Link, useLocation } from 'react-router-dom'
+import './Footer.css'
+
+const Logo = () => (
+  <svg viewBox="0 0 180 36" xmlns="http://www.w3.org/2000/svg" className="footer-logo-svg" aria-label="Superfice">
+    <rect x="0" y="6" width="3" height="24" rx="1.5" fill="#8B3DB8" />
+    <text x="10" y="27" fontFamily="Inter, sans-serif" fontSize="20" fontWeight="700" letterSpacing="2.5" fill="#F0F0F0">SUPERFICE</text>
+  </svg>
+)
+
+export default function Footer() {
+  const location = useLocation()
+
+  const scrollTo = (id) => {
+    if (location.pathname !== '/') {
+      window.location.href = `/#${id}`
+      return
+    }
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <footer className="footer">
+      <div className="container">
+        <div className="footer-top">
+          <div className="footer-brand">
+            <Link to="/" className="footer-logo">
+              <Logo />
+            </Link>
+            <p className="footer-tagline">
+              Millimetergenaue 3D-Aufmaße für Handwerk, Innenausbau und Architektur.
+            </p>
+            <p className="footer-network">
+              Ein Unternehmen im Profice-Netzwerk.
+            </p>
+          </div>
+
+          <div className="footer-links">
+            <div className="footer-col">
+              <span className="footer-col-label">Leistungen</span>
+              <button className="footer-link" onClick={() => scrollTo('aufmass')}>Aufmaßbereiche</button>
+              <button className="footer-link" onClick={() => scrollTo('rechner')}>Kostenrechner</button>
+              <button className="footer-link" onClick={() => scrollTo('leistung')}>Ablauf</button>
+            </div>
+            <div className="footer-col">
+              <span className="footer-col-label">Unternehmen</span>
+              <button className="footer-link" onClick={() => scrollTo('warum')}>Warum Superfice</button>
+              <button className="footer-link" onClick={() => scrollTo('kontakt')}>Kontakt</button>
+            </div>
+          </div>
+        </div>
+
+        <div className="footer-bottom">
+          <div className="footer-address">
+            Superfice KG · Musterstraße 1 · 10115 Berlin · +49 30 000000 · info@superfice.de
+          </div>
+          <div className="footer-legal">
+            <Link to="/impressum" className="footer-legal-link">Impressum</Link>
+            <span className="footer-sep" aria-hidden="true">|</span>
+            <Link to="/datenschutz" className="footer-legal-link">Datenschutz</Link>
+            <span className="footer-sep" aria-hidden="true">·</span>
+            <span>© 2026 Superfice KG</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/Hero/Hero.css

@@ -0,0 +1,204 @@
+.hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(139, 61, 184, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(139, 61, 184, 0.1) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
+}
+
+.hero-glow {
+  display: none; /* replaced by SpaceBackground nebulas */
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 8rem;
+  padding-bottom: 6rem;
+  gap: var(--space-6);
+}
+
+.hero-logo-mark {
+  margin-bottom: var(--space-2);
+}
+
+.hero-logo-mark svg {
+  width: 48px;
+  height: 48px;
+}
+
+.hero-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+  padding: 0.375rem 1rem;
+  border: 1px solid var(--color-accent-border);
+  border-radius: 100px;
+  background: var(--color-accent-dim);
+}
+
+.hero-headline {
+  font-size: clamp(2.75rem, 6vw, 5rem);
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  max-width: 700px;
+}
+
+.hero-subline {
+  font-size: clamp(1rem, 1.8vw, 1.25rem);
+  color: var(--color-text-muted);
+  max-width: 560px;
+  line-height: 1.65;
+}
+
+.hero-actions {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  margin-top: var(--space-2);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.hero-cta {
+  font-size: 1rem;
+  padding: 1rem 2.25rem;
+  gap: var(--space-3);
+}
+
+.hero-cta-secondary {
+  font-size: 1rem;
+  padding: 1rem 2rem;
+}
+
+/* Stats bar */
+.hero-stats {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-top: var(--space-6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: rgba(255,255,255,0.03);
+  overflow: hidden;
+}
+
+.hero-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-5) var(--space-8);
+  flex: 1;
+  border-right: 1px solid var(--color-border);
+}
+
+.hero-stat:last-child {
+  border-right: none;
+}
+
+.hero-stat-value {
+  font-size: var(--font-size-xl);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--color-accent);
+  line-height: 1;
+}
+
+.hero-stat-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.hero-scroll {
+  position: absolute;
+  bottom: 2.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.hero-scroll-line {
+  width: 1px;
+  height: 48px;
+  background: linear-gradient(to bottom, var(--color-accent), transparent);
+  animation: scrollPulse 2s ease-in-out infinite;
+}
+
+@keyframes scrollPulse {
+  0%, 100% { opacity: 0.3; transform: scaleY(1); }
+  50% { opacity: 1; transform: scaleY(1.1); }
+}
+
+@media (max-width: 768px) {
+  .hero-headline br {
+    display: none;
+  }
+
+  .hero-subline br {
+    display: none;
+  }
+
+  .hero-scroll {
+    display: none;
+  }
+
+  .hero-stats {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .hero-stat {
+    flex: 1 1 45%;
+    min-width: 120px;
+  }
+
+  .hero-stat:nth-child(2) {
+    border-right: none;
+  }
+
+  .hero-stat:nth-child(3) {
+    border-top: 1px solid var(--color-border);
+    border-right: 1px solid var(--color-border);
+  }
+
+  .hero-stat:nth-child(4) {
+    border-top: 1px solid var(--color-border);
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .hero-cta,
+  .hero-cta-secondary {
+    width: 100%;
+    justify-content: center;
+  }
+}

src/components/Hero/Hero.jsx

@@ -0,0 +1,77 @@
+import './Hero.css'
+
+const BOOKING_URL = 'https://termine.superfice.de'
+
+const STATS = [
+  { value: '±1 mm', label: 'Messgenauigkeit' },
+  { value: '< 24 h', label: 'Lieferzeit' },
+  { value: '8', label: 'Aufmaßbereiche' },
+  { value: 'CAD', label: 'Direkt nutzbar' },
+]
+
+export default function Hero() {
+  return (
+    <div className="hero">
+      <div className="hero-bg">
+        <div className="hero-grid" />
+        <div className="hero-glow" />
+      </div>
+
+      <div className="hero-content container">
+        <div className="hero-logo-mark" aria-hidden="true">
+          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0" y="8" width="6" height="32" rx="3" fill="#8B3DB8" opacity="0.9" />
+            <rect x="10" y="16" width="6" height="24" rx="3" fill="#8B3DB8" opacity="0.6" />
+            <rect x="20" y="22" width="6" height="18" rx="3" fill="#8B3DB8" opacity="0.35" />
+          </svg>
+        </div>
+
+        <div className="hero-label">3D-Aufmaß · Handwerk · Architektur</div>
+
+        <h1 className="hero-headline">
+          Präzision beginnt<br />beim Aufmaß.
+        </h1>
+
+        <p className="hero-subline">
+          Millimetergenaue 3D-Aufmaße für Handwerk, Innenausbau und Architektur.
+          <br />Fertig aufbereitet für Ihre Planungssoftware.
+        </p>
+
+        <div className="hero-actions">
+          <a
+            href={BOOKING_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn--primary hero-cta"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <rect x="1" y="2" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+              <path d="M1 7h14" stroke="currentColor" strokeWidth="1.5"/>
+              <path d="M5 1v3M11 1v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+            Termin vereinbaren
+          </a>
+          <button
+            className="btn btn--outline hero-cta-secondary"
+            onClick={() => document.getElementById('rechner')?.scrollIntoView({ behavior: 'smooth' })}
+          >
+            Kosten berechnen
+          </button>
+        </div>
+
+        <div className="hero-stats" role="list">
+          {STATS.map((s) => (
+            <div key={s.value} className="hero-stat" role="listitem">
+              <span className="hero-stat-value">{s.value}</span>
+              <span className="hero-stat-label">{s.label}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="hero-scroll" aria-hidden="true">
+          <div className="hero-scroll-line" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/KitchenViewer/KitchenViewer.css

@@ -0,0 +1,162 @@
+.kv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: kv-fade-in 0.22s ease;
+}
+
+@keyframes kv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.kv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: kv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes kv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.kv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.kv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.kv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.kv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.kv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.kv-close svg { width: 14px; height: 14px; }
+
+.kv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.kv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.kv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.kv-canvas--ready { opacity: 1; }
+.kv-canvas:active { cursor: grabbing; }
+
+.kv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.kv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: kv-spin 0.85s linear infinite;
+}
+
+@keyframes kv-spin { to { transform: rotate(360deg); } }
+
+.kv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: kv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes kv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.kv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.kv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/KitchenViewer/KitchenViewer.jsx

@@ -0,0 +1,578 @@
+import { useEffect, useRef, useState } from 'react'
+import './KitchenViewer.css'
+
+// =================================================================
+//  KITCHEN GEOMETRY
+// =================================================================
+
+function buildKitchen() {
+  const V = [], E = []
+
+  function ring(cx, y, cz, rx, rz, n = 24) {
+    const b = V.length
+    for (let i = 0; i < n; i++) {
+      const a = (i / n) * Math.PI * 2
+      V.push([cx + rx * Math.cos(a), y, cz + rz * Math.sin(a)])
+    }
+    for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    return b
+  }
+
+  function connectRings(b1, b2, n) {
+    for (let i = 0; i < n; i++) E.push([b1 + i, b2 + i])
+  }
+
+  function box(x1, y1, z1, x2, y2, z2) {
+    const b = V.length
+    V.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    E.push(
+      [b,b+1],[b+1,b+2],[b+2,b+3],[b+3,b],
+      [b+4,b+5],[b+5,b+6],[b+6,b+7],[b+7,b+4],
+      [b,b+4],[b+1,b+5],[b+2,b+6],[b+3,b+7],
+    )
+  }
+
+  function line(x1,y1,z1, x2,y2,z2) {
+    const b = V.length
+    V.push([x1,y1,z1],[x2,y2,z2])
+    E.push([b,b+1])
+  }
+
+  function cylinder(cx, y1, cz, rx, rz, y2, n = 16) {
+    const b1 = ring(cx, y1, cz, rx, rz, n)
+    const b2 = ring(cx, y2, cz, rx, rz, n)
+    connectRings(b1, b2, n)
+  }
+
+  // ── ROOM ──────────────────────────────────────────────────────
+  const RX = 1.75, RZ = 2.30, FL = -0.50, CL = 1.35
+
+  const rc = V.length
+  V.push(
+    [-RX,FL,-RZ],[RX,FL,-RZ],[RX,FL, RZ],[-RX,FL, RZ],
+    [-RX,CL,-RZ],[RX,CL,-RZ],[RX,CL, RZ],[-RX,CL, RZ],
+  )
+  E.push(
+    [rc,rc+1],[rc+1,rc+2],[rc+2,rc+3],[rc+3,rc],
+    [rc+4,rc+5],[rc+5,rc+6],[rc+6,rc+7],[rc+7,rc+4],
+    [rc,rc+4],[rc+1,rc+5],[rc+2,rc+6],[rc+3,rc+7],
+  )
+
+  // Door frame (front wall, left side)
+  {
+    const d = V.length
+    V.push([-1.38,FL,-RZ],[-1.38,FL+1.78,-RZ],[-0.62,FL,-RZ],[-0.62,FL+1.78,-RZ])
+    E.push([d,d+1],[d+2,d+3],[d+1,d+3])
+  }
+  // Door panel (open inward ~37°)
+  {
+    const hw = 0.76, hh = 1.78, ang = 0.65
+    const fx = -1.38 + hw * Math.cos(ang)
+    const fz = -RZ   + hw * Math.sin(ang)
+    const d = V.length
+    V.push([-1.38,FL,-RZ],[-1.38,FL+hh,-RZ],[fx,FL,fz],[fx,FL+hh,fz])
+    E.push([d,d+1],[d+2,d+3],[d,d+2],[d+1,d+3])
+    line(-1.38, FL+0.89, -RZ, fx, FL+0.89, fz)
+    for (const hy of [FL+0.08, FL+0.89, FL+1.66]) {
+      box(-1.42, hy, -RZ, -1.38, hy+0.05, -RZ+0.04)
+    }
+    const hpx = -1.38 + 0.58*hw*Math.cos(ang)
+    const hpz = -RZ   + 0.58*hw*Math.sin(ang)
+    box(hpx-0.025, FL+0.89, hpz-0.025, hpx+0.025, FL+0.99, hpz+0.025)
+  }
+
+  // Window above sink (back wall z=RZ)
+  {
+    const w = V.length
+    V.push([-1.50,0.70,RZ],[-0.62,0.70,RZ],[-1.50,1.18,RZ],[-0.62,1.18,RZ])
+    E.push([w,w+1],[w+2,w+3],[w,w+2],[w+1,w+3])
+    V.push([-1.06,0.70,RZ],[-1.06,1.18,RZ])
+    E.push([w+4,w+5])
+    V.push([-1.50,0.94,RZ],[-0.62,0.94,RZ])
+    E.push([w+6,w+7])
+    // sill
+    box(-1.54, 0.66, RZ-0.06, -0.58, 0.70, RZ)
+  }
+
+  // Small window (right wall x=RX)
+  {
+    const w = V.length
+    V.push([RX,0.42,-0.50],[RX,0.42,0.40],[RX,0.96,-0.50],[RX,0.96,0.40])
+    E.push([w,w+1],[w+2,w+3],[w,w+2],[w+1,w+3])
+    V.push([RX,0.69,-0.50],[RX,0.69,0.40])
+    E.push([w+4,w+5])
+  }
+
+  // Ceiling pendant (center)
+  ring(-0.10, CL, -0.20, 0.22, 0.22, 20)
+  ring(-0.10, CL, -0.20, 0.09, 0.09, 14)
+  line(-0.10, CL, -0.20, -0.10, CL-0.22, -0.20)
+
+  // ── CABINET DIMENSIONS ────────────────────────────────────────
+  const CTH = 0.40   // countertop y
+  const CD  = 0.60   // lower cabinet depth
+  const CF  = RZ - CD  // 1.70 — lower cabinet front face
+  const UCB = 0.84   // upper cabinet bottom y
+  const UCT = 1.26   // upper cabinet top y
+  const UCF = RZ - 0.36  // 1.94 — upper cabinet front face
+
+  // ── BACK WALL LOWER CABINETS (full width) ─────────────────────
+  box(-RX, FL, CF, RX, CTH, RZ)
+  // Door dividers (6 vertical lines on front face)
+  for (const cx of [-1.25, -0.75, -0.25, 0.25, 0.75, 1.25]) {
+    line(cx, FL+0.04, CF, cx, CTH-0.04, CF)
+  }
+  // Door handles
+  for (let i = -3; i < 3; i++) {
+    const hx = (i + 0.5) * 0.50
+    box(hx-0.10, 0.06, CF-0.01, hx+0.10, 0.09, CF)
+  }
+
+  // Countertop slab
+  box(-RX, CTH, CF-0.04, RX, CTH+0.05, RZ)
+
+  // ── BACK WALL UPPER CABINETS (full width) ─────────────────────
+  box(-RX, UCB, UCF, RX, UCT, RZ)
+  // Door dividers
+  for (const cx of [-1.25, -0.75, -0.25, 0.25, 0.75, 1.25]) {
+    line(cx, UCB+0.04, UCF, cx, UCT-0.04, UCF)
+  }
+  // Handles
+  for (let i = -3; i < 3; i++) {
+    const hx = (i + 0.5) * 0.50
+    box(hx-0.08, UCB+0.06, UCF-0.01, hx+0.08, UCB+0.10, UCF)
+  }
+
+  // ── RIGHT WALL CABINETS (partial, z=0.70..2.30) ───────────────
+  const RWD = 0.60
+  const RWCF = RX - RWD  // 1.15
+  box(RWCF, FL, 0.70, RX, CTH, RZ)
+  // Countertop
+  box(RWCF-0.04, CTH, 0.70, RX, CTH+0.05, RZ)
+  // Door dividers
+  for (const cz of [1.10, 1.60, 2.05]) {
+    line(RWCF, FL+0.04, cz, RWCF, CTH-0.04, cz)
+  }
+  // Upper cabinets right wall
+  box(RX-0.36, UCB, 0.82, RX, UCT, RZ)
+  for (const cz of [1.20, 1.72]) {
+    line(RX-0.36, UCB+0.04, cz, RX-0.36, UCT-0.04, cz)
+  }
+
+  // ── SINGLE BASIN SINK with draining board (back wall, left zone) ──
+  const SKCX = -1.06, SKCZ = RZ - CD * 0.5
+  // Outer countertop rim
+  box(SKCX-0.50, CTH+0.01, SKCZ-0.23, SKCX+0.24, CTH+0.04, SKCZ+0.23)
+  // Deep basin (right 55%)
+  box(SKCX-0.04, CTH+0.01, SKCZ-0.19, SKCX+0.20, CTH-0.13, SKCZ+0.19)
+  // Drain ring at basin bottom
+  ring(SKCX+0.10, CTH-0.12, SKCZ+0.10, 0.035, 0.035, 10)
+  // Draining board (left 45%, slightly raised flat surface)
+  box(SKCX-0.46, CTH+0.01, SKCZ-0.19, SKCX-0.04, CTH+0.025, SKCZ+0.19)
+  // 5 drainage grooves running front-to-back
+  for (let g = 0; g < 5; g++) {
+    const gx = SKCX - 0.42 + g * 0.075
+    line(gx, CTH+0.026, SKCZ-0.16, gx, CTH+0.026, SKCZ+0.16)
+  }
+  // ── Gooseneck faucet ──
+  {
+    const FX = SKCX - 0.06, FZbase = RZ - 0.08
+    cylinder(FX, CTH+0.03, FZbase, 0.024, 0.024, CTH+0.30, 8)
+    ring(FX, CTH+0.03, FZbase, 0.042, 0.042, 10)
+    // Bezier gooseneck curve in YZ plane (curves up then forward over basin)
+    const p0y = CTH+0.30, p0z = FZbase
+    const p1y = CTH+0.46, p1z = RZ - 0.24
+    const p2y = CTH+0.30, p2z = SKCZ
+    for (let i = 0; i < 10; i++) {
+      const t1 = i / 10, t2 = (i + 1) / 10
+      const by1 = (1-t1)**2*p0y + 2*(1-t1)*t1*p1y + t1**2*p2y
+      const bz1 = (1-t1)**2*p0z + 2*(1-t1)*t1*p1z + t1**2*p2z
+      const by2 = (1-t2)**2*p0y + 2*(1-t2)*t2*p1y + t2**2*p2y
+      const bz2 = (1-t2)**2*p0z + 2*(1-t2)*t2*p1z + t2**2*p2z
+      line(FX, by1, bz1, FX, by2, bz2)
+    }
+    // Spout tip pointing down into basin
+    line(FX, p2y, p2z, FX, p2y - 0.09, p2z)
+    ring(FX, p2y - 0.09, p2z, 0.018, 0.018, 8)
+  }
+  // P-trap drain
+  line(SKCX+0.10, CTH-0.13, SKCZ+0.10, SKCX+0.10, CTH-0.28, SKCZ+0.10)
+  line(SKCX+0.10, CTH-0.28, SKCZ+0.10, SKCX+0.10, CTH-0.28, SKCZ+0.18)
+  line(SKCX+0.10, CTH-0.28, SKCZ+0.18, SKCX+0.10, CTH-0.20, SKCZ+0.18)
+  line(SKCX+0.10, CTH-0.20, SKCZ+0.18, SKCX+0.10, CTH-0.20, RZ)
+
+  // Dishwasher (right of sink, in lower cabinet)
+  box(-0.52, FL+0.01, CF, -0.02, CTH-0.01, CF+0.02)
+  box(-0.46, CTH-0.07, CF-0.01, -0.08, CTH-0.04, CF)  // handle
+  box(-0.50, CTH-0.12, CF, -0.04, CTH-0.04, CF+0.01)  // control strip
+
+  // ── STOVE / COOKTOP (back wall, right-center) ─────────────────
+  const STOX = 0.55, STOZ = RZ - CD * 0.5
+  // Surface
+  box(STOX-0.40, CTH+0.01, STOZ-0.30, STOX+0.40, CTH+0.03, STOZ+0.30)
+  // 4 burner rings
+  for (const [bx, bz] of [
+    [STOX-0.20, STOZ-0.14],[STOX+0.20, STOZ-0.14],
+    [STOX-0.20, STOZ+0.14],[STOX+0.20, STOZ+0.14],
+  ]) {
+    ring(bx, CTH+0.03, bz, 0.12, 0.12, 22)
+    ring(bx, CTH+0.03, bz, 0.055, 0.055, 12)
+    ring(bx, CTH+0.03, bz, 0.020, 0.020, 8)
+  }
+  // Control knobs (front row)
+  for (let i = 0; i < 4; i++) {
+    const kx = STOX - 0.27 + i * 0.18
+    cylinder(kx, CTH+0.03, CF+0.05, 0.030, 0.030, CTH+0.09, 8)
+    ring(kx, CTH+0.09, CF+0.05, 0.014, 0.014, 6)
+  }
+  // Oven (below stove)
+  box(STOX-0.40, FL+0.16, CF, STOX+0.40, CTH-0.04, CF+0.02)
+  box(STOX-0.34, FL+0.20, CF, STOX+0.34, CTH-0.08, CF+0.01)  // window
+  box(STOX-0.28, CTH-0.08, CF-0.01, STOX+0.28, CTH-0.05, CF) // handle
+
+  // ── EXHAUST HOOD (above stove) ────────────────────────────────
+  const HDX = STOX, HDZ = STOZ
+  // Sloped hood body
+  box(HDX-0.42, CTH+0.60, HDZ-0.32, HDX+0.42, CTH+0.70, HDZ+0.32)
+  box(HDX-0.28, CTH+0.70, HDZ-0.22, HDX+0.28, UCB-0.02, HDZ+0.22)
+  box(HDX-0.14, UCB-0.02, HDZ-0.14, HDX+0.14, UCT+0.10, HDZ+0.14)
+  // Grill ring
+  ring(HDX, CTH+0.62, HDZ, 0.20, 0.20, 18)
+  // Under-hood lights
+  box(HDX-0.32, CTH+0.58, HDZ-0.07, HDX-0.14, CTH+0.62, HDZ+0.07)
+  box(HDX+0.14, CTH+0.58, HDZ-0.07, HDX+0.32, CTH+0.62, HDZ+0.07)
+  // Speed buttons
+  for (let i = 0; i < 3; i++) {
+    box(HDX-0.38+i*0.12, CTH+0.64, HDZ-0.32, HDX-0.30+i*0.12, CTH+0.68, HDZ-0.30)
+  }
+
+  // Microwave (upper cabinet, right of hood)
+  box(1.00, UCB+0.02, UCF, 1.62, UCB+0.24, UCF-0.28)
+  box(1.04, UCB+0.05, UCF, 1.48, UCB+0.21, UCF-0.01)  // door glass
+  box(1.48, UCB+0.05, UCF, 1.60, UCB+0.21, UCF-0.01)  // control panel
+  cylinder(1.54, UCB+0.13, UCF-0.01, 0.032, 0.032, UCB+0.17, 8)  // dial
+
+  // ── REFRIGERATOR (right wall, near front) ─────────────────────
+  const RFX1 = RWCF - 0.02, RFX2 = RX
+  const RFZ1 = -1.90, RFZ2 = -1.10, RFZMID = (RFZ1 + RFZ2) * 0.5
+  const RFSPLIT = FL + 0.72
+  box(RFX1, FL, RFZ1, RFX2, FL+1.80, RFZ2)
+  // Horizontal split (freezer bottom / fridge top) on door face
+  line(RFX1, RFSPLIT, RFZ1, RFX1, RFSPLIT, RFZ2)
+  // Vertical center seam on upper French doors
+  line(RFX1, RFSPLIT, RFZMID, RFX1, FL+1.80, RFZMID)
+  // Upper door handles (left and right halves)
+  box(RFX1-0.02, FL+1.20, RFZ1+0.08, RFX1, FL+1.34, RFZ1+0.10)
+  box(RFX1-0.02, FL+1.20, RFZMID+0.04, RFX1, FL+1.34, RFZMID+0.06)
+  // Lower freezer handle
+  box(RFX1-0.02, FL+0.38, RFZ1+0.08, RFX1, FL+0.52, RFZ1+0.10)
+  // Ice/water dispenser panel on left upper door
+  box(RFX1-0.03, FL+0.84, RFZ1+0.10, RFX1, FL+1.10, RFZ1+0.32)
+  for (let i = 0; i < 3; i++) {
+    box(RFX1-0.015, FL+1.04-i*0.065, RFZ1+0.13, RFX1-0.005, FL+1.08-i*0.065, RFZ1+0.20)
+  }
+  // Dispenser outlet recess
+  box(RFX1-0.03, FL+0.84, RFZ1+0.14, RFX1-0.01, FL+0.90, RFZ1+0.28)
+  // Temperature display (top center)
+  box(RFX1-0.02, FL+1.64, RFZMID-0.07, RFX1, FL+1.70, RFZMID+0.07)
+  // Bottom ventilation grille (4 horizontal slots)
+  for (let g = 0; g < 4; g++) {
+    line(RFX1, FL+0.03+g*0.05, RFZ1, RFX1, FL+0.03+g*0.05, RFZ2)
+  }
+  // Top vent strip
+  box(RFX1, FL+1.72, RFZ1+0.02, RFX2, FL+1.78, RFZ2-0.02)
+  // Hinges on far side (z=RFZ2)
+  for (const hy of [RFSPLIT+0.06, FL+1.62]) {
+    box(RFX2-0.04, hy, RFZ2-0.08, RFX2, hy+0.08, RFZ2)
+  }
+  box(RFX2-0.04, FL+0.10, RFZ2-0.08, RFX2, FL+0.18, RFZ2)
+  box(RFX2-0.04, RFSPLIT-0.08, RFZ2-0.08, RFX2, RFSPLIT, RFZ2)
+  // Interior shelf edge visible at split
+  line(RFX1, RFSPLIT+0.06, RFZ1+0.02, RFX2, RFSPLIT+0.06, RFZ1+0.02)
+  // Brand logo area
+  box(RFX1-0.01, FL+1.52, RFZMID-0.10, RFX1, FL+1.56, RFZMID+0.10)
+
+  // ── KITCHEN ISLAND (center room) ──────────────────────────────
+  const ISX = 0.0, ISZ = -0.15
+  box(ISX-0.60, FL, ISZ-0.32, ISX+0.60, CTH, ISZ+0.32)
+  // Countertop overhang (front for stools)
+  box(ISX-0.62, CTH, ISZ-0.50, ISX+0.62, CTH+0.05, ISZ+0.34)
+  // Cabinet door lines
+  line(ISX, FL+0.04, ISZ+0.32, ISX, CTH-0.04, ISZ+0.32)
+  line(ISX, FL+0.04, ISZ-0.32, ISX, CTH-0.04, ISZ-0.32)
+  // Island handle
+  box(ISX-0.18, 0.14, ISZ+0.33, ISX+0.18, 0.18, ISZ+0.32)
+
+  // Pendant lights above island
+  for (const px of [ISX-0.30, ISX+0.30]) {
+    line(px, CL, ISZ+0.05, px, CL-0.30, ISZ+0.05)
+    ring(px, CL-0.30, ISZ+0.05, 0.09, 0.09, 14)
+    ring(px, CL-0.38, ISZ+0.05, 0.06, 0.06, 10)
+  }
+
+  // ── DETAILS ───────────────────────────────────────────────────
+  // Knife block on counter
+  box(1.38, CTH+0.05, CF+0.06, 1.56, CTH+0.22, CF+0.14)
+  // 4 knife handles sticking up
+  for (let i = 0; i < 4; i++) {
+    line(1.40+i*0.04, CTH+0.22, CF+0.10, 1.38+i*0.04, CTH+0.40, CF+0.10)
+  }
+
+  // Fruit bowl on island
+  ring(ISX+0.22, CTH+0.05, ISZ+0.10, 0.12, 0.12, 18)
+  ring(ISX+0.22, CTH+0.05, ISZ+0.10, 0.07, 0.07, 14)
+
+  // Towel rail on oven handle area
+  line(STOX-0.28, FL+0.08, CF-0.01, STOX+0.28, FL+0.08, CF-0.01)
+
+  // Paper towel holder on counter (right side)
+  cylinder(1.30, CTH+0.05, CF+0.10, 0.025, 0.025, CTH+0.24, 8)
+  ring(1.30, CTH+0.24, CF+0.10, 0.06, 0.06, 12)
+
+  return { verts: V, edges: E }
+}
+
+const { verts, edges } = buildKitchen()
+
+// =================================================================
+//  ENGINE — do not touch below this line
+// =================================================================
+
+export default function KitchenViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.32, rotY: -0.50,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.72, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+
+      return {
+        x: (x1  / d) * fov * scale + W / 2,
+        y: (-y2 / d) * fov * scale + H / 2,
+        z: z2,
+      }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+
+      if (verts.length === 0) return
+
+      const proj = verts.map(v => project(v))
+
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) {
+        if (p.z < zMin) zMin = p.z
+        if (p.z > zMax) zMax = p.z
+      }
+      const zRange = zMax - zMin || 1
+
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a]
+        const pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+
+        ctx.beginPath()
+        ctx.moveTo(pa.x, pa.y)
+        ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3
+        ctx.stroke()
+      }
+
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`
+        ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => {
+      state.dragging = true
+      state.lastX = e.clientX
+      state.lastY = e.clientY
+      stopAutoRotate()
+    }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX - state.lastX) * 0.008
+      state.rotX += (e.clientY - state.lastY) * 0.008
+      state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+      state.lastX  = e.clientX
+      state.lastY  = e.clientY
+    }
+    const onMouseUp = () => { state.dragging = false }
+
+    const onWheel = (e) => {
+      e.preventDefault()
+      state.zoom *= e.deltaY > 0 ? 0.93 : 1.07
+      state.zoom  = Math.max(0.35, Math.min(3.0, state.zoom))
+      stopAutoRotate()
+    }
+
+    let lastTX = 0, lastTY = 0, lastPinchDist = 0
+
+    const onTouchStart = (e) => {
+      stopAutoRotate()
+      state.dragging = true
+      if (e.touches.length === 1) {
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        lastPinchDist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+      }
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length === 1) {
+        state.rotY += (e.touches[0].clientX - lastTX) * 0.008
+        state.rotX += (e.touches[0].clientY - lastTY) * 0.008
+        state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+        if (lastPinchDist) state.zoom *= dist / lastPinchDist
+        state.zoom = Math.max(0.35, Math.min(3.0, state.zoom))
+        lastPinchDist = dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging = false; lastPinchDist = 0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+
+    const onKeyDown = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId)
+      clearTimeout(state.idleTimer)
+      ro.disconnect()
+      setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown)
+      window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp)
+      canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart)
+      canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd)
+      window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="kv-overlay" onClick={onClose}>
+      <div className="kv-modal" onClick={e => e.stopPropagation()}>
+
+        <div className="kv-header">
+          <div className="kv-title-group">
+            <span className="kv-label">3D Modell</span>
+            <h3 className="kv-title">Küche</h3>
+          </div>
+          <button className="kv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+
+        <div className="kv-canvas-wrap">
+          <canvas ref={canvasRef} className={`kv-canvas${ready ? ' kv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="kv-loader" aria-label="Wird geladen">
+              <div className="kv-loader-ring" />
+              <span className="kv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+
+        <div className="kv-footer">
+          <span className="kv-hint">Ziehen zum Drehen</span>
+          <span className="kv-hint">Scrollen zum Zoomen</span>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/components/Navigation/Navigation.css

@@ -0,0 +1,257 @@
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  transition: background var(--transition), box-shadow var(--transition);
+}
+
+.nav--scrolled {
+  background: rgba(11, 11, 11, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 1px 0 var(--color-border);
+}
+
+.nav-inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 var(--section-padding-x);
+  height: 68px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.nav-logo-svg {
+  height: 28px;
+  width: auto;
+}
+
+.nav-hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  padding: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.nav-hamburger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--color-text);
+  border-radius: 2px;
+  transition: all var(--transition);
+}
+
+.nav--open .nav-hamburger span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.nav--open .nav-hamburger span:nth-child(2) {
+  opacity: 0;
+}
+
+.nav--open .nav-hamburger span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-4);
+}
+
+/* Nav links — centered column */
+.nav-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.nav-link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--color-text-muted);
+  padding: 0.375rem 0.625rem;
+  position: relative;
+  transition: color var(--transition);
+  white-space: nowrap;
+}
+
+/* Underline */
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0.625rem;
+  right: 0.625rem;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.30);
+  transform: scaleX(1);
+  transition: background var(--transition);
+}
+
+.nav-link:hover {
+  color: var(--color-text);
+}
+
+.nav-link:hover::after {
+  background: var(--color-accent);
+}
+
+/* Mobile-only copies of links — hidden on desktop */
+.nav-link--mob { display: none; }
+
+.nav-mob-sep {
+  display: none;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.10);
+  margin: 0.5rem 0;
+}
+
+/* Cursor toggle */
+.cursor-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cursor-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.cursor-toggle__label {
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  transition: color var(--transition);
+  margin-right: 4px;
+}
+
+.cursor-toggle:hover .cursor-toggle__label {
+  color: var(--color-text);
+}
+
+.cursor-toggle__track {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
+  flex-shrink: 0;
+}
+
+.cursor-toggle__track--on {
+  background: rgba(139, 61, 184, 0.45);
+  border-color: rgba(139, 61, 184, 0.7);
+  box-shadow: 0 0 8px rgba(139, 61, 184, 0.4);
+}
+
+.cursor-toggle__thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.45);
+  transition: transform var(--transition), background var(--transition);
+}
+
+.cursor-toggle__track--on .cursor-toggle__thumb {
+  transform: translateX(16px);
+  background: #c084fc;
+}
+
+.nav-cta {
+  font-size: 0.8125rem;
+  padding: 0.625rem 1.375rem;
+}
+
+@media (pointer: coarse) {
+  .cursor-toggle {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .nav-inner {
+    grid-template-columns: 1fr auto;
+  }
+
+  .nav-hamburger {
+    display: flex;
+  }
+
+  .nav-actions {
+    display: none;
+    position: absolute;
+    top: 68px;
+    left: 0;
+    right: 0;
+    background: rgba(11, 11, 11, 0.97);
+    backdrop-filter: blur(12px);
+    padding: 1rem var(--section-padding-x) 1.5rem;
+    border-top: 1px solid var(--color-border);
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.125rem;
+  }
+
+  .nav-actions--open {
+    display: flex;
+  }
+
+  .nav-link--mob {
+    display: block;
+    font-size: 0.9375rem;
+    padding: 0.65rem 0.25rem;
+    text-align: left;
+  }
+
+  .nav-link--mob::after {
+    display: none;
+  }
+
+  .nav-mob-sep {
+    display: block;
+  }
+
+  .nav-cta {
+    text-align: center;
+    justify-content: center;
+    margin-top: 0.25rem;
+  }
+}

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import './Navigation.css'
+
+const Logo = () => (
+  <svg viewBox="0 0 180 36" xmlns="http://www.w3.org/2000/svg" className="nav-logo-svg" aria-label="Superfice">
+    <rect x="0" y="6" width="3" height="24" rx="1.5" fill="#8B3DB8" />
+    <text x="10" y="27" fontFamily="Inter, sans-serif" fontSize="20" fontWeight="700" letterSpacing="2.5" fill="#F0F0F0">SUPERFICE</text>
+  </svg>
+)
+
+export default function Navigation({ customCursor = true, onToggleCursor }) {
+  const [scrolled, setScrolled] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const location = useLocation()
+  const isHome = location.pathname === '/'
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 40)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  useEffect(() => {
+    setMenuOpen(false)
+  }, [location])
+
+  const scrollTo = (id) => {
+    setMenuOpen(false)
+    if (!isHome) {
+      window.location.href = `/#${id}`
+      return
+    }
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <nav className={`nav${scrolled ? ' nav--scrolled' : ''}${menuOpen ? ' nav--open' : ''}`}>
+      <div className="nav-inner">
+        <Link to="/" className="nav-logo">
+          <Logo />
+        </Link>
+
+        <button
+          className="nav-hamburger"
+          onClick={() => setMenuOpen(!menuOpen)}
+          aria-label="Menü"
+          aria-expanded={menuOpen}
+        >
+          <span /><span /><span />
+        </button>
+
+        <div className="nav-links" role="list">
+          <button className="nav-link" onClick={() => scrollTo('leistung')}>Leistungen</button>
+          <button className="nav-link" onClick={() => scrollTo('aufmass')}>Aufmaß</button>
+          <button className="nav-link" onClick={() => scrollTo('rechner')}>Preise</button>
+          <button className="nav-link" onClick={() => scrollTo('referenzen')}>Referenzen</button>
+          <button className="nav-link" onClick={() => scrollTo('kontakt')}>Kontakt</button>
+        </div>
+
+        <div className={`nav-actions${menuOpen ? ' nav-actions--open' : ''}`}>
+          <button className="nav-link nav-link--mob" onClick={() => scrollTo('leistung')}>Leistungen</button>
+          <button className="nav-link nav-link--mob" onClick={() => scrollTo('aufmass')}>Aufmaß</button>
+          <button className="nav-link nav-link--mob" onClick={() => scrollTo('rechner')}>Preise</button>
+          <button className="nav-link nav-link--mob" onClick={() => scrollTo('referenzen')}>Referenzen</button>
+          <button className="nav-link nav-link--mob" onClick={() => scrollTo('kontakt')}>Kontakt</button>
+          <span className="nav-mob-sep" aria-hidden="true" />
+          <label className="cursor-toggle" title={customCursor ? 'Custom cursor aktiv' : 'Standard cursor aktiv'}>
+            <span className="cursor-toggle__label">
+              {customCursor ? 'Custom' : 'Default'}
+            </span>
+            <span className={`cursor-toggle__track${customCursor ? ' cursor-toggle__track--on' : ''}`}>
+              <span className="cursor-toggle__thumb" />
+            </span>
+            <input
+              type="checkbox"
+              checked={customCursor}
+              onChange={onToggleCursor}
+              className="cursor-toggle__input"
+              aria-label="Custom cursor umschalten"
+            />
+          </label>
+          <button className="btn btn--primary nav-cta" onClick={() => scrollTo('kontakt')}>
+            Termin vereinbaren
+          </button>
+        </div>
+      </div>
+    </nav>
+  )
+}

src/components/PainPoint/PainPoint.css

@@ -0,0 +1,30 @@
+.painpoint {
+  padding: var(--section-padding-y) 0;
+  background: rgba(18, 18, 18, 0.68);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.painpoint .container--narrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-8);
+  text-align: center;
+}
+
+.painpoint-line {
+  width: 60px;
+  height: 2px;
+  background: var(--color-accent);
+  border-radius: 2px;
+}
+
+.painpoint-text {
+  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+  max-width: 680px;
+}

src/components/PainPoint/PainPoint.jsx

@@ -0,0 +1,15 @@
+import './PainPoint.css'
+
+export default function PainPoint() {
+  return (
+    <div className="painpoint">
+      <div className="container--narrow">
+        <div className="painpoint-line" aria-hidden="true" />
+        <p className="painpoint-text">
+          Ein falsch gemessener Raum kostet Sie mehr als eine zweite Anfahrt.
+        </p>
+        <div className="painpoint-line" aria-hidden="true" />
+      </div>
+    </div>
+  )
+}

src/components/References/References.css

@@ -0,0 +1,77 @@
+.refs {
+  background: var(--color-bg);
+  border-top: 1px solid var(--color-border);
+}
+
+.refs-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.refs-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.refs-title {
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+
+.refs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: var(--space-6);
+  max-width: 900px;
+}
+
+.ref-card {
+  padding: var(--space-8);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.ref-quote-mark {
+  font-size: 4rem;
+  line-height: 1;
+  color: var(--color-accent);
+  font-family: Georgia, serif;
+  margin-bottom: calc(var(--space-6) * -1);
+}
+
+.ref-quote {
+  font-size: var(--font-size-md);
+  color: var(--color-text);
+  line-height: 1.65;
+  font-style: italic;
+}
+
+.ref-author {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-border);
+}
+
+.ref-name {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.ref-company {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}

src/components/References/References.jsx

@@ -0,0 +1,40 @@
+import './References.css'
+
+// Hidden initially, shown when real testimonials are available
+// Set SHOW_REFERENCES = true and populate TESTIMONIALS to activate
+const SHOW_REFERENCES = false
+
+const TESTIMONIALS = [
+  // {
+  //   quote: "Das Aufmaß war innerhalb eines Tages fertig – und direkt in unsere Planungssoftware importierbar. Keine Korrekturen nötig.",
+  //   name: "Max Mustermann",
+  //   company: "Schreinerei Mustermann GmbH",
+  // },
+]
+
+export default function References() {
+  if (!SHOW_REFERENCES || TESTIMONIALS.length === 0) return null
+
+  return (
+    <div className="refs section">
+      <div className="container">
+        <div className="refs-header">
+          <span className="refs-label">Referenzen</span>
+          <h2 className="refs-title">Was unsere Kunden sagen.</h2>
+        </div>
+        <div className="refs-grid">
+          {TESTIMONIALS.map((t, i) => (
+            <div key={i} className="ref-card">
+              <div className="ref-quote-mark" aria-hidden="true">"</div>
+              <p className="ref-quote">{t.quote}</p>
+              <div className="ref-author">
+                <span className="ref-name">{t.name}</span>
+                <span className="ref-company">{t.company}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/RoomViewer/RoomViewer.css

@@ -0,0 +1,162 @@
+.rv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: rv-fade-in 0.22s ease;
+}
+
+@keyframes rv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.rv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: rv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes rv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.rv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.rv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.rv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.rv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.rv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.rv-close svg { width: 14px; height: 14px; }
+
+.rv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.rv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.rv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.rv-canvas--ready { opacity: 1; }
+.rv-canvas:active { cursor: grabbing; }
+
+.rv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.rv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: rv-spin 0.85s linear infinite;
+}
+
+@keyframes rv-spin { to { transform: rotate(360deg); } }
+
+.rv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: rv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes rv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.rv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.rv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/RoomViewer/RoomViewer.jsx

@@ -0,0 +1,628 @@
+import { useEffect, useRef, useState } from 'react'
+import './RoomViewer.css'
+
+// =================================================================
+//  LIVING ROOM GEOMETRY
+// =================================================================
+
+function buildRoom() {
+  const V = [], E = []
+
+  function ring(cx, y, cz, rx, rz, n = 24) {
+    const b = V.length
+    for (let i = 0; i < n; i++) {
+      const a = (i / n) * Math.PI * 2
+      V.push([cx + rx * Math.cos(a), y, cz + rz * Math.sin(a)])
+    }
+    for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    return b
+  }
+
+  function connectRings(b1, b2, n) {
+    for (let i = 0; i < n; i++) E.push([b1 + i, b2 + i])
+  }
+
+  function box(x1, y1, z1, x2, y2, z2) {
+    const b = V.length
+    V.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    E.push(
+      [b,b+1],[b+1,b+2],[b+2,b+3],[b+3,b],
+      [b+4,b+5],[b+5,b+6],[b+6,b+7],[b+7,b+4],
+      [b,b+4],[b+1,b+5],[b+2,b+6],[b+3,b+7],
+    )
+  }
+
+  function line(x1,y1,z1, x2,y2,z2) {
+    const b = V.length
+    V.push([x1,y1,z1],[x2,y2,z2])
+    E.push([b,b+1])
+  }
+
+  function cylinder(cx, y1, cz, rx, rz, y2, n = 16) {
+    const b1 = ring(cx, y1, cz, rx, rz, n)
+    const b2 = ring(cx, y2, cz, rx, rz, n)
+    connectRings(b1, b2, n)
+  }
+
+  // ── ROOM ──────────────────────────────────────────────────────
+  const RX = 2.10, RZ = 2.80, FL = -0.50, CL = 1.38
+
+  const rc = V.length
+  V.push(
+    [-RX,FL,-RZ],[RX,FL,-RZ],[RX,FL, RZ],[-RX,FL, RZ],
+    [-RX,CL,-RZ],[RX,CL,-RZ],[RX,CL, RZ],[-RX,CL, RZ],
+  )
+  E.push(
+    [rc,rc+1],[rc+1,rc+2],[rc+2,rc+3],[rc+3,rc],
+    [rc+4,rc+5],[rc+5,rc+6],[rc+6,rc+7],[rc+7,rc+4],
+    [rc,rc+4],[rc+1,rc+5],[rc+2,rc+6],[rc+3,rc+7],
+  )
+
+  // ── DOOR (front wall z=-RZ, next to small window) ─────────────
+  {
+    const d = V.length
+    V.push([-0.50,FL,-RZ],[-0.50,FL+1.80,-RZ],[0.28,FL,-RZ],[0.28,FL+1.80,-RZ])
+    E.push([d,d+1],[d+2,d+3],[d+1,d+3])
+  }
+  // Door panel open inward ~35°
+  {
+    const hw = 0.78, hh = 1.80, ang = 0.62
+    const fx = -0.50 + hw * Math.cos(ang)
+    const fz = -RZ   + hw * Math.sin(ang)
+    const d = V.length
+    V.push([-0.50,FL,-RZ],[-0.50,FL+hh,-RZ],[fx,FL,fz],[fx,FL+hh,fz])
+    E.push([d,d+1],[d+2,d+3],[d,d+2],[d+1,d+3])
+    // Mid-panel line
+    line(-0.50, FL+0.90, -RZ, fx, FL+0.90, fz)
+    // Hinges
+    for (const hy of [FL+0.08, FL+0.90, FL+1.68]) {
+      box(-0.52, hy, -RZ, -0.48, hy+0.06, -RZ+0.04)
+    }
+    // Handle
+    const hpx = -0.50 + 0.58*hw*Math.cos(ang)
+    const hpz = -RZ   + 0.58*hw*Math.sin(ang)
+    box(hpx-0.025, FL+0.90, hpz-0.025, hpx+0.025, FL+1.00, hpz+0.025)
+    line(hpx, FL+1.00, hpz, hpx+0.05, FL+0.94, hpz-0.04)
+  }
+
+  // ── LARGE WINDOW (right wall x=RX) ────────────────────────────
+  {
+    const w = V.length
+    V.push([RX,0.52,0.60],[RX,0.52,2.10],[RX,CL-0.10,0.60],[RX,CL-0.10,2.10])
+    E.push([w,w+1],[w+2,w+3],[w,w+2],[w+1,w+3])
+    // Vertical center bar
+    V.push([RX,0.52,1.35],[RX,CL-0.10,1.35])
+    E.push([w+4,w+5])
+    // Horizontal mid bar
+    V.push([RX,0.90,0.60],[RX,0.90,2.10])
+    E.push([w+6,w+7])
+    // Sill
+    box(RX-0.08, 0.48, 0.56, RX, 0.52, 2.14)
+  }
+
+  // Small window (front wall, right side)
+  {
+    const w = V.length
+    V.push([0.40,0.68,-RZ],[1.40,0.68,-RZ],[0.40,1.18,-RZ],[1.40,1.18,-RZ])
+    E.push([w,w+1],[w+2,w+3],[w,w+2],[w+1,w+3])
+    V.push([0.90,0.68,-RZ],[0.90,1.18,-RZ])
+    E.push([w+4,w+5])
+    box(0.36,0.64,-RZ, 1.44,0.68,-RZ+0.06)
+  }
+
+  // ── CEILING PENDANT (large, above center) ─────────────────────
+  ring(0.0, CL, -0.10, 0.32, 0.32, 24)
+  ring(0.0, CL, -0.10, 0.12, 0.12, 16)
+  line(0.0, CL, -0.10, 0.0, CL-0.28, -0.10)
+  ring(0.0, CL-0.28, -0.10, 0.28, 0.28, 20)
+  ring(0.0, CL-0.38, -0.10, 0.20, 0.20, 16)
+
+  // ── TV MEDIA CONSOLE (back wall z=RZ) ─────────────────────────
+  box(-0.82, FL, 2.56, 0.82, FL+0.46, 2.80)
+  // Console door dividers
+  line(-0.28, FL+0.04, 2.56, -0.28, FL+0.42, 2.56)
+  line( 0.28, FL+0.04, 2.56,  0.28, FL+0.42, 2.56)
+  // Console handles
+  box(-0.58, FL+0.20, 2.55, -0.38, FL+0.24, 2.56)
+  box( 0.38, FL+0.20, 2.55,  0.58, FL+0.24, 2.56)
+
+  // TV screen (wall-mounted above console)
+  box(-0.72, FL+0.54, 2.76, 0.72, FL+1.14, 2.80)
+  // Screen inner frame
+  box(-0.68, FL+0.58, 2.77, 0.68, FL+1.10, 2.79)
+  // TV legs / mount
+  line(-0.18, FL+0.54, 2.76, -0.18, FL+0.46, 2.76)
+  line( 0.18, FL+0.54, 2.76,  0.18, FL+0.46, 2.76)
+  // Soundbar below screen
+  box(-0.52, FL+0.47, 2.75, 0.52, FL+0.52, 2.78)
+
+  // ── SOFA (3-seat, facing TV) ───────────────────────────────────
+  const SX1 = -0.96, SX2 = 0.96, SZ1 = 0.70, SZ2 = 1.38
+  // Seat base
+  box(SX1, FL, SZ1, SX2, FL+0.42, SZ2)
+  // Backrest at SZ1 side (away from TV — correct orientation)
+  box(SX1, FL+0.42, SZ1, SX2, FL+0.86, SZ1+0.18)
+  // Left armrest
+  box(SX1, FL, SZ1, SX1+0.14, FL+0.54, SZ2)
+  // Right armrest
+  box(SX2-0.14, FL, SZ1, SX2, FL+0.54, SZ2)
+  // Cushion dividers (seat area from SZ1+0.18 to SZ2)
+  line(SX1+0.14 + (SX2-SX1-0.28)*0.333, FL+0.42, SZ1+0.18,
+       SX1+0.14 + (SX2-SX1-0.28)*0.333, FL+0.42, SZ2)
+  line(SX1+0.14 + (SX2-SX1-0.28)*0.667, FL+0.42, SZ1+0.18,
+       SX1+0.14 + (SX2-SX1-0.28)*0.667, FL+0.42, SZ2)
+  // Sofa legs (4)
+  for (const [lx, lz] of [[SX1+0.10, SZ1+0.10],[SX2-0.10, SZ1+0.10],[SX1+0.10, SZ2-0.10],[SX2-0.10, SZ2-0.10]]) {
+    box(lx-0.04, FL-0.06, lz-0.04, lx+0.04, FL, lz+0.04)
+  }
+  // Back cushion dividers
+  line(SX1+0.14 + (SX2-SX1-0.28)*0.333, FL+0.42, SZ1,
+       SX1+0.14 + (SX2-SX1-0.28)*0.333, FL+0.86, SZ1+0.18)
+  line(SX1+0.14 + (SX2-SX1-0.28)*0.667, FL+0.42, SZ1,
+       SX1+0.14 + (SX2-SX1-0.28)*0.667, FL+0.86, SZ1+0.18)
+
+  // Throw pillow on sofa (left side, leaning against backrest)
+  box(SX1+0.18, FL+0.42, SZ1+0.18, SX1+0.42, FL+0.62, SZ1+0.42)
+
+  // ── COFFEE TABLE (between sofa and TV) ────────────────────────
+  box(-0.44, FL+0.40, 1.54, 0.44, FL+0.44, 2.12)
+  // Lower shelf
+  box(-0.40, FL+0.18, 1.58, 0.40, FL+0.22, 2.08)
+  // 4 legs
+  for (const [lx, lz] of [[-0.38,1.58],[0.38,1.58],[-0.38,2.08],[0.38,2.08]]) {
+    cylinder(lx, FL, lz, 0.022, 0.022, FL+0.40, 8)
+  }
+  // Item on table (book/remote)
+  box(-0.14, FL+0.44, 1.70, 0.14, FL+0.47, 1.86)
+
+  // ── ARMCHAIR (right, facing TV) ───────────────────────────────
+  box(1.18, FL, -0.44, 1.78, FL+0.40, 0.20)
+  // Backrest at low-z side (away from TV)
+  box(1.18, FL+0.40, -0.44, 1.78, FL+0.76, -0.30)
+  box(1.18, FL, -0.44, 1.32, FL+0.52, 0.20)
+  box(1.64, FL, -0.44, 1.78, FL+0.52, 0.20)
+  // Armchair legs
+  for (const [lx, lz] of [[1.24,-0.38],[1.72,-0.38],[1.24,0.14],[1.72,0.14]]) {
+    box(lx-0.04, FL-0.06, lz-0.04, lx+0.04, FL, lz+0.04)
+  }
+
+  // Side table next to armchair
+  box(1.86, FL, -0.30, 2.06, FL+0.55, 0.06)
+  // Lamp on side table
+  cylinder(1.96, FL+0.55, -0.12, 0.018, 0.018, FL+0.82, 8)
+  ring(1.96, FL+0.82, -0.12, 0.14, 0.14, 14)
+  ring(1.96, FL+0.70, -0.12, 0.09, 0.09, 12)
+
+  // ── FLOOR LAMP (left of sofa) ──────────────────────────────────
+  cylinder(-1.30, FL, 0.40, 0.022, 0.022, 1.24, 8)
+  ring(-1.30, FL, 0.40, 0.14, 0.14, 14)           // base
+  ring(-1.30, 1.24, 0.40, 0.06, 0.06, 10)         // shade top
+  ring(-1.30, 1.08, 0.40, 0.22, 0.22, 18)         // shade bottom
+  {
+    const st = ring(-1.30, 1.24, 0.40, 0.06, 0.06, 10)
+    const sb = ring(-1.30, 1.08, 0.40, 0.22, 0.22, 18)
+    // connect shade rings with 10 verticals
+    for (let i = 0; i < 10; i++) E.push([st + i, sb + Math.round(i * 18 / 10)])
+  }
+
+  // ── BOOKSHELF (left wall) ──────────────────────────────────────
+  box(-RX, FL, 1.20, -RX+0.36, CL-0.08, 2.10)
+  // 4 shelves
+  for (let i = 0; i < 4; i++) {
+    const sy = FL + 0.26 + i * 0.30
+    box(-RX, sy, 1.22, -RX+0.34, sy+0.03, 2.08)
+  }
+  // Vertical center divider
+  line(-RX+0.18, FL, 1.22, -RX+0.18, CL-0.08, 1.22)
+  // Books suggestion (small boxes on shelves)
+  for (let i = 0; i < 3; i++) {
+    const sy = FL + 0.29 + i * 0.30
+    box(-RX+0.02, sy, 1.26, -RX+0.10, sy+0.22, 1.50)
+    box(-RX+0.12, sy, 1.26, -RX+0.16, sy+0.18, 1.50)
+  }
+
+  // ── WARDROBE (left wall, front area) ──────────────────────────
+  {
+    const WX1 = -RX, WX2 = -RX + 0.58
+    const WZ1 = -2.72, WZ2 = 0.50
+    const WH  = CL - 0.03
+    // Main body
+    box(WX1, FL, WZ1, WX2, WH, WZ2)
+    // Top cornice strip
+    box(WX1, WH, WZ1 - 0.01, WX2 + 0.01, WH + 0.03, WZ2 + 0.01)
+    // 4 door panels — vertical dividers on front face (x=WX2)
+    const seg = (WZ2 - WZ1) / 4
+    for (let i = 1; i < 4; i++) {
+      const dz = WZ1 + seg * i
+      line(WX2, FL + 0.04, dz, WX2, WH - 0.04, dz)
+    }
+    // Door handles (one per panel, at mid height ~0.90m)
+    for (let i = 0; i < 4; i++) {
+      const hz = WZ1 + seg * i + seg * 0.5
+      box(WX2, 0.84, hz - 0.03, WX2 + 0.02, 0.96, hz - 0.01)
+    }
+    // Horizontal groove line across all doors (upper third)
+    line(WX2, WH * 0.68, WZ1, WX2, WH * 0.68, WZ2)
+    // Baseboard / kick plate
+    box(WX1, FL, WZ1, WX2, FL + 0.07, WZ2)
+  }
+
+  // ── LARGE PICTURE — Chinese cherry blossom tree ───────────────
+  {
+    const ins = 0.05
+    const z1 = -2.30, z2 = -0.40, y1 = 0.38, y2 = 1.20
+    // Outer frame
+    const f = V.length
+    V.push([RX,y1,z1],[RX,y1,z2],[RX,y2,z2],[RX,y2,z1])
+    E.push([f,f+1],[f+1,f+2],[f+2,f+3],[f+3,f])
+    // Inner canvas border
+    const g = V.length
+    V.push([RX,y1+ins,z1+ins],[RX,y1+ins,z2-ins],[RX,y2-ins,z2-ins],[RX,y2-ins,z1+ins])
+    E.push([g,g+1],[g+1,g+2],[g+2,g+3],[g+3,g])
+    // Frame corner connectors
+    E.push([f,g],[f+1,g+1],[f+2,g+2],[f+3,g+3])
+    // Hanging wire
+    const cz = (z1 + z2) / 2
+    line(RX, y2, cz, RX, y2+0.05, cz)
+
+    // ── Cherry blossom tree — fills canvas ──────────────────────
+    const tx = RX, tz = cz, ty = y1 + ins
+    // canvas bounds: z in [z1+ins, z2-ins] = [-2.25, -0.45], y in [y1+ins, y2-ins] = [0.43, 1.15]
+
+    // Blossom: ring in YZ plane
+    const blossom = (bz, by, r = 0.065, n = 10) => {
+      const b = V.length
+      for (let i = 0; i < n; i++) {
+        const a = (i / n) * Math.PI * 2
+        V.push([tx, by + r * Math.cos(a), bz + r * Math.sin(a)])
+      }
+      for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    }
+
+    // Trunk — two parallel lines for thickness, gentle S-curve
+    const trunk = [
+      [tz+0.02, ty+0.00], [tz+0.02, ty+0.10],
+      [tz+0.00, ty+0.22], [tz-0.02, ty+0.34],
+      [tz-0.03, ty+0.46], [tz-0.04, ty+0.58],
+    ]
+    for (let k = 0; k < 2; k++) {
+      const off = k * 0.018
+      for (let i = 0; i < trunk.length - 1; i++)
+        line(tx, trunk[i][1], trunk[i][0]+off, tx, trunk[i+1][1], trunk[i+1][0]+off)
+    }
+    // Root flare
+    line(tx, ty+0.00, tz+0.02, tx, ty+0.09, tz+0.20)
+    line(tx, ty+0.00, tz+0.02, tx, ty+0.09, tz-0.16)
+    line(tx, ty+0.00, tz+0.02, tx, ty+0.06, tz+0.00)
+
+    // ── LEFT branch system — reaches toward z1 edge ──
+    line(tx, ty+0.20, tz+0.00, tx, ty+0.34, tz-0.30)  // L1
+    line(tx, ty+0.34, tz-0.30, tx, ty+0.46, tz-0.58)  // L2
+    line(tx, ty+0.46, tz-0.58, tx, ty+0.54, tz-0.78)  // L3 → near left edge
+    line(tx, ty+0.46, tz-0.58, tx, ty+0.56, tz-0.66)  // L3b sub
+    line(tx, ty+0.34, tz-0.30, tx, ty+0.48, tz-0.42)  // L2b sub
+    line(tx, ty+0.48, tz-0.42, tx, ty+0.58, tz-0.50)  // L2b tip
+    line(tx, ty+0.26, tz-0.14, tx, ty+0.40, tz-0.22)  // L1 sub low
+
+    // ── RIGHT branch system — reaches toward z2 edge ──
+    line(tx, ty+0.28, tz+0.02, tx, ty+0.42, tz+0.32)  // R1
+    line(tx, ty+0.42, tz+0.32, tx, ty+0.52, tz+0.60)  // R2
+    line(tx, ty+0.52, tz+0.60, tx, ty+0.58, tz+0.78)  // R3 → near right edge
+    line(tx, ty+0.52, tz+0.60, tx, ty+0.60, tz+0.68)  // R3b sub
+    line(tx, ty+0.42, tz+0.32, tx, ty+0.54, tz+0.44)  // R2b sub
+    line(tx, ty+0.54, tz+0.44, tx, ty+0.62, tz+0.52)  // R2b tip
+    line(tx, ty+0.30, tz+0.16, tx, ty+0.44, tz+0.24)  // R1 sub low
+
+    // ── TOP branch system — reaches toward y2 edge ──
+    line(tx, ty+0.58, tz-0.04, tx, ty+0.64, tz-0.20)  // T1 left
+    line(tx, ty+0.64, tz-0.20, tx, ty+0.68, tz-0.32)  // T1 tip
+    line(tx, ty+0.58, tz-0.04, tx, ty+0.66, tz+0.12)  // T2 right
+    line(tx, ty+0.66, tz+0.12, tx, ty+0.70, tz+0.22)  // T2 tip
+    line(tx, ty+0.58, tz-0.04, tx, ty+0.70, tz-0.04)  // T3 straight up
+    line(tx, ty+0.64, tz-0.20, tx, ty+0.70, tz-0.12)  // T sub
+
+    // ── Blossom clusters — all within canvas bounds ──
+    // Far left
+    blossom(tz-0.80, ty+0.56, 0.062)
+    blossom(tz-0.80, ty+0.56, 0.030, 6)
+    blossom(tz-0.68, ty+0.60, 0.052)
+    // Left mid
+    blossom(tz-0.52, ty+0.60, 0.050)
+    blossom(tz-0.44, ty+0.65, 0.044)
+    blossom(tz-0.24, ty+0.51, 0.042)
+    // Far right
+    blossom(tz+0.78, ty+0.60, 0.058)
+    blossom(tz+0.78, ty+0.60, 0.030, 6)
+    blossom(tz+0.66, ty+0.64, 0.050)
+    // Right mid
+    blossom(tz+0.50, ty+0.64, 0.048)
+    blossom(tz+0.42, ty+0.66, 0.042)
+    blossom(tz+0.26, ty+0.53, 0.042)
+    // Top — y_max = ty+0.70+r must be ≤ 1.15
+    blossom(tz-0.33, ty+0.68, 0.054)   // y_max=1.13 ✓
+    blossom(tz-0.33, ty+0.68, 0.028, 6)
+    blossom(tz+0.22, ty+0.68, 0.050)
+    blossom(tz+0.22, ty+0.68, 0.028, 6)
+    blossom(tz-0.05, ty+0.68, 0.044)
+    blossom(tz-0.14, ty+0.62, 0.038)
+  }
+
+  // ── RADIATOR under large window ────────────────────────────────
+  {
+    const RY1 = FL+0.08, RY2 = FL+0.52
+    const RZa = 0.64, RZb = 2.06
+    const RXf = RX - 0.10
+    line(RXf, RY1, RZa, RXf, RY2, RZa)
+    line(RXf, RY1, RZb, RXf, RY2, RZb)
+    for (let i = 0; i <= 8; i++) {
+      const y = RY1 + (RY2 - RY1) * i / 8
+      line(RXf, y, RZa, RXf, y, RZb)
+    }
+    line(RX, RY1+0.10, RZa, RXf, RY1+0.10, RZa)
+    line(RX, RY1+0.10, RZb, RXf, RY1+0.10, RZb)
+    line(RX, RY2-0.10, RZa, RXf, RY2-0.10, RZa)
+    line(RX, RY2-0.10, RZb, RXf, RY2-0.10, RZb)
+  }
+
+  // ── FLOOR PLANT (back-left corner) ────────────────────────────
+  cylinder(-1.82, FL, 2.48, 0.12, 0.12, FL+0.24, 12)
+  ring(-1.82, FL+0.24, 2.48, 0.14, 0.14, 12)   // pot rim
+  // Plant leaves (several arching rings going up)
+  for (let i = 0; i < 5; i++) {
+    const a  = (i / 5) * Math.PI * 2
+    const lx = -1.82 + 0.18 * Math.cos(a)
+    const lz = 2.48  + 0.18 * Math.sin(a)
+    line(-1.82, FL+0.28, 2.48, lx, FL+0.80 + i*0.06, lz)
+  }
+
+  // ── CARPET / RUG (between sofa and TV) ────────────────────────
+  ring(0.10, FL+0.01, 1.40, 1.32, 0.96, 44)
+  ring(0.10, FL+0.01, 1.40, 1.14, 0.80, 44)
+
+  return { verts: V, edges: E }
+}
+
+const { verts, edges } = buildRoom()
+
+// =================================================================
+//  ENGINE
+// =================================================================
+
+export default function RoomViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.30, rotY: -0.45,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.64, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+
+      return {
+        x: (x1  / d) * fov * scale + W / 2,
+        y: (-y2 / d) * fov * scale + H / 2,
+        z: z2,
+      }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+
+      if (verts.length === 0) return
+
+      const proj = verts.map(v => project(v))
+
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) {
+        if (p.z < zMin) zMin = p.z
+        if (p.z > zMax) zMax = p.z
+      }
+      const zRange = zMax - zMin || 1
+
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a]
+        const pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+
+        ctx.beginPath()
+        ctx.moveTo(pa.x, pa.y)
+        ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3
+        ctx.stroke()
+      }
+
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`
+        ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => {
+      state.dragging = true
+      state.lastX = e.clientX
+      state.lastY = e.clientY
+      stopAutoRotate()
+    }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX - state.lastX) * 0.008
+      state.rotX += (e.clientY - state.lastY) * 0.008
+      state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+      state.lastX  = e.clientX
+      state.lastY  = e.clientY
+    }
+    const onMouseUp = () => { state.dragging = false }
+
+    const onWheel = (e) => {
+      e.preventDefault()
+      state.zoom *= e.deltaY > 0 ? 0.93 : 1.07
+      state.zoom  = Math.max(0.35, Math.min(3.0, state.zoom))
+      stopAutoRotate()
+    }
+
+    let lastTX = 0, lastTY = 0, lastPinchDist = 0
+
+    const onTouchStart = (e) => {
+      stopAutoRotate()
+      state.dragging = true
+      if (e.touches.length === 1) {
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        lastPinchDist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+      }
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length === 1) {
+        state.rotY += (e.touches[0].clientX - lastTX) * 0.008
+        state.rotX += (e.touches[0].clientY - lastTY) * 0.008
+        state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+        if (lastPinchDist) state.zoom *= dist / lastPinchDist
+        state.zoom = Math.max(0.35, Math.min(3.0, state.zoom))
+        lastPinchDist = dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging = false; lastPinchDist = 0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+
+    const onKeyDown = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId)
+      clearTimeout(state.idleTimer)
+      ro.disconnect()
+      setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown)
+      window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp)
+      canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart)
+      canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd)
+      window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="rv-overlay" onClick={onClose}>
+      <div className="rv-modal" onClick={e => e.stopPropagation()}>
+
+        <div className="rv-header">
+          <div className="rv-title-group">
+            <span className="rv-label">3D Modell</span>
+            <h3 className="rv-title">Raum / Grundriss</h3>
+          </div>
+          <button className="rv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+
+        <div className="rv-canvas-wrap">
+          <canvas ref={canvasRef} className={`rv-canvas${ready ? ' rv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="rv-loader" aria-label="Wird geladen">
+              <div className="rv-loader-ring" />
+              <span className="rv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+
+        <div className="rv-footer">
+          <span className="rv-hint">Ziehen zum Drehen</span>
+          <span className="rv-hint">Scrollen zum Zoomen</span>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/components/Services/Services.css

@@ -0,0 +1,80 @@
+.services {
+  background: rgba(13, 13, 13, 0.55);
+}
+
+.services-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.services-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.services-title {
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-6);
+}
+
+.service-card {
+  padding: var(--space-8);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--transition);
+}
+
+.service-card:hover {
+  border-color: var(--color-accent-border);
+}
+
+.service-number {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: var(--color-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.service-divider {
+  width: 32px;
+  height: 2px;
+  background: var(--color-accent-border);
+  border-radius: 2px;
+  margin: var(--space-5) 0;
+}
+
+.service-title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: var(--space-4);
+  line-height: 1.3;
+}
+
+.service-body {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: 1.7;
+}
+
+@media (max-width: 900px) {
+  .services-grid {
+    grid-template-columns: 1fr;
+    max-width: 520px;
+  }
+}

src/components/Services/Services.jsx

@@ -0,0 +1,42 @@
+import './Services.css'
+
+const steps = [
+  {
+    number: '01',
+    title: 'Aufmaß vor Ort',
+    body: 'Unser Techniker kommt zu Ihnen. Auch möblierte Räume, Altbau, Dachschrägen und komplexe Geometrien – alles in einem Termin erfasst.',
+  },
+  {
+    number: '02',
+    title: 'Datenaufbereitung',
+    body: 'Ihre Messdaten werden geprüft, bereinigt und in das Format überführt, das Sie brauchen. Keine Nachbearbeitung auf Ihrer Seite.',
+  },
+  {
+    number: '03',
+    title: 'Fertige Planungsgrundlage',
+    body: 'Sie erhalten ein vollständiges 3D-Aufmaß als CAD-Datei. Direkt nutzbar in Ihrer Software, ohne Umwege.',
+  },
+]
+
+export default function Services() {
+  return (
+    <div className="services section">
+      <div className="container">
+        <div className="services-header">
+          <span className="services-label">Leistung</span>
+          <h2 className="services-title">Vom Termin zur Datei.</h2>
+        </div>
+        <div className="services-grid">
+          {steps.map((step) => (
+            <div key={step.number} className="service-card">
+              <div className="service-number">{step.number}</div>
+              <div className="service-divider" />
+              <h3 className="service-title">{step.title}</h3>
+              <p className="service-body">{step.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/SpaceBackground/SpaceBackground.css

@@ -0,0 +1,10 @@
+.space-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  display: block;
+  pointer-events: none;
+}

src/components/SpaceBackground/SpaceBackground.jsx

@@ -0,0 +1,415 @@
+/**
+ * SpaceBackground
+ * Adapted from Experiment_backup/scripts/hex-background.js
+ * Recoloured to Superfice purple palette (#8B3DB8).
+ * Effects: layered star field · nebula clouds · shooting stars
+ *          · mouse-reactive glass shards · diffraction spikes · cursor aura
+ */
+
+import { useEffect, useRef } from 'react'
+import './SpaceBackground.css'
+
+// ── Nebula clouds ─────────────────────────────────────────────────
+const NEBULAS = [
+  // Purple core — brand dominant
+  { px: 0.18, py: 0.25, pr: 0.62, cr: 139, cg:  61, cb: 184, a: 0.10, spx:  0.00014, spy:  0.00007, phase: 0.0 },
+  { px: 0.78, py: 0.55, pr: 0.58, cr: 100, cg:  30, cb: 175, a: 0.08, spx: -0.00009, spy:  0.00011, phase: 2.1 },
+  // Blue-violet cloud
+  { px: 0.50, py: 0.80, pr: 0.50, cr:  60, cg:  90, cb: 220, a: 0.07, spx:  0.00007, spy: -0.00009, phase: 4.3 },
+  { px: 0.65, py: 0.12, pr: 0.44, cr:  80, cg:  50, cb: 200, a: 0.06, spx: -0.00010, spy:  0.00005, phase: 1.5 },
+  // Soft rose/magenta accent
+  { px: 0.88, py: 0.35, pr: 0.32, cr: 220, cg:  70, cb: 160, a: 0.05, spx: -0.00006, spy:  0.00008, phase: 3.2 },
+  // Bright lavender centre
+  { px: 0.32, py: 0.60, pr: 0.38, cr: 200, cg: 120, cb: 255, a: 0.06, spx:  0.00005, spy: -0.00006, phase: 3.7 },
+  // Deep teal hint
+  { px: 0.60, py: 0.40, pr: 0.30, cr:  40, cg: 140, cb: 200, a: 0.04, spx:  0.00008, spy:  0.00010, phase: 5.2 },
+]
+
+// ── Shard debris ──────────────────────────────────────────────────
+const SHARD_COLORS = [
+  { r: 160, g:  75, b: 210 },
+  { r: 185, g: 100, b: 255 },
+  { r:  95, g:  30, b: 165 },
+  { r: 220, g: 200, b: 255 },
+  { r: 215, g: 130, b: 255 },
+  { r: 120, g:  60, b: 200 },
+  { r:  60, g: 100, b: 220 },
+]
+
+const SHARD_COUNT   = 26
+const SHARD_RADIUS  = 230
+const SCATTER_FORCE = 3.0
+const ROT_V_MAX     = 0.018
+
+// Star layer definitions — depth from back (0) to front (2)
+const STAR_LAYERS = [
+  { count: 180, rMin: 0.12, rMax: 0.45, speed: 0.008, alphaMax: 0.38 },  // dust
+  { count: 110, rMin: 0.40, rMax: 0.95, speed: 0.030, alphaMax: 0.70 },  // field
+  { count:  45, rMin: 0.85, rMax: 2.20, speed: 0.055, alphaMax: 0.95 },  // bright
+]
+
+// Star colour palette
+const STAR_PALETTES = [
+  (a) => `rgba(190,215,255,${a})`,   // blue-white (hot)
+  (a) => `rgba(255,255,255,${a})`,   // pure white
+  (a) => `rgba(255,248,210,${a})`,   // warm yellow-white
+  (a) => `rgba(210,140,255,${a})`,   // brand purple
+  (a) => `rgba(235,185,255,${a})`,   // lavender
+]
+
+// ── Helpers ──────────────────────────────────────────────────────
+function buildVerts(size, sides) {
+  const verts = []
+  const base  = Math.random() * Math.PI * 2
+  for (let i = 0; i < sides; i++) {
+    const a = base + (Math.PI * 2 * i / sides) + (Math.random() - 0.5) * 0.55
+    const r = size * (0.50 + Math.random() * 0.50)
+    verts.push([Math.cos(a) * r, Math.sin(a) * r])
+  }
+  return verts
+}
+
+// ── Component ────────────────────────────────────────────────────
+export default function SpaceBackground() {
+  const canvasRef = useRef(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const isMobile = window.innerWidth <= 768 || ('ontouchstart' in window)
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    // ── Mobile / reduced-motion: one-shot static render ─────────
+    if (isMobile || prefersReducedMotion) {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const w = window.innerWidth
+      const h = window.innerHeight
+      canvas.width  = w * dpr
+      canvas.height = h * dpr
+      canvas.style.width  = `${w}px`
+      canvas.style.height = `${h}px`
+      const mc = canvas.getContext('2d')
+      mc.scale(dpr, dpr)
+
+      mc.fillStyle = '#0A0A12'
+      mc.fillRect(0, 0, w, h)
+
+      NEBULAS.slice(0, 4).forEach(n => {
+        const g = mc.createRadialGradient(n.px * w, n.py * h, 0, n.px * w, n.py * h, n.pr * Math.min(w, h))
+        g.addColorStop(0, `rgba(${n.cr},${n.cg},${n.cb},${n.a * 1.2})`)
+        g.addColorStop(1, `rgba(${n.cr},${n.cg},${n.cb},0)`)
+        mc.fillStyle = g
+        mc.fillRect(0, 0, w, h)
+      })
+
+      for (let i = 0; i < 200; i++) {
+        const sx = Math.random() * w, sy = Math.random() * h
+        const sr = 0.15 + Math.random() * 1.6
+        const pal = STAR_PALETTES[Math.floor(Math.random() * STAR_PALETTES.length)]
+        mc.beginPath(); mc.arc(sx, sy, sr, 0, Math.PI * 2)
+        mc.fillStyle = pal(0.2 + Math.random() * 0.6)
+        mc.fill()
+      }
+      return
+    }
+
+    // ── Desktop: full animated version ──────────────────────────
+    const ctx = canvas.getContext('2d', { alpha: false })
+
+    // Performance tier: low-end = ≤4 logical cores (older/budget hardware)
+    const isLowEnd = typeof navigator.hardwareConcurrency === 'number' && navigator.hardwareConcurrency <= 4
+    const FRAME_MS = isLowEnd ? 48 : 32   // ~20 fps vs ~30 fps
+    const SHARD_N  = isLowEnd ? 12 : SHARD_COUNT
+    const NEBULA_N = isLowEnd ? 4  : NEBULAS.length
+
+    let W = 0, H = 0, rafId
+    let time = 0
+    const mouse = { x: -2000, y: -2000 }
+    let stars = [], shards = [], shootingStars = []
+    let nextShootAt = 2 + Math.random() * 4
+
+    // Resize
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      W = window.innerWidth; H = window.innerHeight
+      canvas.width  = W * dpr; canvas.height = H * dpr
+      canvas.style.width = `${W}px`; canvas.style.height = `${H}px`
+      ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(dpr, dpr)
+      initStars(); initShards()
+    }
+
+    // ── Stars ────────────────────────────────────────────────────
+    function initStars() {
+      stars = []
+      STAR_LAYERS.forEach((layer, li) => {
+        const count = isLowEnd ? Math.ceil(layer.count * 0.5) : layer.count
+        for (let i = 0; i < count; i++) {
+          const r    = layer.rMin + Math.random() * (layer.rMax - layer.rMin)
+          const palIdx = Math.random() < 0.55 ? 1    // mostly white
+                       : Math.random() < 0.40 ? 0    // blue-white
+                       : Math.random() < 0.40 ? 3    // purple
+                       : Math.random() < 0.50 ? 4    // lavender
+                       : 2                            // warm
+          stars.push({
+            x: Math.random() * W, y: Math.random() * H,
+            r,
+            vy: layer.speed * (0.5 + Math.random()),
+            vx: (Math.random() - 0.5) * layer.speed * 0.3,
+            phase: Math.random() * Math.PI * 2,
+            twinkleSpeed: 0.3 + Math.random() * (li === 0 ? 0.8 : 1.8),
+            alphaMax: layer.alphaMax * (0.55 + Math.random() * 0.45),
+            layer: li,
+            palIdx,
+            spike: li === 2 && r > 1.3 && Math.random() < 0.6,
+          })
+        }
+      })
+    }
+
+    function drawStars() {
+      for (let i = 0; i < stars.length; i++) {
+        const s  = stars[i]
+        const tw = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(time * s.twinkleSpeed + s.phase))
+        s.x += s.vx; s.y += s.vy
+        if (s.y > H + 2) { s.y = -2; s.x = Math.random() * W }
+        if (s.x < -2) s.x = W + 2
+        if (s.x > W + 2) s.x = -2
+
+        const a   = tw * s.alphaMax
+        const col = STAR_PALETTES[s.palIdx](a)
+        ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2)
+        ctx.fillStyle = col; ctx.fill()
+
+        // Soft halo on brighter stars
+        if (!isLowEnd && s.layer === 2 && s.r > 1.5) {
+          const halo = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, s.r * 4)
+          halo.addColorStop(0, STAR_PALETTES[s.palIdx](tw * 0.18))
+          halo.addColorStop(1, 'rgba(0,0,0,0)')
+          ctx.beginPath(); ctx.arc(s.x, s.y, s.r * 4, 0, Math.PI * 2)
+          ctx.fillStyle = halo; ctx.fill()
+        }
+
+        // Diffraction spikes on select bright stars
+        if (!isLowEnd && s.spike) {
+          const spikeLen = s.r * 5.5
+          const sa = tw * 0.28
+          ctx.strokeStyle = STAR_PALETTES[s.palIdx](sa)
+          ctx.lineWidth = 0.6
+          ctx.beginPath()
+          ctx.moveTo(s.x - spikeLen, s.y); ctx.lineTo(s.x + spikeLen, s.y)
+          ctx.moveTo(s.x, s.y - spikeLen); ctx.lineTo(s.x, s.y + spikeLen)
+          ctx.stroke()
+        }
+      }
+    }
+
+    // ── Nebulas ──────────────────────────────────────────────────
+    function drawNebulas() {
+      for (let i = 0; i < NEBULA_N; i++) {
+        const n  = NEBULAS[i]
+        const ox = Math.sin(time * n.spx * 800 + n.phase)       * W * 0.08
+        const oy = Math.cos(time * n.spy * 800 + n.phase + 1.2) * H * 0.08
+        const cx = n.px * W + ox
+        const cy = n.py * H + oy
+        const rad = n.pr * Math.min(W, H)
+        const pa  = n.a * (0.70 + 0.30 * Math.sin(time * 0.22 + n.phase))
+        const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, rad)
+        g.addColorStop(0,    `rgba(${n.cr},${n.cg},${n.cb},${pa})`)
+        g.addColorStop(0.40, `rgba(${n.cr},${n.cg},${n.cb},${pa * 0.40})`)
+        g.addColorStop(0.75, `rgba(${n.cr},${n.cg},${n.cb},${pa * 0.12})`)
+        g.addColorStop(1,    `rgba(${n.cr},${n.cg},${n.cb},0)`)
+        ctx.fillStyle = g
+        ctx.beginPath(); ctx.arc(cx, cy, rad, 0, Math.PI * 2); ctx.fill()
+      }
+    }
+
+    // ── Shooting stars ───────────────────────────────────────────
+    function spawnShootingStar() {
+      const fromRight = Math.random() < 0.5
+      const sx = fromRight ? W * (0.45 + Math.random() * 0.55) : W * Math.random() * 0.75
+      const sy = Math.random() * H * 0.55
+      const angle = Math.PI / 4 + (Math.random() - 0.5) * 0.7
+      const speed = 7 + Math.random() * 11
+      const length = 90 + Math.random() * 200
+      const thick = 0.8 + Math.random() * 1.4
+      shootingStars.push({
+        x: sx, y: sy,
+        vx: Math.cos(angle) * speed * (fromRight ? -1 : 1),
+        vy: Math.sin(angle) * speed,
+        length, thick, alpha: 0, life: 0,
+        maxLife: (length / speed) * 1.8,
+      })
+    }
+
+    function updateShootingStars() {
+      if (shootingStars.length < 4 && time > nextShootAt) {
+        spawnShootingStar()
+        nextShootAt = time + 2.5 + Math.random() * 7
+      }
+      for (let i = shootingStars.length - 1; i >= 0; i--) {
+        const s = shootingStars[i]; s.life++
+        s.alpha = s.life < 8 ? s.life / 8
+                : s.life > s.maxLife - 10 ? Math.max(0, (s.maxLife - s.life) / 10)
+                : 1
+        s.x += s.vx; s.y += s.vy
+        const len   = Math.hypot(s.vx, s.vy)
+        const tailX = s.x - (s.vx / len) * s.length
+        const tailY = s.y - (s.vy / len) * s.length
+        const g = ctx.createLinearGradient(s.x, s.y, tailX, tailY)
+        g.addColorStop(0,    `rgba(255,255,255,${s.alpha * 0.95})`)
+        g.addColorStop(0.12, `rgba(220,200,255,${s.alpha * 0.65})`)
+        g.addColorStop(0.50, `rgba(140,80,220,${s.alpha * 0.25})`)
+        g.addColorStop(1,    `rgba(80,40,160,0)`)
+        ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(tailX, tailY)
+        ctx.strokeStyle = g; ctx.lineWidth = s.thick; ctx.stroke()
+        // bright head dot
+        ctx.beginPath(); ctx.arc(s.x, s.y, s.thick * 0.9, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(255,255,255,${s.alpha})`; ctx.fill()
+        if (s.life >= s.maxLife || s.x < -100 || s.x > W + 100 || s.y > H + 100)
+          shootingStars.splice(i, 1)
+      }
+    }
+
+    // ── Glass shards / space debris ──────────────────────────────
+    function initShards() {
+      shards = Array.from({ length: SHARD_N }, () => {
+        const size  = 14 + Math.random() * 58
+        const sides = 3 + Math.floor(Math.random() * 4)
+        const col   = SHARD_COLORS[Math.floor(Math.random() * SHARD_COLORS.length)]
+        const baseAlpha = 0.28 + Math.random() * 0.30
+        return {
+          x: Math.random() * W, y: Math.random() * H,
+          vx: (Math.random() - 0.5) * 0.22,
+          vy: (Math.random() - 0.5) * 0.22,
+          rot: Math.random() * Math.PI * 2,
+          rotV: (Math.random() - 0.5) * 0.003,
+          verts: buildVerts(size, sides),
+          size, col,
+          alpha: baseAlpha,
+          alphaTarget: baseAlpha,
+          svx: 0, svy: 0,
+          phase: Math.random() * Math.PI * 2,
+          floatSpeed: 0.20 + Math.random() * 0.45,
+        }
+      })
+    }
+
+    function drawShard(s) {
+      ctx.save()
+      ctx.translate(s.x, s.y); ctx.rotate(s.rot)
+      const { r, g, b } = s.col; const al = s.alpha
+      ctx.beginPath()
+      ctx.moveTo(s.verts[0][0], s.verts[0][1])
+      for (let i = 1; i < s.verts.length; i++) ctx.lineTo(s.verts[i][0], s.verts[i][1])
+      ctx.closePath()
+      // Cache gradient — only recreate when alpha shifts noticeably
+      if (!s._fill || Math.abs(al - s._fillAlpha) > 0.018) {
+        const f = ctx.createLinearGradient(-s.size, -s.size, s.size * 0.6, s.size * 0.6)
+        f.addColorStop(0,    `rgba(${r},${g},${b},${al * 0.28})`)
+        f.addColorStop(0.45, `rgba(255,255,255,${al * 0.12})`)
+        f.addColorStop(1,    `rgba(${r},${g},${b},${al * 0.06})`)
+        s._fill = f; s._fillAlpha = al
+      }
+      ctx.fillStyle = s._fill; ctx.fill()
+      ctx.strokeStyle = `rgba(${r},${g},${b},${al * 0.90})`
+      ctx.lineWidth = 1.2; ctx.stroke()
+      if (s.verts.length >= 2) {
+        ctx.beginPath()
+        ctx.moveTo(s.verts[0][0] * 0.55, s.verts[0][1] * 0.55)
+        ctx.lineTo(s.verts[1][0] * 0.55, s.verts[1][1] * 0.55)
+        ctx.strokeStyle = `rgba(255,255,255,${al * 0.55})`
+        ctx.lineWidth = 0.9; ctx.stroke()
+      }
+      ctx.restore()
+    }
+
+    function updateShards() {
+      const infSq = SHARD_RADIUS * SHARD_RADIUS
+      for (let i = 0; i < shards.length; i++) {
+        const s = shards[i]
+        s.vy += Math.sin(time * s.floatSpeed + s.phase) * 0.002
+        if (mouse.x > -1000) {
+          const dx = s.x - mouse.x, dy = s.y - mouse.y
+          const dSq = dx * dx + dy * dy
+          if (dSq < infSq) {
+            const dist  = Math.sqrt(dSq)
+            const force = (1 - dist / SHARD_RADIUS) * SCATTER_FORCE
+            const ang   = Math.atan2(dy, dx)
+            s.svx += Math.cos(ang) * force * 0.065
+            s.svy += Math.sin(ang) * force * 0.065
+            s.rotV += (Math.random() - 0.5) * 0.004 * (1 - dist / SHARD_RADIUS)
+            s.alphaTarget = Math.min(0.80, s.alphaTarget + 0.03)
+          }
+        }
+        s.rotV *= 0.96
+        s.rotV = Math.max(-ROT_V_MAX, Math.min(ROT_V_MAX, s.rotV))
+        s.svx *= 0.92; s.svy *= 0.92; s.vx *= 0.998; s.vy *= 0.998
+        s.x += s.vx + s.svx; s.y += s.vy + s.svy; s.rot += s.rotV
+        s.alpha += (s.alphaTarget - s.alpha) * 0.025
+        if (s.alphaTarget > 0.28) s.alphaTarget -= 0.004
+        const m = s.size + 10
+        if (s.x < -m) s.x = W + m; if (s.x > W + m) s.x = -m
+        if (s.y < -m) s.y = H + m; if (s.y > H + m) s.y = -m
+      }
+    }
+
+    // ── Cursor aura ──────────────────────────────────────────────
+    function drawCursorAura() {
+      const r = 160 + Math.sin(time * 1.8) * 28
+      const aura = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, r)
+      aura.addColorStop(0,   'rgba(160,75,220,0.10)')
+      aura.addColorStop(0.5, 'rgba(139,61,184,0.035)')
+      aura.addColorStop(1,   'rgba(139,61,184,0)')
+      ctx.fillStyle = aura
+      ctx.beginPath(); ctx.arc(mouse.x, mouse.y, r, 0, Math.PI * 2); ctx.fill()
+    }
+
+    // ── Main loop — ~30 fps, paused on hidden tab ─────────────────
+    let lastTs = 0
+    function animate(ts = 0) {
+      rafId = requestAnimationFrame(animate)
+      if (document.hidden) return
+      if (ts - lastTs < FRAME_MS) return
+      lastTs = ts
+      time += 0.016
+
+      // Deep space background — very slightly blue-tinted black
+      ctx.fillStyle = '#0A0A12'
+      ctx.fillRect(0, 0, W, H)
+
+      drawNebulas()
+      drawStars()
+      updateShootingStars()
+      updateShards()
+      shards.forEach(s => drawShard(s))
+      if (mouse.x > -1000) drawCursorAura()
+    }
+
+    const onMouseMove  = e => { mouse.x = e.clientX; mouse.y = e.clientY }
+    const onMouseLeave = () => { mouse.x = -2000; mouse.y = -2000 }
+    const debResize = (() => { let t; return () => { clearTimeout(t); t = setTimeout(resize, 180) } })()
+
+    resize()
+    rafId = requestAnimationFrame(animate)
+    window.addEventListener('resize', debResize)
+    document.addEventListener('mousemove', onMouseMove, { passive: true })
+    document.addEventListener('mouseleave', onMouseLeave)
+
+    return () => {
+      cancelAnimationFrame(rafId)
+      window.removeEventListener('resize', debResize)
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseleave', onMouseLeave)
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="space-bg"
+      aria-hidden="true"
+      role="presentation"
+    />
+  )
+}

src/components/StairViewer/StairViewer.css

@@ -0,0 +1,200 @@
+/* ── Overlay ─────────────────────────────────────────────────── */
+.sv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: sv-fade-in 0.22s ease;
+}
+
+@keyframes sv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+/* ── Modal card ─────────────────────────────────────────────── */
+.sv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: sv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes sv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.sv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.sv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.sv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.sv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.sv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.sv-close svg {
+  width: 14px;
+  height: 14px;
+}
+
+.sv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+/* ── Canvas wrapper ─────────────────────────────────────────── */
+.sv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.sv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.sv-canvas--ready {
+  opacity: 1;
+}
+
+.sv-canvas:active {
+  cursor: grabbing;
+}
+
+/* ── Loader ─────────────────────────────────────────────────── */
+.sv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.sv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: sv-spin 0.85s linear infinite;
+}
+
+@keyframes sv-spin {
+  to { transform: rotate(360deg); }
+}
+
+.sv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: sv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes sv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+/* ── Footer ─────────────────────────────────────────────────── */
+.sv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.sv-hint {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}
+
+.sv-hint svg {
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+@media (max-width: 480px) {
+  .sv-modal {
+    height: min(480px, 88vh);
+  }
+
+  .sv-footer {
+    gap: 1rem;
+  }
+
+  .sv-hint {
+    font-size: 0.68rem;
+  }
+}

src/components/StairViewer/StairViewer.jsx

@@ -0,0 +1,422 @@
+import { useEffect, useRef, useState } from 'react'
+import './StairViewer.css'
+
+// =================================================================
+//  L-SHAPED STAIRCASE — two flights + landing, cable railing
+// =================================================================
+
+function buildStairGeometry() {
+  const verts = [], edges = []
+
+  function box(x1,y1,z1, x2,y2,z2, type='structure') {
+    const b = verts.length
+    verts.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    edges.push(
+      [b,b+1,type],[b+1,b+2,type],[b+2,b+3,type],[b+3,b,type],
+      [b+4,b+5,type],[b+5,b+6,type],[b+6,b+7,type],[b+7,b+4,type],
+      [b,b+4,type],[b+1,b+5,type],[b+2,b+6,type],[b+3,b+7,type],
+    )
+  }
+
+  function ln(x1,y1,z1, x2,y2,z2, type='structure') {
+    const b = verts.length
+    verts.push([x1,y1,z1],[x2,y2,z2])
+    edges.push([b,b+1,type])
+  }
+
+  // Circle in YZ plane — for flight-1 cable rings
+  function circleYZ(x, cy, cz, r, n=8, type='ring') {
+    const b = verts.length
+    for (let i=0; i<n; i++) {
+      const a = (i/n)*Math.PI*2
+      verts.push([x, cy+r*Math.cos(a), cz+r*Math.sin(a)])
+    }
+    for (let i=0; i<n; i++) edges.push([b+i, b+(i+1)%n, type])
+  }
+
+  // Circle in XY plane — for flight-2 cable rings
+  function circleXY(cx, cy, z, r, n=8, type='ring') {
+    const b = verts.length
+    for (let i=0; i<n; i++) {
+      const a = (i/n)*Math.PI*2
+      verts.push([cx+r*Math.cos(a), cy+r*Math.sin(a), z])
+    }
+    for (let i=0; i<n; i++) edges.push([b+i, b+(i+1)%n, type])
+  }
+
+  // ── DIMENSIONS ────────────────────────────────────────────────
+  const N1 = 6, N2 = 6         // steps per flight
+  const TD = 0.270              // tread depth
+  const TR = 0.178              // rise per step
+  const TH = 0.095              // tread thickness
+  const W  = 1.08               // stair width
+
+  // Centre offsets so entire model is at origin
+  const CX = W/2 + (N2*TD)/2   // = 0.54 + 0.81 = 1.35
+  const CY = (N1+N2)*TR / 2    // = 1.068
+  const CZ = (N1*TD)/2 + W/2   // = 0.81 + 0.54 = 1.35
+
+  // Flight 1: treads going in +Z, width in X
+  const F1 = Array.from({length: N1}, (_, i) => ({
+    x1: -CX, x2: -CX + W,
+    y:  i*TR - CY,  y2: i*TR - CY + TH,
+    z1: i*TD - CZ,  z2: (i+1)*TD - CZ,
+  }))
+
+  // Landing at top of flight 1
+  const LY  = N1*TR - CY        // = 0  (perfect centre in Y!)
+  const LX1 = -CX, LX2 = -CX + W
+  const LZ1 = N1*TD - CZ        // = 0.27
+  const LZ2 = N1*TD + W - CZ    // = 1.35
+
+  // Flight 2: treads going in +X, width in Z
+  const F2 = Array.from({length: N2}, (_, j) => ({
+    z1: LZ1, z2: LZ2,
+    x1: LX2 + j*TD,       x2: LX2 + (j+1)*TD,
+    y:  LY  + j*TR,       y2: LY  + j*TR + TH,
+  }))
+
+  // ── BOTTOM FLOOR LANDING ──────────────────────────────────────
+  box(F1[0].x1, F1[0].y-0.26, F1[0].z1-0.52, F1[0].x2, F1[0].y, F1[0].z1)
+
+  // ── FLIGHT 1 TREADS ──────────────────────────────────────────
+  for (const s of F1) box(s.x1, s.y, s.z1, s.x2, s.y2, s.z2)
+
+  // ── CORNER LANDING ────────────────────────────────────────────
+  box(LX1, LY, LZ1, LX2, LY+TH, LZ2)
+
+  // ── FLIGHT 2 TREADS ──────────────────────────────────────────
+  for (const s of F2) box(s.x1, s.y, s.z1, s.x2, s.y2, s.z2)
+
+  // ── TOP LANDING ───────────────────────────────────────────────
+  box(F2[N2-1].x2, F2[N2-1].y+TH, LZ1, F2[N2-1].x2+0.44, F2[N2-1].y2+0.026, LZ2)
+
+  // ── SPINE FLIGHT 1 (central diagonal beam under treads) ───────
+  const SP1X = (F1[0].x1+F1[0].x2)/2  // = -0.81
+  const SPW = 0.028
+  ln(SP1X-SPW, F1[0].y-0.26, F1[0].z1,  SP1X-SPW, LY+TH, LZ1)
+  ln(SP1X+SPW, F1[0].y-0.26, F1[0].z1,  SP1X+SPW, LY+TH, LZ1)
+  for (const s of F1) {
+    ln(SP1X-SPW, s.y, s.z1+0.05, SP1X+SPW, s.y, s.z1+0.05, 'cross')
+    ln(SP1X-SPW, s.y, s.z2-0.05, SP1X+SPW, s.y, s.z2-0.05, 'cross')
+  }
+
+  // ── SPINE FLIGHT 2 ────────────────────────────────────────────
+  const SP2Z = (LZ1+LZ2)/2  // = 0.81
+  ln(F2[0].x1, F2[0].y, SP2Z-SPW,  F2[N2-1].x2, F2[N2-1].y+TH, SP2Z-SPW)
+  ln(F2[0].x1, F2[0].y, SP2Z+SPW,  F2[N2-1].x2, F2[N2-1].y+TH, SP2Z+SPW)
+  for (const s of F2) {
+    ln(s.x1+0.05, s.y, SP2Z-SPW, s.x1+0.05, s.y, SP2Z+SPW, 'cross')
+    ln(s.x2-0.05, s.y, SP2Z-SPW, s.x2-0.05, s.y, SP2Z+SPW, 'cross')
+  }
+
+  // ── INNER CORNER NEWEL POST ───────────────────────────────────
+  box(LX2-0.052, LY, LZ1-0.052, LX2+0.052, LY+1.58, LZ1+0.052, 'post')
+  box(LX2-0.066, LY+1.58, LZ1-0.066, LX2+0.066, LY+1.64, LZ1+0.066, 'post')
+
+  // ── STRINGER FLIGHT 1 (inner/wall side, x = LX2 = -0.27) ──────
+  {
+    const SX  = LX2
+    const SX2 = SX + 0.040
+    const BY  = F1[0].y - 0.34
+    ln(SX,  BY, F1[0].z1,  SX,  BY,           F1[N1-1].z2)
+    ln(SX,  BY, F1[0].z1,  SX,  F1[0].y,      F1[0].z1)
+    ln(SX,  BY, F1[N1-1].z2, SX, F1[N1-1].y2, F1[N1-1].z2)
+    ln(SX,  F1[0].y, F1[0].z1, SX, F1[N1-1].y2, F1[N1-1].z2)
+    ln(SX2, BY, F1[0].z1,  SX2, BY,           F1[N1-1].z2)
+    ln(SX2, BY, F1[0].z1,  SX2, F1[0].y,      F1[0].z1)
+    ln(SX2, BY, F1[N1-1].z2, SX2, F1[N1-1].y2, F1[N1-1].z2)
+    ln(SX2, F1[0].y, F1[0].z1, SX2, F1[N1-1].y2, F1[N1-1].z2)
+    ln(SX, BY, F1[0].z1, SX2, BY, F1[0].z1)
+    ln(SX, F1[0].y, F1[0].z1, SX2, F1[0].y, F1[0].z1)
+    ln(SX, BY, F1[N1-1].z2, SX2, BY, F1[N1-1].z2)
+    ln(SX, F1[N1-1].y2, F1[N1-1].z2, SX2, F1[N1-1].y2, F1[N1-1].z2)
+  }
+
+  // ── STRINGER FLIGHT 2 (inner/wall side, z = LZ1 = 0.27) ───────
+  {
+    const SZ  = LZ1
+    const SZ2 = SZ - 0.040
+    const BY  = F2[0].y - 0.18
+    ln(F2[0].x1,     SZ,  BY,          F2[0].x1,    SZ,  F2[0].y)
+    ln(F2[N2-1].x2,  SZ,  BY,          F2[N2-1].x2, SZ,  F2[N2-1].y2)
+    ln(F2[0].x1,     SZ,  BY,          F2[N2-1].x2, SZ,  BY)
+    ln(F2[0].x1,     SZ,  F2[0].y,     F2[N2-1].x2, SZ,  F2[N2-1].y2)
+    ln(F2[0].x1,     SZ2, BY,          F2[0].x1,    SZ2, F2[0].y)
+    ln(F2[N2-1].x2,  SZ2, BY,          F2[N2-1].x2, SZ2, F2[N2-1].y2)
+    ln(F2[0].x1,     SZ2, BY,          F2[N2-1].x2, SZ2, BY)
+    ln(F2[0].x1,     SZ2, F2[0].y,     F2[N2-1].x2, SZ2, F2[N2-1].y2)
+    ln(F2[0].x1,  SZ,  BY,  F2[0].x1,  SZ2, BY)
+    ln(F2[0].x1,  SZ,  F2[0].y, F2[0].x1, SZ2, F2[0].y)
+    ln(F2[N2-1].x2, SZ, BY,  F2[N2-1].x2, SZ2, BY)
+    ln(F2[N2-1].x2, SZ, F2[N2-1].y2, F2[N2-1].x2, SZ2, F2[N2-1].y2)
+  }
+
+  // ── RAILING FLIGHT 1 (open/left side, x = LX1 = -1.35) ───────
+  {
+    const RH = 0.92, cB = 0.09, cT = RH-0.06
+    const RL  = LX1
+    const pSt = [0, 3, 5]
+
+    // Bottom newel (extends to floor)
+    box(RL, F1[0].y-0.26, F1[0].z1-0.040, RL+0.080, F1[0].y, F1[0].z1+0.040, 'post')
+    box(RL, F1[0].y+RH,   F1[0].z1-0.040, RL+0.080, F1[0].y+RH+0.058, F1[0].z1+0.040, 'post')
+
+    for (const pi of pSt) {
+      const s = F1[pi], pw = pi===0 ? 0.040 : 0.026
+      box(RL, s.y, s.z1-pw, RL+pw*2, s.y+RH, s.z1+pw, 'post')
+    }
+
+    // Handrail
+    const rx = RL+0.042
+    ln(rx, F1[0].y+RH, F1[0].z1, rx, F1[N1-1].y+RH, F1[N1-1].z1, 'rail')
+    ln(rx, F1[0].y+RH+0.044, F1[0].z1, rx, F1[N1-1].y+RH+0.044, F1[N1-1].z1, 'rail')
+
+    // X-cables
+    const cx = RL+0.020
+    for (let k=0; k<pSt.length-1; k++) {
+      const a=F1[pSt[k]], b2=F1[pSt[k+1]]
+      ln(cx, a.y+cB, a.z1, cx, b2.y+cT, b2.z1, 'cable')
+      ln(cx, a.y+cT, a.z1, cx, b2.y+cB, b2.z1, 'cable')
+      circleYZ(cx, (a.y+cB+b2.y+cT)*0.5, (a.z1+b2.z1)*0.5, 0.024, 8)
+    }
+    // Full-span diagonals
+    ln(cx, F1[0].y+cB, F1[0].z1, cx, F1[N1-1].y+cT, F1[N1-1].z1, 'cable')
+    ln(cx, F1[0].y+cT, F1[0].z1, cx, F1[N1-1].y+cB, F1[N1-1].z1, 'cable')
+    circleYZ(cx, (F1[0].y+cB+F1[N1-1].y+cT)*0.5, (F1[0].z1+F1[N1-1].z1)*0.5, 0.028, 8)
+    for (const pi of pSt) {
+      circleYZ(cx, F1[pi].y+cB, F1[pi].z1, 0.020, 7)
+      circleYZ(cx, F1[pi].y+cT, F1[pi].z1, 0.020, 7)
+    }
+  }
+
+  // ── RAILING FLIGHT 2 (open/back side, z = LZ2 = 1.35) ────────
+  {
+    const RH = 0.92, cB = 0.09, cT = RH-0.06
+    const RL  = LZ2
+    const pSt = [0, 3, 5]
+
+    // Top newel (at end of flight 2)
+    box(F2[N2-1].x2-0.040, F2[N2-1].y, RL-0.080, F2[N2-1].x2+0.040, F2[N2-1].y+RH,       RL, 'post')
+    box(F2[N2-1].x2-0.040, F2[N2-1].y+RH, RL-0.080, F2[N2-1].x2+0.040, F2[N2-1].y+RH+0.058, RL, 'post')
+
+    for (const pj of pSt) {
+      const s = F2[pj], pw = 0.026
+      box(s.x1-pw, s.y, RL-pw*2, s.x1+pw, s.y+RH, RL, 'post')
+    }
+
+    // Handrail
+    const rz = RL-0.042
+    ln(F2[0].x1, F2[0].y+RH, rz, F2[N2-1].x2, F2[N2-1].y+RH, rz, 'rail')
+    ln(F2[0].x1, F2[0].y+RH+0.044, rz, F2[N2-1].x2, F2[N2-1].y+RH+0.044, rz, 'rail')
+
+    // X-cables
+    const cz = RL-0.020
+    for (let k=0; k<pSt.length-1; k++) {
+      const a=F2[pSt[k]], b2=F2[pSt[k+1]]
+      ln(a.x1, a.y+cB, cz, b2.x1, b2.y+cT, cz, 'cable')
+      ln(a.x1, a.y+cT, cz, b2.x1, b2.y+cB, cz, 'cable')
+      circleXY((a.x1+b2.x1)*0.5, (a.y+cB+b2.y+cT)*0.5, cz, 0.024, 8)
+    }
+    // Full-span diagonals
+    ln(F2[0].x1, F2[0].y+cB, cz, F2[N2-1].x1, F2[N2-1].y+cT, cz, 'cable')
+    ln(F2[0].x1, F2[0].y+cT, cz, F2[N2-1].x1, F2[N2-1].y+cB, cz, 'cable')
+    circleXY((F2[0].x1+F2[N2-1].x1)*0.5, (F2[0].y+cB+F2[N2-1].y+cT)*0.5, cz, 0.028, 8)
+    for (const pj of pSt) {
+      circleXY(F2[pj].x1, F2[pj].y+cB, cz, 0.020, 7)
+      circleXY(F2[pj].x1, F2[pj].y+cT, cz, 0.020, 7)
+    }
+  }
+
+  return { verts, edges }
+}
+
+// =================================================================
+//  ENGINE
+// =================================================================
+
+export default function StairViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.32, rotY: -0.48,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.70, rafId: null,
+    lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+    const { verts, edges } = buildStairGeometry()
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+      return { x: (x1/d)*fov*scale + W/2, y: (-y2/d)*fov*scale + H/2, z: z2 }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+      const proj = verts.map(v => project(v))
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) {
+        if (p.z < zMin) zMin = p.z
+        if (p.z > zMax) zMax = p.z
+      }
+      const zRange = zMax - zMin || 1
+      const sorted = edges
+        .map(([a, b, type]) => ({ a, b, type, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+
+      for (const { a, b, type, depth } of sorted) {
+        const pa = proj[a], pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+        let color, lw
+        if      (type === 'rail')      { color = `rgba(215,155,255,${da*1.00})`; lw = 1.9 }
+        else if (type === 'post')      { color = `rgba(200,130,255,${da*0.92})`; lw = 1.5 }
+        else if (type === 'cable')     { color = `rgba(175, 95,255,${da*0.72})`; lw = 0.9 }
+        else if (type === 'ring')      { color = `rgba(215,160,255,${da*0.88})`; lw = 1.2 }
+        else if (type === 'cross')     { color = `rgba(165, 80,247,${da*0.55})`; lw = 0.75}
+        else                           { color = `rgba(190,110,255,${da})`      ; lw = 1.3 }
+        ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = color; ctx.lineWidth = lw; ctx.stroke()
+      }
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath(); ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`; ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => { state.dragging=true; state.lastX=e.clientX; state.lastY=e.clientY; stopAutoRotate() }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX-state.lastX)*0.008; state.rotX += (e.clientY-state.lastY)*0.008
+      state.rotX = Math.max(-0.75,Math.min(0.75,state.rotX)); state.lastX=e.clientX; state.lastY=e.clientY
+    }
+    const onMouseUp = () => { state.dragging=false }
+    const onWheel = (e) => {
+      e.preventDefault(); state.zoom *= e.deltaY>0 ? 0.93 : 1.07
+      state.zoom = Math.max(0.35,Math.min(3.0,state.zoom)); stopAutoRotate()
+    }
+
+    let lastTX=0, lastTY=0, lastPinchDist=0
+    const onTouchStart = (e) => {
+      stopAutoRotate(); state.dragging=true
+      if (e.touches.length===1) { lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY }
+      else if (e.touches.length===2) lastPinchDist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length===1) {
+        state.rotY+=(e.touches[0].clientX-lastTX)*0.008; state.rotX+=(e.touches[0].clientY-lastTY)*0.008
+        state.rotX=Math.max(-0.75,Math.min(0.75,state.rotX)); lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY
+      } else if (e.touches.length===2) {
+        const dist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+        if (lastPinchDist) state.zoom*=dist/lastPinchDist
+        state.zoom=Math.max(0.35,Math.min(3.0,state.zoom)); lastPinchDist=dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging=false; lastPinchDist=0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+    const onKeyDown = (e) => { if (e.key==='Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId); clearTimeout(state.idleTimer); ro.disconnect(); setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown); window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp);   canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart);canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd);  window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="sv-overlay" onClick={onClose}>
+      <div className="sv-modal" onClick={e => e.stopPropagation()}>
+        <div className="sv-header">
+          <div className="sv-title-group">
+            <span className="sv-label">3D Modell</span>
+            <h3 className="sv-title">Treppe</h3>
+          </div>
+          <button className="sv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="sv-canvas-wrap">
+          <canvas ref={canvasRef} className={`sv-canvas${ready ? ' sv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="sv-loader" aria-label="Wird geladen">
+              <div className="sv-loader-ring" />
+              <span className="sv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+        <div className="sv-footer">
+          <span className="sv-hint">Ziehen zum Drehen</span>
+          <span className="sv-hint">Scrollen zum Zoomen</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/StaircaseScroller/StaircaseScroller.css

@@ -0,0 +1,22 @@
+.staircase {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 130px;
+  z-index: 5;
+  pointer-events: none;
+  user-select: none;
+}
+
+.staircase canvas {
+  display: block;
+}
+
+/* Show only when the 130px staircase fits in the left gutter
+   (viewport − 1200px content) / 2 ≥ 130px  →  viewport ≥ 1460px */
+@media (max-width: 1460px) {
+  .staircase {
+    display: none;
+  }
+}

src/components/StaircaseScroller/StaircaseScroller.jsx

@@ -0,0 +1,244 @@
+import { useEffect, useRef } from 'react'
+import './StaircaseScroller.css'
+
+// ── Accent colour ────────────────────────────────────────────────
+const [PR, PG, PB] = [139, 61, 184]
+const c = (a) => `rgba(${PR},${PG},${PB},${a})`
+
+// ── Layout ───────────────────────────────────────────────────────
+const W            = 130   // canvas logical width (px)
+const CX           = 68    // helix centre x
+const R_OUT        = 40    // outer step radius
+const R_IN         = 11    // inner (pole) radius
+const DEPTH_X      = 7     // z → screen-x perspective coefficient
+const DEPTH_Y      = 3.5   // z → screen-y perspective coefficient
+
+// ── Helix parameters ────────────────────────────────────────────
+const STEPS_PER_REV = 8
+const NUM_REV       = 5
+const TOTAL_STEPS   = STEPS_PER_REV * NUM_REV   // 40
+const SEGS_PER_STEP = 24   // sub-segments for smooth helix line
+
+// Project an angle + vertical fraction to 2D canvas coords
+function pt(angle, yFrac, H, r = R_OUT) {
+  const s = Math.sin(angle)
+  const co = Math.cos(angle)
+  return {
+    x: CX + r * s  - co * DEPTH_X,
+    y: yFrac * H   + co * DEPTH_Y,
+    z: co,   // depth: +1 = front, -1 = back
+  }
+}
+
+// ── Cube helpers ─────────────────────────────────────────────────
+const CUBE_VERTS_RAW = [
+  [-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],
+  [-1,-1, 1],[1,-1, 1],[1,1, 1],[-1,1, 1],
+]
+const CUBE_EDGES = [
+  [0,1],[1,2],[2,3],[3,0],
+  [4,5],[5,6],[6,7],[7,4],
+  [0,4],[1,5],[2,6],[3,7],
+]
+
+function rotY(v, a) { return [ v[0]*Math.cos(a)+v[2]*Math.sin(a), v[1], -v[0]*Math.sin(a)+v[2]*Math.cos(a) ] }
+function rotX(v, a) { return [ v[0], v[1]*Math.cos(a)-v[2]*Math.sin(a), v[1]*Math.sin(a)+v[2]*Math.cos(a) ] }
+
+function drawCube(ctx, ox, oy, size, ry, rx) {
+  const verts = CUBE_VERTS_RAW.map((v) => {
+    const [x, y, z] = rotX(rotY(v, ry), rx)
+    return {
+      sx: ox + x * size + z * size * 0.2,
+      sy: oy + y * size + z * size * 0.1,
+      z,
+    }
+  })
+
+  const sorted = CUBE_EDGES
+    .map(([a, b]) => ({ a, b, avgZ: (verts[a].z + verts[b].z) / 2 }))
+    .sort((p, q) => p.avgZ - q.avgZ)
+
+  sorted.forEach(({ a, b, avgZ }) => {
+    const norm  = (avgZ + 1) / 2          // 0..1, front = 1
+    const alpha = 0.28 + norm * 0.72
+    ctx.beginPath()
+    ctx.moveTo(verts[a].sx, verts[a].sy)
+    ctx.lineTo(verts[b].sx, verts[b].sy)
+    ctx.strokeStyle = c(alpha)
+    ctx.lineWidth   = norm > 0.5 ? 1.8 : 1.0
+    ctx.stroke()
+  })
+
+  // glow
+  const grd = ctx.createRadialGradient(ox, oy, 0, ox, oy, 11)
+  grd.addColorStop(0, c(0.28))
+  grd.addColorStop(1, c(0))
+  ctx.fillStyle = grd
+  ctx.beginPath(); ctx.arc(ox, oy, 11, 0, Math.PI * 2); ctx.fill()
+
+  // bright dot
+  ctx.beginPath(); ctx.arc(ox, oy, 2.6, 0, Math.PI * 2)
+  ctx.fillStyle = c(1); ctx.fill()
+}
+
+// ── Main draw ────────────────────────────────────────────────────
+function draw(ctx, H, scrollY) {
+  ctx.clearRect(0, 0, W, H)
+
+  const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight)
+  const progress  = Math.min(1, Math.max(0, scrollY / maxScroll))
+  const TOTAL_SEGS = TOTAL_STEPS * SEGS_PER_STEP
+
+  // ── 1. Central pole ─────────────────────────────────────────
+  const poleGrad = ctx.createLinearGradient(0, 0, 0, H)
+  poleGrad.addColorStop(0,   c(0))
+  poleGrad.addColorStop(0.08, c(0.22))
+  poleGrad.addColorStop(0.92, c(0.22))
+  poleGrad.addColorStop(1,   c(0))
+  ctx.beginPath()
+  ctx.moveTo(CX, 0); ctx.lineTo(CX, H)
+  ctx.strokeStyle = poleGrad
+  ctx.lineWidth = 1; ctx.stroke()
+
+  // ── 2. Continuous outer helix (connected!) ───────────────────
+  //    Split into small segments so each segment can have its own
+  //    depth-based opacity → smooth front/back shading, no gaps
+  ctx.lineJoin = 'round'
+  ctx.lineCap  = 'round'
+
+  for (let i = 0; i < TOTAL_SEGS; i++) {
+    const t0 = i       / TOTAL_SEGS
+    const t1 = (i + 1) / TOTAL_SEGS
+    const a0 = t0 * NUM_REV * Math.PI * 2
+    const a1 = t1 * NUM_REV * Math.PI * 2
+    const p0 = pt(a0, t0, H, R_OUT)
+    const p1 = pt(a1, t1, H, R_OUT)
+
+    const avgZ  = (p0.z + p1.z) / 2
+    const front = avgZ > 0
+    const alpha = front
+      ? 0.55 + avgZ * 0.30          // 0.55–0.85 at front
+      : 0.14 + (avgZ + 1) * 0.06   // 0.14–0.20 at back
+
+    ctx.beginPath()
+    ctx.moveTo(p0.x, p0.y)
+    ctx.lineTo(p1.x, p1.y)
+    ctx.strokeStyle = c(alpha)
+    ctx.lineWidth   = front ? 1.3 : 0.75
+    ctx.stroke()
+  }
+
+  // ── 3. Continuous inner helix (near the pole) ────────────────
+  for (let i = 0; i < TOTAL_SEGS; i++) {
+    const t0 = i       / TOTAL_SEGS
+    const t1 = (i + 1) / TOTAL_SEGS
+    const a0 = t0 * NUM_REV * Math.PI * 2
+    const a1 = t1 * NUM_REV * Math.PI * 2
+    const p0 = pt(a0, t0, H, R_IN)
+    const p1 = pt(a1, t1, H, R_IN)
+
+    const avgZ = (p0.z + p1.z) / 2
+    const front = avgZ > 0
+    const alpha = front ? 0.30 : 0.08
+
+    ctx.beginPath()
+    ctx.moveTo(p0.x, p0.y)
+    ctx.lineTo(p1.x, p1.y)
+    ctx.strokeStyle = c(alpha)
+    ctx.lineWidth = 0.65
+    ctx.stroke()
+  }
+
+  // ── 4. Radial step lines (nosing edges) ───────────────────────
+  for (let i = 0; i <= TOTAL_STEPS; i++) {
+    const angle = (i / STEPS_PER_REV) * Math.PI * 2
+    const yFrac = i / TOTAL_STEPS
+    const outer = pt(angle, yFrac, H, R_OUT)
+    const inner = pt(angle, yFrac, H, R_IN)
+
+    const front = outer.z > 0
+    const alpha = front ? 0.48 : 0.11
+
+    ctx.beginPath()
+    ctx.moveTo(inner.x, inner.y)
+    ctx.lineTo(outer.x, outer.y)
+    ctx.strokeStyle = c(alpha)
+    ctx.lineWidth = front ? 1.0 : 0.55
+    ctx.stroke()
+  }
+
+  // ── 5. Geometric figure ──────────────────────────────────────
+  const figAngle = progress * NUM_REV * Math.PI * 2
+  const figPt    = pt(figAngle, progress, H)
+  const ry       = progress * Math.PI * 7
+  const rx       = progress * Math.PI * 4.5
+
+  drawCube(ctx, figPt.x, figPt.y, 10, ry, rx)
+
+  // ── 6. Fade edges into page background ───────────────────────
+  const BG = '13,13,13'
+  const fadeH = 80
+  const top = ctx.createLinearGradient(0, 0, 0, fadeH)
+  top.addColorStop(0, `rgba(${BG},1)`); top.addColorStop(1, `rgba(${BG},0)`)
+  ctx.fillStyle = top; ctx.fillRect(0, 0, W, fadeH)
+
+  const bot = ctx.createLinearGradient(0, H - fadeH, 0, H)
+  bot.addColorStop(0, `rgba(${BG},0)`); bot.addColorStop(1, `rgba(${BG},1)`)
+  ctx.fillStyle = bot; ctx.fillRect(0, H - fadeH, W, fadeH)
+}
+
+// ── Component ────────────────────────────────────────────────────
+export default function StaircaseScroller() {
+  const canvasRef    = useRef(null)
+  const rafRef       = useRef(null)
+  const lastScrollY  = useRef(-1)
+  const ctxRef       = useRef(null)
+  const HRef         = useRef(window.innerHeight)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    const ctx  = canvas.getContext('2d')
+    ctxRef.current = ctx
+
+    const applySize = () => {
+      HRef.current = window.innerHeight
+      canvas.width  = W * dpr
+      canvas.height = HRef.current * dpr
+      canvas.style.width  = `${W}px`
+      canvas.style.height = `${HRef.current}px`
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    }
+
+    // ── RAF polling loop — catches ALL scroll methods ────────────
+    // (wheel, keyboard, middle-mouse autoscroll, touch, programmatic)
+    const tick = () => {
+      const sy = window.scrollY
+      if (sy !== lastScrollY.current) {
+        lastScrollY.current = sy
+        draw(ctx, HRef.current, sy)
+      }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+
+    const onResize = () => { applySize(); draw(ctx, HRef.current, window.scrollY) }
+
+    applySize()
+    draw(ctx, HRef.current, window.scrollY)
+    rafRef.current = requestAnimationFrame(tick)
+    window.addEventListener('resize', onResize, { passive: true })
+
+    return () => {
+      cancelAnimationFrame(rafRef.current)
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
+
+  return (
+    <div className="staircase" aria-hidden="true" role="presentation">
+      <canvas ref={canvasRef} />
+    </div>
+  )
+}

src/components/TerraceViewer/TerraceViewer.css

@@ -0,0 +1,162 @@
+.trv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: trv-fade-in 0.22s ease;
+}
+
+@keyframes trv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.trv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: trv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes trv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.trv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.trv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.trv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.trv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.trv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.trv-close svg { width: 14px; height: 14px; }
+
+.trv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.trv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.trv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.trv-canvas--ready { opacity: 1; }
+.trv-canvas:active { cursor: grabbing; }
+
+.trv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.trv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: trv-spin 0.85s linear infinite;
+}
+
+@keyframes trv-spin { to { transform: rotate(360deg); } }
+
+.trv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: trv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes trv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.trv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.trv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/TerraceViewer/TerraceViewer.jsx

@@ -0,0 +1,382 @@
+import { useEffect, useRef, useState } from 'react'
+import './TerraceViewer.css'
+
+// =================================================================
+//  TERRACE GEOMETRY
+// =================================================================
+
+function buildTerrace() {
+  const V = [], E = []
+
+  function ring(cx, y, cz, rx, rz, n = 24) {
+    const b = V.length
+    for (let i = 0; i < n; i++) {
+      const a = (i / n) * Math.PI * 2
+      V.push([cx + rx * Math.cos(a), y, cz + rz * Math.sin(a)])
+    }
+    for (let i = 0; i < n; i++) E.push([b + i, b + (i + 1) % n])
+    return b
+  }
+
+  function connectRings(b1, b2, n) {
+    for (let i = 0; i < n; i++) E.push([b1 + i, b2 + i])
+  }
+
+  function box(x1, y1, z1, x2, y2, z2) {
+    const b = V.length
+    V.push(
+      [x1,y1,z1],[x2,y1,z1],[x2,y1,z2],[x1,y1,z2],
+      [x1,y2,z1],[x2,y2,z1],[x2,y2,z2],[x1,y2,z2],
+    )
+    E.push(
+      [b,b+1],[b+1,b+2],[b+2,b+3],[b+3,b],
+      [b+4,b+5],[b+5,b+6],[b+6,b+7],[b+7,b+4],
+      [b,b+4],[b+1,b+5],[b+2,b+6],[b+3,b+7],
+    )
+  }
+
+  function line(x1,y1,z1, x2,y2,z2) {
+    const b = V.length
+    V.push([x1,y1,z1],[x2,y2,z2])
+    E.push([b,b+1])
+  }
+
+  function cylinder(cx, y1, cz, rx, rz, y2, n = 16) {
+    const b1 = ring(cx, y1, cz, rx, rz, n)
+    const b2 = ring(cx, y2, cz, rx, rz, n)
+    connectRings(b1, b2, n)
+  }
+
+  const TX = 2.10, FL = -0.40
+  const ZN = -2.40  // back — house side
+  const ZF =  2.40  // front — open side (steps)
+  const RH = FL + 0.96  // railing top
+
+  // ── FLOOR ──────────────────────────────────────────────────────
+  const fp = V.length
+  V.push([-TX,FL,ZN],[TX,FL,ZN],[TX,FL,ZF],[-TX,FL,ZF])
+  E.push([fp,fp+1],[fp+1,fp+2],[fp+2,fp+3],[fp+3,fp])
+  // Paving tile grid — x lines
+  for (let x = -TX + 0.60; x < TX; x += 0.60)
+    line(x, FL, ZN, x, FL, ZF)
+  // Paving tile grid — z lines
+  for (let z = ZN + 0.60; z < ZF; z += 0.60)
+    line(-TX, FL, z, TX, FL, z)
+
+  // ── HOUSE WALL / SLIDING DOOR ──────────────────────────────────
+  box(-TX, FL, ZN - 0.06, TX, FL + 0.10, ZN)  // threshold ledge
+  {
+    const h = V.length
+    V.push(
+      [-0.72, FL+0.08, ZN],[ 0.72, FL+0.08, ZN],
+      [ 0.72, FL+0.08+2.10, ZN],[-0.72, FL+0.08+2.10, ZN],
+    )
+    E.push([h,h+1],[h+1,h+2],[h+2,h+3],[h+3,h])
+    // Centre divider (two sliding panels)
+    line(0.0, FL+0.08, ZN, 0.0, FL+0.08+2.10, ZN)
+    // Handles
+    box(-0.08, FL+0.08+0.90, ZN, 0.00, FL+0.08+1.04, ZN-0.03)
+    box( 0.00, FL+0.08+0.90, ZN, 0.08, FL+0.08+1.04, ZN-0.03)
+    // Sill
+    box(-0.74, FL+0.06, ZN-0.03, 0.74, FL+0.10, ZN)
+  }
+
+  // ── RAILING ────────────────────────────────────────────────────
+  const GAP = 0.88  // half-width of step opening
+  // Corner posts
+  for (const [px,pz] of [[-TX,ZN],[TX,ZN],[-TX,ZF],[TX,ZF]])
+    box(px-0.05, FL, pz-0.05, px+0.05, RH, pz+0.05)
+  // Front posts (left and right of step gap)
+  for (let x = -TX+0.78; x < -GAP; x += 0.78)
+    box(x-0.04, FL, ZF-0.04, x+0.04, RH, ZF+0.04)
+  for (let x = GAP+0.40; x < TX-0.30; x += 0.78)
+    box(x-0.04, FL, ZF-0.04, x+0.04, RH, ZF+0.04)
+  // Side posts
+  for (let z = ZN+0.80; z < ZF-0.30; z += 0.80) {
+    box(-TX-0.04, FL, z-0.04, -TX+0.04, RH, z+0.04)
+    box( TX-0.04, FL, z-0.04,  TX+0.04, RH, z+0.04)
+  }
+  // Top rails
+  line(-TX, RH, ZN, -TX, RH, ZF)
+  line( TX, RH, ZN,  TX, RH, ZF)
+  line(-TX, RH, ZF, -GAP, RH, ZF)
+  line( GAP, RH, ZF,  TX, RH, ZF)
+  // Mid rails
+  line(-TX, FL+0.52, ZN, -TX, FL+0.52, ZF)
+  line( TX, FL+0.52, ZN,  TX, FL+0.52, ZF)
+  line(-TX, FL+0.52, ZF, -GAP, FL+0.52, ZF)
+  line( GAP, FL+0.52, ZF,  TX, FL+0.52, ZF)
+  // Bottom rails
+  line(-TX, FL+0.12, ZN, -TX, FL+0.12, ZF)
+  line( TX, FL+0.12, ZN,  TX, FL+0.12, ZF)
+  line(-TX, FL+0.12, ZF, -GAP, FL+0.12, ZF)
+  line( GAP, FL+0.12, ZF,  TX, FL+0.12, ZF)
+  // Balusters — sides
+  for (let z = ZN+0.22; z < ZF; z += 0.22) {
+    line(-TX, FL+0.14, z, -TX, RH-0.04, z)
+    line( TX, FL+0.14, z,  TX, RH-0.04, z)
+  }
+  // Balusters — front left
+  for (let x = -TX+0.22; x < -GAP; x += 0.22)
+    line(x, FL+0.14, ZF, x, RH-0.04, ZF)
+  // Balusters — front right
+  for (let x = GAP+0.22; x < TX; x += 0.22)
+    line(x, FL+0.14, ZF, x, RH-0.04, ZF)
+
+  // ── STEPS ──────────────────────────────────────────────────────
+  box(-GAP,      FL-0.18, ZF,      GAP,      FL,       ZF+0.38)
+  box(-GAP+0.10, FL-0.36, ZF+0.38, GAP-0.10, FL-0.18,  ZF+0.76)
+  box(-GAP+0.20, FL-0.54, ZF+0.76, GAP-0.20, FL-0.36,  ZF+1.14)
+
+  // ── PERGOLA ────────────────────────────────────────────────────
+  const PH = FL + 2.28
+  // 4 posts
+  for (const [px,pz] of [[-TX+0.10,ZN+0.24],[TX-0.10,ZN+0.24],[-TX+0.10,ZF-0.30],[TX-0.10,ZF-0.30]])
+    box(px-0.07, FL, pz-0.07, px+0.07, PH, pz+0.07)
+  // Longitudinal beams (z direction, on top of posts)
+  box(-TX+0.04, PH, ZN+0.24, -TX+0.16, PH+0.14, ZF-0.30)
+  box( TX-0.16, PH, ZN+0.24,  TX-0.04, PH+0.14, ZF-0.30)
+  // Cross beams (x direction, resting on longitudinal beams)
+  for (let z = ZN+0.50; z < ZF-0.20; z += 0.80)
+    box(-TX+0.04, PH+0.14, z-0.05, TX-0.04, PH+0.20, z+0.05)
+
+  // ── TABLE ──────────────────────────────────────────────────────
+  box(-0.68, FL+0.76, -0.72, 0.68, FL+0.80, 0.72)
+  // Board lines on table top
+  for (let tz = -0.60; tz <= 0.60; tz += 0.24)
+    line(-0.66, FL+0.80, tz, 0.66, FL+0.80, tz)
+  // Legs
+  for (const [lx,lz] of [[-0.60,-0.62],[0.60,-0.62],[-0.60,0.62],[0.60,0.62]])
+    box(lx-0.04, FL, lz-0.04, lx+0.04, FL+0.76, lz+0.04)
+
+  // ── CHAIRS ─────────────────────────────────────────────────────
+  // [cx, cz, bx, bz]  — bx/bz offset for backrest (away from table)
+  for (const [cx, cz, bx, bz] of [
+    [ 0.00, -1.10,  0.00, -0.21],
+    [ 0.00,  1.10,  0.00,  0.21],
+    [-1.06,  0.00, -0.21,  0.00],
+    [ 1.06,  0.00,  0.21,  0.00],
+  ]) {
+    box(cx-0.21, FL+0.46, cz-0.21, cx+0.21, FL+0.50, cz+0.21)
+    for (const [dx,dz] of [[-0.16,-0.16],[0.16,-0.16],[-0.16,0.16],[0.16,0.16]])
+      box(cx+dx-0.03, FL, cz+dz-0.03, cx+dx+0.03, FL+0.46, cz+dz+0.03)
+    if (bz !== 0) {
+      const bsz = cz + bz
+      box(cx-0.21, FL+0.50, bsz-0.04, cx+0.21, FL+0.90, bsz+0.04)
+      line(cx-0.19, FL+0.68, bsz, cx+0.19, FL+0.68, bsz)
+    } else {
+      const bsx = cx + bx
+      box(bsx-0.04, FL+0.50, cz-0.21, bsx+0.04, FL+0.90, cz+0.21)
+      line(bsx, FL+0.68, cz-0.19, bsx, FL+0.68, cz+0.19)
+    }
+  }
+
+  // ── PLANTERS (corners near house wall) ─────────────────────────
+  for (const [px,pz] of [[-TX+0.32, ZN+0.34],[TX-0.32, ZN+0.34]]) {
+    box(px-0.28, FL, pz-0.28, px+0.28, FL+0.52, pz+0.28)
+    box(px-0.26, FL+0.48, pz-0.26, px+0.26, FL+0.52, pz+0.26)
+    cylinder(px, FL+0.52, pz, 0.06, 0.06, FL+0.88, 8)
+    ring(px, FL+0.88, pz, 0.22, 0.22, 14)
+    ring(px, FL+0.74, pz, 0.14, 0.14, 10)
+    for (let i = 0; i < 6; i++) {
+      const a = (i / 6) * Math.PI * 2
+      line(px, FL+0.88, pz, px + 0.14*Math.cos(a), FL+1.06, pz + 0.14*Math.sin(a))
+    }
+  }
+
+  // ── WALL LAMP (beside door) ────────────────────────────────────
+  box(-0.88, FL+1.52, ZN-0.03, -0.74, FL+1.56, ZN)
+  box(-0.88, FL+1.56, ZN-0.14, -0.74, FL+1.74, ZN)
+  ring(-0.81, FL+1.65, ZN-0.07, 0.07, 0.07, 8)
+  ring(-0.81, FL+1.74, ZN-0.07, 0.04, 0.04, 6)
+
+  // ── BARBECUE / GRILL (side wall) ───────────────────────────────
+  box(TX-0.58, FL, ZN+0.70, TX-0.04, FL+0.92, ZN+1.20)
+  box(TX-0.60, FL+0.88, ZN+0.68, TX-0.02, FL+0.94, ZN+1.22)  // lid rim
+  box(TX-0.60, FL+0.94, ZN+0.68, TX-0.02, FL+1.02, ZN+1.22)  // lid dome
+  // Side shelf
+  box(TX-0.58, FL+0.78, ZN+1.20, TX-0.04, FL+0.84, ZN+1.52)
+  // Legs
+  for (const [lx,lz] of [[TX-0.50,ZN+0.76],[TX-0.12,ZN+0.76],[TX-0.12,ZN+1.16]])
+    box(lx-0.03, FL-0.06, lz-0.03, lx+0.03, FL, lz+0.03)
+
+  return { verts: V, edges: E }
+}
+
+const { verts, edges } = buildTerrace()
+
+// =================================================================
+//  ENGINE
+// =================================================================
+
+export default function TerraceViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.36, rotY: -0.46,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 0.52, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+      return { x: (x1/d)*fov*scale + W/2, y: (-y2/d)*fov*scale + H/2, z: z2 }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+      if (verts.length === 0) return
+      const proj = verts.map(v => project(v))
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) { if (p.z < zMin) zMin = p.z; if (p.z > zMax) zMax = p.z }
+      const zRange = zMax - zMin || 1
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a], pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+        ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3; ctx.stroke()
+      }
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath(); ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`; ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => { state.dragging=true; state.lastX=e.clientX; state.lastY=e.clientY; stopAutoRotate() }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX-state.lastX)*0.008; state.rotX += (e.clientY-state.lastY)*0.008
+      state.rotX = Math.max(-0.75,Math.min(0.75,state.rotX)); state.lastX=e.clientX; state.lastY=e.clientY
+    }
+    const onMouseUp = () => { state.dragging=false }
+    const onWheel = (e) => {
+      e.preventDefault(); state.zoom *= e.deltaY>0 ? 0.93 : 1.07
+      state.zoom = Math.max(0.30,Math.min(3.0,state.zoom)); stopAutoRotate()
+    }
+
+    let lastTX=0, lastTY=0, lastPinchDist=0
+    const onTouchStart = (e) => {
+      stopAutoRotate(); state.dragging=true
+      if (e.touches.length===1) { lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY }
+      else if (e.touches.length===2) lastPinchDist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length===1) {
+        state.rotY+=(e.touches[0].clientX-lastTX)*0.008; state.rotX+=(e.touches[0].clientY-lastTY)*0.008
+        state.rotX=Math.max(-0.75,Math.min(0.75,state.rotX)); lastTX=e.touches[0].clientX; lastTY=e.touches[0].clientY
+      } else if (e.touches.length===2) {
+        const dist=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY)
+        if (lastPinchDist) state.zoom*=dist/lastPinchDist
+        state.zoom=Math.max(0.30,Math.min(3.0,state.zoom)); lastPinchDist=dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging=false; lastPinchDist=0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+    const onKeyDown = (e) => { if (e.key==='Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId); clearTimeout(state.idleTimer); ro.disconnect(); setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown); window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp);   canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart);canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd);  window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="trv-overlay" onClick={onClose}>
+      <div className="trv-modal" onClick={e => e.stopPropagation()}>
+        <div className="trv-header">
+          <div className="trv-title-group">
+            <span className="trv-label">3D Modell</span>
+            <h3 className="trv-title">Terrasse</h3>
+          </div>
+          <button className="trv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="trv-canvas-wrap">
+          <canvas ref={canvasRef} className={`trv-canvas${ready ? ' trv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="trv-loader" aria-label="Wird geladen">
+              <div className="trv-loader-ring" />
+              <span className="trv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+        <div className="trv-footer">
+          <span className="trv-hint">Ziehen zum Drehen</span>
+          <span className="trv-hint">Scrollen zum Zoomen</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/WhatWeMeasure/WhatWeMeasure.css

@@ -0,0 +1,152 @@
+.wwm {
+  background: rgba(18, 18, 18, 0.68);
+  border-top: 1px solid var(--color-border);
+}
+
+.wwm-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.wwm-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.wwm-title {
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+
+.wwm-subtitle {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  max-width: 480px;
+}
+
+.wwm-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+}
+
+.wwm-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-6);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
+  overflow: hidden;
+}
+
+.wwm-tile:hover {
+  border-color: var(--color-accent-border);
+  background: var(--color-surface-3);
+}
+
+/* 3D tile — subtle extra glow to hint interactivity */
+.wwm-tile--3d {
+  border-color: rgba(139, 61, 184, 0.35);
+}
+
+.wwm-tile--3d:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 20px rgba(139, 61, 184, 0.20);
+}
+
+.wwm-tile--3d .wwm-tile-arrow {
+  color: var(--color-accent);
+}
+
+.wwm-tile--active {
+  border-color: var(--color-accent) !important;
+  background: var(--color-accent-dim) !important;
+  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-accent);
+}
+
+.wwm-tile-icon {
+  color: var(--color-accent);
+  transition: color var(--transition);
+  flex-shrink: 0;
+}
+
+.wwm-tile-icon svg {
+  width: 40px;
+  height: 40px;
+}
+
+.wwm-tile--active .wwm-tile-icon {
+  color: #C06EE8;
+}
+
+.wwm-tile-title {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.3;
+}
+
+.wwm-tile-desc {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height var(--transition-slow), opacity var(--transition-slow);
+}
+
+.wwm-tile-desc--visible {
+  max-height: 120px;
+  opacity: 1;
+}
+
+.wwm-tile-arrow {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  color: var(--color-text-faint);
+  transition: transform var(--transition), color var(--transition);
+}
+
+.wwm-tile-arrow svg {
+  width: 16px;
+  height: 16px;
+}
+
+.wwm-tile--active .wwm-tile-arrow {
+  transform: rotate(180deg);
+  color: var(--color-accent);
+}
+
+@media (max-width: 1024px) {
+  .wwm-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .wwm-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .wwm-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/components/WhatWeMeasure/WhatWeMeasure.jsx

@@ -0,0 +1,204 @@
+import { useState, lazy, Suspense } from 'react'
+
+const StairViewer   = lazy(() => import('../StairViewer/StairViewer'))
+const BathViewer    = lazy(() => import('../BathViewer/BathViewer'))
+const KitchenViewer = lazy(() => import('../KitchenViewer/KitchenViewer'))
+const RoomViewer    = lazy(() => import('../RoomViewer/RoomViewer'))
+const BedroomViewer = lazy(() => import('../BedroomViewer/BedroomViewer'))
+const TerraceViewer = lazy(() => import('../TerraceViewer/TerraceViewer'))
+const ClosetViewer  = lazy(() => import('../ClosetViewer/ClosetViewer'))
+import './WhatWeMeasure.css'
+
+const SERVICES = [
+  {
+    id: 'kuche',
+    title: 'Küche',
+    description: 'Komplette Raumerfassung inkl. Anschlüsse, Vorsprünge, Fensterlaibungen und Bodenneigung.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="22" width="32" height="14" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="4" y="4" width="32" height="14" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <circle cx="14" cy="11" r="3" stroke="currentColor" strokeWidth="1.5" />
+        <circle cx="26" cy="11" r="3" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="10" y="26" width="8" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+      </svg>
+    ),
+  },
+  {
+    id: 'raum',
+    title: 'Raum / Grundriss',
+    description: 'Einzelräume oder ganze Etagen. Wände, Öffnungen, Höhen, Winkel – alles in einer Messung.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 34V10l10-6 18 6v24H6z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+        <path d="M6 34h28" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M16 34V22h8v12" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M6 10h28" stroke="currentColor" strokeWidth="1.5" strokeDasharray="2 2" />
+      </svg>
+    ),
+  },
+  {
+    id: 'treppe',
+    title: 'Treppe',
+    description: 'Lauf, Podest, Wangen, lichte Maße. Auch gewendelte und freitragende Treppen.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 34h6V28h6V22h6V16h6V10h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6 34V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: 'schrank',
+    title: 'Schrank / Einbaumöbel',
+    description: 'Nischen, Dachschrägen, unebene Wände. Exakte Maße für passgenaue Fertigung.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="6" width="32" height="30" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <line x1="20" y1="6" x2="20" y2="36" stroke="currentColor" strokeWidth="1.5" />
+        <circle cx="17" cy="21" r="1.5" fill="currentColor" />
+        <circle cx="23" cy="21" r="1.5" fill="currentColor" />
+        <line x1="4" y1="14" x2="36" y2="14" stroke="currentColor" strokeWidth="1.5" />
+      </svg>
+    ),
+  },
+  {
+    id: 'bad',
+    title: 'Bad',
+    description: 'Raum mit allen Installationspunkten, Anschlüssen, Gefälle und Fliesenkanten.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 20h24v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-8z" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M8 20V10a4 4 0 014-4h1a3 3 0 013 3v11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <line x1="16" y1="34" x2="14" y2="38" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <line x1="24" y1="34" x2="26" y2="38" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: 'schlafzimmer',
+    title: 'Schlafzimmer',
+    description: 'Bett, Einbauschränke, Nischen, Dachschrägen – präzise Maße für Möbel und Renovierung.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="18" width="32" height="14" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M4 22h32" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="6" y="22" width="10" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="24" y="22" width="10" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M4 18v-4a2 2 0 012-2h28a2 2 0 012 2v4" stroke="currentColor" strokeWidth="1.5" />
+      </svg>
+    ),
+  },
+  {
+    id: 'terrasse',
+    title: 'Terrasse',
+    description: 'Bodenbelag, Geländer, Stufen und Entwässerung – exaktes Aufmaß für Neugestaltung und Planung.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="10" width="32" height="18" stroke="currentColor" strokeWidth="1.5" />
+        <line x1="4" y1="10" x2="4" y2="28" stroke="currentColor" strokeWidth="1.5" />
+        <line x1="36" y1="10" x2="36" y2="28" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="13" y="28" width="14" height="3" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="15" y="31" width="10" height="3" stroke="currentColor" strokeWidth="1.5" />
+        <line x1="4" y1="18" x2="36" y2="18" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.55" />
+        <line x1="4" y1="24" x2="36" y2="24" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.55" />
+        <line x1="17" y1="10" x2="17" y2="28" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.55" />
+        <line x1="26" y1="10" x2="26" y2="28" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.55" />
+      </svg>
+    ),
+  },
+  {
+    id: 'individuell',
+    title: 'Individuell',
+    description: 'Ihr Projekt passt in keine Kategorie? Sprechen Sie uns an.',
+    icon: (
+      <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="20" cy="20" r="14" stroke="currentColor" strokeWidth="1.5" />
+        <line x1="20" y1="13" x2="20" y2="27" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <line x1="13" y1="20" x2="27" y2="20" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+]
+
+export default function WhatWeMeasure() {
+  const [activeId,     setActiveId]     = useState(null)
+  const [showStair,    setShowStair]    = useState(false)
+  const [showBath,     setShowBath]     = useState(false)
+  const [showKitchen,  setShowKitchen]  = useState(false)
+  const [showRoom,      setShowRoom]      = useState(false)
+  const [showBedroom,   setShowBedroom]   = useState(false)
+  const [showTerrace,   setShowTerrace]   = useState(false)
+  const [showCloset,    setShowCloset]    = useState(false)
+
+  const handleTileClick = (id) => {
+    if (id === 'treppe')       { setShowStair(true);    return }
+    if (id === 'bad')          { setShowBath(true);     return }
+    if (id === 'kuche')        { setShowKitchen(true);  return }
+    if (id === 'raum')         { setShowRoom(true);     return }
+    if (id === 'schlafzimmer') { setShowBedroom(true);  return }
+    if (id === 'terrasse')    { setShowTerrace(true);  return }
+    if (id === 'schrank')     { setShowCloset(true);   return }
+    setActiveId(activeId === id ? null : id)
+  }
+
+  return (
+    <div className="wwm section">
+      <div className="container">
+        <div className="wwm-header">
+          <span className="wwm-label">Aufmaßbereiche</span>
+          <h2 className="wwm-title">Was wir aufmessen.</h2>
+          <p className="wwm-subtitle">
+            Wählen Sie eine Kategorie für mehr Details – oder gehen Sie direkt zum Kostenrechner.
+          </p>
+        </div>
+
+        <div className="wwm-grid">
+          {SERVICES.map((service) => {
+            const isActive   = activeId === service.id
+            const is3D       = ['treppe','bad','kuche','raum','schlafzimmer','terrasse','schrank'].includes(service.id)
+            return (
+              <button
+                key={service.id}
+                className={`wwm-tile${isActive ? ' wwm-tile--active' : ''}${is3D ? ' wwm-tile--3d' : ''}`}
+                onClick={() => handleTileClick(service.id)}
+                aria-expanded={isActive}
+                title={is3D ? '3D Modell anzeigen' : undefined}
+              >
+                <div className="wwm-tile-icon">{service.icon}</div>
+                <div className="wwm-tile-title">{service.title}</div>
+                <div className={`wwm-tile-desc${isActive ? ' wwm-tile-desc--visible' : ''}`}>
+                  {service.description}
+                </div>
+                <div className="wwm-tile-arrow" aria-hidden="true">
+                  {is3D ? (
+                    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M8 2l4 2.5v5L8 12 4 9.5v-5L8 2z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
+                      <path d="M8 2v10M4 4.5l4 2.5 4-2.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+                    </svg>
+                  ) : (
+                    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  )}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <Suspense fallback={null}>
+        {showStair   && <StairViewer   onClose={() => setShowStair(false)}   />}
+        {showBath    && <BathViewer    onClose={() => setShowBath(false)}    />}
+        {showKitchen && <KitchenViewer onClose={() => setShowKitchen(false)} />}
+        {showRoom    && <RoomViewer    onClose={() => setShowRoom(false)}    />}
+        {showBedroom  && <BedroomViewer  onClose={() => setShowBedroom(false)}  />}
+        {showTerrace  && <TerraceViewer  onClose={() => setShowTerrace(false)}  />}
+        {showCloset   && <ClosetViewer   onClose={() => setShowCloset(false)}   />}
+      </Suspense>
+    </div>
+  )
+}
+
+export { SERVICES }

src/components/WhySuperfice/WhySuperfice.css

@@ -0,0 +1,109 @@
+.why {
+  background: rgba(18, 18, 18, 0.68);
+  border-top: 1px solid var(--color-border);
+}
+
+.why-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.why-label {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.why-title {
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+  line-height: 1.2;
+}
+
+.why-lead {
+  font-size: var(--font-size-md);
+  color: var(--color-text-muted);
+  max-width: 560px;
+  line-height: 1.65;
+}
+
+.why-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-5);
+}
+
+.why-card {
+  padding: var(--space-8) var(--space-6);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  transition: border-color var(--transition);
+}
+
+.why-card:hover {
+  border-color: var(--color-accent-border);
+}
+
+.why-icon {
+  color: var(--color-accent);
+}
+
+.why-icon svg {
+  width: 32px;
+  height: 32px;
+}
+
+.why-card-title {
+  font-size: var(--font-size-base);
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1.3;
+}
+
+.why-card-body {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: 1.65;
+  flex: 1;
+}
+
+.why-formats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.why-format-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--color-accent);
+  background: var(--color-accent-dim);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-sm);
+  padding: 0.2rem 0.55rem;
+}
+
+@media (max-width: 1024px) {
+  .why-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .why-grid {
+    grid-template-columns: 1fr;
+    max-width: 480px;
+  }
+}

src/components/WhySuperfice/WhySuperfice.jsx

@@ -0,0 +1,93 @@
+import './WhySuperfice.css'
+
+const POINTS = [
+  {
+    icon: (
+      <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 4l2.5 7.5H26l-6.5 4.5 2.5 7.5L16 19l-6 4.5 2.5-7.5L6 11.5h7.5L16 4z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+      </svg>
+    ),
+    title: 'Keine Zahlendreher.',
+    body: 'Digitale Messdaten – keine handschriftlichen Notizen, keine Übertragungsfehler. Jede Messung wird zweifach geprüft.',
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="6" width="24" height="20" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M4 12h24" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M10 18h4M10 22h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+    title: 'Keine Handskizzen.',
+    body: 'Fertige CAD-Datei, direkt importierbar – ohne Zeichenaufwand oder Nachbearbeitung auf Ihrer Seite.',
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="16" cy="16" r="11" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M16 10v6l4 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+    title: 'Kein zweites Mal hinfahren.',
+    body: 'Alles in einem Termin. Komplex, möbliert, Altbau oder Dachschräge – kein Objekt ist zu kompliziert.',
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 20l10-10 4 4 6-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M22 8h4v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+    title: 'Ihr Format.',
+    body: 'Wir liefern in dem Format, das Ihre Software braucht – ohne Umformatierung oder manuelle Anpassung.',
+    formats: ['DXF', 'DWG', 'RVT', 'IFC', 'PDF'],
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 26V14l10-8 10 8v12" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+        <rect x="12" y="20" width="8" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M10 14h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+    title: 'Für jeden Betrieb.',
+    body: 'Ob Einzelauftrag oder laufende Zusammenarbeit – Superfice skaliert mit Ihrem Auftragsvolumen.',
+  },
+]
+
+export default function WhySuperfice() {
+  return (
+    <div className="why section">
+      <div className="container">
+        <div className="why-header">
+          <span className="why-label">Warum Superfice</span>
+          <h2 className="why-title">
+            Geprüft. Millimetergenau.
+            <br />Sofort nutzbar.
+          </h2>
+          <p className="why-lead">
+            Sie bekommen ein geprüftes, millimetergenaues Aufmaß im Format Ihrer Wahl –
+            und können sofort weiterarbeiten. Kein Mehraufwand, kein Risiko.
+          </p>
+        </div>
+
+        <div className="why-grid">
+          {POINTS.map((point, i) => (
+            <div key={i} className="why-card">
+              <div className="why-icon">{point.icon}</div>
+              <h3 className="why-card-title">{point.title}</h3>
+              <p className="why-card-body">{point.body}</p>
+              {point.formats && (
+                <div className="why-formats">
+                  {point.formats.map((f) => (
+                    <span key={f} className="why-format-badge">{f}</span>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/WireframeViewer/WireframeViewer.css

@@ -0,0 +1,162 @@
+.wv-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(6, 6, 10, 0.82);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  animation: wv-fade-in 0.22s ease;
+}
+
+@keyframes wv-fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+.wv-modal {
+  width: 100%;
+  max-width: 640px;
+  height: min(580px, 90vh);
+  background: rgba(14, 14, 22, 0.96);
+  border: 1px solid rgba(139, 61, 184, 0.40);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(139, 61, 184, 0.12),
+    0 24px 80px rgba(0, 0, 0, 0.65),
+    0 0 60px rgba(139, 61, 184, 0.12);
+  animation: wv-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes wv-slide-up {
+  from { opacity: 0; transform: translateY(24px) scale(0.97) }
+  to   { opacity: 1; transform: translateY(0)    scale(1)    }
+}
+
+.wv-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.wv-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.wv-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.wv-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+}
+
+.wv-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+  flex-shrink: 0;
+}
+
+.wv-close svg { width: 14px; height: 14px; }
+
+.wv-close:hover {
+  background: rgba(139, 61, 184, 0.22);
+  border-color: rgba(139, 61, 184, 0.50);
+  color: var(--color-text);
+}
+
+.wv-canvas-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.wv-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.wv-canvas--ready { opacity: 1; }
+.wv-canvas:active { cursor: grabbing; }
+
+.wv-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  pointer-events: none;
+}
+
+.wv-loader-ring {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid rgba(139, 61, 184, 0.18);
+  border-top-color: var(--color-accent);
+  animation: wv-spin 0.85s linear infinite;
+}
+
+@keyframes wv-spin { to { transform: rotate(360deg); } }
+
+.wv-loader-text {
+  font-size: 0.72rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  animation: wv-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes wv-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 0.9; }
+}
+
+.wv-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.wv-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-faint);
+  letter-spacing: 0.03em;
+}

src/components/WireframeViewer/WireframeViewer.jsx

@@ -0,0 +1,275 @@
+import { useEffect, useRef, useState } from 'react'
+import './WireframeViewer.css'
+
+// ─────────────────────────────────────────────────────────────────
+//  YOUR GEOMETRY GOES HERE
+//
+//  verts  →  array of points in 3D space: [x, y, z]
+//  edges  →  array of lines between two vertex indices: [from, to]
+//
+//  Coordinate system:
+//    X  →  right
+//    Y  →  up
+//    Z  →  toward you (out of screen)
+//
+//  Keep values roughly in the -2 … +2 range so the model fits nicely.
+//  Center your model around [0, 0, 0].
+//
+//  Example below: a simple cube.
+// ─────────────────────────────────────────────────────────────────
+
+const verts = [
+  //  [ x,  y,  z ]
+  [ -1, -1, -1 ],   // 0
+  [  1, -1, -1 ],   // 1
+  [  1,  1, -1 ],   // 2
+  [ -1,  1, -1 ],   // 3
+  [ -1, -1,  1 ],   // 4
+  [  1, -1,  1 ],   // 5
+  [  1,  1,  1 ],   // 6
+  [ -1,  1,  1 ],   // 7
+]
+
+const edges = [
+  [ 0, 1 ], [ 1, 2 ], [ 2, 3 ], [ 3, 0 ],   // back face
+  [ 4, 5 ], [ 5, 6 ], [ 6, 7 ], [ 7, 4 ],   // front face
+  [ 0, 4 ], [ 1, 5 ], [ 2, 6 ], [ 3, 7 ],   // connecting edges
+]
+
+// ─────────────────────────────────────────────────────────────────
+//  ENGINE — no need to touch anything below this line
+// ─────────────────────────────────────────────────────────────────
+
+export default function WireframeViewer({ onClose }) {
+  const canvasRef = useRef(null)
+  const [ready, setReady] = useState(false)
+  const stateRef = useRef({
+    rotX: 0.30, rotY: -0.55,
+    dragging: false, lastX: 0, lastY: 0,
+    autoRotate: true, idleTimer: null,
+    zoom: 1.0, rafId: null, lastTs: 0,
+  })
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx   = canvas.getContext('2d')
+    const state = stateRef.current
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width  = canvas.offsetWidth  * dpr
+      canvas.height = canvas.offsetHeight * dpr
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+
+    function project(v) {
+      let [x, y, z] = v
+      const { rotX, rotY, zoom } = state
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      const cy_ = Math.cos(rotY), sy_ = Math.sin(rotY)
+      const x1  =  x * cy_ - z * sy_
+      const z1  =  x * sy_ + z * cy_
+
+      const cx_ = Math.cos(rotX), sx_ = Math.sin(rotX)
+      const y2  =  y * cx_ - z1 * sx_
+      const z2  =  y * sx_ + z1 * cx_
+
+      const fov   = Math.min(W, H) * 1.75
+      const scale = Math.min(W, H) * 0.095 * zoom
+      const d     = fov + z2
+
+      return {
+        x: (x1  / d) * fov * scale + W / 2,
+        y: (-y2 / d) * fov * scale + H / 2,
+        z: z2,
+      }
+    }
+
+    function render() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W   = canvas.width  / dpr
+      const H   = canvas.height / dpr
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, W, H)
+
+      const proj = verts.map(v => project(v))
+
+      let zMin = Infinity, zMax = -Infinity
+      for (const p of proj) {
+        if (p.z < zMin) zMin = p.z
+        if (p.z > zMax) zMax = p.z
+      }
+      const zRange = zMax - zMin || 1
+
+      const sorted = edges
+        .map(([a, b]) => ({ a, b, depth: (proj[a].z + proj[b].z) * 0.5 }))
+        .sort((e1, e2) => e2.depth - e1.depth)
+
+      for (const { a, b, depth } of sorted) {
+        const pa = proj[a]
+        const pb = proj[b]
+        const t  = (depth - zMin) / zRange
+        const da = Math.max(0.10, Math.min(1.0, 1.05 - t * 0.88))
+
+        ctx.beginPath()
+        ctx.moveTo(pa.x, pa.y)
+        ctx.lineTo(pb.x, pb.y)
+        ctx.strokeStyle = `rgba(190,110,255,${da})`
+        ctx.lineWidth   = 1.3
+        ctx.stroke()
+      }
+
+      for (const p of proj) {
+        const t  = (p.z - zMin) / zRange
+        const da = Math.max(0.08, 0.45 - t * 0.35)
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(220,170,255,${da})`
+        ctx.fill()
+      }
+    }
+
+    let firstFrame = true
+    function loop(ts) {
+      state.rafId = requestAnimationFrame(loop)
+      if (ts - state.lastTs < 32) return
+      state.lastTs = ts
+      if (state.autoRotate && !state.dragging) state.rotY += 0.006
+      render()
+      if (firstFrame) { firstFrame = false; setReady(true) }
+    }
+    state.rafId = requestAnimationFrame(loop)
+
+    const stopAutoRotate = () => {
+      state.autoRotate = false
+      clearTimeout(state.idleTimer)
+      state.idleTimer = setTimeout(() => { state.autoRotate = true }, 2200)
+    }
+
+    const onMouseDown = (e) => {
+      state.dragging = true
+      state.lastX = e.clientX
+      state.lastY = e.clientY
+      stopAutoRotate()
+    }
+    const onMouseMove = (e) => {
+      if (!state.dragging) return
+      state.rotY += (e.clientX - state.lastX) * 0.008
+      state.rotX += (e.clientY - state.lastY) * 0.008
+      state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+      state.lastX  = e.clientX
+      state.lastY  = e.clientY
+    }
+    const onMouseUp = () => { state.dragging = false }
+
+    const onWheel = (e) => {
+      e.preventDefault()
+      state.zoom *= e.deltaY > 0 ? 0.93 : 1.07
+      state.zoom  = Math.max(0.35, Math.min(3.0, state.zoom))
+      stopAutoRotate()
+    }
+
+    let lastTX = 0, lastTY = 0, lastPinchDist = 0
+
+    const onTouchStart = (e) => {
+      stopAutoRotate()
+      state.dragging = true
+      if (e.touches.length === 1) {
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        lastPinchDist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+      }
+    }
+    const onTouchMove = (e) => {
+      if (!state.dragging) return
+      if (e.touches.length === 1) {
+        state.rotY += (e.touches[0].clientX - lastTX) * 0.008
+        state.rotX += (e.touches[0].clientY - lastTY) * 0.008
+        state.rotX  = Math.max(-0.75, Math.min(0.75, state.rotX))
+        lastTX = e.touches[0].clientX
+        lastTY = e.touches[0].clientY
+      } else if (e.touches.length === 2) {
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY,
+        )
+        if (lastPinchDist) state.zoom *= dist / lastPinchDist
+        state.zoom = Math.max(0.35, Math.min(3.0, state.zoom))
+        lastPinchDist = dist
+      }
+    }
+    const onTouchEnd = () => { state.dragging = false; lastPinchDist = 0 }
+
+    canvas.addEventListener('mousedown',  onMouseDown)
+    window.addEventListener('mousemove',  onMouseMove)
+    window.addEventListener('mouseup',    onMouseUp)
+    canvas.addEventListener('wheel',      onWheel, { passive: false })
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove',  onTouchMove,  { passive: true })
+    canvas.addEventListener('touchend',   onTouchEnd)
+
+    const onKeyDown = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      cancelAnimationFrame(state.rafId)
+      clearTimeout(state.idleTimer)
+      ro.disconnect()
+      setReady(false)
+      canvas.removeEventListener('mousedown',  onMouseDown)
+      window.removeEventListener('mousemove',  onMouseMove)
+      window.removeEventListener('mouseup',    onMouseUp)
+      canvas.removeEventListener('wheel',      onWheel)
+      canvas.removeEventListener('touchstart', onTouchStart)
+      canvas.removeEventListener('touchmove',  onTouchMove)
+      canvas.removeEventListener('touchend',   onTouchEnd)
+      window.removeEventListener('keydown',    onKeyDown)
+    }
+  }, [onClose])
+
+  return (
+    <div className="wv-overlay" onClick={onClose}>
+      <div className="wv-modal" onClick={e => e.stopPropagation()}>
+
+        <div className="wv-header">
+          <div className="wv-title-group">
+            <span className="wv-label">3D Modell</span>
+            <h3 className="wv-title">Mein Modell</h3>
+          </div>
+          <button className="wv-close" onClick={onClose} aria-label="Schließen">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+
+        <div className="wv-canvas-wrap">
+          <canvas ref={canvasRef} className={`wv-canvas${ready ? ' wv-canvas--ready' : ''}`} />
+          {!ready && (
+            <div className="wv-loader" aria-label="Wird geladen">
+              <div className="wv-loader-ring" />
+              <span className="wv-loader-text">Modell wird geladen</span>
+            </div>
+          )}
+        </div>
+
+        <div className="wv-footer">
+          <span className="wv-hint">Ziehen zum Drehen</span>
+          <span className="wv-hint">Scrollen zum Zoomen</span>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/main.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import '@fontsource/inter/300.css'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
+import '@fontsource/inter/700.css'
+import '@fontsource/inter/800.css'
+import './styles/global.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

src/pages/Datenschutz.jsx

@@ -0,0 +1,99 @@
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import './LegalPage.css'
+
+export default function Datenschutz() {
+  useEffect(() => {
+    const host = window.location.hostname
+    if (host === 'localhost' || host === '127.0.0.1') return
+    const script = document.createElement('script')
+    script.id  = 'CookieDeclaration'
+    script.src = 'https://consent.cookiebot.com/e49bbfc0-7402-4cda-9ae4-5bd1201ea9b5/cd.js'
+    script.type  = 'text/javascript'
+    script.async = true
+    const anchor = document.getElementById('cookie-declaration-anchor')
+    if (anchor) anchor.appendChild(script)
+    return () => { script.remove() }
+  }, [])
+
+  return (
+    <div className="legal-page section">
+      <div className="container--narrow">
+        <Link to="/" className="legal-back">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          Zurück
+        </Link>
+
+        <h1 className="legal-title">Datenschutzerklärung</h1>
+
+        <div className="legal-content">
+          <h2>1. Datenschutz auf einen Blick</h2>
+          <h3>Allgemeine Hinweise</h3>
+          <p>
+            Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren
+            personenbezogenen Daten passiert, wenn Sie diese Website besuchen.
+          </p>
+
+          <h2>2. Allgemeine Hinweise und Pflichtinformationen</h2>
+          <h3>Datenschutz</h3>
+          <p>
+            Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst.
+            Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der
+            gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
+          </p>
+
+          <h3>Verantwortliche Stelle</h3>
+          <p>
+            Superfice KG<br />
+            Musterstraße 1<br />
+            10115 Berlin<br />
+            E-Mail: info@superfice.de
+          </p>
+
+          <h2>3. Datenerfassung auf dieser Website</h2>
+          <h3>Kontaktformular</h3>
+          <p>
+            Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus
+            dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks
+            Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert.
+            Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
+          </p>
+          <p>
+            Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO,
+            sofern Ihre Anfrage mit der Erfüllung eines Vertrags zusammenhängt oder zur
+            Durchführung vorvertraglicher Maßnahmen erforderlich ist.
+          </p>
+
+          <h3>Server-Log-Dateien</h3>
+          <p>
+            Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten
+            Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:
+            Browsertyp und Browserversion, verwendetes Betriebssystem, Referrer URL,
+            Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage, IP-Adresse.
+          </p>
+
+          <h2>4. Ihre Rechte</h2>
+          <p>
+            Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten
+            personenbezogenen Daten, deren Herkunft und Empfänger und den Zweck der
+            Datenverarbeitung sowie ein Recht auf Berichtigung oder Löschung dieser Daten.
+            Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich
+            jederzeit unter der im Impressum angegebenen Adresse an uns wenden.
+          </p>
+
+          <h2>5. Cookies</h2>
+          <p>
+            Diese Website verwendet Cookies. Nachfolgend finden Sie eine vollständige Übersicht
+            aller eingesetzten Cookies sowie die Möglichkeit, Ihre Einwilligung jederzeit zu
+            widerrufen oder anzupassen.
+          </p>
+          <div id="cookie-declaration-anchor" />
+
+          <p className="legal-note">Stand: 2026</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/Impressum.jsx

@@ -0,0 +1,88 @@
+import { Link } from 'react-router-dom'
+import './LegalPage.css'
+
+export default function Impressum() {
+  return (
+    <div className="legal-page section">
+      <div className="container--narrow">
+        <Link to="/" className="legal-back">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          Zurück
+        </Link>
+
+        <h1 className="legal-title">Impressum</h1>
+
+        <div className="legal-content">
+          <h2>Angaben gemäß § 5 TMG</h2>
+          <p>
+            Superfice.de KG<br />
+            Grüner Weg 36<br />
+            03185 Peitz
+          </p>
+
+          <h2>Kontakt</h2>
+          <p>
+            Telefon: +49 35601 988891<br />
+            E-Mail: <a href="mailto:info@superfice.de">info@superfice.de</a><br />
+            Web: <a href="https://www.superfice.de" target="_blank" rel="noopener noreferrer">www.superfice.de</a>
+          </p>
+
+          <h2>Registereintrag</h2>
+          <p>
+            Registergericht: Amtsgericht Cottbus<br />
+            Registernummer: HRA 4427 CB
+          </p>
+
+          <h2>Umsatzsteuer-ID</h2>
+          <p>
+            Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br />
+            DE316486342
+          </p>
+
+          <h2>Steuernummer</h2>
+          <p>056/163/01936</p>
+
+          <h2>Geschäftsführung</h2>
+          <p>Marco Vitalone</p>
+
+          <h2>Bankverbindung</h2>
+          <p>
+            Superfice.de KG<br />
+            Deutsche Bank<br />
+            IBAN: DE72 8707 0024 0534 5145 00<br />
+            BIC: DEUTDEDBCHE
+          </p>
+
+          <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
+          <p>
+            Marco Vitalone<br />
+            Superfice.de KG<br />
+            Grüner Weg 36<br />
+            03185 Peitz
+          </p>
+
+          <h2>Haftungsausschluss</h2>
+          <h3>Haftung für Inhalte</h3>
+          <p>
+            Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit,
+            Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.
+          </p>
+          <h3>Haftung für Links</h3>
+          <p>
+            Unser Angebot enthält Links zu externen Webseiten Dritter. Auf die Inhalte dieser
+            externen Seiten haben wir keinen Einfluss und können daher für diese fremden Inhalte
+            keine Gewähr übernehmen.
+          </p>
+
+          <h2>Urheberrecht</h2>
+          <p>
+            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen
+            dem deutschen Urheberrecht. © 2026 Superfice.de KG
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/LegalPage.css

@@ -0,0 +1,67 @@
+.legal-page {
+  background: var(--color-bg);
+  min-height: 80vh;
+  padding-top: calc(68px + var(--section-padding-y));
+}
+
+.legal-back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-10);
+  transition: color var(--transition);
+}
+
+.legal-back:hover {
+  color: var(--color-text);
+}
+
+.legal-back svg {
+  width: 16px;
+  height: 16px;
+}
+
+.legal-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  margin-bottom: var(--space-10);
+}
+
+.legal-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.legal-content h2 {
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+  color: var(--color-text);
+  margin-top: var(--space-6);
+  margin-bottom: calc(var(--space-6) * -1 + var(--space-2));
+}
+
+.legal-content h3 {
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: var(--color-text);
+  margin-top: var(--space-2);
+  margin-bottom: calc(var(--space-6) * -1 + var(--space-2));
+}
+
+.legal-content p {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: 1.75;
+}
+
+.legal-note {
+  font-size: var(--font-size-xs) !important;
+  color: var(--color-text-faint) !important;
+  padding-top: var(--space-8);
+  border-top: 1px solid var(--color-border);
+}

src/styles/global.css

@@ -0,0 +1,139 @@
+@import './variables.css';
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: var(--font);
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+input, textarea, select {
+  font-family: var(--font);
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Utility classes */
+.container {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 var(--section-padding-x);
+}
+
+.container--narrow {
+  max-width: var(--max-width-narrow);
+  margin: 0 auto;
+  padding: 0 var(--section-padding-x);
+}
+
+.section {
+  padding: var(--section-padding-y) 0;
+}
+
+/* Button styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.875rem 2rem;
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  transition: all var(--transition);
+  cursor: pointer;
+  border: none;
+  white-space: nowrap;
+}
+
+.btn--primary {
+  background-color: var(--color-accent);
+  color: var(--color-white);
+}
+
+.btn--primary:hover {
+  background-color: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-accent);
+}
+
+.btn--outline {
+  background: transparent;
+  color: var(--color-text);
+  border: 1px solid var(--color-accent-border);
+}
+
+.btn--outline:hover {
+  border-color: var(--color-accent);
+  color: var(--color-white);
+  background: var(--color-accent-dim);
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--color-text-muted);
+  padding: 0.875rem 1.5rem;
+}
+
+.btn--ghost:hover {
+  color: var(--color-text);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-surface-3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-accent);
+}
+
+/* Focus */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background: var(--color-accent);
+  color: var(--color-white);
+}

src/styles/variables.css

@@ -0,0 +1,76 @@
+:root {
+  /* Colors */
+  --color-bg: #0D0D0D;
+  --color-surface: #181818;
+  --color-surface-2: #222222;
+  --color-surface-3: #2C2C2C;
+  --color-accent: #8B3DB8;
+  --color-accent-hover: #A04ED0;
+  --color-accent-dim: rgba(139, 61, 184, 0.18);
+  --color-accent-border: rgba(139, 61, 184, 0.55);
+  --color-text: #F5F5F5;
+  --color-text-muted: #B0B0B0;
+  --color-text-faint: #707070;
+  --color-border: rgba(255, 255, 255, 0.11);
+  --color-border-hover: rgba(255, 255, 255, 0.22);
+  --color-white: #FFFFFF;
+
+  /* Typography */
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --font-size-3xl: 2.75rem;
+  --font-size-4xl: 3.75rem;
+  --font-size-5xl: 5rem;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --space-32: 8rem;
+
+  /* Layout */
+  --max-width: 1200px;
+  --max-width-narrow: 760px;
+  --section-padding-y: 6rem;
+  --section-padding-x: 1.5rem;
+
+  /* Borders */
+  --radius-sm: 4px;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* Transitions */
+  --transition: 0.2s ease;
+  --transition-slow: 0.4s ease;
+
+  /* Shadows */
+  --shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
+  --shadow-accent: 0 0 40px rgba(139, 61, 184, 0.35);
+}
+
+@media (max-width: 768px) {
+  :root {
+    --section-padding-y: 4rem;
+    --section-padding-x: 1.25rem;
+    --font-size-3xl: 2rem;
+    --font-size-4xl: 2.5rem;
+    --font-size-5xl: 3rem;
+  }
+}

src/utils/api.js

@@ -0,0 +1,21 @@
+const API_BASE = import.meta.env.VITE_API_BASE ?? ''
+
+export async function fetchDistance(plz) {
+  const res = await fetch(`${API_BASE}/api/distance.php?plz=${encodeURIComponent(plz)}`)
+  if (!res.ok) throw new Error('Netzwerkfehler')
+  const data = await res.json()
+  if (data.error) throw new Error(data.error)
+  return data.distance
+}
+
+export async function submitContact(formData) {
+  const res = await fetch(`${API_BASE}/api/contact.php`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(formData),
+  })
+  if (!res.ok) throw new Error('Netzwerkfehler')
+  const data = await res.json()
+  if (!data.success) throw new Error(data.error ?? 'Unbekannter Fehler')
+  return data
+}

src/utils/pricing.js

@@ -0,0 +1,44 @@
+export const BASE_PRICES = {
+  kuche: 195,
+  raum: 130,
+  treppe: 165,
+  schrank: 110,
+  bad: 155,
+  fenster: 18,
+  wintergarten: 295,
+  individuell: 0,
+}
+
+export const QUANTITY_CONFIG = {
+  kuche: { label: 'Wie viele Küchen?', unit: 'Küche', min: 1, max: 5, step: 1 },
+  raum: { label: 'Wie viele Räume / Etagen?', unit: 'Raum', min: 1, max: 20, step: 1 },
+  treppe: { label: 'Wie viele Treppen?', unit: 'Treppe', min: 1, max: 5, step: 1 },
+  schrank: { label: 'Wie viele Einheiten?', unit: 'Einheit', min: 1, max: 10, step: 1 },
+  bad: { label: 'Wie viele Bäder?', unit: 'Bad', min: 1, max: 5, step: 1 },
+  fenster: { label: 'Wie viele Fenster / Öffnungen?', unit: 'Fenster', min: 5, max: 100, step: 5 },
+  wintergarten: { label: 'Wie viele Wintergärten?', unit: 'Wintergarten', min: 1, max: 3, step: 1 },
+  individuell: { label: null, unit: null, min: 1, max: 1, step: 1 },
+}
+
+export function calculateTravelCost(km) {
+  if (!km || km <= 30) return 0
+  return Math.round((km - 30) * 0.65)
+}
+
+export function calculateSubtotal(services, quantities) {
+  return services.reduce((total, id) => {
+    if (id === 'individuell') return total
+    const qty = quantities[id] ?? QUANTITY_CONFIG[id]?.min ?? 1
+    return total + (BASE_PRICES[id] ?? 0) * qty
+  }, 0)
+}
+
+export function calculateTotal(services, quantities, distanceKm) {
+  const subtotal = calculateSubtotal(services, quantities)
+  const travel = calculateTravelCost(distanceKm)
+  return subtotal + travel
+}
+
+export function hasIndividuell(services) {
+  return services.includes('individuell')
+}

vite.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+        },
+      },
+    },
+    chunkSizeWarningLimit: 600,
+  },
+})