commit f3ab7d08164e9be505ff1b6f32def9caa153416e Author: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com> Date: Sun Jul 5 13:37:06 2026 +0200 Initial commit: HifiPlanet Car-Hifi Shop (Frontend + Backend) React/Vite Frontend (hifi-src) + PHP/MariaDB Backend (hifi/api) fuer den Car-Hifi Umbau-Shop HifiPlanet in Amorbach, inkl. Admin-Panel, 2FA, Wartungsmodus, Cookie-Consent und rechtlichen Pflichtseiten. Co-Authored-By: Claude Sonnet 5 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..67a03a9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,37 @@ +# Dieses Repo lebt im XAMPP htdocs-Ordner zusammen mit anderen, projektfremden +# Verzeichnissen (Standard-XAMPP-Dateien, andere lokale Seiten). Nur die beiden +# HifiPlanet-Ordner (hifi/ und hifi-src/) sollen versioniert werden. +/* +!/hifi/ +!/hifi-src/ +!/.gitignore + +# Von Composer/NPM regenerierbare Abhängigkeiten +/hifi/api/vendor/ +/hifi-src/node_modules/ + +# Vite-Build-Output (wird per "npm run build" in hifi-src erzeugt und landet laut +# vite.config.js direkt in hifi/). Da emptyOutDir:false ist, sammeln sich hier über +# viele Builds hinweg tausende alte, umbenannte Chunk-Dateien an (u.a. durch das +# Code-Splitting der ~1600 Lucide-Icons im IconPicker) - das gehört nicht ins Repo. +/hifi/assets/ +/hifi/index.html +/hifi/favicon.png +/hifi/robots.txt + +# Umgebungsspezifische DB-Zugangsdaten (wird vom Admin-Panel automatisch neu geschrieben, +# unterscheidet sich zwischen Dev-/Live-Umgebung und gehört daher nicht ins Repo) +/hifi/api/config/db.php + +# Claude-Code-Tooling (Skills/lokale Einstellungen) - gehört nicht zum Website-Projekt +/hifi/.claude/ +/hifi/.agents/ +/hifi/skills-lock.json +/hifi-src/.claude/ +/hifi-src/.agents/ +/hifi-src/skills-lock.json + +# Von XAMPP/Editoren erzeugte Laufzeit-/Cache-Dateien +*.log +Thumbs.db +.DS_Store diff --git a/hifi-src/index.html b/hifi-src/index.html new file mode 100644 index 0000000..58697b1 --- /dev/null +++ b/hifi-src/index.html @@ -0,0 +1,46 @@ + + + + + + + HifiPlanet | Car-Hifi Umbauten nach Maß + + + + + + + + + + + + + +

+ + + diff --git a/hifi-src/package-lock.json b/hifi-src/package-lock.json new file mode 100644 index 0000000..02260f4 --- /dev/null +++ b/hifi-src/package-lock.json @@ -0,0 +1,3035 @@ +{ + "name": "hifi-frontend", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "hifi-frontend", + "version": "1.0.0", + "dependencies": { + "framer-motion": "^12.42.2", + "lucide-react": "^1.23.0", + "qrcode": "^1.5.4", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.26.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.3.1", + "autoprefixer": "^10.4.20", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.13", + "vite": "^5.4.6" + } + }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", + "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", + "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", + "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", + "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", + "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", + "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", + "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", + "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", + "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", + "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", + "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", + "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", + "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", + "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", + "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", + "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", + "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", + "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", + "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", + "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", + "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", + "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", + "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@remix-run/router": { + "version": "1.23.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz", + "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-beta.27", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", + "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz", + "integrity": "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.2.tgz", + "integrity": "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.2.tgz", + "integrity": "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.2.tgz", + "integrity": "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.2.tgz", + "integrity": "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.2.tgz", + "integrity": "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.2.tgz", + "integrity": "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.2.tgz", + "integrity": "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.2.tgz", + "integrity": "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.2.tgz", + "integrity": "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.2.tgz", + "integrity": "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.2.tgz", + "integrity": "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.2.tgz", + "integrity": "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.2.tgz", + "integrity": "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.2.tgz", + "integrity": "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.2.tgz", + "integrity": "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.2.tgz", + "integrity": "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz", + "integrity": "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.2.tgz", + "integrity": "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.2.tgz", + "integrity": "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, + "node_modules/@rollup/rollup-openharmony-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.2.tgz", + "integrity": "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.2.tgz", + "integrity": "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.2.tgz", + "integrity": "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.2.tgz", + "integrity": "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.2.tgz", + "integrity": "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz", + "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz", + "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@vitejs/plugin-react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz", + "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.28.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-beta.27", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.17.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, + "license": "MIT" + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, + "license": "MIT" + }, + "node_modules/autoprefixer": { + "version": "10.5.2", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.2.tgz", + "integrity": "sha512-rD5t5DwOjJdmSORcTq64j8MawTC+tbQ+HHqjR4NDumamy/ambn1UJrlKL+KdwujWxMkFjPM3pPHOEA9tl4767Q==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.28.4", + "caniuse-lite": "^1.0.30001799", + "fraction.js": "^5.3.4", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.10.41", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.41.tgz", + "integrity": "sha512-WwS7MHhqGHHlaVsqRZnhvCEMS0owDX+SxRlve7JkuH7My1Ara3ZriTmCQupPfYjxMZ8I/tgxtJYr2t7taHaH4A==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.28.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz", + "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.10.38", + "caniuse-lite": "^1.0.30001799", + "electron-to-chromium": "^1.5.376", + "node-releases": "^2.0.48", + "update-browserslist-db": "^1.2.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001800", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001800.tgz", + "integrity": "sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT" + }, + "node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "license": "MIT" + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/dijkstrajs": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz", + "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==", + "license": "MIT" + }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, + "license": "MIT" + }, + "node_modules/electron-to-chromium": { + "version": "1.5.387", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.387.tgz", + "integrity": "sha512-TaxwufTFDufvPEoXdhwVrA3UdFWBeWGkYoJ1K8ldF1xe6gKfth6iRNS5lTQ5JPNOHdGQm8PT1QYKUqFLCiUefQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "license": "MIT" + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/esbuild": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", + "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fast-glob": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fastq": { + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz", + "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==", + "dev": true, + "license": "ISC", + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "license": "MIT", + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fraction.js": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", + "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/rawify" + } + }, + "node_modules/framer-motion": { + "version": "12.42.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.2.tgz", + "integrity": "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.42.2", + "motion-utils": "^12.39.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "license": "ISC", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/hasown": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz", + "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/jiti": { + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "bin/jiti.js" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "license": "MIT" + }, + "node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "license": "MIT", + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/lucide-react": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.23.0.tgz", + "integrity": "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/motion-dom": { + "version": "12.42.2", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.2.tgz", + "integrity": "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.39.0" + } + }, + "node_modules/motion-utils": { + "version": "12.39.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz", + "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==", + "license": "MIT" + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.15", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz", + "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.50", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz", + "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "license": "MIT", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "license": "MIT", + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pirates": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", + "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/pngjs": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", + "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", + "license": "MIT", + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/postcss": { + "version": "8.5.16", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz", + "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", + "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", + "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "lilconfig": "^3.1.1" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "jiti": ">=1.21.0", + "postcss": ">=8.0.9", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz", + "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/qrcode": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz", + "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==", + "license": "MIT", + "dependencies": { + "dijkstrajs": "^1.0.1", + "pngjs": "^5.0.0", + "yargs": "^15.3.1" + }, + "bin": { + "qrcode": "bin/qrcode" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/react-refresh": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", + "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "6.30.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz", + "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.30.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz", + "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.3", + "react-router": "6.30.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", + "license": "ISC" + }, + "node_modules/resolve": { + "version": "1.22.12", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/reusify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", + "dev": true, + "license": "MIT", + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/rollup": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz", + "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.62.2", + "@rollup/rollup-android-arm64": "4.62.2", + "@rollup/rollup-darwin-arm64": "4.62.2", + "@rollup/rollup-darwin-x64": "4.62.2", + "@rollup/rollup-freebsd-arm64": "4.62.2", + "@rollup/rollup-freebsd-x64": "4.62.2", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", + "@rollup/rollup-linux-arm-musleabihf": "4.62.2", + "@rollup/rollup-linux-arm64-gnu": "4.62.2", + "@rollup/rollup-linux-arm64-musl": "4.62.2", + "@rollup/rollup-linux-loong64-gnu": "4.62.2", + "@rollup/rollup-linux-loong64-musl": "4.62.2", + "@rollup/rollup-linux-ppc64-gnu": "4.62.2", + "@rollup/rollup-linux-ppc64-musl": "4.62.2", + "@rollup/rollup-linux-riscv64-gnu": "4.62.2", + "@rollup/rollup-linux-riscv64-musl": "4.62.2", + "@rollup/rollup-linux-s390x-gnu": "4.62.2", + "@rollup/rollup-linux-x64-gnu": "4.62.2", + "@rollup/rollup-linux-x64-musl": "4.62.2", + "@rollup/rollup-openbsd-x64": "4.62.2", + "@rollup/rollup-openharmony-arm64": "4.62.2", + "@rollup/rollup-win32-arm64-msvc": "4.62.2", + "@rollup/rollup-win32-ia32-msvc": "4.62.2", + "@rollup/rollup-win32-x64-gnu": "4.62.2", + "@rollup/rollup-win32-x64-msvc": "4.62.2", + "fsevents": "~2.3.2" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", + "license": "ISC" + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/sucrase": { + "version": "3.35.1", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", + "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "tinyglobby": "^0.2.11", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tailwindcss": { + "version": "3.4.19", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", + "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.7", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + }, + "node_modules/vite": { + "version": "5.4.21", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz", + "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.21.3", + "postcss": "^8.4.43", + "rollup": "^4.20.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/which-module": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", + "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", + "license": "ISC" + }, + "node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/y18n": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", + "license": "ISC" + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, + "license": "ISC" + }, + "node_modules/yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "license": "MIT", + "dependencies": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "license": "ISC", + "dependencies": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + }, + "engines": { + "node": ">=6" + } + } + } +} diff --git a/hifi-src/package.json b/hifi-src/package.json new file mode 100644 index 0000000..b1d5a0e --- /dev/null +++ b/hifi-src/package.json @@ -0,0 +1,26 @@ +{ + "name": "hifi-frontend", + "private": true, + "version": "1.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "framer-motion": "^12.42.2", + "lucide-react": "^1.23.0", + "qrcode": "^1.5.4", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.26.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.3.1", + "autoprefixer": "^10.4.20", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.13", + "vite": "^5.4.6" + } +} diff --git a/hifi-src/postcss.config.js b/hifi-src/postcss.config.js new file mode 100644 index 0000000..2aa7205 --- /dev/null +++ b/hifi-src/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/hifi-src/public/favicon.png b/hifi-src/public/favicon.png new file mode 100644 index 0000000..622fdb9 Binary files /dev/null and b/hifi-src/public/favicon.png differ diff --git a/hifi-src/public/robots.txt b/hifi-src/public/robots.txt new file mode 100644 index 0000000..d4acecb --- /dev/null +++ b/hifi-src/public/robots.txt @@ -0,0 +1,6 @@ +User-agent: * +Allow: / +Disallow: /admin +Disallow: /api + +Sitemap: https://hifi-planet.de/sitemap.xml diff --git a/hifi-src/src/App.jsx b/hifi-src/src/App.jsx new file mode 100644 index 0000000..8a168b7 --- /dev/null +++ b/hifi-src/src/App.jsx @@ -0,0 +1,83 @@ +import { Routes, Route, Navigate } from 'react-router-dom'; +import ScrollToTop from './components/ScrollToTop.jsx'; +import PublicLayout from './components/PublicLayout.jsx'; +import AdminLayout from './components/AdminLayout.jsx'; +import ProtectedRoute from './components/ProtectedRoute.jsx'; +import RequirePermission from './components/RequirePermission.jsx'; + +import Home from './pages/public/Home.jsx'; +import VehicleSelect from './pages/public/VehicleSelect.jsx'; +import BrandPage from './pages/public/BrandPage.jsx'; +import ModelPage from './pages/public/ModelPage.jsx'; +import Leistungen from './pages/public/Leistungen.jsx'; +import ContactPage from './pages/public/ContactPage.jsx'; +import Impressum from './pages/public/Impressum.jsx'; +import Datenschutz from './pages/public/Datenschutz.jsx'; +import AGB from './pages/public/AGB.jsx'; + +import Login from './pages/admin/Login.jsx'; +import Dashboard from './pages/admin/Dashboard.jsx'; +import Brands from './pages/admin/Brands.jsx'; +import Models from './pages/admin/Models.jsx'; +import Packages from './pages/admin/Packages.jsx'; +import Services from './pages/admin/Services.jsx'; +import PackageProducts from './pages/admin/PackageProducts.jsx'; +import PackageUpgrades from './pages/admin/PackageUpgrades.jsx'; +import ContactRequests from './pages/admin/ContactRequests.jsx'; +import AccountSettings from './pages/admin/AccountSettings.jsx'; +import AdminUsers from './pages/admin/AdminUsers.jsx'; +import PermissionGroups from './pages/admin/PermissionGroups.jsx'; +import SettingsLayout from './pages/admin/settings/SettingsLayout.jsx'; +import DatabaseSettings from './pages/admin/settings/DatabaseSettings.jsx'; +import ExportImportSettings from './pages/admin/settings/ExportImportSettings.jsx'; +import MaintenanceSettings from './pages/admin/settings/MaintenanceSettings.jsx'; +import ResetSettings from './pages/admin/settings/ResetSettings.jsx'; + +export default function App() { + return ( + <> + + + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + } /> + + }> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } + > + } /> + } /> + } /> + } /> + } /> + + + + + + ); +} diff --git a/hifi-src/src/api/client.js b/hifi-src/src/api/client.js new file mode 100644 index 0000000..3f68ac4 --- /dev/null +++ b/hifi-src/src/api/client.js @@ -0,0 +1,26 @@ +const API_BASE = '/hifi/api'; + +async function request(path, options = {}) { + const res = await fetch(`${API_BASE}${path}`, { + credentials: 'include', + headers: options.body instanceof FormData ? {} : { 'Content-Type': 'application/json' }, + ...options, + }); + + const isJson = res.headers.get('content-type')?.includes('application/json'); + const data = isJson ? await res.json() : null; + + if (!res.ok) { + throw new Error(data?.error || `Fehler ${res.status}`); + } + + return data; +} + +export const api = { + get: (path) => request(path), + post: (path, body) => request(path, { method: 'POST', body: body instanceof FormData ? body : JSON.stringify(body) }), + put: (path, body) => request(path, { method: 'PUT', body: JSON.stringify(body) }), + patch: (path, body) => request(path, { method: 'PATCH', body: JSON.stringify(body) }), + delete: (path) => request(path, { method: 'DELETE' }), +}; diff --git a/hifi-src/src/assets/leistungen/3d-druck.jpg b/hifi-src/src/assets/leistungen/3d-druck.jpg new file mode 100644 index 0000000..c3b5e46 Binary files /dev/null and b/hifi-src/src/assets/leistungen/3d-druck.jpg differ diff --git a/hifi-src/src/assets/leistungen/alarmanlagen.jpg b/hifi-src/src/assets/leistungen/alarmanlagen.jpg new file mode 100644 index 0000000..1ef0c56 Binary files /dev/null and b/hifi-src/src/assets/leistungen/alarmanlagen.jpg differ diff --git a/hifi-src/src/assets/leistungen/car-hifi.jpg b/hifi-src/src/assets/leistungen/car-hifi.jpg new file mode 100644 index 0000000..0ebcb39 Binary files /dev/null and b/hifi-src/src/assets/leistungen/car-hifi.jpg differ diff --git a/hifi-src/src/assets/leistungen/cnc-laser.jpg b/hifi-src/src/assets/leistungen/cnc-laser.jpg new file mode 100644 index 0000000..1929371 Binary files /dev/null and b/hifi-src/src/assets/leistungen/cnc-laser.jpg differ diff --git a/hifi-src/src/assets/leistungen/cnc-zerspanen.jpg b/hifi-src/src/assets/leistungen/cnc-zerspanen.jpg new file mode 100644 index 0000000..9131087 Binary files /dev/null and b/hifi-src/src/assets/leistungen/cnc-zerspanen.jpg differ diff --git a/hifi-src/src/assets/leistungen/dashcam.jpg b/hifi-src/src/assets/leistungen/dashcam.jpg new file mode 100644 index 0000000..72a4051 Binary files /dev/null and b/hifi-src/src/assets/leistungen/dashcam.jpg differ diff --git a/hifi-src/src/assets/leistungen/hero-highlight.jpg b/hifi-src/src/assets/leistungen/hero-highlight.jpg new file mode 100644 index 0000000..b2ec61d Binary files /dev/null and b/hifi-src/src/assets/leistungen/hero-highlight.jpg differ diff --git a/hifi-src/src/assets/leistungen/oldtimer.jpg b/hifi-src/src/assets/leistungen/oldtimer.jpg new file mode 100644 index 0000000..59cd649 Binary files /dev/null and b/hifi-src/src/assets/leistungen/oldtimer.jpg differ diff --git a/hifi-src/src/assets/leistungen/wohnmobil.jpg b/hifi-src/src/assets/leistungen/wohnmobil.jpg new file mode 100644 index 0000000..dde654a Binary files /dev/null and b/hifi-src/src/assets/leistungen/wohnmobil.jpg differ diff --git a/hifi-src/src/assets/logo.png b/hifi-src/src/assets/logo.png new file mode 100644 index 0000000..6205145 Binary files /dev/null and b/hifi-src/src/assets/logo.png differ diff --git a/hifi-src/src/assets/photos/gallery-amp-purple.jpg b/hifi-src/src/assets/photos/gallery-amp-purple.jpg new file mode 100644 index 0000000..7bcc301 Binary files /dev/null and b/hifi-src/src/assets/photos/gallery-amp-purple.jpg differ diff --git a/hifi-src/src/assets/photos/gallery-dash.jpg b/hifi-src/src/assets/photos/gallery-dash.jpg new file mode 100644 index 0000000..186db96 Binary files /dev/null and b/hifi-src/src/assets/photos/gallery-dash.jpg differ diff --git a/hifi-src/src/assets/photos/gallery-dash2.jpg b/hifi-src/src/assets/photos/gallery-dash2.jpg new file mode 100644 index 0000000..477ed50 Binary files /dev/null and b/hifi-src/src/assets/photos/gallery-dash2.jpg differ diff --git a/hifi-src/src/assets/photos/gallery-rear.jpg b/hifi-src/src/assets/photos/gallery-rear.jpg new file mode 100644 index 0000000..9c5a2f5 Binary files /dev/null and b/hifi-src/src/assets/photos/gallery-rear.jpg differ diff --git a/hifi-src/src/assets/photos/gallery-speaker.jpg b/hifi-src/src/assets/photos/gallery-speaker.jpg new file mode 100644 index 0000000..13af3ea Binary files /dev/null and b/hifi-src/src/assets/photos/gallery-speaker.jpg differ diff --git a/hifi-src/src/assets/photos/gallery-subs.jpg b/hifi-src/src/assets/photos/gallery-subs.jpg new file mode 100644 index 0000000..7d61c79 Binary files /dev/null and b/hifi-src/src/assets/photos/gallery-subs.jpg differ diff --git a/hifi-src/src/assets/photos/hero-trunk.jpg b/hifi-src/src/assets/photos/hero-trunk.jpg new file mode 100644 index 0000000..bccabc2 Binary files /dev/null and b/hifi-src/src/assets/photos/hero-trunk.jpg differ diff --git a/hifi-src/src/components/Accordion.jsx b/hifi-src/src/components/Accordion.jsx new file mode 100644 index 0000000..a9d7227 --- /dev/null +++ b/hifi-src/src/components/Accordion.jsx @@ -0,0 +1,50 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; + +export default function Accordion({ items }) { + const [openIndex, setOpenIndex] = useState(null); + + return ( +

+ {items.map((item, i) => { + const isOpen = openIndex === i; + return ( +

+ + + {isOpen && ( + +

{item.answer}

+ + )} + +

+ ); + })} +

+ ); +} diff --git a/hifi-src/src/components/AdminLayout.jsx b/hifi-src/src/components/AdminLayout.jsx new file mode 100644 index 0000000..e56573b --- /dev/null +++ b/hifi-src/src/components/AdminLayout.jsx @@ -0,0 +1,171 @@ +import { useEffect, useState } from 'react'; +import { NavLink, Outlet, useNavigate } from 'react-router-dom'; +import { useAuth } from '../context/AuthContext.jsx'; +import { api } from '../api/client.js'; +import ThemeToggle from './ThemeToggle.jsx'; +import logo from '../assets/logo.png'; + +const ICONS = { + home: 'M3 11.5 12 4l9 7.5M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9', + tag: 'M4 4h7l9 9-7 7-9-9V4Zm3.5 3.5h.01', + car: 'M3 13.5 4.5 9A2 2 0 0 1 6.4 7.5h11.2A2 2 0 0 1 19.5 9L21 13.5M3 13.5v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-4M3 13.5h18M6.5 16.5h.01M17.5 16.5h.01', + box: 'M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 9 8-4.5M12 12v9M12 12 4 7.5', + mail: 'M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm0 0 8 7 8-7', + users: 'M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-4 6c-4 0-7 2-7 4.5V19h14v-1.5C19 15 16 13 12 13Z', + shield: 'M12 3 4 6v6c0 4.5 3.4 7.7 8 9 4.6-1.3 8-4.5 8-9V6l-8-3Zm-1.5 9.5 4-4 1 1-5 5-2.5-2.5 1-1 1.5 1.5Z', + lock: 'M6 10V8a6 6 0 1 1 12 0v2m-13 0h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Zm7 5v2', + briefcase: 'M4 7h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1Zm4 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18', + sliders: 'M4 6h16M4 6a2 2 0 1 0 4 0 2 2 0 0 0-4 0Zm16 6H4m10 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0ZM4 18h16m-12 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z', +}; + +const Icon = ({ path }) => ( + +); + +export default function AdminLayout() { + const { logout, user, hasPermission } = useAuth(); + const navigate = useNavigate(); + const [mobileOpen, setMobileOpen] = useState(false); + const [newContactCount, setNewContactCount] = useState(0); + + useEffect(() => { + if (!hasPermission('contact.manage')) return; + api.get('/contact').then((rows) => setNewContactCount(rows.filter((r) => r.status === 'new').length)).catch(() => {}); + }, []); + + const navGroups = [ + { + title: null, + links: [ + { to: '/admin', label: 'Dashboard', icon: 'home', end: true }, + { to: '/admin/account', label: 'Mein Konto', icon: 'lock' }, + ], + }, + { + title: 'Fahrzeug-Katalog', + links: [ + { to: '/admin/brands', label: 'Marken', icon: 'tag', permission: 'brands.manage' }, + { to: '/admin/models', label: 'Modelle', icon: 'car', permission: 'models.manage' }, + { to: '/admin/packages', label: 'Pakete', icon: 'box', permission: 'packages.manage' }, + ], + }, + { + title: 'Website', + links: [ + { to: '/admin/services', label: 'Leistungen', icon: 'briefcase', permission: 'services.manage' }, + ], + }, + { + title: 'Kunden', + links: [ + { to: '/admin/contact-requests', label: 'Kontaktanfragen', icon: 'mail', permission: 'contact.manage', badge: newContactCount }, + ], + }, + { + title: 'Verwaltung', + links: [ + { to: '/admin/users', label: 'Benutzer', icon: 'users', permission: 'users.manage' }, + { to: '/admin/permission-groups', label: 'Berechtigungsgruppen', icon: 'shield', permission: 'permission_groups.manage' }, + { to: '/admin/settings', label: 'Einstellungen', icon: 'sliders', permission: 'settings.manage' }, + ], + }, + ] + .map((group) => ({ ...group, links: group.links.filter((l) => !l.permission || hasPermission(l.permission)) })) + .filter((group) => group.links.length > 0); + + const handleLogout = async () => { + await logout(); + navigate('/admin/login'); + }; + + const linkClass = ({ isActive }) => + `flex items-center justify-between gap-2 rounded-md px-3 py-2 text-sm font-medium transition ${ + isActive + ? 'bg-brand-500 text-white' + : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800' + }`; + + const NavLinks = ({ onNavigate }) => ( + + ); + + return ( +

+ + +

+ +

+ Angemeldet als {user?.username}{user?.is_super_admin ? ' · Super-Admin' : ''} +

+ + +

+ {mobileOpen && ( +

+ setMobileOpen(false)} /> +

+ )} +

+ +

+ ); +} diff --git a/hifi-src/src/components/CookieConsentBanner.jsx b/hifi-src/src/components/CookieConsentBanner.jsx new file mode 100644 index 0000000..050ad23 --- /dev/null +++ b/hifi-src/src/components/CookieConsentBanner.jsx @@ -0,0 +1,120 @@ +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { useCookieConsent } from '../context/CookieConsentContext.jsx'; + +function SettingsModal({ onClose }) { + const { consent, saveCustom } = useCookieConsent(); + const [external, setExternal] = useState(consent.external); + + return ( +

e.stopPropagation()} + > +

Cookie-Einstellungen

+ Lege fest, welche Kategorien du zulassen möchtest. Mehr dazu in unserer{' '} + + Datenschutzerklärung + + . +

Notwendig

+ Für den Betrieb der Website erforderlich (z. B. Login-Session, Theme- und Cookie-Einstellung). + Kann nicht deaktiviert werden. +

+ +

Externe Medien

+ Google Maps und YouTube-Videos. Beim Laden werden Daten (u. a. deine IP-Adresse) an Google + übertragen. +

+ setExternal(e.target.checked)} + className="mt-1 h-4 w-4 shrink-0" + /> +

+ + +

+ ); +} + +export default function CookieConsentBanner() { + const { decided, settingsOpen, acceptAll, rejectNonEssential, openSettings, closeSettings } = useCookieConsent(); + + return ( + <> + {!decided && ( +

+ Wir verwenden nur technisch notwendige Cookies. Für Google Maps und YouTube-Videos benötigen wir + zusätzlich deine Zustimmung, da dabei Daten an Google übertragen werden. Mehr dazu in unserer{' '} + + Datenschutzerklärung + + . +

+ + + +

+ )} + + {settingsOpen && } + + ); +} diff --git a/hifi-src/src/components/DynamicIcon.jsx b/hifi-src/src/components/DynamicIcon.jsx new file mode 100644 index 0000000..e829ec6 --- /dev/null +++ b/hifi-src/src/components/DynamicIcon.jsx @@ -0,0 +1,8 @@ +import { DynamicIcon as LucideDynamicIcon } from 'lucide-react/dynamic'; + +// Lädt pro Icon-Name nur den einzelnen benötigten Icon-Chunk nach, statt die +// komplette ~2000-Icon-Bibliothek ins Bundle zu ziehen (siehe lucide-react/dynamic). +export default function DynamicIcon({ name, className = 'h-6 w-6', ...props }) { + if (!name) return null; + return ; +} diff --git a/hifi-src/src/components/ExternalEmbed.jsx b/hifi-src/src/components/ExternalEmbed.jsx new file mode 100644 index 0000000..64c7f45 --- /dev/null +++ b/hifi-src/src/components/ExternalEmbed.jsx @@ -0,0 +1,35 @@ +import { useCookieConsent } from '../context/CookieConsentContext.jsx'; + +export default function ExternalEmbed({ name, description, className = '', children }) { + const { consent, acceptAll, openSettings } = useCookieConsent(); + + if (consent.external) { + return children; + } + + return ( +

+ {description || `${name} wird erst nach deiner Zustimmung geladen, da dabei Daten an Google übertragen werden.`} +

+ + +

+ ); +} diff --git a/hifi-src/src/components/Footer.jsx b/hifi-src/src/components/Footer.jsx new file mode 100644 index 0000000..8edfc60 --- /dev/null +++ b/hifi-src/src/components/Footer.jsx @@ -0,0 +1,110 @@ +import { Link } from 'react-router-dom'; +import DynamicIcon from './DynamicIcon.jsx'; +import { useCookieConsent } from '../context/CookieConsentContext.jsx'; + +const SHOP_ADDRESS_ENCODED = encodeURIComponent('Boxbrunner Str. 20a, 63916 Amorbach'); +const DIRECTIONS_URL = `https://www.google.com/maps/dir/?api=1&destination=${SHOP_ADDRESS_ENCODED}`; + +const HOURS = [ + { days: 'Montag – Freitag', from: 9 * 60, to: 18 * 60, label: '9:00–18:00 Uhr' }, + { days: 'Samstag', from: 10 * 60, to: 13 * 60, label: '10:00–13:00 Uhr' }, + { days: 'Sonntag', from: null, to: null, label: 'Geschlossen' }, +]; + +function isOpenNow() { + const now = new Date(); + const minutes = now.getHours() * 60 + now.getMinutes(); + const day = now.getDay(); // 0 = Sonntag, 1-5 = Mo-Fr, 6 = Sa + const todayHours = day === 0 ? HOURS[2] : day === 6 ? HOURS[1] : HOURS[0]; + return todayHours.from !== null && minutes >= todayHours.from && minutes < todayHours.to; +} + +export default function Footer() { + const open = isOpenNow(); + const { openSettings } = useCookieConsent(); + + return ( + + ); +} diff --git a/hifi-src/src/components/IconPicker.jsx b/hifi-src/src/components/IconPicker.jsx new file mode 100644 index 0000000..942bd53 --- /dev/null +++ b/hifi-src/src/components/IconPicker.jsx @@ -0,0 +1,63 @@ +import { useMemo, useState } from 'react'; +import { iconNames } from 'lucide-react/dynamic'; +import DynamicIcon from './DynamicIcon.jsx'; + +const ALL_ICON_NAMES = [...iconNames].sort(); + +const DEFAULT_LIMIT = 120; +const SEARCH_LIMIT = 200; + +export default function IconPicker({ value, onChange }) { + const [search, setSearch] = useState(''); + + const results = useMemo(() => { + const q = search.trim().toLowerCase(); + if (!q) return ALL_ICON_NAMES.slice(0, DEFAULT_LIMIT); + return ALL_ICON_NAMES.filter((name) => name.includes(q)).slice(0, SEARCH_LIMIT); + }, [search]); + + return ( +

+ {value ? : ?} +

{value || 'Kein Icon gewählt'}

{ALL_ICON_NAMES.length} Icons verfügbar

+ + setSearch(e.target.value)} + placeholder="Icon suchen (z. B. car, shield, zap)…" + className="mb-2 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> + +

+ {results.map((name) => ( + + ))} + {results.length === 0 && ( +

Keine Icons gefunden.

+ )} +

+ {!search && ( +

Tipp: Tippe einen Suchbegriff ein, um alle {ALL_ICON_NAMES.length} Icons zu durchsuchen.

+ )} +

+ ); +} diff --git a/hifi-src/src/components/ImageUploadField.jsx b/hifi-src/src/components/ImageUploadField.jsx new file mode 100644 index 0000000..061d8ba --- /dev/null +++ b/hifi-src/src/components/ImageUploadField.jsx @@ -0,0 +1,37 @@ +import { useState } from 'react'; +import { api } from '../api/client.js'; + +export default function ImageUploadField({ value, onChange, label = 'Bild' }) { + const [uploading, setUploading] = useState(false); + const [error, setError] = useState(''); + + const handleFile = async (e) => { + const file = e.target.files?.[0]; + if (!file) return; + + setUploading(true); + setError(''); + try { + const formData = new FormData(); + formData.append('file', file); + const result = await api.post('/uploads', formData); + onChange(result.path); + } catch (err) { + setError(err.message); + } finally { + setUploading(false); + } + }; + + return ( +

+ {label} +

+ {value &&

} + + {uploading && Lädt hoch…} +

+ {error &&

{error}

} +

+ ); +} diff --git a/hifi-src/src/components/MaintenanceBypassBanner.jsx b/hifi-src/src/components/MaintenanceBypassBanner.jsx new file mode 100644 index 0000000..e445b3e --- /dev/null +++ b/hifi-src/src/components/MaintenanceBypassBanner.jsx @@ -0,0 +1,22 @@ +const TEXT = ( + <> + Wartungsmodus aktiv – Besucher sehen aktuell eine Wartungsmeldung. Du siehst diese Seite nur, weil + du die Berechtigung "Wartungsmodus umgehen" hast. + +); + +export default function MaintenanceBypassBanner({ inline = false }) { + if (inline) { + return ( +

+ {TEXT} +

+ ); + } + + return ( +

+ {TEXT} +

+ ); +} diff --git a/hifi-src/src/components/MaintenanceNotice.jsx b/hifi-src/src/components/MaintenanceNotice.jsx new file mode 100644 index 0000000..85ec9ff --- /dev/null +++ b/hifi-src/src/components/MaintenanceNotice.jsx @@ -0,0 +1,33 @@ +const WrenchIcon = () => ( + +); + +export default function MaintenanceNotice({ message, fullScreen = false }) { + const content = ( +

+ +

Wartungsarbeiten

+ {message || 'Dieser Bereich wird gerade aktualisiert. Bitte schau in Kürze wieder vorbei.'} +

+ ); + + if (fullScreen) { + return ( +

+ {content} +

+ ); + } + + return ( +

+ {content} +

+ ); +} diff --git a/hifi-src/src/components/Navbar.jsx b/hifi-src/src/components/Navbar.jsx new file mode 100644 index 0000000..1ac1559 --- /dev/null +++ b/hifi-src/src/components/Navbar.jsx @@ -0,0 +1,46 @@ +import { useState } from 'react'; +import { Link } from 'react-router-dom'; +import ThemeToggle from './ThemeToggle.jsx'; +import logo from '../assets/logo.png'; + +export default function Navbar() { + const [open, setOpen] = useState(false); + + return ( +

+ +

+ + + + +

+ + +

+ + {open && ( + + )} +

+ ); +} diff --git a/hifi-src/src/components/ProtectedRoute.jsx b/hifi-src/src/components/ProtectedRoute.jsx new file mode 100644 index 0000000..7b3be31 --- /dev/null +++ b/hifi-src/src/components/ProtectedRoute.jsx @@ -0,0 +1,16 @@ +import { Navigate, Outlet } from 'react-router-dom'; +import { useAuth } from '../context/AuthContext.jsx'; + +export default function ProtectedRoute() { + const { user, loading } = useAuth(); + + if (loading) { + return

Lädt…

; + } + + if (!user) { + return ; + } + + return ; +} diff --git a/hifi-src/src/components/PublicLayout.jsx b/hifi-src/src/components/PublicLayout.jsx new file mode 100644 index 0000000..6efea9d --- /dev/null +++ b/hifi-src/src/components/PublicLayout.jsx @@ -0,0 +1,59 @@ +import { useEffect, useState } from 'react'; +import { Outlet, useLocation } from 'react-router-dom'; +import Navbar from './Navbar.jsx'; +import Footer from './Footer.jsx'; +import ScrollProgress from './ScrollProgress.jsx'; +import MaintenanceNotice from './MaintenanceNotice.jsx'; +import MaintenanceBypassBanner from './MaintenanceBypassBanner.jsx'; +import CookieConsentBanner from './CookieConsentBanner.jsx'; +import { MaintenanceProvider } from '../context/MaintenanceContext.jsx'; +import { useAuth } from '../context/AuthContext.jsx'; +import { api } from '../api/client.js'; + +const FALLBACK_STATUS = { + global: { enabled: false, message: null }, + services: { enabled: false, message: null }, + vehicles: { enabled: false, message: null }, +}; + +// Das Impressum (und die anderen rechtlichen Pflichtseiten) müssen laut § 5 DDG +// "leicht erkennbar und unmittelbar erreichbar" bleiben – auch während der +// generellen Wartung darf diese Erreichbarkeit nicht durch die Wartungsseite +// verdeckt werden. +const LEGAL_PATHS = ['/impressum', '/datenschutz', '/agb']; + +export default function PublicLayout() { + const [status, setStatus] = useState(null); + const { loading: authLoading, hasPermission } = useAuth(); + const location = useLocation(); + + useEffect(() => { + api.get('/maintenance').then(setStatus).catch(() => setStatus(FALLBACK_STATUS)); + }, []); + + if (status === null || authLoading) { + return

; + } + + const bypass = hasPermission('maintenance.bypass'); + const isLegalPage = LEGAL_PATHS.includes(location.pathname); + + if (status.global.enabled && !bypass && !isLegalPage) { + return ; + } + + return ( + +

+ {bypass && status.global.enabled && } + + +

+ +

+ + ); +} diff --git a/hifi-src/src/components/RequirePermission.jsx b/hifi-src/src/components/RequirePermission.jsx new file mode 100644 index 0000000..221dedc --- /dev/null +++ b/hifi-src/src/components/RequirePermission.jsx @@ -0,0 +1,22 @@ +import { useAuth } from '../context/AuthContext.jsx'; + +export default function RequirePermission({ permission, children }) { + const { hasPermission } = useAuth(); + + const permissions = Array.isArray(permission) ? permission : [permission]; + const allowed = permissions.some((p) => hasPermission(p)); + + if (!allowed) { + return ( +

Keine Berechtigung

+ Du hast keinen Zugriff auf diesen Bereich. Bitte wende dich an einen Administrator, falls du hier + Zugriff brauchst. +

+ ); + } + + return children; +} diff --git a/hifi-src/src/components/Reveal.jsx b/hifi-src/src/components/Reveal.jsx new file mode 100644 index 0000000..c97c467 --- /dev/null +++ b/hifi-src/src/components/Reveal.jsx @@ -0,0 +1,50 @@ +import { motion } from 'framer-motion'; + +const EASE = [0.16, 1, 0.3, 1]; + +const offsetFor = { + up: { y: 40 }, + left: { x: -56 }, + right: { x: 56 }, +}; + +function buildVariants(direction) { + const offset = offsetFor[direction] || offsetFor.up; + return { + hidden: { opacity: 0, scale: 0.96, filter: 'blur(8px)', ...offset }, + visible: { opacity: 1, scale: 1, x: 0, y: 0, filter: 'blur(0px)' }, + }; +} + +const shineVariants = { + hidden: { x: '-130%' }, + visible: { x: '230%', transition: { duration: 1.1, ease: 'easeInOut', delay: 0.4 } }, +}; + +// Trigger-based reveal: each element fades/slides/un-blurs into place the +// first time it enters the viewport, then stays put. Calm and predictable +// on repeated scrolling in either direction (no re-triggering, no jitter). +export default function Reveal({ children, direction = 'up', className = '', index = 0, shine = false }) { + const delay = Math.min(index * 0.09, 0.45); + + return ( + + {children} + {shine && ( + + )} + + ); +} diff --git a/hifi-src/src/components/ScrollProgress.jsx b/hifi-src/src/components/ScrollProgress.jsx new file mode 100644 index 0000000..9c8e1e4 --- /dev/null +++ b/hifi-src/src/components/ScrollProgress.jsx @@ -0,0 +1,13 @@ +import { motion, useScroll, useSpring } from 'framer-motion'; + +export default function ScrollProgress() { + const { scrollYProgress } = useScroll(); + const scaleX = useSpring(scrollYProgress, { stiffness: 200, damping: 30, restDelta: 0.001 }); + + return ( + + ); +} diff --git a/hifi-src/src/components/ScrollToTop.jsx b/hifi-src/src/components/ScrollToTop.jsx new file mode 100644 index 0000000..ac086f7 --- /dev/null +++ b/hifi-src/src/components/ScrollToTop.jsx @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +export default function ScrollToTop() { + const { pathname } = useLocation(); + + useEffect(() => { + // 'instant' statt 'auto', da 'auto' die global gesetzte CSS-Regel scroll-behavior: smooth + // respektiert und dadurch animiert statt sofort zu springen + window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); + }, [pathname]); + + return null; +} diff --git a/hifi-src/src/components/StarRating.jsx b/hifi-src/src/components/StarRating.jsx new file mode 100644 index 0000000..f38e575 --- /dev/null +++ b/hifi-src/src/components/StarRating.jsx @@ -0,0 +1,11 @@ +export default function StarRating({ count = 5, className = 'h-4 w-4' }) { + return ( +

+ {Array.from({ length: count }).map((_, i) => ( + + ))} +

+ ); +} diff --git a/hifi-src/src/components/TestimonialSlider.jsx b/hifi-src/src/components/TestimonialSlider.jsx new file mode 100644 index 0000000..f86159a --- /dev/null +++ b/hifi-src/src/components/TestimonialSlider.jsx @@ -0,0 +1,136 @@ +import { useLayoutEffect, useRef } from 'react'; +import StarRating from './StarRating.jsx'; + +const SPEED_PX_PER_SEC = 70; + +// Läuft als Endlos-Marquee (links -> rechts): der Track enthält die Liste doppelt +// hintereinander. Die Position wird per rAF selbst verwaltet (statt CSS-Animation), +// damit sie sich beim Hovern anhalten UND per Drag manuell verschieben lässt. +export default function TestimonialSlider({ testimonials }) { + const viewportRef = useRef(null); + const trackRef = useRef(null); + const state = useRef({ + pos: 0, + half: 0, + hovering: false, + dragging: false, + dragStartX: 0, + dragStartPos: 0, + lastTime: null, + rafId: null, + }).current; + + useLayoutEffect(() => { + const track = trackRef.current; + const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + const applyPos = () => { + track.style.transform = `translateX(${state.pos}px)`; + }; + + const normalize = (pos) => { + if (state.half <= 0) return pos; + while (pos > 0) pos -= state.half; + while (pos <= -state.half) pos += state.half; + return pos; + }; + + const measure = () => { + state.half = track.scrollWidth / 2; + if (state.pos === 0) { + state.pos = -state.half; + } else { + state.pos = normalize(state.pos); + } + applyPos(); + }; + measure(); + + const resizeObserver = new ResizeObserver(measure); + resizeObserver.observe(track); + + const tick = (time) => { + if (state.lastTime === null) state.lastTime = time; + const dt = (time - state.lastTime) / 1000; + state.lastTime = time; + + if (!state.dragging && !state.hovering && !reduceMotion) { + state.pos = normalize(state.pos + SPEED_PX_PER_SEC * dt); + applyPos(); + } + state.rafId = requestAnimationFrame(tick); + }; + state.rafId = requestAnimationFrame(tick); + + const viewport = viewportRef.current; + + const onPointerEnter = () => { + state.hovering = true; + }; + const onPointerLeave = () => { + state.hovering = false; + }; + const onPointerDown = (e) => { + state.dragging = true; + state.dragStartX = e.clientX; + state.dragStartPos = state.pos; + viewport.setPointerCapture(e.pointerId); + viewport.classList.add('cursor-grabbing'); + viewport.classList.remove('cursor-grab'); + }; + const onPointerMove = (e) => { + if (!state.dragging) return; + state.pos = normalize(state.dragStartPos + (e.clientX - state.dragStartX)); + applyPos(); + }; + const endDrag = (e) => { + if (!state.dragging) return; + state.dragging = false; + if (viewport.hasPointerCapture(e.pointerId)) { + viewport.releasePointerCapture(e.pointerId); + } + viewport.classList.remove('cursor-grabbing'); + viewport.classList.add('cursor-grab'); + }; + + viewport.addEventListener('pointerenter', onPointerEnter); + viewport.addEventListener('pointerleave', onPointerLeave); + viewport.addEventListener('pointerdown', onPointerDown); + viewport.addEventListener('pointermove', onPointerMove); + viewport.addEventListener('pointerup', endDrag); + viewport.addEventListener('pointercancel', endDrag); + + return () => { + cancelAnimationFrame(state.rafId); + resizeObserver.disconnect(); + viewport.removeEventListener('pointerenter', onPointerEnter); + viewport.removeEventListener('pointerleave', onPointerLeave); + viewport.removeEventListener('pointerdown', onPointerDown); + viewport.removeEventListener('pointermove', onPointerMove); + viewport.removeEventListener('pointerup', endDrag); + viewport.removeEventListener('pointercancel', endDrag); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [testimonials.length]); + + const track = [...testimonials, ...testimonials]; + + return ( +

+ {track.map((t, i) => ( +

+ +

„{t.text}"

{t.name}

+ ))} +

+ ); +} diff --git a/hifi-src/src/components/ThemeToggle.jsx b/hifi-src/src/components/ThemeToggle.jsx new file mode 100644 index 0000000..0560d82 --- /dev/null +++ b/hifi-src/src/components/ThemeToggle.jsx @@ -0,0 +1,23 @@ +import { useTheme } from '../context/ThemeContext.jsx'; + +export default function ThemeToggle() { + const { theme, toggleTheme } = useTheme(); + + return ( + + ); +} diff --git a/hifi-src/src/context/AuthContext.jsx b/hifi-src/src/context/AuthContext.jsx new file mode 100644 index 0000000..90de03e --- /dev/null +++ b/hifi-src/src/context/AuthContext.jsx @@ -0,0 +1,54 @@ +import { createContext, useContext, useEffect, useState } from 'react'; +import { api } from '../api/client.js'; + +const AuthContext = createContext(null); + +export function AuthProvider({ children }) { + const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + api + .get('/auth/me') + .then(setUser) + .catch(() => setUser(null)) + .finally(() => setLoading(false)); + }, []); + + const login = async (username, password) => { + const data = await api.post('/auth/login', { username, password }); + if (data.requires_2fa) { + return { requires2fa: true }; + } + setUser(data); + return { requires2fa: false }; + }; + + const verifyTwoFactor = async (code) => { + const data = await api.post('/auth/verify-2fa', { code }); + setUser(data); + }; + + const logout = async () => { + await api.post('/auth/logout', {}); + setUser(null); + }; + + const refreshUser = async () => { + const data = await api.get('/auth/me'); + setUser(data); + }; + + const hasPermission = (permission) => + !!user && (user.is_super_admin || user.permissions?.includes(permission)); + + return ( + + {children} + + ); +} + +export function useAuth() { + return useContext(AuthContext); +} diff --git a/hifi-src/src/context/CookieConsentContext.jsx b/hifi-src/src/context/CookieConsentContext.jsx new file mode 100644 index 0000000..fced880 --- /dev/null +++ b/hifi-src/src/context/CookieConsentContext.jsx @@ -0,0 +1,60 @@ +import { createContext, useCallback, useContext, useEffect, useState } from 'react'; + +const STORAGE_KEY = 'hifiplanet-cookie-consent'; + +const defaultConsent = { necessary: true, external: false }; + +const CookieConsentContext = createContext({ + consent: defaultConsent, + decided: false, + settingsOpen: false, + acceptAll: () => {}, + rejectNonEssential: () => {}, + saveCustom: () => {}, + openSettings: () => {}, + closeSettings: () => {}, +}); + +export function CookieConsentProvider({ children }) { + const [consent, setConsent] = useState(defaultConsent); + const [decided, setDecided] = useState(false); + const [settingsOpen, setSettingsOpen] = useState(false); + + useEffect(() => { + try { + const raw = localStorage.getItem(STORAGE_KEY); + if (raw) { + const parsed = JSON.parse(raw); + setConsent({ necessary: true, external: !!parsed.external }); + setDecided(true); + } + } catch { + // beschädigter Storage-Eintrag -> Banner wird erneut angezeigt + } + }, []); + + const persist = useCallback((next) => { + setConsent(next); + setDecided(true); + setSettingsOpen(false); + localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...next, decidedAt: new Date().toISOString() })); + }, []); + + const acceptAll = useCallback(() => persist({ necessary: true, external: true }), [persist]); + const rejectNonEssential = useCallback(() => persist({ necessary: true, external: false }), [persist]); + const saveCustom = useCallback((partial) => persist({ necessary: true, external: !!partial.external }), [persist]); + const openSettings = useCallback(() => setSettingsOpen(true), []); + const closeSettings = useCallback(() => setSettingsOpen(false), []); + + return ( + + {children} + + ); +} + +export function useCookieConsent() { + return useContext(CookieConsentContext); +} diff --git a/hifi-src/src/context/MaintenanceContext.jsx b/hifi-src/src/context/MaintenanceContext.jsx new file mode 100644 index 0000000..fcc9c8f --- /dev/null +++ b/hifi-src/src/context/MaintenanceContext.jsx @@ -0,0 +1,14 @@ +import { createContext, useContext } from 'react'; + +const MaintenanceContext = createContext({ + global: { enabled: false, message: null }, + services: { enabled: false, message: null }, + vehicles: { enabled: false, message: null }, + bypass: false, +}); + +export const MaintenanceProvider = MaintenanceContext.Provider; + +export function useMaintenance() { + return useContext(MaintenanceContext); +} diff --git a/hifi-src/src/context/ThemeContext.jsx b/hifi-src/src/context/ThemeContext.jsx new file mode 100644 index 0000000..e1c81ca --- /dev/null +++ b/hifi-src/src/context/ThemeContext.jsx @@ -0,0 +1,24 @@ +import { createContext, useContext, useEffect, useState } from 'react'; + +const ThemeContext = createContext(null); + +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState(() => { + const stored = localStorage.getItem('hifi-theme'); + if (stored) return stored; + return 'light'; + }); + + useEffect(() => { + document.documentElement.classList.toggle('dark', theme === 'dark'); + localStorage.setItem('hifi-theme', theme); + }, [theme]); + + const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark')); + + return {children}; +} + +export function useTheme() { + return useContext(ThemeContext); +} diff --git a/hifi-src/src/hooks/usePageMeta.js b/hifi-src/src/hooks/usePageMeta.js new file mode 100644 index 0000000..bf0f1be --- /dev/null +++ b/hifi-src/src/hooks/usePageMeta.js @@ -0,0 +1,38 @@ +import { useEffect } from 'react'; + +function setMetaTag(name, content, attr = 'name') { + if (!content) return; + let tag = document.head.querySelector(`meta[${attr}="${name}"]`); + if (!tag) { + tag = document.createElement('meta'); + tag.setAttribute(attr, name); + document.head.appendChild(tag); + } + tag.setAttribute('content', content); +} + +function setCanonical(path) { + let link = document.head.querySelector('link[rel="canonical"]'); + if (!link) { + link = document.createElement('link'); + link.setAttribute('rel', 'canonical'); + document.head.appendChild(link); + } + link.setAttribute('href', `https://hifi-planet.de${path}`); +} + +export default function usePageMeta({ title, description, path }) { + useEffect(() => { + if (title) { + document.title = `${title} | HifiPlanet`; + setMetaTag('og:title', `${title} | HifiPlanet`, 'property'); + } + if (description) { + setMetaTag('description', description); + setMetaTag('og:description', description, 'property'); + } + if (path) { + setCanonical(path); + } + }, [title, description, path]); +} diff --git a/hifi-src/src/index.css b/hifi-src/src/index.css new file mode 100644 index 0000000..4c2a901 --- /dev/null +++ b/hifi-src/src/index.css @@ -0,0 +1,12 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +html { + scroll-behavior: smooth; +} + +.marquee-viewport { + -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); + mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); +} diff --git a/hifi-src/src/main.jsx b/hifi-src/src/main.jsx new file mode 100644 index 0000000..fab029e --- /dev/null +++ b/hifi-src/src/main.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; +import App from './App.jsx'; +import { ThemeProvider } from './context/ThemeContext.jsx'; +import { AuthProvider } from './context/AuthContext.jsx'; +import { CookieConsentProvider } from './context/CookieConsentContext.jsx'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + + + + + + + + +); diff --git a/hifi-src/src/pages/admin/AccountSettings.jsx b/hifi-src/src/pages/admin/AccountSettings.jsx new file mode 100644 index 0000000..886e7a9 --- /dev/null +++ b/hifi-src/src/pages/admin/AccountSettings.jsx @@ -0,0 +1,358 @@ +import { useState } from 'react'; +import QRCode from 'qrcode'; +import { api } from '../../api/client.js'; +import { useAuth } from '../../context/AuthContext.jsx'; + +const emptyPasswordForm = { + current_password: '', + new_password: '', + new_password_confirmation: '', + two_factor_code: '', +}; + +export default function AccountSettings() { + const { user, refreshUser } = useAuth(); + const [phase, setPhase] = useState('idle'); // idle | setup | recovery-codes | disable | regenerate + const [qrDataUrl, setQrDataUrl] = useState(''); + const [secret, setSecret] = useState(''); + const [code, setCode] = useState(''); + const [password, setPassword] = useState(''); + const [recoveryCodes, setRecoveryCodes] = useState([]); + const [error, setError] = useState(''); + const [busy, setBusy] = useState(false); + + const [passwordForm, setPasswordForm] = useState(emptyPasswordForm); + const [passwordError, setPasswordError] = useState(''); + const [passwordSuccess, setPasswordSuccess] = useState(''); + const [passwordBusy, setPasswordBusy] = useState(false); + + const handleChangePassword = async (e) => { + e.preventDefault(); + setPasswordError(''); + setPasswordSuccess(''); + + if (passwordForm.new_password !== passwordForm.new_password_confirmation) { + setPasswordError('Die neuen Passwörter stimmen nicht überein'); + return; + } + + setPasswordBusy(true); + try { + await api.post('/auth/change-password', passwordForm); + setPasswordForm(emptyPasswordForm); + setPasswordSuccess('Passwort erfolgreich geändert.'); + } catch (err) { + setPasswordError(err.message); + } finally { + setPasswordBusy(false); + } + }; + + const startSetup = async () => { + setError(''); + setBusy(true); + try { + const data = await api.get('/auth/2fa/setup'); + setSecret(data.secret); + setQrDataUrl(await QRCode.toDataURL(data.otpauth_url)); + setCode(''); + setPhase('setup'); + } catch (err) { + setError(err.message); + } finally { + setBusy(false); + } + }; + + const confirmSetup = async (e) => { + e.preventDefault(); + setError(''); + setBusy(true); + try { + const data = await api.post('/auth/2fa/enable', { code }); + setRecoveryCodes(data.recovery_codes); + setPhase('recovery-codes'); + await refreshUser(); + } catch (err) { + setError(err.message); + } finally { + setBusy(false); + } + }; + + const finishRecoveryCodes = () => { + setPhase('idle'); + setRecoveryCodes([]); + setPassword(''); + }; + + const handleDisable = async (e) => { + e.preventDefault(); + setError(''); + setBusy(true); + try { + await api.post('/auth/2fa/disable', { password }); + setPassword(''); + setPhase('idle'); + await refreshUser(); + } catch (err) { + setError(err.message); + } finally { + setBusy(false); + } + }; + + const handleRegenerate = async (e) => { + e.preventDefault(); + setError(''); + setBusy(true); + try { + const data = await api.post('/auth/2fa/recovery-codes', { password }); + setRecoveryCodes(data.recovery_codes); + setPhase('recovery-codes'); + } catch (err) { + setError(err.message); + } finally { + setBusy(false); + } + }; + + return ( +

Mein Konto

+ Angemeldet als {user?.username}{user?.is_super_admin ? ' (Super-Admin)' : ''}. +

+ +

Passwort ändern

+ Vergib ein neues Passwort für dein Konto. + {user?.two_factor_enabled && ' Da 2FA aktiv ist, musst du die Änderung zusätzlich mit deinem Code bestätigen.'} +

+ + Aktuelles Passwort + + setPasswordForm({ ...passwordForm, current_password: e.target.value })} + required + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ + Neues Passwort + + setPasswordForm({ ...passwordForm, new_password: e.target.value })} + required + minLength={8} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ + Neues Passwort wiederholen + + setPasswordForm({ ...passwordForm, new_password_confirmation: e.target.value })} + required + minLength={8} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ {user?.two_factor_enabled && ( +

+ + 2FA-Code zur Bestätigung + + setPasswordForm({ ...passwordForm, two_factor_code: e.target.value })} + required + inputMode="numeric" + placeholder="123456 oder Wiederherstellungscode" + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ )} + {passwordError &&

{passwordError}

} + {passwordSuccess &&

{passwordSuccess}

} + +

+ +

Zwei-Faktor-Authentifizierung

+ Schützt dein Konto zusätzlich mit einem Code aus der Google Authenticator App. +

+ + {phase === 'idle' && ( + <> +

+ Status:{' '} + {user?.two_factor_enabled ? ( + Aktiv + ) : ( + Nicht aktiv + )} +

+ {user?.two_factor_enabled ? ( +

+ + +

+ ) : ( + + )} + + )} + + {phase === 'setup' && ( +

Öffne die Google Authenticator App (oder eine kompatible App).
Scanne den folgenden QR-Code:

+ {qrDataUrl && QR-Code für Zwei-Faktor-Authentifizierung

} +

+ Geht das Scannen nicht? Gib diesen Code manuell ein:
+ {secret} +

+ + Bestätigungscode aus der App + + setCode(e.target.value)} + required + autoFocus + inputMode="numeric" + placeholder="123456" + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-center text-lg tracking-widest dark:border-slate-700 dark:bg-slate-900" + /> +

+ {error &&

{error}

} +

+ + +

+ )} + + {phase === 'recovery-codes' && ( +

+ Wiederherstellungscodes – jetzt sicher speichern! +

+ Jeder Code funktioniert einmalig, falls du keinen Zugriff mehr auf die Authenticator-App hast. + Diese Codes werden nur jetzt angezeigt. +

+ {recoveryCodes.map((c) => {c})} +

+ +

+ )} + + {phase === 'disable' && ( + + )} + + {phase === 'regenerate' && ( + + )} +

+ ); +} diff --git a/hifi-src/src/pages/admin/AdminUsers.jsx b/hifi-src/src/pages/admin/AdminUsers.jsx new file mode 100644 index 0000000..4327163 --- /dev/null +++ b/hifi-src/src/pages/admin/AdminUsers.jsx @@ -0,0 +1,235 @@ +import { useEffect, useState } from 'react'; +import { api } from '../../api/client.js'; +import { useAuth } from '../../context/AuthContext.jsx'; + +const emptyForm = { username: '', password: '', is_super_admin: false, permissions: [], group_ids: [] }; + +export default function AdminUsers() { + const { user: currentUser, hasPermission } = useAuth(); + const [users, setUsers] = useState([]); + const [catalog, setCatalog] = useState([]); + const [groups, setGroups] = useState([]); + const [form, setForm] = useState(emptyForm); + const [editingId, setEditingId] = useState(null); + const [error, setError] = useState(''); + + const load = () => { + api.get('/admin-users').then(setUsers); + api.get('/permissions/catalog').then(setCatalog); + if (hasPermission('permission_groups.manage') || hasPermission('users.manage')) { + api.get('/permission-groups').then(setGroups); + } + }; + + useEffect(load, []); + + const startEdit = (u) => { + setEditingId(u.id); + setForm({ + username: u.username, + password: '', + is_super_admin: u.is_super_admin, + permissions: u.permissions, + group_ids: u.groups.map((g) => g.id), + }); + }; + + const resetForm = () => { + setEditingId(null); + setForm(emptyForm); + }; + + const togglePermission = (key) => { + setForm((f) => ({ + ...f, + permissions: f.permissions.includes(key) ? f.permissions.filter((p) => p !== key) : [...f.permissions, key], + })); + }; + + const toggleGroup = (id) => { + setForm((f) => ({ + ...f, + group_ids: f.group_ids.includes(id) ? f.group_ids.filter((g) => g !== id) : [...f.group_ids, id], + })); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(''); + try { + if (editingId) { + await api.put(`/admin-users/${editingId}`, form); + } else { + if (form.password.length < 8) { + setError('Passwort muss mindestens 8 Zeichen lang sein'); + return; + } + await api.post('/admin-users', form); + } + resetForm(); + load(); + } catch (err) { + setError(err.message); + } + }; + + const handleDelete = async (id) => { + if (!confirm('Diesen Benutzer wirklich löschen?')) return; + try { + await api.delete(`/admin-users/${id}`); + load(); + } catch (err) { + alert(err.message); + } + }; + + return ( +

Benutzer

+ Jeder Mitarbeiter bekommt ein eigenes Konto mit genau den Rechten, die er braucht. +

+ + + + + + + + + + + {users.map((u) => ( + + + + + + + ))} + {users.length === 0 && ( + + )} + +

Benutzername	Rolle	Berechtigungsgruppen	Aktionen
+ {u.username} + {u.id === currentUser?.id && (du)} +	+ {u.is_super_admin ? ( + + Super-Admin + + ) : ( + {u.permissions.length} Einzelrechte + )} +	+ + {u.groups.map((g) => ( + + {g.name} + + ))} + {u.groups.length === 0 && '–'} + +	+ + {u.id !== currentUser?.id && ( + + )} +
Noch keine Benutzer angelegt.

+ +

{editingId ? 'Benutzer bearbeiten' : 'Neuer Benutzer'}

+ Benutzername * + setForm({ ...form, username: e.target.value })} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ + Passwort {editingId ? '(leer lassen = unverändert)' : '*'} + + setForm({ ...form, password: e.target.value })} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ + {currentUser?.is_super_admin && ( + + setForm({ ...form, is_super_admin: e.target.checked })} + className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" + /> + Super-Admin (hat automatisch alle Rechte) + + )} + + {!form.is_super_admin && ( + <> +

Einzelne Berechtigungen

+ {catalog.map((p) => ( + + togglePermission(p.key)} + className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" + /> + {p.label} + + ))} +

+ +

Berechtigungsgruppen

+ {groups.map((g) => ( + + toggleGroup(g.id)} + className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" + /> + {g.name} + + ))} + {groups.length === 0 &&

Noch keine Berechtigungsgruppen angelegt.

} +

+ + )} + + {error &&

{error}

} + +

+ + {editingId && ( + + )} +

+ ); +} diff --git a/hifi-src/src/pages/admin/Brands.jsx b/hifi-src/src/pages/admin/Brands.jsx new file mode 100644 index 0000000..3362159 --- /dev/null +++ b/hifi-src/src/pages/admin/Brands.jsx @@ -0,0 +1,123 @@ +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { api } from '../../api/client.js'; + +const emptyForm = { name: '', sort_order: 0 }; + +export default function Brands() { + const [brands, setBrands] = useState([]); + const [form, setForm] = useState(emptyForm); + const [editingId, setEditingId] = useState(null); + const [error, setError] = useState(''); + + const load = () => api.get('/brands').then(setBrands); + + useEffect(() => { + load(); + }, []); + + const startEdit = (brand) => { + setEditingId(brand.id); + setForm({ name: brand.name, sort_order: brand.sort_order }); + }; + + const resetForm = () => { + setEditingId(null); + setForm(emptyForm); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(''); + try { + if (editingId) { + await api.put(`/brands/${editingId}`, form); + } else { + await api.post('/brands', form); + } + resetForm(); + load(); + } catch (err) { + setError(err.message); + } + }; + + const handleDelete = async (id) => { + if (!confirm('Marke inkl. aller Modelle/Pakete/Produkte wirklich löschen?')) return; + await api.delete(`/brands/${id}`); + load(); + }; + + return ( +

Marken

+ + + + + + + + + + {brands.map((brand) => ( + + + + + + ))} + {brands.length === 0 && ( + + )} + +

Name	Sortierung	Aktionen
+ + {brand.name} + +	{brand.sort_order}	+ + +
Noch keine Marken angelegt.

+ + +

+ ); +} diff --git a/hifi-src/src/pages/admin/ContactRequests.jsx b/hifi-src/src/pages/admin/ContactRequests.jsx new file mode 100644 index 0000000..a1d62f0 --- /dev/null +++ b/hifi-src/src/pages/admin/ContactRequests.jsx @@ -0,0 +1,145 @@ +import { useEffect, useMemo, useState } from 'react'; +import { api } from '../../api/client.js'; +import { useAuth } from '../../context/AuthContext.jsx'; + +const formatPrice = (value) => + new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value); + +const statusLabel = { new: 'Neu', in_progress: 'In Bearbeitung', done: 'Erledigt' }; +const statusBadge = { + new: 'bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300', + in_progress: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300', + done: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300', +}; + +const TrashIcon = () => ( + +); + +export default function ContactRequests() { + const { hasPermission } = useAuth(); + const [requests, setRequests] = useState([]); + const [filter, setFilter] = useState('all'); + + const load = () => api.get('/contact').then(setRequests); + + useEffect(() => { + load(); + }, []); + + const handleStatusChange = async (id, status) => { + await api.patch(`/contact/${id}`, { status }); + load(); + }; + + const handleDelete = async (id) => { + if (!confirm('Diese Kontaktanfrage wirklich unwiderruflich löschen?')) return; + await api.delete(`/contact/${id}`); + load(); + }; + + const counts = useMemo( + () => ({ + all: requests.length, + new: requests.filter((r) => r.status === 'new').length, + in_progress: requests.filter((r) => r.status === 'in_progress').length, + done: requests.filter((r) => r.status === 'done').length, + }), + [requests] + ); + + const filtered = filter === 'all' ? requests : requests.filter((r) => r.status === filter); + + const tabs = [ + { value: 'all', label: 'Alle' }, + { value: 'new', label: 'Neu' }, + { value: 'in_progress', label: 'In Bearbeitung' }, + { value: 'done', label: 'Erledigt' }, + ]; + + return ( +

Kontaktanfragen

+ Alle Anfragen deiner Kunden. Wähle oben einen Reiter, um nur bestimmte Anfragen zu sehen. +

+ +

+ {tabs.map((tab) => ( + + ))} +

+ +

+ {filtered.map((r) => ( +

{r.name} · {r.email}{r.phone ? ` · ${r.phone}` : ''}

{new Date(r.created_at.replace(' ', 'T')).toLocaleString('de-DE')}

+ + {hasPermission('contact.delete') && ( + + )} +

+ + {(r.brand_name || r.model_name || r.package_name || r.product_name) && ( +

+ {[r.brand_name, r.model_name, r.package_name, r.product_name].filter(Boolean).join(' · ')} +

+ )} + + {r.selected_upgrades?.length > 0 && ( +

Gewünschte Upgrades:

{u.name} – {formatPrice(u.price)}

+ )} + + {r.message &&

{r.message}

} +

+ ))} + + {filtered.length === 0 && ( +

+ {filter === 'all' ? 'Noch keine Kontaktanfragen eingegangen.' : 'Keine Anfragen mit diesem Status.'} +

+ )} +

+ ); +} diff --git a/hifi-src/src/pages/admin/Dashboard.jsx b/hifi-src/src/pages/admin/Dashboard.jsx new file mode 100644 index 0000000..d78da2b --- /dev/null +++ b/hifi-src/src/pages/admin/Dashboard.jsx @@ -0,0 +1,75 @@ +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { api } from '../../api/client.js'; +import { useAuth } from '../../context/AuthContext.jsx'; + +const ICONS = { + tag: 'M4 4h7l9 9-7 7-9-9V4Zm3.5 3.5h.01', + car: 'M3 13.5 4.5 9A2 2 0 0 1 6.4 7.5h11.2A2 2 0 0 1 19.5 9L21 13.5M3 13.5v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-4M3 13.5h18M6.5 16.5h.01M17.5 16.5h.01', + box: 'M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 9 8-4.5M12 12v9M12 12 4 7.5', + mail: 'M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm0 0 8 7 8-7', +}; + +const Icon = ({ path, className = 'h-6 w-6' }) => ( + +); + +export default function Dashboard() { + const { user, hasPermission } = useAuth(); + const [stats, setStats] = useState({}); + + useEffect(() => { + if (hasPermission('brands.manage')) api.get('/brands').then((rows) => setStats((s) => ({ ...s, brands: rows.length }))); + if (hasPermission('models.manage') || hasPermission('packages.manage')) { + api.get('/models').then((rows) => setStats((s) => ({ ...s, models: rows.length }))); + } + if (hasPermission('packages.manage')) api.get('/packages').then((rows) => setStats((s) => ({ ...s, packages: rows.length }))); + if (hasPermission('contact.manage')) { + api.get('/contact').then((rows) => setStats((s) => ({ ...s, newContacts: rows.filter((c) => c.status === 'new').length }))); + } + }, []); + + const cards = [ + { key: 'brands', label: 'Marken', icon: 'tag', hint: 'Die Hersteller, z. B. Audi oder BMW.', value: stats.brands, to: '/admin/brands', show: hasPermission('brands.manage') }, + { key: 'models', label: 'Modelle', icon: 'car', hint: 'Die Fahrzeuge einer Marke, z. B. A4.', value: stats.models, to: '/admin/models', show: hasPermission('models.manage') }, + { key: 'packages', label: 'Pakete', icon: 'box', hint: 'Die Sound-Pakete für ein Modell.', value: stats.packages, to: '/admin/packages', show: hasPermission('packages.manage') }, + { key: 'contacts', label: 'Neue Anfragen', icon: 'mail', hint: 'Kunden, die noch auf Antwort warten.', value: stats.newContacts, to: '/admin/contact-requests', show: hasPermission('contact.manage'), highlight: true }, + ].filter((c) => c.show); + + return ( +

Willkommen, {user?.username}!

+ Hier siehst du auf einen Blick, wie viel in deinem Shop hinterlegt ist. Klicke auf eine Kachel, um dorthin zu gelangen. +

+ {cards.length === 0 ? ( +

+ Für deinen Account sind noch keine Bereiche freigeschaltet. Bitte wende dich an einen Administrator. +

+ ) : ( +

+ {cards.map((card) => ( + 0 + ? 'border-brand-300 bg-brand-50 dark:border-brand-900 dark:bg-brand-900/20' + : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900' + }`} + > +

+ +

{card.label}

{card.value ?? '…'}

{card.hint}

+ + ))} +

+ )} +

+ ); +} diff --git a/hifi-src/src/pages/admin/Login.jsx b/hifi-src/src/pages/admin/Login.jsx new file mode 100644 index 0000000..45c5078 --- /dev/null +++ b/hifi-src/src/pages/admin/Login.jsx @@ -0,0 +1,131 @@ +import { useState } from 'react'; +import { Navigate, useNavigate } from 'react-router-dom'; +import { useAuth } from '../../context/AuthContext.jsx'; +import logo from '../../assets/logo.png'; + +export default function Login() { + const { user, login, verifyTwoFactor } = useAuth(); + const navigate = useNavigate(); + const [step, setStep] = useState('credentials'); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [code, setCode] = useState(''); + const [error, setError] = useState(''); + const [loading, setLoading] = useState(false); + + if (user) { + return ; + } + + const handleCredentials = async (e) => { + e.preventDefault(); + setLoading(true); + setError(''); + try { + const result = await login(username, password); + if (result.requires2fa) { + setStep('code'); + } else { + navigate('/admin'); + } + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + const handleCode = async (e) => { + e.preventDefault(); + setLoading(true); + setError(''); + try { + await verifyTwoFactor(code); + navigate('/admin'); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + return ( +

+ {step === 'credentials' ? ( + + ) : ( +

Bestätigungscode

+ Öffne die Google Authenticator App und gib den 6-stelligen Code ein. Alternativ kannst du auch + einen deiner Wiederherstellungscodes verwenden. +

+ +

+ Code + setCode(e.target.value)} + required + autoFocus + inputMode="numeric" + placeholder="123456" + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-center text-lg tracking-widest focus:border-brand-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900" + /> +

+ + {error &&

{error}

} + + + +

+ )} +

+ ); +} diff --git a/hifi-src/src/pages/admin/Models.jsx b/hifi-src/src/pages/admin/Models.jsx new file mode 100644 index 0000000..71a0858 --- /dev/null +++ b/hifi-src/src/pages/admin/Models.jsx @@ -0,0 +1,160 @@ +import { useEffect, useMemo, useState } from 'react'; +import { api } from '../../api/client.js'; + +const emptyForm = { name: '', brand_id: '', sort_order: 0 }; + +export default function Models() { + const [models, setModels] = useState([]); + const [brands, setBrands] = useState([]); + const [form, setForm] = useState(emptyForm); + const [editingId, setEditingId] = useState(null); + const [error, setError] = useState(''); + const [brandFilter, setBrandFilter] = useState('all'); + + const filteredModels = useMemo( + () => (brandFilter === 'all' ? models : models.filter((m) => String(m.brand_id) === brandFilter)), + [models, brandFilter] + ); + + const load = () => { + api.get('/models').then(setModels); + api.get('/brands').then(setBrands); + }; + + useEffect(load, []); + + const startEdit = (model) => { + setEditingId(model.id); + setForm({ name: model.name, brand_id: model.brand_id, sort_order: model.sort_order }); + }; + + const resetForm = () => { + setEditingId(null); + setForm(emptyForm); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(''); + const payload = { ...form, brand_id: Number(form.brand_id) }; + try { + if (editingId) { + await api.put(`/models/${editingId}`, payload); + } else { + await api.post('/models', payload); + } + resetForm(); + load(); + } catch (err) { + setError(err.message); + } + }; + + const handleDelete = async (id) => { + if (!confirm('Modell inkl. aller Pakete/Produkte wirklich löschen?')) return; + await api.delete(`/models/${id}`); + load(); + }; + + return ( +

Modelle

+ +

+ Nach Marke filtern: + + {brandFilter !== 'all' && ( + + )} + {filteredModels.length} von {models.length} +

+ +

+ + + + + + + + + + {filteredModels.map((model) => ( + + + + + + ))} + {filteredModels.length === 0 && ( + + )} + +

Marke	Modell	Aktionen
{model.brand_name}	{model.name}	+ + +
+ {models.length === 0 ? 'Noch keine Modelle angelegt.' : 'Keine Modelle für diese Marke.'} +

+ +

{editingId ? 'Modell bearbeiten' : 'Neues Modell'}

+ Marke * + +

+ Modellname * + setForm({ ...form, name: e.target.value })} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ Sortierung + setForm({ ...form, sort_order: Number(e.target.value) })} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ + {error &&

{error}

} + +

+ + {editingId && ( + + )} +

+ ); +} diff --git a/hifi-src/src/pages/admin/PackageProducts.jsx b/hifi-src/src/pages/admin/PackageProducts.jsx new file mode 100644 index 0000000..bf65d64 --- /dev/null +++ b/hifi-src/src/pages/admin/PackageProducts.jsx @@ -0,0 +1,139 @@ +import { useEffect, useState } from 'react'; +import { Link, useParams } from 'react-router-dom'; +import { api } from '../../api/client.js'; + +const formatPrice = (value) => + value == null ? '–' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value); + +const statusBadge = { + ok: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300', + pending: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300', + error: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300', +}; + +export default function PackageProducts() { + const { packageId } = useParams(); + const [products, setProducts] = useState([]); + const [sourceUrl, setSourceUrl] = useState(''); + const [nameOverride, setNameOverride] = useState(''); + const [error, setError] = useState(''); + const [busy, setBusy] = useState(false); + + const load = () => api.get(`/packages/${packageId}/products`).then(setProducts); + + useEffect(() => { + load(); + }, [packageId]); + + const handleAdd = async (e) => { + e.preventDefault(); + setError(''); + setBusy(true); + try { + await api.post('/products', { package_id: Number(packageId), source_url: sourceUrl, name_override: nameOverride || null }); + setSourceUrl(''); + setNameOverride(''); + load(); + } catch (err) { + setError(err.message); + } finally { + setBusy(false); + } + }; + + const handleRefresh = async (id) => { + setBusy(true); + try { + await api.post(`/products/${id}/refresh-price`, {}); + load(); + } finally { + setBusy(false); + } + }; + + const handleDelete = async (id) => { + if (!confirm('Produkt wirklich entfernen?')) return; + await api.delete(`/products/${id}`); + load(); + }; + + return ( +

+ ← Zurück zu den Paketen +

Produkte im Paket

+ + + + {error &&

{error}

} + +

+ + + + + + + + + + + + {products.map((p) => ( + + + + + + + + ))} + {products.length === 0 && ( + + )} + +

Produkt	Preis	Status	Zuletzt aktualisiert	Aktionen
+ + {p.name_override \|\| p.scraped_name \|\| p.source_url} + + {p.scrape_status === 'error' && {p.scrape_error} } +	{formatPrice(p.scraped_price)}	+ + {p.scrape_status} + +	+ {p.price_updated_at ? new Date(p.price_updated_at.replace(' ', 'T')).toLocaleString('de-DE') : '–'} +	+ + +
Noch keine Produkte im Paket.

+ ); +} diff --git a/hifi-src/src/pages/admin/PackageUpgrades.jsx b/hifi-src/src/pages/admin/PackageUpgrades.jsx new file mode 100644 index 0000000..b261b1d --- /dev/null +++ b/hifi-src/src/pages/admin/PackageUpgrades.jsx @@ -0,0 +1,154 @@ +import { useEffect, useState } from 'react'; +import { Link, useParams } from 'react-router-dom'; +import { api } from '../../api/client.js'; + +const formatPrice = (value) => + new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value); + +const emptyForm = { name: '', description: '', price: 0, sort_order: 0 }; + +export default function PackageUpgrades() { + const { packageId } = useParams(); + const [upgrades, setUpgrades] = useState([]); + const [form, setForm] = useState(emptyForm); + const [editingId, setEditingId] = useState(null); + const [error, setError] = useState(''); + + const load = () => api.get(`/packages/${packageId}/upgrades`).then(setUpgrades); + + useEffect(() => { + load(); + }, [packageId]); + + const startEdit = (u) => { + setEditingId(u.id); + setForm({ name: u.name, description: u.description || '', price: u.price, sort_order: u.sort_order }); + }; + + const resetForm = () => { + setEditingId(null); + setForm(emptyForm); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(''); + const payload = { ...form, package_id: Number(packageId), price: Number(form.price) }; + try { + if (editingId) { + await api.put(`/package-upgrades/${editingId}`, payload); + } else { + await api.post('/package-upgrades', payload); + } + resetForm(); + load(); + } catch (err) { + setError(err.message); + } + }; + + const handleDelete = async (id) => { + if (!confirm('Upgrade wirklich löschen?')) return; + await api.delete(`/package-upgrades/${id}`); + load(); + }; + + return ( +

+ ← Zurück zu den Paketen +

Optionale Upgrades

+ Diese Upgrades erscheinen nicht in der öffentlichen Paketübersicht, sondern erst als Auswahl im Kontaktformular. +

+ + + + + + + + + + {upgrades.map((u) => ( + + + + + + ))} + {upgrades.length === 0 && ( + + )} + +

Name	Preis	Aktionen
+ {u.name} + {u.description && {u.description} } +	{formatPrice(u.price)}	+ + +
Noch keine Upgrades hinterlegt.

Name

Preis

Aktionen

{u.name}

+ {u.description &&

{u.description}

} +

{formatPrice(u.price)}

+ + +

Noch keine Upgrades hinterlegt.

+ +

{editingId ? 'Upgrade bearbeiten' : 'Neues Upgrade'}

+ Name * + setForm({ ...form, name: e.target.value })} + className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900" + /> +

+ Beschreibung +

setForm({ ...form, description: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Preis (€) *</label>
+          <input
+            required
+            type="number"
+            step="0.01"
+            min="0"
+            value={form.price}
+            onChange={(e) => setForm({ ...form, price: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Sortierung</label>
+          <input
+            type="number"
+            value={form.sort_order}
+            onChange={(e) => setForm({ ...form, sort_order: Number(e.target.value) })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        {error && <p className="text-sm text-red-600">{error}</p>}
+
+        <div className="flex gap-2">
+          <button type="submit" className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600">
+            {editingId ? 'Speichern' : 'Anlegen'}
+          </button>
+          {editingId && (
+            <button type="button" onClick={resetForm} className="rounded-md border border-slate-300 px-4 py-2 text-sm dark:border-slate-700">
+              Abbrechen
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/Packages.jsx b/hifi-src/src/pages/admin/Packages.jsx
new file mode 100644
index 0000000..886ece6
--- /dev/null
+++ b/hifi-src/src/pages/admin/Packages.jsx
@@ -0,0 +1,248 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { api } from '../../api/client.js';
+
+const emptyForm = { name: '', car_model_id: '', description: '', markup_type: 'none', markup_value: 0, sort_order: 0 };
+
+export default function Packages() {
+  const [packages, setPackages] = useState([]);
+  const [models, setModels] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editingId, setEditingId] = useState(null);
+  const [error, setError] = useState('');
+  const [brandFilter, setBrandFilter] = useState('all');
+  const [modelFilter, setModelFilter] = useState('all');
+
+  const load = () => {
+    api.get('/packages').then(setPackages);
+    api.get('/models').then(setModels);
+  };
+
+  useEffect(load, []);
+
+  const modelById = useMemo(() => new Map(models.map((m) => [m.id, m])), [models]);
+
+  const brandOptions = useMemo(() => {
+    const seen = new Map();
+    models.forEach((m) => {
+      if (!seen.has(m.brand_id)) seen.set(m.brand_id, m.brand_name);
+    });
+    return Array.from(seen, ([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name));
+  }, [models]);
+
+  const modelOptions = useMemo(
+    () =>
+      models
+        .filter((m) => brandFilter === 'all' || String(m.brand_id) === brandFilter)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [models, brandFilter]
+  );
+
+  const handleBrandFilterChange = (value) => {
+    setBrandFilter(value);
+    setModelFilter('all');
+  };
+
+  const filteredPackages = useMemo(
+    () =>
+      packages.filter((pkg) => {
+        const model = modelById.get(pkg.car_model_id);
+        if (brandFilter !== 'all' && String(model?.brand_id) !== brandFilter) return false;
+        if (modelFilter !== 'all' && String(pkg.car_model_id) !== modelFilter) return false;
+        return true;
+      }),
+    [packages, modelById, brandFilter, modelFilter]
+  );
+
+  const startEdit = (pkg) => {
+    setEditingId(pkg.id);
+    setForm({
+      name: pkg.name,
+      car_model_id: pkg.car_model_id,
+      description: pkg.description || '',
+      markup_type: pkg.markup_type || 'none',
+      markup_value: pkg.markup_value || 0,
+      sort_order: pkg.sort_order,
+    });
+  };
+
+  const resetForm = () => {
+    setEditingId(null);
+    setForm(emptyForm);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const payload = { ...form, car_model_id: Number(form.car_model_id), markup_value: Number(form.markup_value) };
+    try {
+      if (editingId) {
+        await api.put(`/packages/${editingId}`, payload);
+      } else {
+        await api.post('/packages', payload);
+      }
+      resetForm();
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('Paket inkl. aller Produkte wirklich löschen?')) return;
+    await api.delete(`/packages/${id}`);
+    load();
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-3">
+      <div className="lg:col-span-2">
+        <h1 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">Pakete</h1>
+
+        <div className="mb-3 flex flex-wrap items-center gap-2">
+          <label className="text-sm font-medium text-slate-600 dark:text-slate-300">Filtern:</label>
+          <select
+            value={brandFilter}
+            onChange={(e) => handleBrandFilterChange(e.target.value)}
+            className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-900"
+          >
+            <option value="all">Alle Marken</option>
+            {brandOptions.map((b) => <option key={b.id} value={String(b.id)}>{b.name}</option>)}
+          </select>
+          <select
+            value={modelFilter}
+            onChange={(e) => setModelFilter(e.target.value)}
+            className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-900"
+          >
+            <option value="all">Alle Modelle</option>
+            {modelOptions.map((m) => <option key={m.id} value={String(m.id)}>{m.brand_name} {m.name}</option>)}
+          </select>
+          {(brandFilter !== 'all' || modelFilter !== 'all') && (
+            <button onClick={() => handleBrandFilterChange('all')} className="text-sm text-brand-600 hover:underline">
+              Filter zurücksetzen
+            </button>
+          )}
+          <span className="text-sm text-slate-400">{filteredPackages.length} von {packages.length}</span>
+        </div>
+
+        <div className="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-slate-50 text-slate-500 dark:bg-slate-900 dark:text-slate-400">
+              <tr>
+                <th className="px-4 py-2">Marke / Modell</th>
+                <th className="px-4 py-2">Paket</th>
+                <th className="px-4 py-2">Aufschlag</th>
+                <th className="px-4 py-2 text-right">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+              {filteredPackages.map((pkg) => (
+                <tr key={pkg.id} className="bg-white dark:bg-slate-950">
+                  <td className="px-4 py-2">{pkg.brand_name} {pkg.model_name}</td>
+                  <td className="px-4 py-2 font-medium text-slate-800 dark:text-slate-100">{pkg.name}</td>
+                  <td className="px-4 py-2 text-slate-500 dark:text-slate-400">
+                    {pkg.markup_type === 'fixed' && `+${pkg.markup_value} €`}
+                    {pkg.markup_type === 'percent' && `+${pkg.markup_value} %`}
+                    {(!pkg.markup_type || pkg.markup_type === 'none') && '–'}
+                  </td>
+                  <td className="px-4 py-2 text-right">
+                    <Link to={`/admin/packages/${pkg.id}/products`} className="mr-3 text-brand-600 hover:underline">Produkte</Link>
+                    <Link to={`/admin/packages/${pkg.id}/upgrades`} className="mr-3 text-brand-600 hover:underline">Upgrades</Link>
+                    <button onClick={() => startEdit(pkg)} className="mr-3 text-brand-600 hover:underline">Bearbeiten</button>
+                    <button onClick={() => handleDelete(pkg.id)} className="text-red-600 hover:underline">Löschen</button>
+                  </td>
+                </tr>
+              ))}
+              {filteredPackages.length === 0 && (
+                <tr><td colSpan={4} className="px-4 py-6 text-center text-slate-400">
+                  {packages.length === 0 ? 'Noch keine Pakete angelegt.' : 'Keine Pakete für diesen Filter.'}
+                </td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="h-fit space-y-4 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="font-bold text-slate-900 dark:text-white">{editingId ? 'Paket bearbeiten' : 'Neues Paket'}</h2>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Modell *</label>
+          <select
+            required
+            value={form.car_model_id}
+            onChange={(e) => setForm({ ...form, car_model_id: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          >
+            <option value="">Bitte wählen…</option>
+            {models.map((m) => <option key={m.id} value={m.id}>{m.brand_name} {m.name}</option>)}
+          </select>
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Paketname *</label>
+          <input
+            required
+            value={form.name}
+            onChange={(e) => setForm({ ...form, name: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Beschreibung</label>
+          <p className="mb-1 text-xs text-slate-500 dark:text-slate-400">Jede Zeile erscheint als eigener Stichpunkt zusammen mit den Bauteilen.</p>
+          <textarea
+            rows={3}
+            value={form.description}
+            onChange={(e) => setForm({ ...form, description: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Aufschlag</label>
+          <div className="flex gap-2">
+            <select
+              value={form.markup_type}
+              onChange={(e) => setForm({ ...form, markup_type: e.target.value })}
+              className="w-40 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+            >
+              <option value="none">Kein Aufschlag</option>
+              <option value="fixed">Fester Betrag (€)</option>
+              <option value="percent">Prozent (%)</option>
+            </select>
+            <input
+              type="number"
+              step="0.01"
+              min="0"
+              disabled={form.markup_type === 'none'}
+              value={form.markup_value}
+              onChange={(e) => setForm({ ...form, markup_value: e.target.value })}
+              className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900"
+            />
+          </div>
+          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">Wird auf die Summe der Bauteilpreise aufgeschlagen und ergibt den Gesamtpreis für den Kunden.</p>
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Sortierung</label>
+          <input
+            type="number"
+            value={form.sort_order}
+            onChange={(e) => setForm({ ...form, sort_order: Number(e.target.value) })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        {error && <p className="text-sm text-red-600">{error}</p>}
+
+        <div className="flex gap-2">
+          <button type="submit" className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600">
+            {editingId ? 'Speichern' : 'Anlegen'}
+          </button>
+          {editingId && (
+            <button type="button" onClick={resetForm} className="rounded-md border border-slate-300 px-4 py-2 text-sm dark:border-slate-700">
+              Abbrechen
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/PermissionGroups.jsx b/hifi-src/src/pages/admin/PermissionGroups.jsx
new file mode 100644
index 0000000..1449352
--- /dev/null
+++ b/hifi-src/src/pages/admin/PermissionGroups.jsx
@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../api/client.js';
+
+const emptyForm = { name: '', description: '', permissions: [] };
+
+export default function PermissionGroups() {
+  const [groups, setGroups] = useState([]);
+  const [catalog, setCatalog] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editingId, setEditingId] = useState(null);
+  const [error, setError] = useState('');
+
+  const load = () => {
+    api.get('/permission-groups').then(setGroups);
+    api.get('/permissions/catalog').then(setCatalog);
+  };
+
+  useEffect(load, []);
+
+  const startEdit = (g) => {
+    setEditingId(g.id);
+    setForm({ name: g.name, description: g.description || '', permissions: g.permissions });
+  };
+
+  const resetForm = () => {
+    setEditingId(null);
+    setForm(emptyForm);
+  };
+
+  const togglePermission = (key) => {
+    setForm((f) => ({
+      ...f,
+      permissions: f.permissions.includes(key) ? f.permissions.filter((p) => p !== key) : [...f.permissions, key],
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      if (editingId) {
+        await api.put(`/permission-groups/${editingId}`, form);
+      } else {
+        await api.post('/permission-groups', form);
+      }
+      resetForm();
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('Diese Berechtigungsgruppe wirklich löschen? Benutzer behalten ihre sonstigen Rechte.')) return;
+    await api.delete(`/permission-groups/${id}`);
+    load();
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-3">
+      <div className="lg:col-span-2">
+        <h1 className="mb-1 text-xl font-bold text-slate-900 dark:text-white">Berechtigungsgruppen</h1>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Fasse mehrere Berechtigungen zu einer Gruppe zusammen (z. B. „Werkstatt"), die du dann bequem einem
+          oder mehreren Benutzern zuweisen kannst.
+        </p>
+        <div className="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-slate-50 text-slate-500 dark:bg-slate-900 dark:text-slate-400">
+              <tr>
+                <th className="px-4 py-2">Name</th>
+                <th className="px-4 py-2">Berechtigungen</th>
+                <th className="px-4 py-2 text-right">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+              {groups.map((g) => (
+                <tr key={g.id} className="bg-white dark:bg-slate-950">
+                  <td className="px-4 py-2">
+                    <p className="font-medium text-slate-800 dark:text-slate-100">{g.name}</p>
+                    {g.description && <p className="text-xs text-slate-500 dark:text-slate-400">{g.description}</p>}
+                  </td>
+                  <td className="px-4 py-2 text-slate-500 dark:text-slate-400">{g.permissions.length} von {catalog.length}</td>
+                  <td className="px-4 py-2 text-right">
+                    <button onClick={() => startEdit(g)} className="mr-3 text-brand-600 hover:underline">Bearbeiten</button>
+                    <button onClick={() => handleDelete(g.id)} className="text-red-600 hover:underline">Löschen</button>
+                  </td>
+                </tr>
+              ))}
+              {groups.length === 0 && (
+                <tr><td colSpan={3} className="px-4 py-6 text-center text-slate-400">Noch keine Berechtigungsgruppen angelegt.</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="h-fit space-y-4 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="font-bold text-slate-900 dark:text-white">{editingId ? 'Gruppe bearbeiten' : 'Neue Gruppe'}</h2>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Name *</label>
+          <input
+            required
+            value={form.name}
+            onChange={(e) => setForm({ ...form, name: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Beschreibung</label>
+          <textarea
+            rows={2}
+            value={form.description}
+            onChange={(e) => setForm({ ...form, description: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <p className="mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">Berechtigungen</p>
+          <div className="space-y-1.5 rounded-md border border-slate-200 p-3 dark:border-slate-700">
+            {catalog.map((p) => (
+              <label key={p.key} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                <input
+                  type="checkbox"
+                  checked={form.permissions.includes(p.key)}
+                  onChange={() => togglePermission(p.key)}
+                  className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
+                />
+                {p.label}
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {error && <p className="text-sm text-red-600">{error}</p>}
+
+        <div className="flex gap-2">
+          <button type="submit" className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600">
+            {editingId ? 'Speichern' : 'Anlegen'}
+          </button>
+          {editingId && (
+            <button type="button" onClick={resetForm} className="rounded-md border border-slate-300 px-4 py-2 text-sm dark:border-slate-700">
+              Abbrechen
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/Services.jsx b/hifi-src/src/pages/admin/Services.jsx
new file mode 100644
index 0000000..b081834
--- /dev/null
+++ b/hifi-src/src/pages/admin/Services.jsx
@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../api/client.js';
+import ImageUploadField from '../../components/ImageUploadField.jsx';
+import IconPicker from '../../components/IconPicker.jsx';
+import DynamicIcon from '../../components/DynamicIcon.jsx';
+
+const emptyForm = {
+  icon_name: '',
+  title: '',
+  description: '',
+  image_path: '',
+  cta_label: '',
+  cta_url: '',
+  sort_order: 0,
+};
+
+export default function Services() {
+  const [services, setServices] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editingId, setEditingId] = useState(null);
+  const [error, setError] = useState('');
+
+  const load = () => api.get('/services').then(setServices);
+
+  useEffect(load, []);
+
+  const startEdit = (s) => {
+    setEditingId(s.id);
+    setForm({
+      icon_name: s.icon_name,
+      title: s.title,
+      description: s.description,
+      image_path: s.image_path || '',
+      cta_label: s.cta_label || '',
+      cta_url: s.cta_url || '',
+      sort_order: s.sort_order,
+    });
+  };
+
+  const resetForm = () => {
+    setEditingId(null);
+    setForm(emptyForm);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    if (!form.icon_name) {
+      setError('Bitte ein Icon auswählen');
+      return;
+    }
+    const payload = { ...form, sort_order: Number(form.sort_order) };
+    try {
+      if (editingId) {
+        await api.put(`/services/${editingId}`, payload);
+      } else {
+        await api.post('/services', payload);
+      }
+      resetForm();
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('Diese Leistung wirklich löschen?')) return;
+    await api.delete(`/services/${id}`);
+    load();
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-3">
+      <div className="lg:col-span-2">
+        <h1 className="mb-1 text-xl font-bold text-slate-900 dark:text-white">Leistungen</h1>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Diese Karten erscheinen auf der öffentlichen Leistungen-Seite. Die 8 mitgelieferten Einträge sind die
+          Standard-Einstellung – du kannst sie bearbeiten, löschen und beliebig neue hinzufügen.
+        </p>
+        <div className="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-slate-50 text-slate-500 dark:bg-slate-900 dark:text-slate-400">
+              <tr>
+                <th className="px-4 py-2">Icon</th>
+                <th className="px-4 py-2">Titel</th>
+                <th className="px-4 py-2">Sortierung</th>
+                <th className="px-4 py-2 text-right">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+              {services.map((s) => (
+                <tr key={s.id} className="bg-white dark:bg-slate-950">
+                  <td className="px-4 py-2">
+                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400">
+                      <DynamicIcon name={s.icon_name} className="h-5 w-5" />
+                    </div>
+                  </td>
+                  <td className="px-4 py-2 font-medium text-slate-800 dark:text-slate-100">{s.title}</td>
+                  <td className="px-4 py-2">{s.sort_order}</td>
+                  <td className="px-4 py-2 text-right">
+                    <button onClick={() => startEdit(s)} className="mr-3 text-brand-600 hover:underline">Bearbeiten</button>
+                    <button onClick={() => handleDelete(s.id)} className="text-red-600 hover:underline">Löschen</button>
+                  </td>
+                </tr>
+              ))}
+              {services.length === 0 && (
+                <tr><td colSpan={4} className="px-4 py-6 text-center text-slate-400">Noch keine Leistungen angelegt.</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="h-fit space-y-4 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="font-bold text-slate-900 dark:text-white">{editingId ? 'Leistung bearbeiten' : 'Neue Leistung'}</h2>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Icon *</label>
+          <IconPicker value={form.icon_name} onChange={(name) => setForm({ ...form, icon_name: name })} />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Name *</label>
+          <input
+            required
+            value={form.title}
+            onChange={(e) => setForm({ ...form, title: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Beschreibung *</label>
+          <textarea
+            required
+            rows={4}
+            value={form.description}
+            onChange={(e) => setForm({ ...form, description: e.target.value })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        <ImageUploadField value={form.image_path} onChange={(path) => setForm({ ...form, image_path: path })} label="Bild" />
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Button-Text (optional)</label>
+          <input
+            value={form.cta_label}
+            onChange={(e) => setForm({ ...form, cta_label: e.target.value })}
+            placeholder="z. B. Fahrzeug konfigurieren"
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Button-Link (optional)</label>
+          <input
+            value={form.cta_url}
+            onChange={(e) => setForm({ ...form, cta_url: e.target.value })}
+            placeholder="z. B. /fahrzeuge"
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Sortierung</label>
+          <input
+            type="number"
+            value={form.sort_order}
+            onChange={(e) => setForm({ ...form, sort_order: Number(e.target.value) })}
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+
+        {error && <p className="text-sm text-red-600">{error}</p>}
+
+        <div className="flex gap-2">
+          <button type="submit" className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600">
+            {editingId ? 'Speichern' : 'Anlegen'}
+          </button>
+          {editingId && (
+            <button type="button" onClick={resetForm} className="rounded-md border border-slate-300 px-4 py-2 text-sm dark:border-slate-700">
+              Abbrechen
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/settings/DatabaseSettings.jsx b/hifi-src/src/pages/admin/settings/DatabaseSettings.jsx
new file mode 100644
index 0000000..acf6ffe
--- /dev/null
+++ b/hifi-src/src/pages/admin/settings/DatabaseSettings.jsx
@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../../api/client.js';
+
+export default function DatabaseSettings() {
+  const [form, setForm] = useState({ host: '', name: '', user: '', password: '', charset: 'utf8mb4' });
+  const [hasPassword, setHasPassword] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const [saveBusy, setSaveBusy] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  const [schemaReport, setSchemaReport] = useState(null);
+  const [schemaChecking, setSchemaChecking] = useState(true);
+  const [schemaMigrating, setSchemaMigrating] = useState(false);
+  const [schemaActions, setSchemaActions] = useState(null);
+
+  const loadDbConfig = () => {
+    setLoading(true);
+    api.get('/settings/database').then((res) => {
+      setForm({ ...res.config, password: '' });
+      setHasPassword(res.has_password);
+    }).finally(() => setLoading(false));
+  };
+
+  const checkSchema = () => {
+    setSchemaChecking(true);
+    api.get('/settings/schema-check')
+      .then(setSchemaReport)
+      .catch((err) => setSchemaReport({ ok: false, error: err.message, tables: [] }))
+      .finally(() => setSchemaChecking(false));
+  };
+
+  useEffect(() => {
+    loadDbConfig();
+    checkSchema();
+  }, []);
+
+  const handleMigrateSchema = async () => {
+    setSchemaMigrating(true);
+    setSchemaActions(null);
+    try {
+      const result = await api.post('/settings/schema-migrate', {});
+      setSchemaActions(result.actions);
+      setSchemaReport(result.report);
+    } catch (err) {
+      setSchemaActions(['Fehler: ' + err.message]);
+    } finally {
+      setSchemaMigrating(false);
+    }
+  };
+
+  const handleSave = async (e) => {
+    e.preventDefault();
+    setSaveBusy(true);
+    setSaveError('');
+    setSaveSuccess(false);
+    try {
+      await api.post('/settings/database', form);
+      setSaveSuccess(true);
+      setForm((f) => ({ ...f, password: '' }));
+      setHasPassword(true);
+      checkSchema();
+    } catch (err) {
+      setSaveError(err.message);
+    } finally {
+      setSaveBusy(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <section className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="mb-1 font-semibold text-slate-900 dark:text-white">Datenbank-Zugangsdaten</h2>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Wichtig für einen Umzug auf einen anderen Server/Webspace: Trage hier die Zugangsdaten der dortigen
+          Datenbank ein. Die Verbindung wird vor dem Speichern getestet, damit du dich nicht aussperrst.
+        </p>
+
+        {loading ? (
+          <p className="text-sm text-slate-400">Lädt…</p>
+        ) : (
+          <form onSubmit={handleSave} className="space-y-3">
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Host *</label>
+              <input
+                required
+                value={form.host}
+                onChange={(e) => setForm({ ...form, host: e.target.value })}
+                className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Datenbankname *</label>
+              <input
+                required
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Benutzer *</label>
+              <input
+                required
+                value={form.user}
+                onChange={(e) => setForm({ ...form, user: e.target.value })}
+                className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                Passwort {hasPassword ? '(leer lassen = unverändert)' : ''}
+              </label>
+              <div className="flex gap-2">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={form.password}
+                  onChange={(e) => setForm({ ...form, password: e.target.value })}
+                  placeholder={hasPassword ? '••••••••' : ''}
+                  className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((s) => !s)}
+                  className="shrink-0 rounded-md border border-slate-300 px-3 text-sm dark:border-slate-700"
+                >
+                  {showPassword ? 'Verbergen' : 'Anzeigen'}
+                </button>
+              </div>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Zeichensatz</label>
+              <input
+                value={form.charset}
+                onChange={(e) => setForm({ ...form, charset: e.target.value })}
+                className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+              />
+            </div>
+
+            {saveError && <p className="text-sm text-red-600">{saveError}</p>}
+            {saveSuccess && <p className="text-sm text-green-600 dark:text-green-400">Verbindung erfolgreich getestet und gespeichert.</p>}
+
+            <button
+              type="submit"
+              disabled={saveBusy}
+              className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600 disabled:opacity-50"
+            >
+              {saveBusy ? 'Teste & speichere…' : 'Verbindung testen & speichern'}
+            </button>
+          </form>
+        )}
+      </section>
+
+      <section className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <div className="mb-1 flex items-center justify-between gap-3">
+          <h2 className="font-semibold text-slate-900 dark:text-white">Datenbankstruktur</h2>
+          {!schemaChecking && schemaReport && (
+            <span
+              className={`rounded-full px-3 py-1 text-xs font-semibold ${
+                schemaReport.ok
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                  : 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+              }`}
+            >
+              {schemaReport.ok ? 'Datenbank OK' : 'Datenbank nicht OK'}
+            </span>
+          )}
+        </div>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Prüft, ob diese Datenbank alle Tabellen und Spalten hat, die der aktuelle Code-Stand braucht – wichtig,
+          wenn deine Live-Version auf einem anderen Server einen älteren Stand hat.
+        </p>
+
+        {schemaChecking && <p className="text-sm text-slate-400">Prüfe…</p>}
+
+        {!schemaChecking && schemaReport && !schemaReport.ok && (
+          <ul className="mb-4 space-y-1 rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-300">
+            {schemaReport.tables.filter((t) => !t.ok).map((t) => (
+              <li key={t.table}>
+                {!t.exists ? (
+                  <>Tabelle <code className="font-mono">{t.table}</code> fehlt komplett</>
+                ) : (
+                  <>Tabelle <code className="font-mono">{t.table}</code>: Spalte(n) fehlen – {t.missing_columns.join(', ')}</>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={checkSchema}
+            disabled={schemaChecking}
+            className="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium hover:bg-slate-50 disabled:opacity-50 dark:border-slate-700 dark:hover:bg-slate-800"
+          >
+            Erneut prüfen
+          </button>
+          {schemaReport && !schemaReport.ok && (
+            <button
+              onClick={handleMigrateSchema}
+              disabled={schemaMigrating}
+              className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600 disabled:opacity-50"
+            >
+              {schemaMigrating ? 'Aktualisiere…' : 'Datenbankstruktur aktualisieren'}
+            </button>
+          )}
+        </div>
+
+        {schemaActions && (
+          <ul className="mt-3 space-y-1 rounded-md bg-slate-50 p-3 text-sm text-slate-700 dark:bg-slate-800 dark:text-slate-300">
+            {schemaActions.map((a, i) => <li key={i}>{a}</li>)}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/settings/ExportImportSettings.jsx b/hifi-src/src/pages/admin/settings/ExportImportSettings.jsx
new file mode 100644
index 0000000..22b67fa
--- /dev/null
+++ b/hifi-src/src/pages/admin/settings/ExportImportSettings.jsx
@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { api } from '../../../api/client.js';
+
+export default function ExportImportSettings() {
+  const [importFile, setImportFile] = useState(null);
+  const [importConfirmed, setImportConfirmed] = useState(false);
+  const [importBusy, setImportBusy] = useState(false);
+  const [importResult, setImportResult] = useState(null);
+  const [importError, setImportError] = useState('');
+
+  const handleImport = async (e) => {
+    e.preventDefault();
+    if (!importFile || !importConfirmed) return;
+    setImportBusy(true);
+    setImportError('');
+    setImportResult(null);
+    try {
+      const formData = new FormData();
+      formData.append('file', importFile);
+      const result = await api.post('/settings/import', formData);
+      setImportResult(result);
+      setImportFile(null);
+      setImportConfirmed(false);
+      e.target.reset();
+    } catch (err) {
+      setImportError(err.message);
+    } finally {
+      setImportBusy(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <section className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="mb-1 font-semibold text-slate-900 dark:text-white">Daten exportieren</h2>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Lädt eine Datei mit allen Marken, Modellen, Paketen, Produkten, Upgrades und Leistungen (inkl. Bilder)
+          herunter. Benutzerkonten und Kontaktanfragen sind bewusst <strong>nicht</strong> enthalten.
+        </p>
+        <a
+          href="/hifi/api/settings/export"
+          className="inline-block rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600"
+        >
+          Jetzt exportieren
+        </a>
+      </section>
+
+      <section className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="mb-1 font-semibold text-slate-900 dark:text-white">Daten importieren</h2>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Lädt eine zuvor exportierte Datei auf diesen Server. <strong>Ersetzt dabei alle</strong> aktuellen
+          Marken, Modelle, Pakete, Produkte, Upgrades und Leistungen auf diesem Server – das kann nicht
+          rückgängig gemacht werden. Kontaktanfragen und Benutzerkonten bleiben unangetastet.
+        </p>
+        <form onSubmit={handleImport} className="space-y-3">
+          <input
+            type="file"
+            accept="application/json,.json"
+            onChange={(e) => setImportFile(e.target.files?.[0] || null)}
+            className="text-sm"
+          />
+          <label className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300">
+            <input
+              type="checkbox"
+              checked={importConfirmed}
+              onChange={(e) => setImportConfirmed(e.target.checked)}
+              className="mt-0.5 h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
+            />
+            Mir ist bewusst, dass dies alle aktuellen Marken, Modelle, Pakete, Produkte, Upgrades und
+            Leistungen auf diesem Server unwiderruflich ersetzt.
+          </label>
+          <button
+            type="submit"
+            disabled={!importFile || !importConfirmed || importBusy}
+            className="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50"
+          >
+            {importBusy ? 'Importiere…' : 'Importieren'}
+          </button>
+        </form>
+        {importError && <p className="mt-3 text-sm text-red-600">{importError}</p>}
+        {importResult && (
+          <div className="mt-3 rounded-md bg-green-50 p-3 text-sm text-green-800 dark:bg-green-900/20 dark:text-green-300">
+            <p className="mb-1 font-semibold">Import erfolgreich:</p>
+            <ul className="list-disc pl-5">
+              <li>{importResult.counts.brands} Marken</li>
+              <li>{importResult.counts.car_models} Modelle</li>
+              <li>{importResult.counts.packages} Pakete</li>
+              <li>{importResult.counts.package_products} Produkte</li>
+              <li>{importResult.counts.package_upgrades} Upgrades</li>
+              <li>{importResult.counts.services} Leistungen</li>
+              <li>{importResult.images_restored} Bilder wiederhergestellt</li>
+            </ul>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/settings/MaintenanceSettings.jsx b/hifi-src/src/pages/admin/settings/MaintenanceSettings.jsx
new file mode 100644
index 0000000..48ec479
--- /dev/null
+++ b/hifi-src/src/pages/admin/settings/MaintenanceSettings.jsx
@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../../api/client.js';
+
+const emptyStatus = {
+  global: { enabled: false, message: '' },
+  services: { enabled: false, message: '' },
+  vehicles: { enabled: false, message: '' },
+};
+
+export default function MaintenanceSettings() {
+  const [status, setStatus] = useState(emptyStatus);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    api.get('/maintenance').then((res) => {
+      setStatus({
+        global: { enabled: res.global.enabled, message: res.global.message || '' },
+        services: { enabled: res.services.enabled, message: res.services.message || '' },
+        vehicles: { enabled: res.vehicles.enabled, message: res.vehicles.message || '' },
+      });
+    }).finally(() => setLoading(false));
+  }, []);
+
+  const update = (scope, field, value) => {
+    setStatus((s) => ({ ...s, [scope]: { ...s[scope], [field]: value } }));
+    setSaved(false);
+  };
+
+  const handleSave = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    setError('');
+    setSaved(false);
+    try {
+      const result = await api.post('/maintenance', status);
+      setStatus({
+        global: { enabled: result.global.enabled, message: result.global.message || '' },
+        services: { enabled: result.services.enabled, message: result.services.message || '' },
+        vehicles: { enabled: result.vehicles.enabled, message: result.vehicles.message || '' },
+      });
+      setSaved(true);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const sections = [
+    {
+      key: 'global',
+      title: 'Gesamte Seite',
+      hint: 'Besucher sehen nur noch eine Wartungsmeldung – egal welche Seite sie aufrufen. Das Admin-Panel bleibt für dich erreichbar.',
+    },
+    {
+      key: 'services',
+      title: 'Nur Leistungen',
+      hint: 'Nur die Leistungen-Seite zeigt eine Wartungsmeldung, der Rest der Website funktioniert normal.',
+    },
+    {
+      key: 'vehicles',
+      title: 'Nur Fahrzeugkatalog',
+      hint: 'Nur die Fahrzeugauswahl (Marke → Modell → Pakete) zeigt eine Wartungsmeldung, der Rest der Website funktioniert normal.',
+    },
+  ];
+
+  if (loading) {
+    return <p className="text-sm text-slate-400">Lädt…</p>;
+  }
+
+  return (
+    <form onSubmit={handleSave} className="max-w-2xl space-y-6">
+      <p className="text-sm text-slate-500 dark:text-slate-400">
+        Ist "Gesamte Seite" aktiv, gewinnt das immer – die beiden anderen Schalter spielen dann keine Rolle mehr.
+      </p>
+
+      {sections.map((section) => (
+        <section key={section.key} className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+          <div className="mb-1 flex items-center justify-between gap-3">
+            <h2 className="font-semibold text-slate-900 dark:text-white">{section.title}</h2>
+            <label className="relative inline-flex cursor-pointer items-center">
+              <input
+                type="checkbox"
+                checked={status[section.key].enabled}
+                onChange={(e) => update(section.key, 'enabled', e.target.checked)}
+                className="peer sr-only"
+              />
+              <div className="h-6 w-11 rounded-full bg-slate-200 transition peer-checked:bg-brand-500 dark:bg-slate-700" />
+              <div className="absolute left-1 top-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5" />
+            </label>
+          </div>
+          <p className="mb-3 text-sm text-slate-500 dark:text-slate-400">{section.hint}</p>
+          <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+            Eigene Nachricht (optional)
+          </label>
+          <textarea
+            rows={2}
+            value={status[section.key].message}
+            onChange={(e) => update(section.key, 'message', e.target.value)}
+            placeholder="z. B. Wir aktualisieren gerade unser Angebot. Schau bald wieder vorbei!"
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
+          />
+        </section>
+      ))}
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {saved && <p className="text-sm text-green-600 dark:text-green-400">Gespeichert.</p>}
+
+      <button
+        type="submit"
+        disabled={busy}
+        className="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600 disabled:opacity-50"
+      >
+        {busy ? 'Speichere…' : 'Speichern'}
+      </button>
+    </form>
+  );
+}
diff --git a/hifi-src/src/pages/admin/settings/ResetSettings.jsx b/hifi-src/src/pages/admin/settings/ResetSettings.jsx
new file mode 100644
index 0000000..4d22d7b
--- /dev/null
+++ b/hifi-src/src/pages/admin/settings/ResetSettings.jsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { api } from '../../../api/client.js';
+
+export default function ResetSettings() {
+  const [servicesBusy, setServicesBusy] = useState(false);
+  const [servicesMessage, setServicesMessage] = useState('');
+
+  const [catalogBusy, setCatalogBusy] = useState(false);
+  const [catalogMessage, setCatalogMessage] = useState('');
+
+  const [allBusy, setAllBusy] = useState(false);
+  const [allMessage, setAllMessage] = useState('');
+
+  const handleResetServices = async () => {
+    if (!confirm('Alle aktuellen Leistungen werden gelöscht und durch die 8 Standard-Leistungen ersetzt. Fortfahren?')) return;
+    setServicesBusy(true);
+    setServicesMessage('');
+    try {
+      const result = await api.post('/settings/reset-services', {});
+      setServicesMessage(`${result.count} Standard-Leistungen wiederhergestellt.`);
+    } catch (err) {
+      setServicesMessage('Fehler: ' + err.message);
+    } finally {
+      setServicesBusy(false);
+    }
+  };
+
+  const handleResetCatalog = async () => {
+    if (!confirm('Alle Marken, Modelle, Pakete, Produkte und Upgrades werden unwiderruflich gelöscht. Leistungen und Kontaktanfragen bleiben erhalten. Fortfahren?')) return;
+    setCatalogBusy(true);
+    setCatalogMessage('');
+    try {
+      const result = await api.post('/settings/reset-catalog', {});
+      setCatalogMessage(`Fahrzeugkatalog geleert (${result.brands_removed} Marken entfernt).`);
+    } catch (err) {
+      setCatalogMessage('Fehler: ' + err.message);
+    } finally {
+      setCatalogBusy(false);
+    }
+  };
+
+  const handleResetAll = async () => {
+    if (!confirm('WIRKLICH ALLES zurücksetzen? Marken, Modelle, Pakete, Produkte und Upgrades werden gelöscht, Leistungen auf Standard zurückgesetzt. Kontaktanfragen und Benutzerkonten bleiben erhalten. Das kann nicht rückgängig gemacht werden!')) return;
+    setAllBusy(true);
+    setAllMessage('');
+    try {
+      const result = await api.post('/settings/reset-all', {});
+      setAllMessage(`Erledigt: ${result.brands_removed} Marken entfernt, ${result.services_reset} Standard-Leistungen wiederhergestellt.`);
+    } catch (err) {
+      setAllMessage('Fehler: ' + err.message);
+    } finally {
+      setAllBusy(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <section className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="mb-1 font-semibold text-slate-900 dark:text-white">Nur Leistungen zurücksetzen</h2>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Löscht alle aktuellen Leistungen-Karten und stellt die 8 mitgelieferten Standard-Leistungen wieder her.
+          Marken, Modelle und Pakete bleiben unangetastet.
+        </p>
+        <button
+          onClick={handleResetServices}
+          disabled={servicesBusy}
+          className="rounded-md border border-red-300 px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:hover:bg-red-900/20"
+        >
+          {servicesBusy ? 'Setze zurück…' : 'Leistungen auf Standard zurücksetzen'}
+        </button>
+        {servicesMessage && <p className="mt-3 text-sm text-slate-600 dark:text-slate-300">{servicesMessage}</p>}
+      </section>
+
+      <section className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="mb-1 font-semibold text-slate-900 dark:text-white">Nur Fahrzeugkatalog leeren</h2>
+        <p className="mb-4 text-sm text-slate-500 dark:text-slate-400">
+          Löscht alle Marken, Modelle, Pakete, Produkte und Upgrades unwiderruflich. Leistungen, Kontaktanfragen
+          und Benutzerkonten bleiben erhalten.
+        </p>
+        <button
+          onClick={handleResetCatalog}
+          disabled={catalogBusy}
+          className="rounded-md border border-red-300 px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:hover:bg-red-900/20"
+        >
+          {catalogBusy ? 'Leere…' : 'Fahrzeugkatalog leeren'}
+        </button>
+        {catalogMessage && <p className="mt-3 text-sm text-slate-600 dark:text-slate-300">{catalogMessage}</p>}
+      </section>
+
+      <section className="rounded-xl border border-red-300 bg-red-50/40 p-6 dark:border-red-900 dark:bg-red-900/10">
+        <h2 className="mb-1 font-semibold text-red-700 dark:text-red-300">Alles zurücksetzen</h2>
+        <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
+          Kombiniert beides: Fahrzeugkatalog wird komplett geleert <strong>und</strong> Leistungen werden auf
+          Standard zurückgesetzt. Kontaktanfragen und Benutzerkonten bleiben erhalten. Nicht rückgängig zu machen.
+        </p>
+        <button
+          onClick={handleResetAll}
+          disabled={allBusy}
+          className="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50"
+        >
+          {allBusy ? 'Setze zurück…' : 'Wirklich alles zurücksetzen'}
+        </button>
+        {allMessage && <p className="mt-3 text-sm text-slate-700 dark:text-slate-300">{allMessage}</p>}
+      </section>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/admin/settings/SettingsLayout.jsx b/hifi-src/src/pages/admin/settings/SettingsLayout.jsx
new file mode 100644
index 0000000..1006fac
--- /dev/null
+++ b/hifi-src/src/pages/admin/settings/SettingsLayout.jsx
@@ -0,0 +1,34 @@
+import { NavLink, Outlet } from 'react-router-dom';
+
+const tabs = [
+  { to: '/admin/settings/database', label: 'Datenbank' },
+  { to: '/admin/settings/export-import', label: 'Export & Import' },
+  { to: '/admin/settings/maintenance', label: 'Wartungsmodus' },
+  { to: '/admin/settings/reset', label: 'Zurücksetzen' },
+];
+
+export default function SettingsLayout() {
+  const tabClass = ({ isActive }) =>
+    `rounded-md px-4 py-2 text-sm font-medium transition ${
+      isActive
+        ? 'bg-brand-500 text-white'
+        : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'
+    }`;
+
+  return (
+    <div>
+      <h1 className="mb-1 text-xl font-bold text-slate-900 dark:text-white">Einstellungen</h1>
+      <p className="mb-5 text-sm text-slate-500 dark:text-slate-400">
+        Werkzeuge rund um Datenbank, Server-Umzug und Zurücksetzen dieser Seite.
+      </p>
+      <nav className="mb-6 flex flex-wrap gap-2">
+        {tabs.map((tab) => (
+          <NavLink key={tab.to} to={tab.to} className={tabClass}>
+            {tab.label}
+          </NavLink>
+        ))}
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/AGB.jsx b/hifi-src/src/pages/public/AGB.jsx
new file mode 100644
index 0000000..a33269f
--- /dev/null
+++ b/hifi-src/src/pages/public/AGB.jsx
@@ -0,0 +1,124 @@
+import usePageMeta from '../../hooks/usePageMeta.js';
+
+export default function AGB() {
+  usePageMeta({
+    title: 'AGB',
+    description: 'Allgemeine Geschäftsbedingungen von HifiPlanet Amorbach.',
+    path: '/agb',
+  });
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
+      <h1 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
+        Allgemeine Geschäftsbedingungen
+      </h1>
+
+      <div className="space-y-8 text-sm text-slate-600 dark:text-slate-300">
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">1. Geltungsbereich</h2>
+          <p>
+            Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Beratungs-, Werkstatt- und
+            Umbauleistungen, die die Hifi Planet e.K., Boxbrunner Str. 20a, 63916 Amorbach („wir", „HifiPlanet")
+            gegenüber ihren Kunden erbringt, sowie für die Nutzung des Kontaktformulars auf dieser Website.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">2. Anfragen über die Website</h2>
+          <p>
+            Über das Kontaktformular können Sie unverbindlich eine Beratung oder ein Angebot zu einem einzelnen
+            Produkt oder einem ganzen Paket anfragen. Die auf der Website angezeigten Preise sind, soweit sie von
+            Drittanbietern automatisiert übernommen werden, unverbindliche Circa-Preise ohne Einbau und können sich
+            bis zur Erstellung eines konkreten Angebots ändern. Mit dem Absenden einer Anfrage kommt noch kein
+            Vertrag zustande.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">3. Vertragsschluss</h2>
+          <p>
+            Ein verbindlicher Vertrag über Beratung, Material und Einbauleistungen kommt erst zustande, wenn wir
+            Ihnen nach persönlicher oder schriftlicher Abstimmung ein konkretes Angebot unterbreitet haben und Sie
+            dieses angenommen haben, spätestens jedoch mit der Übergabe Ihres Fahrzeugs zur vereinbarten
+            Auftragsdurchführung in unserer Werkstatt in Amorbach.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">4. Preise und Zahlung</h2>
+          <p>
+            Es gelten die im jeweiligen Einzelangebot genannten Preise inklusive der zum Zeitpunkt der
+            Rechnungsstellung gesetzlich geltenden Umsatzsteuer. Sofern nichts anderes vereinbart ist, ist die
+            Rechnung nach Abnahme der Leistung bzw. Übergabe des Fahrzeugs ohne Abzug fällig.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">5. Termine und Fahrzeugübergabe</h2>
+          <p>
+            Vereinbarte Termine zur Fahrzeugübergabe sind von beiden Seiten einzuhalten. Verschiebungen sind
+            möglichst frühzeitig mitzuteilen. Für Gegenstände, die sich zum Zeitpunkt der Übergabe im Fahrzeug
+            befinden und nicht Gegenstand des Auftrags sind, übernehmen wir keine Haftung.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">6. Gewährleistung</h2>
+          <p>
+            Es gelten die gesetzlichen Gewährleistungsrechte. Mängel sind uns unverzüglich nach Feststellung
+            anzuzeigen, damit wir Ihnen Nacherfüllung anbieten können. Für Verschleißteile sowie für Schäden, die
+            auf unsachgemäße Behandlung, Fremdeingriffe Dritter oder normalen Verschleiß zurückzuführen sind,
+            besteht kein Gewährleistungsanspruch.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">7. Eigentumsvorbehalt</h2>
+          <p>
+            Verbautes Material und gelieferte Ware bleiben bis zur vollständigen Bezahlung unser Eigentum.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">8. Haftung</h2>
+          <p>
+            Wir haften unbeschränkt bei Vorsatz und grober Fahrlässigkeit sowie nach Maßgabe des
+            Produkthaftungsgesetzes. Bei leichter Fahrlässigkeit haften wir nur bei Verletzung einer wesentlichen
+            Vertragspflicht (Kardinalpflicht) und begrenzt auf den vertragstypisch vorhersehbaren Schaden. Die
+            Haftung für Schäden aus der Verletzung des Lebens, des Körpers oder der Gesundheit bleibt hiervon
+            unberührt.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">9. Widerrufsrecht</h2>
+          <p>
+            Ein gesetzliches Widerrufsrecht für Verbraucher besteht bei Verträgen, die außerhalb von
+            Geschäftsräumen oder im Fernabsatz geschlossen werden. Da der eigentliche Werkvertrag über Beratung und
+            Einbauleistungen erst bei persönlicher Fahrzeugübergabe in unseren Geschäftsräumen in Amorbach
+            geschlossen wird, handelt es sich hierbei nicht um einen Fernabsatzvertrag; ein gesetzliches
+            Widerrufsrecht besteht in diesem Fall nicht. Sollte im Einzelfall ausnahmsweise ein Vertrag im
+            Fernabsatz zustande kommen, informieren wir Sie gesondert über Ihr gesetzliches Widerrufsrecht.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">10. Anwendbares Recht und Gerichtsstand</h2>
+          <p>
+            Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts. Ist der Kunde
+            Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen, ist
+            Gerichtsstand für alle Streitigkeiten aus diesem Vertragsverhältnis unser Geschäftssitz in Amorbach.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">11. Schlussbestimmungen</h2>
+          <p>
+            Sollte eine Bestimmung dieser AGB unwirksam sein oder werden, bleibt die Wirksamkeit der übrigen
+            Bestimmungen hiervon unberührt.
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/BrandPage.jsx b/hifi-src/src/pages/public/BrandPage.jsx
new file mode 100644
index 0000000..c8b8988
--- /dev/null
+++ b/hifi-src/src/pages/public/BrandPage.jsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { api } from '../../api/client.js';
+import usePageMeta from '../../hooks/usePageMeta.js';
+import MaintenanceNotice from '../../components/MaintenanceNotice.jsx';
+import MaintenanceBypassBanner from '../../components/MaintenanceBypassBanner.jsx';
+import { useMaintenance } from '../../context/MaintenanceContext.jsx';
+
+export default function BrandPage() {
+  const { brandSlug } = useParams();
+  const [data, setData] = useState(null);
+  const [error, setError] = useState('');
+  const maintenance = useMaintenance();
+
+  useEffect(() => {
+    if (maintenance.vehicles.enabled && !maintenance.bypass) return;
+    api
+      .get(`/brands/${brandSlug}/models`)
+      .then(setData)
+      .catch((e) => setError(e.message));
+  }, [brandSlug, maintenance.vehicles.enabled, maintenance.bypass]);
+
+  usePageMeta({
+    title: data ? `${data.brand.name} Modelle` : 'Modell auswählen',
+    description: data
+      ? `Wähle dein ${data.brand.name} Modell und entdecke passende Car-Hifi Sound-Pakete von HifiPlanet.`
+      : undefined,
+    path: `/fahrzeuge/${brandSlug}`,
+  });
+
+  if (maintenance.vehicles.enabled && !maintenance.bypass) {
+    return <MaintenanceNotice message={maintenance.vehicles.message} />;
+  }
+
+  if (error) {
+    return <p className="mx-auto max-w-6xl px-4 py-12 text-red-600 sm:px-6">{error}</p>;
+  }
+
+  if (!data) {
+    return <p className="mx-auto max-w-6xl px-4 py-12 text-slate-500 sm:px-6">Lädt…</p>;
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+      {maintenance.vehicles.enabled && maintenance.bypass && <MaintenanceBypassBanner inline />}
+      <p className="mb-1 text-sm text-slate-500 dark:text-slate-400">
+        <Link to="/fahrzeuge" className="hover:text-brand-500">Fahrzeuge</Link> / {data.brand.name}
+      </p>
+      <h1 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
+        {data.brand.name} – Modell wählen
+      </h1>
+
+      {data.models.length === 0 && (
+        <p className="text-slate-500 dark:text-slate-400">Für diese Marke sind noch keine Modelle hinterlegt.</p>
+      )}
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        {data.models.map((model) => (
+          <Link
+            key={model.id}
+            to={`/fahrzeuge/${brandSlug}/${model.slug}`}
+            className="flex items-center justify-center rounded-xl border border-slate-200 bg-white px-6 py-8 text-center font-semibold text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-500 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100"
+          >
+            {model.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/ContactPage.jsx b/hifi-src/src/pages/public/ContactPage.jsx
new file mode 100644
index 0000000..730350c
--- /dev/null
+++ b/hifi-src/src/pages/public/ContactPage.jsx
@@ -0,0 +1,240 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { api } from '../../api/client.js';
+import usePageMeta from '../../hooks/usePageMeta.js';
+import ExternalEmbed from '../../components/ExternalEmbed.jsx';
+
+const formatPrice = (value) =>
+  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value);
+
+const SHOP_ADDRESS_ENCODED = encodeURIComponent('Boxbrunner Str. 20a, 63916 Amorbach');
+
+export default function ContactPage() {
+  const [params] = useSearchParams();
+  const [form, setForm] = useState({ name: '', email: '', phone: '', message: '' });
+  const [status, setStatus] = useState('idle');
+  const [error, setError] = useState('');
+  const [upgrades, setUpgrades] = useState([]);
+  const [selectedUpgradeIds, setSelectedUpgradeIds] = useState([]);
+
+  const packageId = params.get('packageId');
+  const packageTotal = params.get('total') ? Number(params.get('total')) : null;
+
+  useEffect(() => {
+    if (!packageId) {
+      setUpgrades([]);
+      return;
+    }
+    api.get(`/packages/${packageId}/upgrades`).then(setUpgrades).catch(() => setUpgrades([]));
+  }, [packageId]);
+
+  const toggleUpgrade = (id) => {
+    setSelectedUpgradeIds((ids) => (ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id]));
+  };
+
+  const upgradesTotal = upgrades
+    .filter((u) => selectedUpgradeIds.includes(u.id))
+    .reduce((sum, u) => sum + Number(u.price), 0);
+
+  usePageMeta({
+    title: 'Kontakt',
+    description: 'Kontaktiere HifiPlanet in Amorbach für dein individuelles Car-Hifi Projekt – wir beraten dich gerne unverbindlich.',
+    path: '/kontakt',
+  });
+
+  const context = {
+    brand: params.get('brand') || '',
+    model: params.get('model') || '',
+    package: params.get('package') || '',
+    product: params.get('product') || '',
+  };
+  const hasContext = context.brand || context.model || context.package || context.product;
+
+  const handleChange = (e) => setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setStatus('sending');
+    setError('');
+
+    try {
+      await api.post('/contact', {
+        ...form,
+        brand_name: context.brand || null,
+        model_name: context.model || null,
+        package_name: context.package || null,
+        product_name: context.product || null,
+        package_id: packageId || null,
+        package_product_id: params.get('productId') || null,
+        upgrade_ids: selectedUpgradeIds,
+      });
+      setStatus('sent');
+    } catch (e) {
+      setError(e.message);
+      setStatus('idle');
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-12 sm:px-6">
+      <h1 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">Kontakt aufnehmen</h1>
+
+      <div className="grid gap-10 md:grid-cols-5">
+        <div className="md:col-span-3">
+          {status === 'sent' ? (
+            <div className="rounded-xl border border-slate-200 bg-white p-8 text-center dark:border-slate-800 dark:bg-slate-900">
+              <h2 className="mb-2 text-xl font-bold text-slate-900 dark:text-white">Danke für deine Anfrage!</h2>
+              <p className="text-slate-600 dark:text-slate-300">Wir melden uns so schnell wie möglich bei dir.</p>
+            </div>
+          ) : (
+            <>
+              {hasContext && (
+                <div className="mb-6 rounded-lg border border-brand-200 bg-brand-50 p-4 text-sm text-brand-800 dark:border-brand-900 dark:bg-brand-900/20 dark:text-brand-200">
+                  <p className="font-semibold">Deine Anfrage bezieht sich auf:</p>
+                  <ul className="mt-1 space-y-0.5">
+                    {context.brand && <li>Marke: {context.brand}</li>}
+                    {context.model && <li>Modell: {context.model}</li>}
+                    {context.package && <li>Paket: {context.package}</li>}
+                    {context.product && <li>Produkt: {context.product}</li>}
+                  </ul>
+                  {packageTotal != null && (
+                    <p className="mt-2 font-semibold">
+                      Paketpreis: {formatPrice(packageTotal)}
+                      {upgradesTotal > 0 && <> + {formatPrice(upgradesTotal)} Upgrades = {formatPrice(packageTotal + upgradesTotal)}</>}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {upgrades.length > 0 && (
+                <div className="mb-6 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+                  <p className="mb-3 text-sm font-semibold text-slate-900 dark:text-white">Optionale Upgrades</p>
+                  <div className="space-y-2">
+                    {upgrades.map((u) => (
+                      <label key={u.id} className="flex cursor-pointer items-start gap-3 rounded-md border border-slate-200 p-3 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
+                        <input
+                          type="checkbox"
+                          checked={selectedUpgradeIds.includes(u.id)}
+                          onChange={() => toggleUpgrade(u.id)}
+                          className="mt-0.5 h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
+                        />
+                        <span className="flex-1">
+                          <span className="block font-medium text-slate-800 dark:text-slate-100">{u.name}</span>
+                          {u.description && <span className="block text-slate-500 dark:text-slate-400">{u.description}</span>}
+                        </span>
+                        <span className="font-semibold text-brand-600 dark:text-brand-400">+{formatPrice(u.price)}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Name *</label>
+                  <input
+                    name="name"
+                    required
+                    value={form.name}
+                    onChange={handleChange}
+                    className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">E-Mail *</label>
+                  <input
+                    type="email"
+                    name="email"
+                    required
+                    value={form.email}
+                    onChange={handleChange}
+                    className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Telefon</label>
+                  <input
+                    name="phone"
+                    value={form.phone}
+                    onChange={handleChange}
+                    className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Nachricht</label>
+                  <textarea
+                    name="message"
+                    rows={4}
+                    value={form.message}
+                    onChange={handleChange}
+                    className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900"
+                  />
+                </div>
+
+                {error && <p className="text-sm text-red-600">{error}</p>}
+
+                <button
+                  type="submit"
+                  disabled={status === 'sending'}
+                  className="w-full rounded-md bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 disabled:opacity-60"
+                >
+                  {status === 'sending' ? 'Wird gesendet…' : 'Anfrage senden'}
+                </button>
+              </form>
+            </>
+          )}
+        </div>
+
+        <div className="md:col-span-2">
+          <div className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+            <h2 className="mb-4 font-semibold text-slate-900 dark:text-white">HifiPlanet Amorbach</h2>
+            <dl className="space-y-3 text-sm text-slate-600 dark:text-slate-300">
+              <div>
+                <dt className="font-medium text-slate-800 dark:text-slate-100">Adresse</dt>
+                <dd>Boxbrunner Str. 20a, 63916 Amorbach</dd>
+              </div>
+              <div>
+                <dt className="font-medium text-slate-800 dark:text-slate-100">Telefon</dt>
+                <dd><a href="tel:+4993732062390" className="hover:text-brand-500">09373 20 62 390</a></dd>
+              </div>
+              <div>
+                <dt className="font-medium text-slate-800 dark:text-slate-100">E-Mail</dt>
+                <dd><a href="mailto:info@hifi-planet-amorbach.de" className="hover:text-brand-500">info@hifi-planet-amorbach.de</a></dd>
+              </div>
+              <div>
+                <dt className="font-medium text-slate-800 dark:text-slate-100">Öffnungszeiten</dt>
+                <dd>Mo–Fr: 9:00–18:00 Uhr</dd>
+                <dd>Sa: 10:00–13:00 Uhr</dd>
+              </div>
+            </dl>
+          </div>
+
+          <div className="mt-6 rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+            <h2 className="mb-4 font-semibold text-slate-900 dark:text-white">Anfahrt</h2>
+            <div className="overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700">
+              <ExternalEmbed name="Die Google-Maps-Karte" className="h-[220px] w-full">
+                <iframe
+                  title="HifiPlanet Amorbach – Standort"
+                  src={`https://www.google.com/maps?q=${SHOP_ADDRESS_ENCODED}&output=embed`}
+                  width="100%"
+                  height="220"
+                  style={{ border: 0 }}
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                />
+              </ExternalEmbed>
+            </div>
+            <a
+              href={`https://www.google.com/maps/dir/?api=1&destination=${SHOP_ADDRESS_ENCODED}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600"
+            >
+              Route planen
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/Datenschutz.jsx b/hifi-src/src/pages/public/Datenschutz.jsx
new file mode 100644
index 0000000..bc5bd5c
--- /dev/null
+++ b/hifi-src/src/pages/public/Datenschutz.jsx
@@ -0,0 +1,192 @@
+import { Link } from 'react-router-dom';
+import usePageMeta from '../../hooks/usePageMeta.js';
+
+export default function Datenschutz() {
+  usePageMeta({
+    title: 'Datenschutzerklärung',
+    description: 'Datenschutzerklärung von HifiPlanet Amorbach gemäß Art. 13 DSGVO.',
+    path: '/datenschutz',
+  });
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
+      <h1 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">Datenschutzerklärung</h1>
+
+      <div className="space-y-8 text-sm text-slate-600 dark:text-slate-300">
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">1. Verantwortlicher</h2>
+          <p>
+            Verantwortlicher im Sinne der Datenschutz-Grundverordnung (DSGVO) ist:
+            <br />
+            Hifi Planet e.K., Christopher Horndasch
+            <br />
+            Boxbrunner Str. 20a, 63916 Amorbach
+            <br />
+            Telefon: 09373 20 62 390 · E-Mail:{' '}
+            <a href="mailto:info@hifi-planet-amorbach.de" className="hover:text-brand-500">info@hifi-planet-amorbach.de</a>
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">2. Ihre Rechte als betroffene Person</h2>
+          <p className="mb-2">Sie haben jederzeit das Recht,</p>
+          <ul className="list-disc space-y-1 pl-5">
+            <li>Auskunft über Ihre bei uns gespeicherten personenbezogenen Daten zu erhalten (Art. 15 DSGVO),</li>
+            <li>die Berichtigung unrichtiger Daten zu verlangen (Art. 16 DSGVO),</li>
+            <li>die Löschung Ihrer Daten zu verlangen (Art. 17 DSGVO),</li>
+            <li>die Verarbeitung Ihrer Daten einschränken zu lassen (Art. 18 DSGVO),</li>
+            <li>der Verarbeitung Ihrer Daten zu widersprechen (Art. 21 DSGVO),</li>
+            <li>Ihre Daten in einem gängigen Format zu erhalten (Datenübertragbarkeit, Art. 20 DSGVO), und</li>
+            <li>eine erteilte Einwilligung jederzeit mit Wirkung für die Zukunft zu widerrufen (Art. 7 Abs. 3 DSGVO).</li>
+          </ul>
+          <p className="mt-2">
+            Außerdem haben Sie das Recht, sich bei einer Datenschutz-Aufsichtsbehörde über die Verarbeitung Ihrer
+            personenbezogenen Daten durch uns zu beschweren, zum Beispiel beim Bayerischen Landesamt für
+            Datenschutzaufsicht (BayLDA).
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">3. Hosting und Server-Logfiles</h2>
+          <p>
+            Beim Aufruf dieser Website erhebt der Webserver automatisch Daten in sogenannten Server-Logfiles, die
+            Ihr Browser übermittelt. Dazu gehören: IP-Adresse, Datum und Uhrzeit der Anfrage, aufgerufene Seite,
+            verwendeter Browser und Betriebssystem sowie die zuvor besuchte Seite (Referrer-URL). Diese Daten
+            dienen ausschließlich der technisch fehlerfreien Auslieferung der Website sowie der IT-Sicherheit
+            (z. B. zur Abwehr von Angriffen) und werden nicht mit anderen Datenquellen zusammengeführt. Rechtsgrundlage
+            ist unser berechtigtes Interesse an einem sicheren und stabilen Betrieb der Website (Art. 6 Abs. 1
+            lit. f DSGVO).
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">4. Kontaktformular</h2>
+          <p>
+            Wenn Sie uns über das Kontaktformular eine Anfrage zukommen lassen, werden Ihre Angaben aus dem
+            Formular (Name, E-Mail-Adresse, optional Telefonnummer, Nachricht sowie ggf. der Kontext Ihrer Anfrage
+            wie Marke, Modell oder Paket) inklusive der von Ihnen dort angegebenen Kontaktdaten bei uns
+            gespeichert, um Ihre Anfrage zu bearbeiten und zu beantworten. Die Verarbeitung erfolgt auf Grundlage
+            Ihrer Einwilligung durch Absenden des Formulars (Art. 6 Abs. 1 lit. a DSGVO) bzw., sofern Ihre Anfrage
+            der Vorbereitung eines Vertrags dient, auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO. Wir löschen die
+            Anfrage inklusive der Kontaktdaten, sobald der jeweilige Sachverhalt abschließend geklärt ist und keine
+            gesetzlichen Aufbewahrungspflichten entgegenstehen. Diese Einwilligung können Sie jederzeit
+            widerrufen, indem Sie uns formlos per E-Mail kontaktieren.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">5. Cookies und lokale Speicherung</h2>
+          <p className="mb-2">
+            Diese Website verwendet technisch notwendige Cookies bzw. Speichertechnologien, die für den Betrieb der
+            Seite erforderlich sind und ohne die einzelne Funktionen nicht funktionieren würden. Dazu gehören:
+          </p>
+          <ul className="list-disc space-y-1 pl-5">
+            <li>
+              ein Session-Cookie (<code>hifi_admin_session</code>), das für den Anmeldestatus im Mitarbeiter-Login
+              benötigt wird und mit Ende der Browsersitzung abläuft,
+            </li>
+            <li>
+              eine lokale Speicherung (<code>localStorage</code>) Ihrer Hell-/Dunkelmodus-Einstellung sowie Ihrer
+              Cookie-Auswahl, damit wir Sie nicht bei jedem Besuch erneut danach fragen müssen.
+            </li>
+          </ul>
+          <p className="mt-2">
+            Für diese technisch notwendigen Cookies ist gemäß § 25 Abs. 2 Nr. 2 TTDSG keine Einwilligung
+            erforderlich. Rechtsgrundlage ist unser berechtigtes Interesse am technischen Betrieb der Website (Art.
+            6 Abs. 1 lit. f DSGVO). Für alle darüber hinausgehenden Inhalte – aktuell die eingebundenen Google
+            Maps- und YouTube-Elemente – fragen wir Sie beim ersten Besuch aktiv nach Ihrer Einwilligung. Sie
+            können Ihre Auswahl jederzeit über den Link „Cookie-Einstellungen" im Footer ändern.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">6. Google Maps</h2>
+          <p>
+            Auf unserer Kontaktseite und im Footer binden wir Kartenmaterial des Dienstes „Google Maps" ein, um
+            Ihnen die Anfahrt zu unserem Standort zu erleichtern. Anbieter ist Google Ireland Limited, Gordon
+            House, Barrow Street, Dublin 4, Irland. Die eingebettete Karte wird erst geladen, nachdem Sie dem im
+            Cookie-Banner unter „Externe Medien" zugestimmt haben. Beim Laden der Karte wird Ihre IP-Adresse an
+            Google übertragen; eine Verarbeitung kann dabei auch auf Servern außerhalb der EU/des EWR erfolgen. Die
+            Verarbeitung erfolgt auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO), die Sie jederzeit
+            über die Cookie-Einstellungen widerrufen können. Weitere Informationen finden Sie in der{' '}
+            <a
+              href="https://policies.google.com/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-brand-500"
+            >
+              Datenschutzerklärung von Google
+            </a>
+            .
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">7. YouTube</h2>
+          <p>
+            Auf unserer Startseite binden wir ein Video des Anbieters YouTube (Google Ireland Limited, Gordon
+            House, Barrow Street, Dublin 4, Irland) im „erweiterten Datenschutzmodus" ein (Domain
+            youtube-nocookie.com). Auch dieses Video wird erst geladen, nachdem Sie unter „Externe Medien"
+            zugestimmt haben. Nach Angaben von Google werden dabei bis zum Start der Wiedergabe keine Cookies
+            gesetzt; beim Laden des Players wird jedoch bereits eine Verbindung zu Google-Servern aufgebaut und
+            Ihre IP-Adresse übertragen. Die Verarbeitung erfolgt auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1
+            lit. a DSGVO), die Sie jederzeit über die Cookie-Einstellungen widerrufen können. Weitere Informationen
+            finden Sie in der{' '}
+            <a
+              href="https://policies.google.com/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-brand-500"
+            >
+              Datenschutzerklärung von Google
+            </a>
+            .
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">8. Empfänger der Daten</h2>
+          <p>
+            Ihre Daten werden grundsätzlich nur innerhalb unseres Unternehmens verarbeitet. Eine Weitergabe an
+            Dritte erfolgt nur, soweit dies zur Bearbeitung Ihrer Anfrage erforderlich ist (z. B. an unseren
+            Hosting-Provider zum Betrieb dieser Website und an unseren E-Mail-Anbieter zur Zustellung Ihrer
+            Kontaktanfrage) oder soweit wir gesetzlich dazu verpflichtet sind.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">9. Speicherdauer</h2>
+          <p>
+            Sofern in dieser Erklärung keine speziellere Speicherdauer genannt wurde, verbleiben Ihre
+            personenbezogenen Daten bei uns, bis der Zweck für die Datenspeicherung entfällt. Gesetzliche
+            Aufbewahrungsfristen (z. B. aus dem Handels- oder Steuerrecht) bleiben hiervon unberührt und können eine
+            längere Speicherung erforderlich machen.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">10. SSL-/TLS-Verschlüsselung</h2>
+          <p>
+            Diese Seite nutzt aus Sicherheitsgründen eine SSL-/TLS-Verschlüsselung zur Übertragung Ihrer Daten. Eine
+            verschlüsselte Verbindung erkennen Sie an dem Schloss-Symbol in der Adresszeile Ihres Browsers.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">11. Änderung dieser Datenschutzerklärung</h2>
+          <p>
+            Wir passen diese Datenschutzerklärung an, sobald sich die von uns eingesetzten Datenverarbeitungen
+            ändern. Es gilt jeweils die zum Zeitpunkt Ihres Besuchs aktuelle, auf dieser Seite veröffentlichte
+            Fassung.
+          </p>
+        </section>
+
+        <p>
+          Fragen zum Datenschutz beantworten wir Ihnen gerne über unser{' '}
+          <Link to="/kontakt" className="underline hover:text-brand-500">Kontaktformular</Link> oder direkt per
+          E-Mail.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/Home.jsx b/hifi-src/src/pages/public/Home.jsx
new file mode 100644
index 0000000..79b45d8
--- /dev/null
+++ b/hifi-src/src/pages/public/Home.jsx
@@ -0,0 +1,377 @@
+import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import usePageMeta from '../../hooks/usePageMeta.js';
+import Reveal from '../../components/Reveal.jsx';
+import Accordion from '../../components/Accordion.jsx';
+import StarRating from '../../components/StarRating.jsx';
+import TestimonialSlider from '../../components/TestimonialSlider.jsx';
+import ExternalEmbed from '../../components/ExternalEmbed.jsx';
+import heroImage from '../../assets/photos/hero-trunk.jpg';
+import galleryAmp from '../../assets/photos/gallery-amp-purple.jpg';
+import gallerySpeaker from '../../assets/photos/gallery-speaker.jpg';
+import gallerySubs from '../../assets/photos/gallery-subs.jpg';
+import galleryDash from '../../assets/photos/gallery-dash.jpg';
+import galleryDash2 from '../../assets/photos/gallery-dash2.jpg';
+import galleryRear from '../../assets/photos/gallery-rear.jpg';
+import heroHighlight from '../../assets/leistungen/hero-highlight.jpg';
+
+const YOUTUBE_URL = 'https://www.youtube.com/@hifiplanet2812';
+const YOUTUBE_VIDEO_ID = 'ostj2mKDVUc';
+
+const stats = [
+  { value: 'Seit 2010', label: 'in Amorbach' },
+  { value: '20+', label: '3D-Drucker im Haus' },
+  { value: 'Eigene', label: 'CNC- & Laserwerkstatt' },
+  { value: 'Bundesweit', label: 'anerkannter Car-Hifi-Spezialist' },
+];
+
+const brands = ['Focal', 'Helix', 'Ground Zero', 'Mosconi', 'Hifonics', 'Audison'];
+
+const steps = [
+  { title: 'Marke & Modell wählen', text: 'Finde dein Fahrzeug in wenigen Klicks.' },
+  { title: 'Sound-Paket entdecken', text: 'Passende Pakete inkl. aktueller Preise auf einen Blick.' },
+  { title: 'Unverbindlich anfragen', text: 'Wir melden uns zeitnah mit allen Details bei dir.' },
+];
+
+const gallery = [
+  { src: gallerySubs, alt: 'Individueller Subwoofer-Bau mit Ground Zero Bässen' },
+  { src: galleryAmp, alt: 'Endstufen-Einbau mit violetter Ambiente-Beleuchtung' },
+  { src: gallerySpeaker, alt: 'Hochtöner- und Mitteltöner-Einbau von Focal Utopia' },
+  { src: galleryDash, alt: 'Sony Navigationssystem mit Apple CarPlay im Cockpit' },
+  { src: galleryRear, alt: 'Verbauter Hochtöner im Kofferraum' },
+  { src: galleryDash2, alt: 'Individuell beleuchtetes Cockpit mit Soundsystem' },
+];
+
+const testimonials = [
+  { name: 'Thomas K.', text: 'Über YouTube auf dieses Klang-Juwel gestoßen. Beratung und Empfehlungen sind erstklassig – der Tesla-Vorführwagen hat meine Leidenschaft für guten Sound neu entfacht.' },
+  { name: 'Andreas I.', text: 'Sehr professionelle Beratung und Service. Obwohl ich von VAG zu Mercedes gewechselt bin, wurde alles reibungslos angepasst. Die 3-Wege-Lautsprecher und zwei Subwoofer liefern außergewöhnliche Leistung.' },
+  { name: 'Thomas F.', text: 'Kompletter Audi A4 B9 Umbau hat meine Erwartungen übertroffen. Von Anfang bis Ende professionell, mit tadelloser Verarbeitung und Klangqualität.' },
+  { name: 'Drago G.', text: 'Beeindruckt von der CNC-Arbeit, die auf YouTube gezeigt wird. Angefangen mit 3D-gedruckten Lautsprecherringen für meinen Ford Mustang – daraus wurde ein viel größeres Projekt.' },
+  { name: 'Leonardo B.', text: 'Toller Service und meisterhafte Handwerkskunst. Saubere Installation, Leidenschaft in jedem Detail erkennbar.' },
+  { name: 'Marcel S.', text: 'Unschlagbares Preis-Leistungs-Verhältnis. Das Team hat sich viel Zeit genommen, um genau die Lösung für mein Budget zu finden.' },
+  { name: 'Julia W.', text: 'Endlich ein Betrieb, der auch Wohnmobile ernst nimmt. Die Soundanlage in unserem Camper klingt jetzt wie im Wohnzimmer.' },
+  { name: 'Kevin R.', text: 'Dashcam und Alarmanlage in einem Termin sauber verbaut, keine sichtbaren Kabel. Absolute Empfehlung für alle, die Wert auf Verarbeitung legen.' },
+  { name: 'Sabrina H.', text: 'Mein Oldtimer hat jetzt modernen Sound, ohne dass es dem Original-Look geschadet hätte. Genau das habe ich gesucht.' },
+  { name: 'Niklas P.', text: 'Von der ersten Anfrage bis zum fertigen Umbau lief alles reibungslos. Ehrliche Beratung ohne Verkaufsdruck.' },
+];
+
+const faqs = [
+  { question: 'Was kostet eine Beratung?', answer: 'Beratung und Preisanfrage sind für dich komplett kostenlos und unverbindlich.' },
+  { question: 'Muss ich mein Fahrzeug vorbeibringen?', answer: 'Für eine erste Einschätzung reicht oft deine Anfrage über die Website. Für den Einbau selbst vereinbaren wir gemeinsam einen Termin bei uns in Amorbach.' },
+  { question: 'Wie lange dauert ein Umbau?', answer: 'Das hängt vom Umfang ab – von einem einfachen Lautsprecher-Tausch in wenigen Stunden bis zum aufwendigen Komplettumbau über mehrere Tage.' },
+  { question: 'Bietet ihr auch Lösungen für Leasingfahrzeuge?', answer: 'Ja, auf Wunsch bauen wir reversibel um, sodass dein Fahrzeug bei Rückgabe wieder in den Originalzustand versetzt werden kann.' },
+  { question: 'Arbeitet ihr nur mit bestimmten Marken?', answer: 'Nein, wir sind herstellerunabhängig und wählen die Komponenten, die am besten zu deinem Anspruch und Budget passen.' },
+  { question: 'Was ist, wenn mein Fahrzeug nicht gelistet ist?', answer: 'Kein Problem – schreib uns einfach über das Kontaktformular, wir finden für jedes Fahrzeug eine passende Lösung.' },
+];
+
+export default function Home() {
+  usePageMeta({
+    title: 'Car-Hifi Umbauten nach Maß',
+    description:
+      'HifiPlanet – dein Car-Hifi Spezialist in Amorbach. Marke und Modell wählen, passende Sound-Pakete entdecken und unverbindlich anfragen.',
+    path: '/',
+  });
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'application/ld+json';
+    script.text = JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faqs.map((f) => ({
+        '@type': 'Question',
+        name: f.question,
+        acceptedAnswer: { '@type': 'Answer', text: f.answer },
+      })),
+    });
+    document.head.appendChild(script);
+    return () => document.head.removeChild(script);
+  }, []);
+
+  const heroRef = useRef(null);
+  const { scrollYProgress: heroProgress } = useScroll({ target: heroRef, offset: ['start start', 'end start'] });
+  const heroImageY = useTransform(heroProgress, [0, 1], ['-6%', '6%']);
+  const heroTextY = useTransform(heroProgress, [0, 1], ['0%', '60%']);
+  const heroOpacity = useTransform(heroProgress, [0, 0.8], [1, 0]);
+  const ctaOpacity = useTransform(heroProgress, [0.5, 1], [0, 1]);
+  const ctaPointerEvents = useTransform(ctaOpacity, (v) => (v > 0.05 ? 'auto' : 'none'));
+  const ctaY = useTransform(heroProgress, [0.5, 1], [16, 0]);
+
+  return (
+    <div>
+      <motion.div
+        style={{ opacity: ctaOpacity, pointerEvents: ctaPointerEvents, y: ctaY }}
+        className="fixed inset-x-0 bottom-0 z-20 border-t border-slate-200 bg-white/95 px-4 py-3 shadow-[0_-8px_24px_rgba(0,0,0,0.08)] backdrop-blur dark:border-slate-800 dark:bg-slate-950/95 sm:px-6"
+      >
+        <div className="mx-auto flex max-w-6xl items-center justify-between gap-3">
+          <p className="hidden text-sm font-medium text-slate-600 dark:text-slate-300 sm:block">
+            Bereit für deinen Sound-Umbau?
+          </p>
+          <div className="flex w-full gap-3 sm:w-auto">
+            <Link
+              to="/fahrzeuge"
+              className="flex-1 rounded-md bg-brand-500 px-5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-600 sm:flex-none"
+            >
+              Fahrzeug auswählen
+            </Link>
+            <Link
+              to="/kontakt"
+              className="flex-1 rounded-md border border-slate-300 px-5 py-2.5 text-center text-sm font-semibold text-slate-700 transition hover:-translate-y-0.5 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800 sm:flex-none"
+            >
+              Kontakt aufnehmen
+            </Link>
+          </div>
+        </div>
+      </motion.div>
+
+      <section ref={heroRef} className="relative h-[85vh] min-h-[560px] overflow-hidden">
+        <motion.img
+          style={{ y: heroImageY }}
+          src={heroImage}
+          alt="Individueller Subwoofer-Einbau mit LED-Beleuchtung im Kofferraum"
+          className="absolute inset-0 h-full w-full scale-110 object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-slate-950/40" />
+
+        <motion.div
+          style={{ y: heroTextY, opacity: heroOpacity }}
+          className="relative flex h-full max-w-6xl flex-col items-center justify-center px-4 mx-auto text-center sm:px-6"
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, ease: 'easeOut' }}
+          >
+            <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-brand-400">
+              Willkommen bei HifiPlanet
+            </p>
+            <h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-5xl">
+              Audiophil aus Prinzip
+            </h1>
+            <p className="mx-auto mt-4 max-w-2xl text-base text-slate-200 sm:text-lg">
+              Dein Car-Hifi Spezialist für individuelle Sound-Umbauten. Wähle dein Fahrzeug,
+              entdecke passende Pakete und frag unverbindlich an – wir kümmern uns um den Rest.
+            </p>
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+              <Link
+                to="/fahrzeuge"
+                className="rounded-md bg-brand-500 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-600 hover:shadow-lg"
+              >
+                Fahrzeug auswählen
+              </Link>
+              <Link
+                to="/kontakt"
+                className="rounded-md border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:-translate-y-0.5 hover:bg-white/20"
+              >
+                Kontakt aufnehmen
+              </Link>
+            </div>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      <section className="border-b border-slate-200 bg-brand-500 py-8 dark:border-slate-800">
+        <div className="mx-auto grid max-w-6xl grid-cols-2 gap-6 px-4 text-center sm:grid-cols-4 sm:px-6">
+          {stats.map((stat, i) => (
+            <Reveal key={stat.label} index={i}>
+              <p className="text-2xl font-extrabold text-white sm:text-3xl">{stat.value}</p>
+              <p className="text-sm text-brand-50">{stat.label}</p>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-b border-slate-200 py-8 dark:border-slate-800">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <p className="mb-4 text-center text-xs font-semibold uppercase tracking-wide text-slate-400">
+            Marken, mit denen wir arbeiten
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
+            {brands.map((brand, i) => (
+              <Reveal key={brand} index={i} className="text-lg font-bold text-slate-400 dark:text-slate-600">
+                {brand}
+              </Reveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
+        <Reveal>
+          <h2 className="mb-8 text-center text-2xl font-bold text-slate-900 dark:text-white">So funktioniert's</h2>
+        </Reveal>
+        <div className="grid gap-6 sm:grid-cols-3">
+          {steps.map((step, i) => (
+            <Reveal key={step.title} index={i} className="rounded-xl border border-slate-200 bg-white p-6 text-center dark:border-slate-800 dark:bg-slate-900">
+              <div className="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-brand-500 text-lg font-bold text-white">
+                {i + 1}
+              </div>
+              <h3 className="mb-1 font-semibold text-slate-900 dark:text-white">{step.title}</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-300">{step.text}</p>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      <section className="relative overflow-hidden bg-gradient-to-br from-red-700 via-red-800 to-slate-950 py-20 sm:py-28">
+        <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-red-500/30 blur-3xl" />
+        <div className="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-red-500/20 blur-3xl" />
+
+        <div className="relative mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center">
+          <Reveal direction="left" className="text-center lg:text-left">
+            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 text-sm font-semibold text-white backdrop-blur">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-white">
+                <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8ZM9.6 15.6V8.4l6.3 3.6-6.3 3.6Z" />
+              </svg>
+              HifiPlanet auf YouTube
+            </div>
+            <h2 className="text-3xl font-extrabold text-white sm:text-4xl">Sieh dir unsere Umbauten in Aktion an</h2>
+            <p className="mx-auto mt-4 max-w-xl text-lg text-red-50/90 lg:mx-0">
+              Umbauten, Soundchecks und Verstärker-Tests aus unserer Werkstatt – „Den besten Sound gibt es nicht ab Werk!"
+            </p>
+            <ul className="mx-auto mt-6 flex max-w-xl flex-col items-center gap-2 text-sm text-red-50/90 sm:flex-row sm:flex-wrap sm:justify-center lg:mx-0 lg:justify-start">
+              {['Umbauten Schritt für Schritt', 'Soundchecks & Vergleiche', 'Verstärker- & Komponenten-Tests'].map((item) => (
+                <li key={item} className="flex items-center gap-2 rounded-full bg-white/10 px-3 py-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-3.5 w-3.5 flex-none">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                  {item}
+                </li>
+              ))}
+            </ul>
+            <a
+              href={YOUTUBE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-8 inline-flex items-center gap-2 rounded-md bg-white px-6 py-3 text-sm font-bold text-red-700 shadow-lg shadow-black/20 transition hover:-translate-y-0.5 hover:bg-red-50"
+            >
+              Zum YouTube-Kanal
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0-4 4m4-4H3" />
+              </svg>
+            </a>
+          </Reveal>
+
+          <Reveal direction="right" index={1} className="overflow-hidden rounded-xl border border-white/10 shadow-2xl shadow-black/40">
+            <div className="aspect-video w-full">
+              <ExternalEmbed name="Das YouTube-Video" className="h-full w-full">
+                <iframe
+                  className="h-full w-full"
+                  src={`https://www.youtube-nocookie.com/embed/${YOUTUBE_VIDEO_ID}`}
+                  title="HifiPlanet Amorbach – Car-Hifi Umbauten"
+                  loading="lazy"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                />
+              </ExternalEmbed>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      <section className="border-y border-slate-200 bg-slate-50 py-16 dark:border-slate-800 dark:bg-slate-900/40">
+        <div className="mx-auto max-w-6xl space-y-16 overflow-hidden px-4 sm:px-6">
+          <div className="grid items-center gap-8 md:grid-cols-2">
+            <Reveal direction="left" shine className="rounded-xl shadow-lg">
+              <img src={gallerySubs} alt="Individueller Subwoofer-Bau" className="w-full rounded-xl object-cover" style={{ maxHeight: 380 }} />
+            </Reveal>
+            <Reveal direction="right" index={1}>
+              <p className="mb-2 text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-400">Handwerk</p>
+              <h2 className="mb-3 text-2xl font-bold text-slate-900 dark:text-white">Präzisionsarbeit in jedem Detail</h2>
+              <p className="text-slate-600 dark:text-slate-300">
+                Ob eigens gefertigte Subwoofer-Gehäuse, integrierte Beleuchtung oder unsichtbar verlegte Kabelwege –
+                dank eigener CNC-, Laser- und 3D-Druck-Fertigung entstehen bei uns Lösungen, die es von der Stange nicht gibt.
+              </p>
+            </Reveal>
+          </div>
+
+          <div className="grid items-center gap-8 md:grid-cols-2">
+            <Reveal direction="left" className="order-2 md:order-1">
+              <p className="mb-2 text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-400">Beratung</p>
+              <h2 className="mb-3 text-2xl font-bold text-slate-900 dark:text-white">Von der ersten Idee bis zum letzten Schliff</h2>
+              <p className="text-slate-600 dark:text-slate-300">
+                Jedes Fahrzeug und jeder Anspruch ist anders. Deshalb beraten wir dich persönlich und unverbindlich –
+                vom dezenten Upgrade bis zum kompromisslosen High-End-System.
+              </p>
+            </Reveal>
+            <Reveal direction="right" index={1} shine className="order-1 md:order-2 rounded-xl shadow-lg">
+              <img src={galleryAmp} alt="Endstufen-Einbau mit Ambiente-Beleuchtung" className="w-full rounded-xl object-cover" style={{ maxHeight: 380 }} />
+            </Reveal>
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
+        <Reveal className="mb-8 text-center">
+          <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Einblicke in unsere Umbauten</h2>
+          <p className="mt-2 text-slate-600 dark:text-slate-300">
+            Vom unauffälligen Sound-Upgrade bis zum aufwendigen Komplettumbau – Handarbeit aus unserer Werkstatt in Amorbach.
+          </p>
+        </Reveal>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+          {gallery.map((img, i) => (
+            <Reveal key={img.src} index={i % 3} shine className="aspect-square overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
+              <img src={img.src} alt={img.alt} loading="lazy" className="h-full w-full object-cover transition duration-300 hover:scale-105" />
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-y border-slate-200 bg-slate-50 py-16 dark:border-slate-800 dark:bg-slate-900/40">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <Reveal className="mb-10 text-center">
+            <div className="mb-2 flex items-center justify-center gap-2">
+              <StarRating className="h-6 w-6" />
+            </div>
+            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">5,0 von 181 Kunden bewertet</h2>
+            <p className="mt-1 text-slate-600 dark:text-slate-300">Das sagen unsere Kunden über uns.</p>
+            <a
+              href="https://www.google.com/maps/search/?api=1&query=Hifi+Planet+Amorbach+Boxbrunner+Stra%C3%9Fe+20a"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-2 inline-block text-sm font-medium text-brand-600 hover:underline dark:text-brand-400"
+            >
+              Alle Bewertungen auf Google ansehen →
+            </a>
+          </Reveal>
+          <Reveal>
+            <TestimonialSlider testimonials={testimonials} />
+          </Reveal>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl overflow-hidden px-4 py-16 sm:px-6">
+        <div className="grid items-center gap-10 md:grid-cols-2">
+          <Reveal direction="left" shine className="overflow-hidden rounded-xl shadow-lg">
+            <img src={heroHighlight} alt="Hochwertige Endstufe und Subwoofer, Studioaufnahme" className="h-full w-full object-cover" loading="lazy" />
+          </Reveal>
+          <Reveal direction="right" index={1} className="text-center md:text-left">
+            <h2 className="mb-3 text-2xl font-bold text-slate-900 dark:text-white">Mehr als nur Car-Hifi</h2>
+            <p className="mx-auto mb-8 max-w-2xl text-slate-600 dark:text-slate-300 md:mx-0">
+              Neben individuellen Sound-Umbauten bieten wir CNC-Zerspanung, Lasertechnik, 3D-Druck und mehr –
+              alles aus einer Hand in unserer eigenen Werkstatt.
+            </p>
+            <Link
+              to="/leistungen"
+              className="inline-block rounded-md border border-slate-300 px-6 py-3 text-sm font-semibold text-slate-700 transition hover:-translate-y-0.5 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
+            >
+              Alle Leistungen entdecken
+            </Link>
+          </Reveal>
+        </div>
+      </section>
+
+      <section className="border-t border-slate-200 py-16 dark:border-slate-800">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6">
+          <Reveal className="mb-8 text-center">
+            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Häufig gestellte Fragen</h2>
+          </Reveal>
+          <Reveal index={1}>
+            <Accordion items={faqs} />
+          </Reveal>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/Impressum.jsx b/hifi-src/src/pages/public/Impressum.jsx
new file mode 100644
index 0000000..9fb2651
--- /dev/null
+++ b/hifi-src/src/pages/public/Impressum.jsx
@@ -0,0 +1,108 @@
+import usePageMeta from '../../hooks/usePageMeta.js';
+
+export default function Impressum() {
+  usePageMeta({
+    title: 'Impressum',
+    description: 'Impressum von HifiPlanet Amorbach gemäß § 5 DDG.',
+    path: '/impressum',
+  });
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
+      <h1 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">Impressum</h1>
+
+      <div className="space-y-8 text-sm text-slate-600 dark:text-slate-300">
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Angaben gemäß § 5 DDG</h2>
+          <p>
+            Hifi Planet e.K.
+            <br />
+            Inhaber: Christopher Horndasch
+            <br />
+            Boxbrunner Str. 20a
+            <br />
+            63916 Amorbach
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Kontakt</h2>
+          <p>
+            Telefon: <a href="tel:+4993732062390" className="hover:text-brand-500">09373 20 62 390</a>
+            <br />
+            E-Mail: <a href="mailto:info@hifi-planet-amorbach.de" className="hover:text-brand-500">info@hifi-planet-amorbach.de</a>
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Umsatzsteuer-ID</h2>
+          <p>
+            Umsatzsteuer-Identifikationsnummer gemäß § 27a Umsatzsteuergesetz: DE 275084766
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Zuständige Kammer</h2>
+          <p>IHK Aschaffenburg</p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV</h2>
+          <p>
+            Christopher Horndasch
+            <br />
+            Anschrift wie oben
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Verbraucherstreitbeilegung</h2>
+          <p>
+            Wir sind nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer
+            Verbraucherschlichtungsstelle im Sinne des Verbraucherstreitbeilegungsgesetzes (VSBG) teilzunehmen.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Haftung für Inhalte</h2>
+          <p>
+            Als Diensteanbieter sind wir gemäß § 7 Abs. 1 DDG für eigene Inhalte auf diesen Seiten nach den
+            allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht
+            verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu
+            forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung
+            der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine
+            diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung
+            möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend
+            entfernen.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Haftung für Links</h2>
+          <p>
+            Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben.
+            Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
+            verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Eine
+            permanente inhaltliche Kontrolle der verlinkten Seiten ist ohne konkrete Anhaltspunkte einer
+            Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links
+            umgehend entfernen.
+          </p>
+        </section>
+
+        <section>
+          <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">Urheberrecht</h2>
+          <p>
+            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen
+            Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
+            Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
+            Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
+            Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte
+            Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem
+            auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei
+            Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/Leistungen.jsx b/hifi-src/src/pages/public/Leistungen.jsx
new file mode 100644
index 0000000..bf695e7
--- /dev/null
+++ b/hifi-src/src/pages/public/Leistungen.jsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import usePageMeta from '../../hooks/usePageMeta.js';
+import Reveal from '../../components/Reveal.jsx';
+import DynamicIcon from '../../components/DynamicIcon.jsx';
+import MaintenanceNotice from '../../components/MaintenanceNotice.jsx';
+import MaintenanceBypassBanner from '../../components/MaintenanceBypassBanner.jsx';
+import { useMaintenance } from '../../context/MaintenanceContext.jsx';
+import { api } from '../../api/client.js';
+
+export default function Leistungen() {
+  const [services, setServices] = useState([]);
+  const maintenance = useMaintenance();
+
+  useEffect(() => {
+    api.get('/services').then(setServices).catch(() => setServices([]));
+  }, []);
+
+  usePageMeta({
+    title: 'Leistungen',
+    description:
+      'Car-Hifi, Wohnmobil & Caravan, Oldtimer, CNC-Zerspanung, Lasertechnik, 3D-Druck, Alarmanlagen und Dash Cams – alles aus einer Hand bei HifiPlanet in Amorbach.',
+    path: '/leistungen',
+  });
+
+  if (maintenance.services.enabled && !maintenance.bypass) {
+    return <MaintenanceNotice message={maintenance.services.message} />;
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+      {maintenance.services.enabled && maintenance.bypass && <MaintenanceBypassBanner inline />}
+      <h1 className="mb-2 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">Unsere Leistungen</h1>
+      <p className="mb-10 max-w-2xl text-slate-600 dark:text-slate-300">
+        Von individuellen Sound-Umbauten bis zur eigenen CNC- und 3D-Druck-Fertigung – alles aus einer Hand
+        in unserer Werkstatt in Amorbach.
+      </p>
+
+      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        {services.map((service, i) => (
+          <Reveal
+            key={service.id}
+            index={i % 3}
+            shine
+            className="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900"
+          >
+            <div className="relative aspect-[4/3]">
+              {service.image_path && (
+                <img src={service.image_path} alt={service.title} className="h-full w-full object-cover" loading="lazy" />
+              )}
+              <div className="absolute -bottom-5 left-5 flex h-12 w-12 items-center justify-center rounded-full bg-brand-500 text-white shadow-lg ring-4 ring-white dark:ring-slate-900">
+                <DynamicIcon name={service.icon_name} className="h-6 w-6" />
+              </div>
+            </div>
+            <div className="p-6 pt-8">
+              <h2 className="mb-2 font-semibold text-slate-900 dark:text-white">{service.title}</h2>
+              <p className="mb-3 text-sm text-slate-600 dark:text-slate-300">{service.description}</p>
+              {service.cta_label && service.cta_url && (
+                <Link to={service.cta_url} className="text-sm font-semibold text-brand-600 hover:underline dark:text-brand-400">
+                  {service.cta_label} →
+                </Link>
+              )}
+            </div>
+          </Reveal>
+        ))}
+      </div>
+
+      <div className="mt-12 rounded-xl border border-slate-200 bg-slate-50 p-8 text-center dark:border-slate-800 dark:bg-slate-900/40">
+        <h2 className="mb-2 text-xl font-bold text-slate-900 dark:text-white">Dein Projekt ist nicht dabei?</h2>
+        <p className="mb-5 text-slate-600 dark:text-slate-300">Sprich uns einfach an – wir finden gemeinsam die passende Lösung.</p>
+        <Link to="/kontakt" className="inline-block rounded-md bg-brand-500 px-6 py-3 text-sm font-semibold text-white hover:bg-brand-600">
+          Kontakt aufnehmen
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx
new file mode 100644
index 0000000..d5a0187
--- /dev/null
+++ b/hifi-src/src/pages/public/ModelPage.jsx
@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { api } from '../../api/client.js';
+import usePageMeta from '../../hooks/usePageMeta.js';
+import MaintenanceNotice from '../../components/MaintenanceNotice.jsx';
+import MaintenanceBypassBanner from '../../components/MaintenanceBypassBanner.jsx';
+import { useMaintenance } from '../../context/MaintenanceContext.jsx';
+
+const formatPrice = (value) =>
+  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value);
+
+export default function ModelPage() {
+  const { brandSlug, modelSlug } = useParams();
+  const [data, setData] = useState(null);
+  const [error, setError] = useState('');
+  const maintenance = useMaintenance();
+
+  useEffect(() => {
+    if (maintenance.vehicles.enabled && !maintenance.bypass) return;
+    api
+      .get(`/models/${brandSlug}/${modelSlug}/packages`)
+      .then(setData)
+      .catch((e) => setError(e.message));
+  }, [brandSlug, modelSlug, maintenance.vehicles.enabled, maintenance.bypass]);
+
+  usePageMeta({
+    title: data ? `${data.model.brand_name} ${data.model.name} Sound-Pakete` : 'Sound-Pakete',
+    description: data
+      ? `Car-Hifi Sound-Pakete für ${data.model.brand_name} ${data.model.name} inkl. aktueller Preise – von HifiPlanet unverbindlich anfragen.`
+      : undefined,
+    path: `/fahrzeuge/${brandSlug}/${modelSlug}`,
+  });
+
+  if (maintenance.vehicles.enabled && !maintenance.bypass) {
+    return <MaintenanceNotice message={maintenance.vehicles.message} />;
+  }
+
+  if (error) {
+    return <p className="mx-auto max-w-6xl px-4 py-12 text-red-600 sm:px-6">{error}</p>;
+  }
+
+  if (!data) {
+    return <p className="mx-auto max-w-6xl px-4 py-12 text-slate-500 sm:px-6">Lädt…</p>;
+  }
+
+  const { model, packages } = data;
+
+  const contactUrl = (pkg) => {
+    const params = new URLSearchParams({
+      brand: model.brand_name,
+      model: model.name,
+      package: pkg.name,
+      packageId: pkg.id,
+      total: pkg.total_price,
+    });
+    return `/kontakt?${params.toString()}`;
+  };
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+      {maintenance.vehicles.enabled && maintenance.bypass && <MaintenanceBypassBanner inline />}
+      <p className="mb-1 text-sm text-slate-500 dark:text-slate-400">
+        <Link to="/fahrzeuge" className="hover:text-brand-500">Fahrzeuge</Link> /{' '}
+        <Link to={`/fahrzeuge/${brandSlug}`} className="hover:text-brand-500">{model.brand_name}</Link> / {model.name}
+      </p>
+      <h1 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
+        {model.brand_name} {model.name} – Sound-Pakete
+      </h1>
+
+      {packages.length === 0 && (
+        <p className="text-slate-500 dark:text-slate-400">Für dieses Modell sind noch keine Pakete hinterlegt.</p>
+      )}
+
+      <div className="space-y-6">
+        {packages.map((pkg) => (
+          <div key={pkg.id} className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="mb-4 flex flex-wrap items-start justify-between gap-4">
+              <h2 className="text-lg font-bold text-slate-900 dark:text-white">{pkg.name}</h2>
+              <div className="text-right">
+                <p className="text-xs uppercase tracking-wide text-slate-400">Gesamtpreis (ca.)</p>
+                <p className="text-xl font-extrabold text-brand-600 dark:text-brand-400">{formatPrice(pkg.total_price)}</p>
+              </div>
+            </div>
+
+            <ul className="mb-5 list-disc space-y-1 pl-5 text-sm text-slate-700 dark:text-slate-300">
+              {pkg.products.map((product) => (
+                <li key={product.id}>
+                  {product.name_override || product.scraped_name || 'Produkt wird geladen…'}
+                </li>
+              ))}
+              {pkg.description
+                ?.split('\n')
+                .map((line) => line.trim())
+                .filter(Boolean)
+                .map((line, i) => <li key={`desc-${i}`}>{line}</li>)}
+            </ul>
+
+            <Link
+              to={contactUrl(pkg)}
+              className="inline-block rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600"
+            >
+              Kontakt anfragen
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/src/pages/public/VehicleSelect.jsx b/hifi-src/src/pages/public/VehicleSelect.jsx
new file mode 100644
index 0000000..f190669
--- /dev/null
+++ b/hifi-src/src/pages/public/VehicleSelect.jsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { api } from '../../api/client.js';
+import usePageMeta from '../../hooks/usePageMeta.js';
+import MaintenanceNotice from '../../components/MaintenanceNotice.jsx';
+import MaintenanceBypassBanner from '../../components/MaintenanceBypassBanner.jsx';
+import { useMaintenance } from '../../context/MaintenanceContext.jsx';
+
+export default function VehicleSelect() {
+  const [brands, setBrands] = useState([]);
+  const [error, setError] = useState('');
+  const maintenance = useMaintenance();
+
+  usePageMeta({
+    title: 'Fahrzeug auswählen',
+    description: 'Wähle deine Fahrzeugmarke und dein Modell und entdecke passende Car-Hifi Sound-Pakete von HifiPlanet.',
+    path: '/fahrzeuge',
+  });
+
+  useEffect(() => {
+    if (maintenance.vehicles.enabled && !maintenance.bypass) return;
+    api.get('/brands').then(setBrands).catch((e) => setError(e.message));
+  }, [maintenance.vehicles.enabled, maintenance.bypass]);
+
+  if (maintenance.vehicles.enabled && !maintenance.bypass) {
+    return <MaintenanceNotice message={maintenance.vehicles.message} />;
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+      {maintenance.vehicles.enabled && maintenance.bypass && <MaintenanceBypassBanner inline />}
+      <h1 className="mb-2 text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">Fahrzeug auswählen</h1>
+      <p className="mb-8 text-slate-600 dark:text-slate-300">
+        Wähle zuerst deine Marke, dann dein Modell – wir zeigen dir direkt die passenden Sound-Pakete.
+      </p>
+
+      {error && <p className="text-red-600">{error}</p>}
+
+      {brands.length === 0 && !error && (
+        <p className="text-slate-500 dark:text-slate-400">Es sind noch keine Marken hinterlegt.</p>
+      )}
+
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+        {brands.map((brand) => (
+          <Link
+            key={brand.id}
+            to={`/fahrzeuge/${brand.slug}`}
+            className="flex items-center justify-center rounded-xl border border-slate-200 bg-white px-6 py-8 text-center font-semibold text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-500 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100"
+          >
+            {brand.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/hifi-src/tailwind.config.js b/hifi-src/tailwind.config.js
new file mode 100644
index 0000000..c8922ba
--- /dev/null
+++ b/hifi-src/tailwind.config.js
@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#f5fbee',
+          100: '#e9f6da',
+          200: '#d3eeb4',
+          300: '#b6e382',
+          400: '#92d444',
+          500: '#6ba626',
+          600: '#58891f',
+          700: '#48701a',
+          800: '#3b5b15',
+          900: '#304b11',
+        },
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/hifi-src/vite.config.js b/hifi-src/vite.config.js
new file mode 100644
index 0000000..1d4789f
--- /dev/null
+++ b/hifi-src/vite.config.js
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/hifi/',
+  build: {
+    outDir: '../hifi',
+    emptyOutDir: false,
+  },
+  server: {
+    proxy: {
+      '/hifi/api': {
+        target: 'http://localhost',
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/hifi/.htaccess b/hifi/.htaccess
new file mode 100644
index 0000000..e6f4fb4
--- /dev/null
+++ b/hifi/.htaccess
@@ -0,0 +1,15 @@
+RewriteEngine On
+RewriteBase /hifi/
+
+# API-Requests an den PHP-Front-Controller weiterleiten
+RewriteCond %{REQUEST_URI} ^/hifi/api/
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^api/(.*)$ api/public/index.php [QSA,L]
+
+# Dynamische sitemap.xml (DB-generiert)
+RewriteRule ^sitemap\.xml$ api/public/sitemap.php [L]
+
+# Alles andere: SPA-Fallback auf index.html (React Router übernimmt das Routing)
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^ index.html [QSA,L]
diff --git a/hifi/api/composer.json b/hifi/api/composer.json
new file mode 100644
index 0000000..b9d29ff
--- /dev/null
+++ b/hifi/api/composer.json
@@ -0,0 +1,10 @@
+{
+    "require": {
+        "phpmailer/phpmailer": "^6.9"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "src/"
+        }
+    }
+}
diff --git a/hifi/api/composer.lock b/hifi/api/composer.lock
new file mode 100644
index 0000000..1cd6758
--- /dev/null
+++ b/hifi/api/composer.lock
@@ -0,0 +1,100 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "baf0b1b659e688a64051c5ee9742a77e",
+    "packages": [
+        {
+            "name": "phpmailer/phpmailer",
+            "version": "v6.12.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/PHPMailer/PHPMailer.git",
+                "reference": "d1ac35d784bf9f5e61b424901d5a014967f15b12"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/PHPMailer/PHPMailer/zipball/d1ac35d784bf9f5e61b424901d5a014967f15b12",
+                "reference": "d1ac35d784bf9f5e61b424901d5a014967f15b12",
+                "shasum": ""
+            },
+            "require": {
+                "ext-ctype": "*",
+                "ext-filter": "*",
+                "ext-hash": "*",
+                "php": ">=5.5.0"
+            },
+            "require-dev": {
+                "dealerdirect/phpcodesniffer-composer-installer": "^1.0",
+                "doctrine/annotations": "^1.2.6 || ^1.13.3",
+                "php-parallel-lint/php-console-highlighter": "^1.0.0",
+                "php-parallel-lint/php-parallel-lint": "^1.3.2",
+                "phpcompatibility/php-compatibility": "^9.3.5",
+                "roave/security-advisories": "dev-latest",
+                "squizlabs/php_codesniffer": "^3.7.2",
+                "yoast/phpunit-polyfills": "^1.0.4"
+            },
+            "suggest": {
+                "decomplexity/SendOauth2": "Adapter for using XOAUTH2 authentication",
+                "ext-mbstring": "Needed to send email in multibyte encoding charset or decode encoded addresses",
+                "ext-openssl": "Needed for secure SMTP sending and DKIM signing",
+                "greew/oauth2-azure-provider": "Needed for Microsoft Azure XOAUTH2 authentication",
+                "hayageek/oauth2-yahoo": "Needed for Yahoo XOAUTH2 authentication",
+                "league/oauth2-google": "Needed for Google XOAUTH2 authentication",
+                "psr/log": "For optional PSR-3 debug logging",
+                "symfony/polyfill-mbstring": "To support UTF-8 if the Mbstring PHP extension is not enabled (^1.2)",
+                "thenetworg/oauth2-azure": "Needed for Microsoft XOAUTH2 authentication"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "PHPMailer\\PHPMailer\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-only"
+            ],
+            "authors": [
+                {
+                    "name": "Marcus Bointon",
+                    "email": "phpmailer@synchromedia.co.uk"
+                },
+                {
+                    "name": "Jim Jagielski",
+                    "email": "jimjag@gmail.com"
+                },
+                {
+                    "name": "Andy Prevost",
+                    "email": "codeworxtech@users.sourceforge.net"
+                },
+                {
+                    "name": "Brent R. Matzelle"
+                }
+            ],
+            "description": "PHPMailer is a full-featured email creation and transfer class for PHP",
+            "support": {
+                "issues": "https://github.com/PHPMailer/PHPMailer/issues",
+                "source": "https://github.com/PHPMailer/PHPMailer/tree/v6.12.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Synchro",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-10-15T16:49:08+00:00"
+        }
+    ],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": {},
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {},
+    "platform-dev": {},
+    "plugin-api-version": "2.6.0"
+}
diff --git a/hifi/api/config/config.php b/hifi/api/config/config.php
new file mode 100644
index 0000000..002d74f
--- /dev/null
+++ b/hifi/api/config/config.php
@@ -0,0 +1,30 @@
+<?php
+
+return [
+    // Ausgelagert, damit das Admin-Panel (Einstellungen -> Datenbank) diese Datei
+    // gezielt neu schreiben kann, ohne den Rest dieser Konfiguration anzufassen.
+    'db' => require __DIR__ . '/db.php',
+    'mail' => [
+        // Vom Betreiber auszufüllen (z.B. eigenes Postfach oder Transactional-Mail-Anbieter).
+        // Solange 'host' leer ist, wird der Mailversand übersprungen (Anfrage wird trotzdem in der DB gespeichert).
+        'host' => '',
+        'port' => 587,
+        'username' => '',
+        'password' => '',
+        'encryption' => 'tls', // 'tls' oder 'ssl'
+        'from_email' => 'kontakt@example.com',
+        'from_name' => 'HifiPlanet',
+        'to_email' => 'kontakt@example.com',
+    ],
+    'app' => [
+        // Muss zum Vite "base" passen und wird für Session-Cookie-Pfad genutzt.
+        'base_path' => '/hifi',
+        'session_name' => 'hifi_admin_session',
+        // Öffentliche Domain der Seite (für sitemap.xml, robots.txt, Canonical-URLs). Ohne abschließenden Slash.
+        'site_url' => 'https://hifi-planet.de',
+    ],
+    'scraper' => [
+        'timeout' => 12,
+        'user_agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36',
+    ],
+];
diff --git a/hifi/api/config/db.php.example b/hifi/api/config/db.php.example
new file mode 100644
index 0000000..293ddeb
--- /dev/null
+++ b/hifi/api/config/db.php.example
@@ -0,0 +1,12 @@
+<?php
+
+// Kopiere diese Datei zu db.php und trage die Zugangsdaten der jeweiligen Umgebung ein.
+// db.php selbst ist bewusst nicht Teil des Repos (siehe .gitignore) und wird zusätzlich
+// vom Admin-Panel (Einstellungen -> Datenbank) automatisch neu geschrieben.
+return array (
+  'host' => '127.0.0.1',
+  'name' => 'hifi_shop',
+  'user' => 'root',
+  'pass' => '',
+  'charset' => 'utf8mb4',
+);
diff --git a/hifi/api/database/migration_2fa.sql b/hifi/api/database/migration_2fa.sql
new file mode 100644
index 0000000..e23c6b0
--- /dev/null
+++ b/hifi/api/database/migration_2fa.sql
@@ -0,0 +1,6 @@
+USE hifi_shop;
+
+ALTER TABLE admin_users
+  ADD COLUMN two_factor_secret VARCHAR(64) NULL AFTER is_super_admin,
+  ADD COLUMN two_factor_enabled TINYINT(1) NOT NULL DEFAULT 0 AFTER two_factor_secret,
+  ADD COLUMN two_factor_recovery_codes TEXT NULL AFTER two_factor_enabled;
diff --git a/hifi/api/database/migration_maintenance.sql b/hifi/api/database/migration_maintenance.sql
new file mode 100644
index 0000000..1f35ad5
--- /dev/null
+++ b/hifi/api/database/migration_maintenance.sql
@@ -0,0 +1,14 @@
+USE hifi_shop;
+
+CREATE TABLE IF NOT EXISTS app_settings (
+  id INT PRIMARY KEY DEFAULT 1,
+  maintenance_global TINYINT(1) NOT NULL DEFAULT 0,
+  maintenance_global_message VARCHAR(500) NULL,
+  maintenance_services TINYINT(1) NOT NULL DEFAULT 0,
+  maintenance_services_message VARCHAR(500) NULL,
+  maintenance_vehicles TINYINT(1) NOT NULL DEFAULT 0,
+  maintenance_vehicles_message VARCHAR(500) NULL,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+INSERT IGNORE INTO app_settings (id) VALUES (1);
diff --git a/hifi/api/database/migration_permissions.sql b/hifi/api/database/migration_permissions.sql
new file mode 100644
index 0000000..49a371e
--- /dev/null
+++ b/hifi/api/database/migration_permissions.sql
@@ -0,0 +1,37 @@
+USE hifi_shop;
+
+ALTER TABLE admin_users
+  ADD COLUMN is_super_admin TINYINT(1) NOT NULL DEFAULT 0 AFTER password_hash;
+
+-- Bestehende Admin-Konten bleiben uneingeschränkt (Super-Admin), damit niemand ausgesperrt wird.
+UPDATE admin_users SET is_super_admin = 1;
+
+CREATE TABLE IF NOT EXISTS permission_groups (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  name VARCHAR(100) NOT NULL UNIQUE,
+  description VARCHAR(255) NULL,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS permission_group_permissions (
+  permission_group_id INT NOT NULL,
+  permission VARCHAR(64) NOT NULL,
+  PRIMARY KEY (permission_group_id, permission),
+  CONSTRAINT fk_pgp_group FOREIGN KEY (permission_group_id) REFERENCES permission_groups(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS admin_user_permissions (
+  admin_user_id INT NOT NULL,
+  permission VARCHAR(64) NOT NULL,
+  PRIMARY KEY (admin_user_id, permission),
+  CONSTRAINT fk_aup_user FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS admin_user_groups (
+  admin_user_id INT NOT NULL,
+  permission_group_id INT NOT NULL,
+  PRIMARY KEY (admin_user_id, permission_group_id),
+  CONSTRAINT fk_aug_user FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_aug_group FOREIGN KEY (permission_group_id) REFERENCES permission_groups(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
diff --git a/hifi/api/database/migration_services.sql b/hifi/api/database/migration_services.sql
new file mode 100644
index 0000000..d1960d1
--- /dev/null
+++ b/hifi/api/database/migration_services.sql
@@ -0,0 +1,27 @@
+USE hifi_shop;
+
+CREATE TABLE IF NOT EXISTS services (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  icon_name VARCHAR(100) NOT NULL,
+  title VARCHAR(150) NOT NULL,
+  description TEXT NOT NULL,
+  image_path VARCHAR(255) NULL,
+  cta_label VARCHAR(100) NULL,
+  cta_url VARCHAR(255) NULL,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+-- icon_name nutzt lucide-react's kebab-case Namenskonvention (z.B. "shield-alert"),
+-- damit sich die Icons per lucide-react/dynamic einzeln nachladen lassen statt die
+-- komplette ~2000-Icon-Bibliothek in den Public-Bundle zu ziehen.
+INSERT INTO services (icon_name, title, description, image_path, cta_label, cta_url, sort_order) VALUES
+('car', 'Car-Hifi', 'Individuelle Sound-Umbauten vom dezenten Upgrade bis zum kompromisslosen High-End-System – konfigurierbar direkt auf unserer Seite.', '/hifi/api/uploads/seed-leistung-car-hifi.jpg', 'Fahrzeug konfigurieren', '/fahrzeuge', 0),
+('caravan', 'Wohnmobil & Caravan', 'Sound- und Elektronik-Lösungen speziell für Reisemobile und Caravans – reversibel oder fest verbaut.', '/hifi/api/uploads/seed-leistung-wohnmobil.jpg', NULL, NULL, 1),
+('car-front', 'Oldtimer', 'Zeitgemäßer Klang für Klassiker – wir modernisieren die Anlage, ohne den Charakter deines Oldtimers zu verlieren.', '/hifi/api/uploads/seed-leistung-oldtimer.jpg', NULL, NULL, 2),
+('cog', 'CNC Zerspanen', 'Fräsen, Bohren, Schneiden und Schleifen auf einer Fläche von 1500 × 3000 mm – für Prototypen, Kleinserien und Großauflagen. Massivholz, Verbundwerkstoffe, Plattenmaterial und mehr.', '/hifi/api/uploads/seed-leistung-cnc-zerspanen.jpg', NULL, NULL, 3),
+('zap', 'CNC Lasertechnik', 'Präzises Laserschneiden und -gravieren für Leder, Glas, Acryl, Holz, Karton und mehr – für Einzelstücke ebenso wie Serienfertigung.', '/hifi/api/uploads/seed-leistung-cnc-laser.jpg', NULL, NULL, 4),
+('boxes', '3D-Druck', 'Über 20 Drucker (FDM & SLA) für individuelle Halterungen, Blenden und Kleinserien – Fertigung meist in 1–3 Tagen, auf Wunsch auch farbig.', '/hifi/api/uploads/seed-leistung-3d-druck.jpg', NULL, NULL, 5),
+('shield-alert', 'Alarmanlagen', 'Zuverlässiger Diebstahlschutz für dein Fahrzeug, abgestimmt auf deine Ansprüche und dein Budget.', '/hifi/api/uploads/seed-leistung-alarmanlagen.jpg', NULL, NULL, 6),
+('video', 'Dash Cams', 'Beweissichere Aufzeichnung fürs Auto – wir beraten dich zur passenden Kamera und übernehmen den unauffälligen Einbau.', '/hifi/api/uploads/seed-leistung-dashcam.jpg', NULL, NULL, 7);
diff --git a/hifi/api/database/migration_upgrades.sql b/hifi/api/database/migration_upgrades.sql
new file mode 100644
index 0000000..65c0a10
--- /dev/null
+++ b/hifi/api/database/migration_upgrades.sql
@@ -0,0 +1,20 @@
+USE hifi_shop;
+
+ALTER TABLE packages
+  ADD COLUMN markup_type ENUM('none','fixed','percent') NOT NULL DEFAULT 'none' AFTER description,
+  ADD COLUMN markup_value DECIMAL(10,2) NOT NULL DEFAULT 0 AFTER markup_type;
+
+CREATE TABLE IF NOT EXISTS package_upgrades (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  package_id INT NOT NULL,
+  name VARCHAR(150) NOT NULL,
+  description VARCHAR(255) NULL,
+  price DECIMAL(10,2) NOT NULL DEFAULT 0,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT fk_upgrades_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+ALTER TABLE contact_requests
+  ADD COLUMN selected_upgrades TEXT NULL AFTER package_product_id;
diff --git a/hifi/api/database/schema.sql b/hifi/api/database/schema.sql
new file mode 100644
index 0000000..af74aba
--- /dev/null
+++ b/hifi/api/database/schema.sql
@@ -0,0 +1,154 @@
+CREATE DATABASE IF NOT EXISTS hifi_shop CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+USE hifi_shop;
+
+CREATE TABLE admin_users (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  username VARCHAR(64) NOT NULL UNIQUE,
+  password_hash VARCHAR(255) NOT NULL,
+  is_super_admin TINYINT(1) NOT NULL DEFAULT 0,
+  two_factor_secret VARCHAR(64) NULL,
+  two_factor_enabled TINYINT(1) NOT NULL DEFAULT 0,
+  two_factor_recovery_codes TEXT NULL,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE app_settings (
+  id INT PRIMARY KEY DEFAULT 1,
+  maintenance_global TINYINT(1) NOT NULL DEFAULT 0,
+  maintenance_global_message VARCHAR(500) NULL,
+  maintenance_services TINYINT(1) NOT NULL DEFAULT 0,
+  maintenance_services_message VARCHAR(500) NULL,
+  maintenance_vehicles TINYINT(1) NOT NULL DEFAULT 0,
+  maintenance_vehicles_message VARCHAR(500) NULL,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE services (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  icon_name VARCHAR(100) NOT NULL,
+  title VARCHAR(150) NOT NULL,
+  description TEXT NOT NULL,
+  image_path VARCHAR(255) NULL,
+  cta_label VARCHAR(100) NULL,
+  cta_url VARCHAR(255) NULL,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE permission_groups (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  name VARCHAR(100) NOT NULL UNIQUE,
+  description VARCHAR(255) NULL,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE permission_group_permissions (
+  permission_group_id INT NOT NULL,
+  permission VARCHAR(64) NOT NULL,
+  PRIMARY KEY (permission_group_id, permission),
+  CONSTRAINT fk_pgp_group FOREIGN KEY (permission_group_id) REFERENCES permission_groups(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE admin_user_permissions (
+  admin_user_id INT NOT NULL,
+  permission VARCHAR(64) NOT NULL,
+  PRIMARY KEY (admin_user_id, permission),
+  CONSTRAINT fk_aup_user FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE admin_user_groups (
+  admin_user_id INT NOT NULL,
+  permission_group_id INT NOT NULL,
+  PRIMARY KEY (admin_user_id, permission_group_id),
+  CONSTRAINT fk_aug_user FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_aug_group FOREIGN KEY (permission_group_id) REFERENCES permission_groups(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE brands (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  name VARCHAR(100) NOT NULL,
+  slug VARCHAR(120) NOT NULL UNIQUE,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE car_models (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  brand_id INT NOT NULL,
+  name VARCHAR(100) NOT NULL,
+  slug VARCHAR(150) NOT NULL,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  UNIQUE KEY uniq_brand_slug (brand_id, slug),
+  CONSTRAINT fk_car_models_brand FOREIGN KEY (brand_id) REFERENCES brands(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE packages (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  car_model_id INT NOT NULL,
+  name VARCHAR(150) NOT NULL,
+  slug VARCHAR(170) NOT NULL,
+  description TEXT NULL,
+  markup_type ENUM('none','fixed','percent') NOT NULL DEFAULT 'none',
+  markup_value DECIMAL(10,2) NOT NULL DEFAULT 0,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  UNIQUE KEY uniq_model_slug (car_model_id, slug),
+  CONSTRAINT fk_packages_model FOREIGN KEY (car_model_id) REFERENCES car_models(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE package_upgrades (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  package_id INT NOT NULL,
+  name VARCHAR(150) NOT NULL,
+  description VARCHAR(255) NULL,
+  price DECIMAL(10,2) NOT NULL DEFAULT 0,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT fk_upgrades_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE package_products (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  package_id INT NOT NULL,
+  source_url VARCHAR(500) NOT NULL,
+  name_override VARCHAR(255) NULL,
+  scraped_name VARCHAR(255) NULL,
+  scraped_price DECIMAL(10,2) NULL,
+  scraped_currency VARCHAR(8) NOT NULL DEFAULT 'EUR',
+  scraped_image_url VARCHAR(500) NULL,
+  price_updated_at DATETIME NULL,
+  scrape_status ENUM('pending','ok','error') NOT NULL DEFAULT 'pending',
+  scrape_error VARCHAR(255) NULL,
+  sort_order INT NOT NULL DEFAULT 0,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT fk_products_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE contact_requests (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  name VARCHAR(150) NOT NULL,
+  email VARCHAR(150) NOT NULL,
+  phone VARCHAR(50) NULL,
+  message TEXT NULL,
+  brand_name VARCHAR(100) NULL,
+  model_name VARCHAR(100) NULL,
+  package_name VARCHAR(150) NULL,
+  product_name VARCHAR(255) NULL,
+  package_id INT NULL,
+  package_product_id INT NULL,
+  selected_upgrades TEXT NULL,
+  status ENUM('new','in_progress','done') NOT NULL DEFAULT 'new',
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_contact_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE SET NULL,
+  CONSTRAINT fk_contact_product FOREIGN KEY (package_product_id) REFERENCES package_products(id) ON DELETE SET NULL
+) ENGINE=InnoDB;
+
+INSERT IGNORE INTO app_settings (id) VALUES (1);
diff --git a/hifi/api/public/index.php b/hifi/api/public/index.php
new file mode 100644
index 0000000..652f773
--- /dev/null
+++ b/hifi/api/public/index.php
@@ -0,0 +1,162 @@
+<?php
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use App\Controllers\AdminUserController;
+use App\Controllers\AuthController;
+use App\Controllers\BrandController;
+use App\Controllers\ContactController;
+use App\Controllers\DatabaseConfigController;
+use App\Controllers\MaintenanceController;
+use App\Controllers\ModelController;
+use App\Controllers\PackageController;
+use App\Controllers\PackageUpgradeController;
+use App\Controllers\PermissionCatalogController;
+use App\Controllers\PermissionGroupController;
+use App\Controllers\ProductController;
+use App\Controllers\SchemaController;
+use App\Controllers\ServiceController;
+use App\Controllers\SettingsController;
+use App\Controllers\TwoFactorController;
+use App\Controllers\UploadController;
+use App\Middleware\AuthMiddleware;
+use App\Router;
+use App\Support\Http;
+
+$config = require __DIR__ . '/../config/config.php';
+
+// Erlaubt lokale Vite-Dev-Server-Ports, Cookies inklusive (nur relevant während der Entwicklung).
+$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
+if (preg_match('#^http://localhost:\d+$#', $origin)) {
+    header("Access-Control-Allow-Origin: $origin");
+    header('Access-Control-Allow-Credentials: true');
+    header('Access-Control-Allow-Headers: Content-Type');
+    header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS');
+}
+if (($_SERVER['REQUEST_METHOD'] ?? '') === 'OPTIONS') {
+    http_response_code(204);
+    exit;
+}
+
+session_name($config['app']['session_name']);
+session_set_cookie_params([
+    'path' => $config['app']['base_path'] . '/',
+    'httponly' => true,
+    'samesite' => 'Lax',
+]);
+session_start();
+
+$router = new Router();
+
+// Nur eingeloggt sein muss man hierfür.
+$admin = fn(callable $handler) => function (array $params = []) use ($handler) {
+    AuthMiddleware::requireAdmin();
+    $handler($params);
+};
+// Braucht zusätzlich eine bestimmte Permission (direkt oder über eine Berechtigungsgruppe).
+$perm = fn(string $permission, callable $handler) => function (array $params = []) use ($handler, $permission) {
+    AuthMiddleware::requirePermission($permission);
+    $handler($params);
+};
+// Reicht, wenn irgendeine der genannten Permissions vorhanden ist.
+$anyPerm = fn(array $permissions, callable $handler) => function (array $params = []) use ($handler, $permissions) {
+    AuthMiddleware::requireAnyPermission($permissions);
+    $handler($params);
+};
+// Blockiert öffentliche Besucher (nicht eingeloggte Admins), wenn der globale oder
+// der übergebene Wartungsmodus aktiv ist.
+$maint = fn(?string $scope, callable $handler) => function (array $params = []) use ($handler, $scope) {
+    MaintenanceController::guardPublic($scope);
+    $handler($params);
+};
+
+$router->post('/auth/login', fn($p) => AuthController::login());
+$router->post('/auth/verify-2fa', fn($p) => AuthController::verifyTwoFactor());
+$router->post('/auth/logout', fn($p) => AuthController::logout());
+$router->get('/auth/me', fn($p) => AuthController::me());
+$router->post('/auth/change-password', $admin(fn($p) => AuthController::changePassword()));
+
+$router->get('/auth/2fa/setup', $admin(fn($p) => TwoFactorController::setup()));
+$router->post('/auth/2fa/enable', $admin(fn($p) => TwoFactorController::enable()));
+$router->post('/auth/2fa/disable', $admin(fn($p) => TwoFactorController::disable()));
+$router->post('/auth/2fa/recovery-codes', $admin(fn($p) => TwoFactorController::regenerateRecoveryCodes()));
+
+$router->get('/permissions/catalog', $admin(fn($p) => PermissionCatalogController::index()));
+
+$router->get('/brands', $maint('vehicles', fn($p) => BrandController::index()));
+$router->post('/brands', $perm('brands.manage', fn($p) => BrandController::store()));
+$router->put('/brands/{id}', $perm('brands.manage', fn($p) => BrandController::update($p)));
+$router->delete('/brands/{id}', $perm('brands.manage', fn($p) => BrandController::destroy($p)));
+$router->get('/brands/{slug}/models', $maint('vehicles', fn($p) => BrandController::modelsForBrand($p)));
+
+// Wird auch von der Pakete-Verwaltung für die Marke/Modell-Filter & -Auswahl benötigt.
+$router->get('/models', $anyPerm(['models.manage', 'packages.manage'], fn($p) => ModelController::index()));
+$router->post('/models', $perm('models.manage', fn($p) => ModelController::store()));
+$router->put('/models/{id}', $perm('models.manage', fn($p) => ModelController::update($p)));
+$router->delete('/models/{id}', $perm('models.manage', fn($p) => ModelController::destroy($p)));
+$router->get('/models/{brand_slug}/{model_slug}/packages', $maint('vehicles', fn($p) => ModelController::packagesForModel($p)));
+
+$router->get('/packages', $perm('packages.manage', fn($p) => PackageController::index()));
+$router->post('/packages', $perm('packages.manage', fn($p) => PackageController::store()));
+$router->put('/packages/{id}', $perm('packages.manage', fn($p) => PackageController::update($p)));
+$router->delete('/packages/{id}', $perm('packages.manage', fn($p) => PackageController::destroy($p)));
+$router->get('/packages/{id}/products', $perm('packages.manage', fn($p) => PackageController::products($p)));
+
+$router->get('/packages/{id}/upgrades', $maint('vehicles', fn($p) => PackageUpgradeController::index($p)));
+$router->post('/package-upgrades', $perm('packages.manage', fn($p) => PackageUpgradeController::store()));
+$router->put('/package-upgrades/{id}', $perm('packages.manage', fn($p) => PackageUpgradeController::update($p)));
+$router->delete('/package-upgrades/{id}', $perm('packages.manage', fn($p) => PackageUpgradeController::destroy($p)));
+
+$router->post('/products', $perm('packages.manage', fn($p) => ProductController::store()));
+$router->put('/products/{id}', $perm('packages.manage', fn($p) => ProductController::update($p)));
+$router->delete('/products/{id}', $perm('packages.manage', fn($p) => ProductController::destroy($p)));
+$router->post('/products/{id}/refresh-price', $perm('packages.manage', fn($p) => ProductController::refreshPrice($p)));
+
+$router->post('/contact', $maint(null, fn($p) => ContactController::store()));
+$router->get('/contact', $perm('contact.manage', fn($p) => ContactController::index()));
+$router->patch('/contact/{id}', $perm('contact.manage', fn($p) => ContactController::updateStatus($p)));
+$router->delete('/contact/{id}', $perm('contact.delete', fn($p) => ContactController::destroy($p)));
+
+$router->post('/uploads', $anyPerm(['brands.manage', 'models.manage', 'services.manage'], fn($p) => UploadController::store()));
+
+$router->get('/services', $maint('services', fn($p) => ServiceController::index()));
+$router->post('/services', $perm('services.manage', fn($p) => ServiceController::store()));
+$router->put('/services/{id}', $perm('services.manage', fn($p) => ServiceController::update($p)));
+$router->delete('/services/{id}', $perm('services.manage', fn($p) => ServiceController::destroy($p)));
+
+$router->get('/admin-users', $perm('users.manage', fn($p) => AdminUserController::index()));
+$router->post('/admin-users', $perm('users.manage', fn($p) => AdminUserController::store()));
+$router->put('/admin-users/{id}', $perm('users.manage', fn($p) => AdminUserController::update($p)));
+$router->delete('/admin-users/{id}', $perm('users.manage', fn($p) => AdminUserController::destroy($p)));
+
+$router->get('/permission-groups', $anyPerm(['users.manage', 'permission_groups.manage'], fn($p) => PermissionGroupController::index()));
+$router->post('/permission-groups', $perm('permission_groups.manage', fn($p) => PermissionGroupController::store()));
+$router->put('/permission-groups/{id}', $perm('permission_groups.manage', fn($p) => PermissionGroupController::update($p)));
+$router->delete('/permission-groups/{id}', $perm('permission_groups.manage', fn($p) => PermissionGroupController::destroy($p)));
+
+$router->get('/settings/export', $perm('settings.manage', fn($p) => SettingsController::exportData()));
+$router->post('/settings/import', $perm('settings.manage', fn($p) => SettingsController::importData()));
+$router->post('/settings/reset-services', $perm('settings.manage', fn($p) => SettingsController::resetServicesToDefaults()));
+$router->post('/settings/reset-catalog', $perm('settings.manage', fn($p) => SettingsController::resetCatalog()));
+$router->post('/settings/reset-all', $perm('settings.manage', fn($p) => SettingsController::resetAll()));
+
+$router->get('/settings/schema-check', $perm('settings.manage', fn($p) => SchemaController::check()));
+$router->post('/settings/schema-migrate', $perm('settings.manage', fn($p) => SchemaController::migrate()));
+
+$router->get('/settings/database', $perm('settings.manage', fn($p) => DatabaseConfigController::show()));
+$router->post('/settings/database', $perm('settings.manage', fn($p) => DatabaseConfigController::update()));
+
+$router->get('/maintenance', fn($p) => MaintenanceController::status());
+$router->post('/maintenance', $perm('settings.manage', fn($p) => MaintenanceController::update()));
+
+$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+$apiBase = $config['app']['base_path'] . '/api';
+$route = '/' . ltrim(substr($path, strlen($apiBase)), '/');
+
+header('Content-Type: application/json; charset=utf-8');
+
+try {
+    $router->dispatch($_SERVER['REQUEST_METHOD'], rtrim($route, '/') ?: '/');
+} catch (\Throwable $e) {
+    Http::error('Serverfehler: ' . $e->getMessage(), 500);
+}
diff --git a/hifi/api/public/sitemap.php b/hifi/api/public/sitemap.php
new file mode 100644
index 0000000..247c947
--- /dev/null
+++ b/hifi/api/public/sitemap.php
@@ -0,0 +1,46 @@
+<?php
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use App\Config\Database;
+
+$config = require __DIR__ . '/../config/config.php';
+$siteUrl = rtrim($config['app']['site_url'], '/');
+
+$db = Database::connection();
+$models = $db->query(
+    'SELECT b.slug AS brand_slug, m.slug AS model_slug, m.updated_at
+     FROM car_models m JOIN brands b ON b.id = m.brand_id'
+)->fetchAll();
+$brands = $db->query('SELECT slug, updated_at FROM brands')->fetchAll();
+
+$urls = [
+    ['loc' => '/', 'priority' => '1.0'],
+    ['loc' => '/fahrzeuge', 'priority' => '0.9'],
+    ['loc' => '/kontakt', 'priority' => '0.5'],
+];
+
+foreach ($brands as $brand) {
+    $urls[] = ['loc' => "/fahrzeuge/{$brand['slug']}", 'priority' => '0.8', 'lastmod' => $brand['updated_at']];
+}
+foreach ($models as $model) {
+    $urls[] = [
+        'loc' => "/fahrzeuge/{$model['brand_slug']}/{$model['model_slug']}",
+        'priority' => '0.7',
+        'lastmod' => $model['updated_at'],
+    ];
+}
+
+header('Content-Type: application/xml; charset=utf-8');
+echo '<?xml version="1.0" encoding="UTF-8"?>' . "\n";
+echo '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">' . "\n";
+foreach ($urls as $url) {
+    echo "  <url>\n";
+    echo '    <loc>' . htmlspecialchars($siteUrl . $url['loc']) . "</loc>\n";
+    if (!empty($url['lastmod'])) {
+        echo '    <lastmod>' . date('Y-m-d', strtotime($url['lastmod'])) . "</lastmod>\n";
+    }
+    echo '    <priority>' . $url['priority'] . "</priority>\n";
+    echo "  </url>\n";
+}
+echo '</urlset>';
diff --git a/hifi/api/scripts/create_admin.php b/hifi/api/scripts/create_admin.php
new file mode 100644
index 0000000..1466ead
--- /dev/null
+++ b/hifi/api/scripts/create_admin.php
@@ -0,0 +1,28 @@
+<?php
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use App\Config\Database;
+
+if ($argc < 3) {
+    fwrite(STDERR, "Verwendung: php create_admin.php <benutzername> <passwort>\n");
+    exit(1);
+}
+
+[$script, $username, $password] = $argv;
+
+if (strlen($password) < 8) {
+    fwrite(STDERR, "Passwort muss mindestens 8 Zeichen lang sein.\n");
+    exit(1);
+}
+
+$db = Database::connection();
+$hash = password_hash($password, PASSWORD_DEFAULT);
+
+$stmt = $db->prepare(
+    'INSERT INTO admin_users (username, password_hash, is_super_admin) VALUES (?, ?, 1)
+     ON DUPLICATE KEY UPDATE password_hash = VALUES(password_hash), is_super_admin = 1'
+);
+$stmt->execute([$username, $hash]);
+
+echo "Super-Admin '{$username}' angelegt/aktualisiert.\n";
diff --git a/hifi/api/scripts/refresh_prices.bat b/hifi/api/scripts/refresh_prices.bat
new file mode 100644
index 0000000..38cf3bf
--- /dev/null
+++ b/hifi/api/scripts/refresh_prices.bat
@@ -0,0 +1,2 @@
+@echo off
+"C:\xamppHIFI\php\php.exe" "C:\xamppHIFI\htdocs\hifi\api\scripts\refresh_prices.php" >> "C:\xamppHIFI\htdocs\hifi\api\scripts\refresh_prices.log" 2>&1
diff --git a/hifi/api/scripts/refresh_prices.php b/hifi/api/scripts/refresh_prices.php
new file mode 100644
index 0000000..01d4cac
--- /dev/null
+++ b/hifi/api/scripts/refresh_prices.php
@@ -0,0 +1,36 @@
+<?php
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use App\Config\Database;
+use App\Services\Audio4CarsScraper;
+
+$config = require __DIR__ . '/../config/config.php';
+$scraper = new Audio4CarsScraper($config['scraper']['timeout'], $config['scraper']['user_agent']);
+
+$db = Database::connection();
+$products = $db->query('SELECT id, source_url FROM package_products')->fetchAll();
+
+$ok = 0;
+$failed = 0;
+
+foreach ($products as $product) {
+    $result = $scraper->scrape($product['source_url']);
+
+    if ($result['ok']) {
+        $stmt = $db->prepare(
+            'UPDATE package_products
+             SET scraped_name = ?, scraped_price = ?, scraped_currency = ?, scraped_image_url = ?,
+                 price_updated_at = NOW(), scrape_status = "ok", scrape_error = NULL
+             WHERE id = ?'
+        );
+        $stmt->execute([$result['name'], $result['price'], $result['currency'], $result['image'], $product['id']]);
+        $ok++;
+    } else {
+        $stmt = $db->prepare('UPDATE package_products SET scrape_status = "error", scrape_error = ? WHERE id = ?');
+        $stmt->execute([$result['error'], $product['id']]);
+        $failed++;
+    }
+}
+
+echo "Preis-Refresh abgeschlossen: {$ok} OK, {$failed} Fehler (von " . count($products) . " Produkten).\n";
diff --git a/hifi/api/src/Config/Database.php b/hifi/api/src/Config/Database.php
new file mode 100644
index 0000000..4793bf7
--- /dev/null
+++ b/hifi/api/src/Config/Database.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Config;
+
+use PDO;
+use PDOException;
+
+class Database
+{
+    private static ?PDO $instance = null;
+
+    public static function connection(): PDO
+    {
+        if (self::$instance === null) {
+            $config = require __DIR__ . '/../../config/config.php';
+            $db = $config['db'];
+            $dsn = "mysql:host={$db['host']};dbname={$db['name']};charset={$db['charset']}";
+
+            try {
+                self::$instance = new PDO($dsn, $db['user'], $db['pass'], [
+                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+                    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+                    PDO::ATTR_EMULATE_PREPARES => false,
+                ]);
+            } catch (PDOException $e) {
+                http_response_code(500);
+                echo json_encode(['error' => 'Datenbankverbindung fehlgeschlagen']);
+                exit;
+            }
+        }
+
+        return self::$instance;
+    }
+}
diff --git a/hifi/api/src/Controllers/AdminUserController.php b/hifi/api/src/Controllers/AdminUserController.php
new file mode 100644
index 0000000..bf00d59
--- /dev/null
+++ b/hifi/api/src/Controllers/AdminUserController.php
@@ -0,0 +1,171 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Middleware\AuthMiddleware;
+use App\Support\Http;
+use App\Support\Permissions;
+
+class AdminUserController
+{
+    public static function index(): void
+    {
+        $db = Database::connection();
+        $users = $db->query(
+            'SELECT id, username, is_super_admin, created_at FROM admin_users ORDER BY username'
+        )->fetchAll();
+
+        $permStmt = $db->prepare('SELECT permission FROM admin_user_permissions WHERE admin_user_id = ?');
+        $groupStmt = $db->prepare(
+            'SELECT pg.id, pg.name FROM admin_user_groups aug
+             JOIN permission_groups pg ON pg.id = aug.permission_group_id
+             WHERE aug.admin_user_id = ?'
+        );
+
+        foreach ($users as &$user) {
+            $user['is_super_admin'] = (bool) $user['is_super_admin'];
+            $permStmt->execute([$user['id']]);
+            $user['permissions'] = $permStmt->fetchAll(\PDO::FETCH_COLUMN);
+            $groupStmt->execute([$user['id']]);
+            $user['groups'] = $groupStmt->fetchAll();
+        }
+        unset($user);
+
+        Http::send($users);
+    }
+
+    public static function store(): void
+    {
+        $actorId = AuthMiddleware::requireAdmin();
+        $body = Http::jsonBody();
+        $username = trim($body['username'] ?? '');
+        $password = (string) ($body['password'] ?? '');
+
+        if ($username === '' || strlen($password) < 8) {
+            Http::error('Benutzername erforderlich, Passwort mindestens 8 Zeichen', 422);
+        }
+
+        $wantsSuperAdmin = !empty($body['is_super_admin']);
+        if ($wantsSuperAdmin && !AuthMiddleware::isSuperAdmin($actorId)) {
+            Http::error('Nur Super-Admins dürfen Super-Admin-Rechte vergeben', 403);
+        }
+
+        $db = Database::connection();
+        $exists = $db->prepare('SELECT 1 FROM admin_users WHERE username = ?');
+        $exists->execute([$username]);
+        if ($exists->fetch()) {
+            Http::error('Benutzername bereits vergeben', 422);
+        }
+
+        $stmt = $db->prepare(
+            'INSERT INTO admin_users (username, password_hash, is_super_admin) VALUES (?, ?, ?)'
+        );
+        $stmt->execute([$username, password_hash($password, PASSWORD_DEFAULT), $wantsSuperAdmin ? 1 : 0]);
+        $id = (int) $db->lastInsertId();
+
+        self::saveAssignments($db, $id, $body);
+
+        Http::send(['id' => $id], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $actorId = AuthMiddleware::requireAdmin();
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        $username = trim($body['username'] ?? '');
+
+        if ($username === '') {
+            Http::error('Benutzername erforderlich', 422);
+        }
+
+        $db = Database::connection();
+        $exists = $db->prepare('SELECT 1 FROM admin_users WHERE username = ? AND id != ?');
+        $exists->execute([$username, $id]);
+        if ($exists->fetch()) {
+            Http::error('Benutzername bereits vergeben', 422);
+        }
+
+        $wantsSuperAdmin = !empty($body['is_super_admin']);
+        $actorIsSuperAdmin = AuthMiddleware::isSuperAdmin($actorId);
+        if ($wantsSuperAdmin !== AuthMiddleware::isSuperAdmin($id) && !$actorIsSuperAdmin) {
+            Http::error('Nur Super-Admins dürfen Super-Admin-Rechte ändern', 403);
+        }
+
+        if (!$wantsSuperAdmin && AuthMiddleware::isSuperAdmin($id)) {
+            self::guardLastSuperAdmin($db, $id, 'Der letzte Super-Admin kann nicht degradiert werden');
+        }
+
+        $password = (string) ($body['password'] ?? '');
+        if ($password !== '') {
+            if (strlen($password) < 8) {
+                Http::error('Passwort muss mindestens 8 Zeichen lang sein', 422);
+            }
+            $stmt = $db->prepare(
+                'UPDATE admin_users SET username = ?, password_hash = ?, is_super_admin = ? WHERE id = ?'
+            );
+            $stmt->execute([$username, password_hash($password, PASSWORD_DEFAULT), $wantsSuperAdmin ? 1 : 0, $id]);
+        } else {
+            $stmt = $db->prepare('UPDATE admin_users SET username = ?, is_super_admin = ? WHERE id = ?');
+            $stmt->execute([$username, $wantsSuperAdmin ? 1 : 0, $id]);
+        }
+
+        self::saveAssignments($db, $id, $body);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $actorId = AuthMiddleware::requireAdmin();
+        $id = (int) $params['id'];
+
+        if ($id === $actorId) {
+            Http::error('Du kannst dein eigenes Konto nicht löschen', 422);
+        }
+
+        $db = Database::connection();
+        if (AuthMiddleware::isSuperAdmin($id)) {
+            self::guardLastSuperAdmin($db, $id, 'Der letzte Super-Admin kann nicht gelöscht werden');
+        }
+
+        $stmt = $db->prepare('DELETE FROM admin_users WHERE id = ?');
+        $stmt->execute([$id]);
+        Http::send(['ok' => true]);
+    }
+
+    private static function guardLastSuperAdmin(\PDO $db, int $excludingId, string $message): void
+    {
+        $stmt = $db->prepare('SELECT COUNT(*) FROM admin_users WHERE is_super_admin = 1 AND id != ?');
+        $stmt->execute([$excludingId]);
+        if ((int) $stmt->fetchColumn() === 0) {
+            Http::error($message, 422);
+        }
+    }
+
+    private static function saveAssignments(\PDO $db, int $userId, array $body): void
+    {
+        if (array_key_exists('permissions', $body)) {
+            $permissions = Permissions::sanitizeList($body['permissions'] ?? []);
+            $db->prepare('DELETE FROM admin_user_permissions WHERE admin_user_id = ?')->execute([$userId]);
+            if ($permissions) {
+                $stmt = $db->prepare('INSERT INTO admin_user_permissions (admin_user_id, permission) VALUES (?, ?)');
+                foreach ($permissions as $permission) {
+                    $stmt->execute([$userId, $permission]);
+                }
+            }
+        }
+
+        if (array_key_exists('group_ids', $body)) {
+            $groupIds = array_values(array_unique(array_map('intval', $body['group_ids'] ?? [])));
+            $db->prepare('DELETE FROM admin_user_groups WHERE admin_user_id = ?')->execute([$userId]);
+            if ($groupIds) {
+                $stmt = $db->prepare('INSERT INTO admin_user_groups (admin_user_id, permission_group_id) VALUES (?, ?)');
+                foreach ($groupIds as $groupId) {
+                    $stmt->execute([$userId, $groupId]);
+                }
+            }
+        }
+    }
+}
diff --git a/hifi/api/src/Controllers/AuthController.php b/hifi/api/src/Controllers/AuthController.php
new file mode 100644
index 0000000..a28b72a
--- /dev/null
+++ b/hifi/api/src/Controllers/AuthController.php
@@ -0,0 +1,187 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Middleware\AuthMiddleware;
+use App\Support\Http;
+use App\Support\RecoveryCodes;
+use App\Support\Totp;
+
+class AuthController
+{
+    public static function login(): void
+    {
+        $body = Http::jsonBody();
+        $username = trim($body['username'] ?? '');
+        $password = (string) ($body['password'] ?? '');
+
+        if ($username === '' || $password === '') {
+            Http::error('Benutzername und Passwort erforderlich', 422);
+        }
+
+        $stmt = Database::connection()->prepare(
+            'SELECT id, username, password_hash, two_factor_enabled FROM admin_users WHERE username = ?'
+        );
+        $stmt->execute([$username]);
+        $user = $stmt->fetch();
+
+        if (!$user || !password_verify($password, $user['password_hash'])) {
+            Http::error('Benutzername oder Passwort falsch', 401);
+        }
+
+        if ((bool) $user['two_factor_enabled']) {
+            session_regenerate_id(true);
+            $_SESSION['pending_2fa_user_id'] = (int) $user['id'];
+            unset($_SESSION['admin_id'], $_SESSION['admin_username']);
+            Http::send(['requires_2fa' => true]);
+            return;
+        }
+
+        self::completeLogin((int) $user['id'], $user['username']);
+    }
+
+    public static function verifyTwoFactor(): void
+    {
+        if (empty($_SESSION['pending_2fa_user_id'])) {
+            Http::error('Keine ausstehende Anmeldung. Bitte erneut einloggen.', 400);
+        }
+        $userId = (int) $_SESSION['pending_2fa_user_id'];
+        $body = Http::jsonBody();
+        $code = trim($body['code'] ?? '');
+
+        if ($code === '') {
+            Http::error('Code erforderlich', 422);
+        }
+
+        $stmt = Database::connection()->prepare(
+            'SELECT username, two_factor_secret, two_factor_recovery_codes FROM admin_users WHERE id = ?'
+        );
+        $stmt->execute([$userId]);
+        $user = $stmt->fetch();
+
+        if (!$user) {
+            Http::error('Benutzer nicht gefunden', 404);
+        }
+
+        $valid = Totp::verifyCode($user['two_factor_secret'] ?? '', $code);
+
+        if (!$valid) {
+            $hashes = $user['two_factor_recovery_codes'] ? json_decode($user['two_factor_recovery_codes'], true) : [];
+            $remaining = RecoveryCodes::consume($hashes, $code);
+            if ($remaining !== null) {
+                $valid = true;
+                $update = Database::connection()->prepare(
+                    'UPDATE admin_users SET two_factor_recovery_codes = ? WHERE id = ?'
+                );
+                $update->execute([json_encode($remaining), $userId]);
+            }
+        }
+
+        if (!$valid) {
+            Http::error('Code ungültig oder abgelaufen', 401);
+        }
+
+        self::completeLogin($userId, $user['username']);
+    }
+
+    public static function changePassword(): void
+    {
+        $userId = AuthMiddleware::requireAdmin();
+        $body = Http::jsonBody();
+        $currentPassword = (string) ($body['current_password'] ?? '');
+        $newPassword = (string) ($body['new_password'] ?? '');
+        $newPasswordConfirmation = (string) ($body['new_password_confirmation'] ?? '');
+        $twoFactorCode = trim((string) ($body['two_factor_code'] ?? ''));
+
+        if ($currentPassword === '' || $newPassword === '' || $newPasswordConfirmation === '') {
+            Http::error('Bitte alle Felder ausfüllen', 422);
+        }
+        if (strlen($newPassword) < 8) {
+            Http::error('Das neue Passwort muss mindestens 8 Zeichen lang sein', 422);
+        }
+        if ($newPassword !== $newPasswordConfirmation) {
+            Http::error('Die neuen Passwörter stimmen nicht überein', 422);
+        }
+
+        $stmt = Database::connection()->prepare(
+            'SELECT password_hash, two_factor_enabled, two_factor_secret, two_factor_recovery_codes FROM admin_users WHERE id = ?'
+        );
+        $stmt->execute([$userId]);
+        $user = $stmt->fetch();
+
+        if (!$user || !password_verify($currentPassword, $user['password_hash'])) {
+            Http::error('Aktuelles Passwort ist falsch', 401);
+        }
+
+        if ((bool) $user['two_factor_enabled']) {
+            if ($twoFactorCode === '') {
+                Http::error('Bitte deinen 2FA-Code eingeben', 422);
+            }
+
+            $valid = Totp::verifyCode($user['two_factor_secret'] ?? '', $twoFactorCode);
+
+            if (!$valid) {
+                $hashes = $user['two_factor_recovery_codes'] ? json_decode($user['two_factor_recovery_codes'], true) : [];
+                $remaining = RecoveryCodes::consume($hashes, $twoFactorCode);
+                if ($remaining !== null) {
+                    $valid = true;
+                    $update = Database::connection()->prepare(
+                        'UPDATE admin_users SET two_factor_recovery_codes = ? WHERE id = ?'
+                    );
+                    $update->execute([json_encode($remaining), $userId]);
+                }
+            }
+
+            if (!$valid) {
+                Http::error('2FA-Code ungültig oder abgelaufen', 401);
+            }
+        }
+
+        $newHash = password_hash($newPassword, PASSWORD_DEFAULT);
+        $update = Database::connection()->prepare('UPDATE admin_users SET password_hash = ? WHERE id = ?');
+        $update->execute([$newHash, $userId]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function logout(): void
+    {
+        $_SESSION = [];
+        session_destroy();
+        Http::send(['ok' => true]);
+    }
+
+    public static function me(): void
+    {
+        if (empty($_SESSION['admin_id'])) {
+            Http::error('Nicht angemeldet', 401);
+        }
+        Http::send(self::userPayload((int) $_SESSION['admin_id'], $_SESSION['admin_username']));
+    }
+
+    private static function completeLogin(int $id, string $username): void
+    {
+        session_regenerate_id(true);
+        $_SESSION['admin_id'] = $id;
+        $_SESSION['admin_username'] = $username;
+        unset($_SESSION['pending_2fa_user_id']);
+
+        Http::send(self::userPayload($id, $username));
+    }
+
+    private static function userPayload(int $id, string $username): array
+    {
+        $stmt = Database::connection()->prepare('SELECT two_factor_enabled FROM admin_users WHERE id = ?');
+        $stmt->execute([$id]);
+        $row = $stmt->fetch();
+
+        return [
+            'id' => $id,
+            'username' => $username,
+            'is_super_admin' => AuthMiddleware::isSuperAdmin($id),
+            'two_factor_enabled' => (bool) ($row['two_factor_enabled'] ?? false),
+            'permissions' => AuthMiddleware::effectivePermissions($id),
+        ];
+    }
+}
diff --git a/hifi/api/src/Controllers/BrandController.php b/hifi/api/src/Controllers/BrandController.php
new file mode 100644
index 0000000..15a117d
--- /dev/null
+++ b/hifi/api/src/Controllers/BrandController.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use App\Support\Slug;
+
+class BrandController
+{
+    public static function index(): void
+    {
+        $stmt = Database::connection()->query(
+            'SELECT id, name, slug, sort_order FROM brands ORDER BY sort_order, name'
+        );
+        Http::send($stmt->fetchAll());
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        if ($name === '') {
+            Http::error('Name erforderlich', 422);
+        }
+
+        $slug = Slug::make($name);
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'INSERT INTO brands (name, slug, sort_order) VALUES (?, ?, ?)'
+        );
+        $stmt->execute([$name, $slug, (int) ($body['sort_order'] ?? 0)]);
+
+        Http::send(['id' => (int) $db->lastInsertId(), 'name' => $name, 'slug' => $slug], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        if ($name === '') {
+            Http::error('Name erforderlich', 422);
+        }
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'UPDATE brands SET name = ?, slug = ?, sort_order = ? WHERE id = ?'
+        );
+        $stmt->execute([
+            $name,
+            Slug::make($name),
+            (int) ($body['sort_order'] ?? 0),
+            $id,
+        ]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM brands WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    public static function modelsForBrand(array $params): void
+    {
+        $db = Database::connection();
+        $brandStmt = $db->prepare('SELECT id, name, slug FROM brands WHERE slug = ?');
+        $brandStmt->execute([$params['slug']]);
+        $brand = $brandStmt->fetch();
+
+        if (!$brand) {
+            Http::error('Marke nicht gefunden', 404);
+        }
+
+        $stmt = $db->prepare(
+            'SELECT id, name, slug, sort_order FROM car_models WHERE brand_id = ? ORDER BY sort_order, name'
+        );
+        $stmt->execute([$brand['id']]);
+
+        Http::send(['brand' => $brand, 'models' => $stmt->fetchAll()]);
+    }
+}
diff --git a/hifi/api/src/Controllers/ContactController.php b/hifi/api/src/Controllers/ContactController.php
new file mode 100644
index 0000000..399d1de
--- /dev/null
+++ b/hifi/api/src/Controllers/ContactController.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use PHPMailer\PHPMailer\PHPMailer;
+
+class ContactController
+{
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        $email = trim($body['email'] ?? '');
+
+        if ($name === '' || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
+            Http::error('Name und gültige E-Mail-Adresse erforderlich', 422);
+        }
+
+        $db = Database::connection();
+        $packageId = !empty($body['package_id']) ? (int) $body['package_id'] : null;
+        $selectedUpgrades = self::resolveUpgrades($db, $packageId, $body['upgrade_ids'] ?? []);
+
+        $stmt = $db->prepare(
+            'INSERT INTO contact_requests
+                (name, email, phone, message, brand_name, model_name, package_name, product_name, package_id, package_product_id, selected_upgrades)
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)'
+        );
+        $stmt->execute([
+            $name,
+            $email,
+            $body['phone'] ?? null,
+            $body['message'] ?? null,
+            $body['brand_name'] ?? null,
+            $body['model_name'] ?? null,
+            $body['package_name'] ?? null,
+            $body['product_name'] ?? null,
+            $packageId,
+            !empty($body['package_product_id']) ? (int) $body['package_product_id'] : null,
+            $selectedUpgrades ? json_encode($selectedUpgrades) : null,
+        ]);
+
+        $id = (int) $db->lastInsertId();
+        self::sendNotificationMail($body, $name, $email, $selectedUpgrades);
+
+        Http::send(['ok' => true, 'id' => $id], 201);
+    }
+
+    /**
+     * Liest die vom Kunden ausgewählten Upgrades serverseitig aus der DB (statt dem Client zu
+     * vertrauen), damit Name/Preis in der Anfrage nicht manipuliert werden können.
+     */
+    private static function resolveUpgrades(\PDO $db, ?int $packageId, mixed $upgradeIds): array
+    {
+        if (!$packageId || !is_array($upgradeIds) || count($upgradeIds) === 0) {
+            return [];
+        }
+
+        $ids = array_values(array_unique(array_map('intval', $upgradeIds)));
+        $placeholders = implode(',', array_fill(0, count($ids), '?'));
+
+        $stmt = $db->prepare(
+            "SELECT id, name, price FROM package_upgrades WHERE package_id = ? AND id IN ($placeholders)"
+        );
+        $stmt->execute([$packageId, ...$ids]);
+
+        return $stmt->fetchAll();
+    }
+
+    public static function index(): void
+    {
+        $stmt = Database::connection()->query(
+            'SELECT id, name, email, phone, message, brand_name, model_name, package_name, product_name,
+                    selected_upgrades, status, created_at
+             FROM contact_requests ORDER BY created_at DESC'
+        );
+        $rows = $stmt->fetchAll();
+        foreach ($rows as &$row) {
+            $row['selected_upgrades'] = $row['selected_upgrades'] ? json_decode($row['selected_upgrades'], true) : [];
+        }
+        unset($row);
+        Http::send($rows);
+    }
+
+    public static function updateStatus(array $params): void
+    {
+        $body = Http::jsonBody();
+        $status = $body['status'] ?? '';
+
+        if (!in_array($status, ['new', 'in_progress', 'done'], true)) {
+            Http::error('Ungültiger Status', 422);
+        }
+
+        $stmt = Database::connection()->prepare('UPDATE contact_requests SET status = ? WHERE id = ?');
+        $stmt->execute([$status, (int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM contact_requests WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    private static function sendNotificationMail(array $body, string $name, string $email, array $selectedUpgrades = []): void
+    {
+        $config = require __DIR__ . '/../../config/config.php';
+        $mailConfig = $config['mail'];
+
+        if (empty($mailConfig['host'])) {
+            return;
+        }
+
+        try {
+            $mail = new PHPMailer(true);
+            $mail->isSMTP();
+            $mail->Host = $mailConfig['host'];
+            $mail->Port = $mailConfig['port'];
+            $mail->SMTPAuth = true;
+            $mail->Username = $mailConfig['username'];
+            $mail->Password = $mailConfig['password'];
+            $mail->SMTPSecure = $mailConfig['encryption'];
+            $mail->CharSet = 'UTF-8';
+
+            $mail->setFrom($mailConfig['from_email'], $mailConfig['from_name']);
+            $mail->addAddress($mailConfig['to_email']);
+            $mail->addReplyTo($email, $name);
+
+            $context = trim(sprintf(
+                "Marke: %s\nModell: %s\nPaket: %s\nProdukt: %s",
+                $body['brand_name'] ?? '-',
+                $body['model_name'] ?? '-',
+                $body['package_name'] ?? '-',
+                $body['product_name'] ?? '-'
+            ));
+
+            $upgradesText = '-';
+            if ($selectedUpgrades) {
+                $upgradesText = implode("\n", array_map(
+                    fn($u) => sprintf('- %s (%.2f €)', $u['name'], $u['price']),
+                    $selectedUpgrades
+                ));
+            }
+
+            $mail->Subject = 'Neue Kontaktanfrage von ' . $name;
+            $mail->Body = "Name: {$name}\nE-Mail: {$email}\nTelefon: " . ($body['phone'] ?? '-') . "\n\n"
+                . $context . "\n\nGewünschte Upgrades:\n" . $upgradesText . "\n\nNachricht:\n" . ($body['message'] ?? '-');
+
+            $mail->send();
+        } catch (\Throwable $e) {
+            // Mailversand ist best effort – die Anfrage ist bereits in der DB gespeichert.
+        }
+    }
+}
diff --git a/hifi/api/src/Controllers/DatabaseConfigController.php b/hifi/api/src/Controllers/DatabaseConfigController.php
new file mode 100644
index 0000000..22869f5
--- /dev/null
+++ b/hifi/api/src/Controllers/DatabaseConfigController.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Support\Http;
+use PDO;
+use PDOException;
+
+class DatabaseConfigController
+{
+    private static function configPath(): string
+    {
+        return __DIR__ . '/../../config/db.php';
+    }
+
+    private static function currentConfig(): array
+    {
+        return require self::configPath();
+    }
+
+    public static function show(): void
+    {
+        $config = self::currentConfig();
+        unset($config['pass']);
+        Http::send(['config' => $config, 'has_password' => (self::currentConfig()['pass'] ?? '') !== '']);
+    }
+
+    public static function update(): void
+    {
+        $body = Http::jsonBody();
+        $current = self::currentConfig();
+
+        $host = trim($body['host'] ?? '');
+        $name = trim($body['name'] ?? '');
+        $user = trim($body['user'] ?? '');
+        $charset = trim($body['charset'] ?? '') ?: 'utf8mb4';
+        // Leeres Passwort im Formular = aktuelles Passwort beibehalten.
+        $pass = ($body['password'] ?? '') !== '' ? $body['password'] : $current['pass'];
+
+        if ($host === '' || $name === '' || $user === '') {
+            Http::error('Host, Datenbankname und Benutzer sind erforderlich', 422);
+        }
+
+        $newConfig = ['host' => $host, 'name' => $name, 'user' => $user, 'pass' => $pass, 'charset' => $charset];
+
+        // Erst mit den NEUEN Zugangsdaten testen, bevor irgendetwas gespeichert wird –
+        // damit man sich nicht versehentlich aussperrt.
+        try {
+            $dsn = "mysql:host={$host};dbname={$name};charset={$charset}";
+            new PDO($dsn, $user, $pass, [PDO::ATTR_TIMEOUT => 5]);
+        } catch (PDOException $e) {
+            Http::error('Verbindung mit diesen Zugangsdaten fehlgeschlagen: ' . $e->getMessage(), 422);
+        }
+
+        $php = "<?php\n\n// Wird über das Admin-Panel (Einstellungen -> Datenbank) verwaltet.\n"
+            . "// Diese Datei wird bei Änderungen automatisch neu geschrieben.\n"
+            . "return " . var_export($newConfig, true) . ";\n";
+
+        if (@file_put_contents(self::configPath(), $php) === false) {
+            Http::error('Verbindung erfolgreich getestet, aber die Konfigurationsdatei konnte nicht geschrieben werden (Dateirechte prüfen).', 500);
+        }
+
+        Http::send(['ok' => true]);
+    }
+}
diff --git a/hifi/api/src/Controllers/MaintenanceController.php b/hifi/api/src/Controllers/MaintenanceController.php
new file mode 100644
index 0000000..022618a
--- /dev/null
+++ b/hifi/api/src/Controllers/MaintenanceController.php
@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Middleware\AuthMiddleware;
+use App\Support\Http;
+
+class MaintenanceController
+{
+    /** Liest die Wartungsmodus-Flags, mit sicheren Defaults falls die Zeile/Tabelle noch fehlt. */
+    public static function current(): array
+    {
+        try {
+            $stmt = Database::connection()->query('SELECT * FROM app_settings WHERE id = 1');
+            $row = $stmt->fetch();
+        } catch (\Throwable $e) {
+            $row = false;
+        }
+
+        if (!$row) {
+            $row = [
+                'maintenance_global' => 0, 'maintenance_global_message' => null,
+                'maintenance_services' => 0, 'maintenance_services_message' => null,
+                'maintenance_vehicles' => 0, 'maintenance_vehicles_message' => null,
+            ];
+        }
+
+        return [
+            'global' => ['enabled' => (bool) $row['maintenance_global'], 'message' => $row['maintenance_global_message']],
+            'services' => ['enabled' => (bool) $row['maintenance_services'], 'message' => $row['maintenance_services_message']],
+            'vehicles' => ['enabled' => (bool) $row['maintenance_vehicles'], 'message' => $row['maintenance_vehicles_message']],
+        ];
+    }
+
+    public static function status(): void
+    {
+        Http::send(self::current());
+    }
+
+    public static function update(): void
+    {
+        $body = Http::jsonBody();
+        $db = Database::connection();
+
+        $db->exec('INSERT IGNORE INTO app_settings (id) VALUES (1)');
+        $stmt = $db->prepare(
+            'UPDATE app_settings SET
+                maintenance_global = ?, maintenance_global_message = ?,
+                maintenance_services = ?, maintenance_services_message = ?,
+                maintenance_vehicles = ?, maintenance_vehicles_message = ?
+             WHERE id = 1'
+        );
+        $stmt->execute([
+            !empty($body['global']['enabled']) ? 1 : 0,
+            $body['global']['message'] ?? null,
+            !empty($body['services']['enabled']) ? 1 : 0,
+            $body['services']['message'] ?? null,
+            !empty($body['vehicles']['enabled']) ? 1 : 0,
+            $body['vehicles']['message'] ?? null,
+        ]);
+
+        Http::send(self::current());
+    }
+
+    // Diese Endpunkte werden sowohl von der öffentlichen Seite als auch von den
+    // jeweiligen Admin-Verwaltungsseiten genutzt. Wer die passende "verwalten"-
+    // Permission hat, darf seine eigene Verwaltung also auch während der
+    // Wartung weiter benutzen – die Bypass-Permission ist nur für die
+    // "Vorschau der echten öffentlichen Seite trotz Wartung" gedacht.
+    private const SCOPE_MANAGE_PERMISSIONS = [
+        'vehicles' => ['brands.manage', 'models.manage', 'packages.manage'],
+        'services' => ['services.manage'],
+    ];
+
+    /**
+     * Blockiert eine öffentliche Route, wenn der globale oder der übergebene
+     * spezifische Wartungsmodus aktiv ist – außer für Admins mit der Permission
+     * "maintenance.bypass" oder mit der zum Bereich passenden "verwalten"-Permission.
+     */
+    public static function guardPublic(?string $scope = null): void
+    {
+        if (!empty($_SESSION['admin_id'])) {
+            $adminId = (int) $_SESSION['admin_id'];
+            if (AuthMiddleware::userHasPermission($adminId, 'maintenance.bypass')) {
+                return;
+            }
+            foreach (($scope !== null ? self::SCOPE_MANAGE_PERMISSIONS[$scope] ?? [] : []) as $managePermission) {
+                if (AuthMiddleware::userHasPermission($adminId, $managePermission)) {
+                    return;
+                }
+            }
+        }
+
+        $status = self::current();
+        $blocked = $status['global']['enabled'] || ($scope !== null && !empty($status[$scope]['enabled']));
+
+        if ($blocked) {
+            $message = $status['global']['enabled']
+                ? ($status['global']['message'] ?: 'Diese Seite befindet sich aktuell im Wartungsmodus.')
+                : ($status[$scope]['message'] ?? 'Dieser Bereich befindet sich aktuell im Wartungsmodus.');
+            Http::error($message, 503);
+        }
+    }
+}
diff --git a/hifi/api/src/Controllers/ModelController.php b/hifi/api/src/Controllers/ModelController.php
new file mode 100644
index 0000000..40af475
--- /dev/null
+++ b/hifi/api/src/Controllers/ModelController.php
@@ -0,0 +1,134 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use App\Support\Slug;
+
+class ModelController
+{
+    public static function index(): void
+    {
+        $stmt = Database::connection()->query(
+            'SELECT m.id, m.name, m.slug, m.sort_order, m.brand_id, b.name AS brand_name, b.slug AS brand_slug
+             FROM car_models m JOIN brands b ON b.id = m.brand_id
+             ORDER BY b.name, m.sort_order, m.name'
+        );
+        Http::send($stmt->fetchAll());
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        $brandId = (int) ($body['brand_id'] ?? 0);
+
+        if ($name === '' || $brandId <= 0) {
+            Http::error('Name und Marke erforderlich', 422);
+        }
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'INSERT INTO car_models (brand_id, name, slug, sort_order) VALUES (?, ?, ?, ?)'
+        );
+        $stmt->execute([
+            $brandId,
+            $name,
+            Slug::make($name),
+            (int) ($body['sort_order'] ?? 0),
+        ]);
+
+        Http::send(['id' => (int) $db->lastInsertId()], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        $brandId = (int) ($body['brand_id'] ?? 0);
+
+        if ($name === '' || $brandId <= 0) {
+            Http::error('Name und Marke erforderlich', 422);
+        }
+
+        $stmt = Database::connection()->prepare(
+            'UPDATE car_models SET brand_id = ?, name = ?, slug = ?, sort_order = ? WHERE id = ?'
+        );
+        $stmt->execute([
+            $brandId,
+            $name,
+            Slug::make($name),
+            (int) ($body['sort_order'] ?? 0),
+            $id,
+        ]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM car_models WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    public static function packagesForModel(array $params): void
+    {
+        $db = Database::connection();
+        $modelStmt = $db->prepare(
+            'SELECT m.id, m.name, m.slug, b.name AS brand_name, b.slug AS brand_slug
+             FROM car_models m JOIN brands b ON b.id = m.brand_id
+             WHERE m.slug = ? AND b.slug = ?'
+        );
+        $modelStmt->execute([$params['model_slug'], $params['brand_slug']]);
+        $model = $modelStmt->fetch();
+
+        if (!$model) {
+            Http::error('Modell nicht gefunden', 404);
+        }
+
+        $pkgStmt = $db->prepare(
+            'SELECT id, name, slug, description, markup_type, markup_value, sort_order
+             FROM packages WHERE car_model_id = ? ORDER BY sort_order, name'
+        );
+        $pkgStmt->execute([$model['id']]);
+        $packages = $pkgStmt->fetchAll();
+
+        if ($packages) {
+            $productStmt = $db->prepare(
+                'SELECT id, package_id, name_override, scraped_name, scraped_image_url, scrape_status, sort_order
+                 FROM package_products WHERE package_id = ? ORDER BY sort_order, id'
+            );
+
+            foreach ($packages as &$package) {
+                $productStmt->execute([$package['id']]);
+                $products = $productStmt->fetchAll();
+
+                // Preise werden serverseitig aufsummiert und mit dem Aufschlag verrechnet,
+                // aber nie pro Bauteil an den Client zurückgegeben – der Kunde sieht nur den Gesamtpreis.
+                $subtotalStmt = $db->prepare(
+                    'SELECT COALESCE(SUM(scraped_price), 0) AS subtotal FROM package_products WHERE package_id = ?'
+                );
+                $subtotalStmt->execute([$package['id']]);
+                $subtotal = (float) $subtotalStmt->fetch()['subtotal'];
+
+                if ($package['markup_type'] === 'fixed') {
+                    $total = $subtotal + (float) $package['markup_value'];
+                } elseif ($package['markup_type'] === 'percent') {
+                    $total = $subtotal * (1 + (float) $package['markup_value'] / 100);
+                } else {
+                    $total = $subtotal;
+                }
+
+                unset($package['markup_type'], $package['markup_value']);
+                $package['products'] = $products;
+                $package['total_price'] = round($total, 2);
+            }
+            unset($package);
+        }
+
+        Http::send(['model' => $model, 'packages' => $packages]);
+    }
+}
diff --git a/hifi/api/src/Controllers/PackageController.php b/hifi/api/src/Controllers/PackageController.php
new file mode 100644
index 0000000..9742f06
--- /dev/null
+++ b/hifi/api/src/Controllers/PackageController.php
@@ -0,0 +1,112 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use App\Support\Slug;
+
+class PackageController
+{
+    private static function normalizeMarkup(array $body): array
+    {
+        $type = $body['markup_type'] ?? 'none';
+        if (!in_array($type, ['none', 'fixed', 'percent'], true)) {
+            $type = 'none';
+        }
+        $value = $type === 'none' ? 0 : (float) ($body['markup_value'] ?? 0);
+
+        return [$type, $value];
+    }
+
+    public static function index(): void
+    {
+        $stmt = Database::connection()->query(
+            'SELECT p.id, p.name, p.slug, p.description, p.markup_type, p.markup_value, p.sort_order, p.car_model_id,
+                    m.name AS model_name, b.name AS brand_name
+             FROM packages p
+             JOIN car_models m ON m.id = p.car_model_id
+             JOIN brands b ON b.id = m.brand_id
+             ORDER BY b.name, m.name, p.sort_order, p.name'
+        );
+        Http::send($stmt->fetchAll());
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        $modelId = (int) ($body['car_model_id'] ?? 0);
+
+        if ($name === '' || $modelId <= 0) {
+            Http::error('Name und Modell erforderlich', 422);
+        }
+
+        [$markupType, $markupValue] = self::normalizeMarkup($body);
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'INSERT INTO packages (car_model_id, name, slug, description, markup_type, markup_value, sort_order)
+             VALUES (?, ?, ?, ?, ?, ?, ?)'
+        );
+        $stmt->execute([
+            $modelId,
+            $name,
+            Slug::make($name),
+            $body['description'] ?? null,
+            $markupType,
+            $markupValue,
+            (int) ($body['sort_order'] ?? 0),
+        ]);
+
+        Http::send(['id' => (int) $db->lastInsertId()], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        $modelId = (int) ($body['car_model_id'] ?? 0);
+
+        if ($name === '' || $modelId <= 0) {
+            Http::error('Name und Modell erforderlich', 422);
+        }
+
+        [$markupType, $markupValue] = self::normalizeMarkup($body);
+
+        $stmt = Database::connection()->prepare(
+            'UPDATE packages SET car_model_id = ?, name = ?, slug = ?, description = ?, markup_type = ?, markup_value = ?, sort_order = ? WHERE id = ?'
+        );
+        $stmt->execute([
+            $modelId,
+            $name,
+            Slug::make($name),
+            $body['description'] ?? null,
+            $markupType,
+            $markupValue,
+            (int) ($body['sort_order'] ?? 0),
+            $id,
+        ]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM packages WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    public static function products(array $params): void
+    {
+        $stmt = Database::connection()->prepare(
+            'SELECT id, package_id, source_url, name_override, scraped_name, scraped_price, scraped_currency,
+                    scraped_image_url, price_updated_at, scrape_status, scrape_error, sort_order
+             FROM package_products WHERE package_id = ? ORDER BY sort_order, id'
+        );
+        $stmt->execute([(int) $params['id']]);
+        Http::send($stmt->fetchAll());
+    }
+}
diff --git a/hifi/api/src/Controllers/PackageUpgradeController.php b/hifi/api/src/Controllers/PackageUpgradeController.php
new file mode 100644
index 0000000..563c90d
--- /dev/null
+++ b/hifi/api/src/Controllers/PackageUpgradeController.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+
+class PackageUpgradeController
+{
+    public static function index(array $params): void
+    {
+        $stmt = Database::connection()->prepare(
+            'SELECT id, package_id, name, description, price, sort_order
+             FROM package_upgrades WHERE package_id = ? ORDER BY sort_order, id'
+        );
+        $stmt->execute([(int) $params['id']]);
+        Http::send($stmt->fetchAll());
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $packageId = (int) ($body['package_id'] ?? 0);
+        $name = trim($body['name'] ?? '');
+        $price = (float) ($body['price'] ?? 0);
+
+        if ($packageId <= 0 || $name === '') {
+            Http::error('Paket und Name erforderlich', 422);
+        }
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'INSERT INTO package_upgrades (package_id, name, description, price, sort_order) VALUES (?, ?, ?, ?, ?)'
+        );
+        $stmt->execute([
+            $packageId,
+            $name,
+            $body['description'] ?? null,
+            $price,
+            (int) ($body['sort_order'] ?? 0),
+        ]);
+
+        Http::send(['id' => (int) $db->lastInsertId()], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+
+        if ($name === '') {
+            Http::error('Name erforderlich', 422);
+        }
+
+        $stmt = Database::connection()->prepare(
+            'UPDATE package_upgrades SET name = ?, description = ?, price = ?, sort_order = ? WHERE id = ?'
+        );
+        $stmt->execute([
+            $name,
+            $body['description'] ?? null,
+            (float) ($body['price'] ?? 0),
+            (int) ($body['sort_order'] ?? 0),
+            $id,
+        ]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM package_upgrades WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+}
diff --git a/hifi/api/src/Controllers/PermissionCatalogController.php b/hifi/api/src/Controllers/PermissionCatalogController.php
new file mode 100644
index 0000000..e69f68f
--- /dev/null
+++ b/hifi/api/src/Controllers/PermissionCatalogController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Support\Http;
+use App\Support\Permissions;
+
+class PermissionCatalogController
+{
+    public static function index(): void
+    {
+        $catalog = [];
+        foreach (Permissions::CATALOG as $key => $label) {
+            $catalog[] = ['key' => $key, 'label' => $label];
+        }
+        Http::send($catalog);
+    }
+}
diff --git a/hifi/api/src/Controllers/PermissionGroupController.php b/hifi/api/src/Controllers/PermissionGroupController.php
new file mode 100644
index 0000000..d90eb94
--- /dev/null
+++ b/hifi/api/src/Controllers/PermissionGroupController.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use App\Support\Permissions;
+
+class PermissionGroupController
+{
+    public static function index(): void
+    {
+        $db = Database::connection();
+        $groups = $db->query('SELECT id, name, description FROM permission_groups ORDER BY name')->fetchAll();
+
+        $permStmt = $db->prepare('SELECT permission FROM permission_group_permissions WHERE permission_group_id = ?');
+        foreach ($groups as &$group) {
+            $permStmt->execute([$group['id']]);
+            $group['permissions'] = $permStmt->fetchAll(\PDO::FETCH_COLUMN);
+        }
+        unset($group);
+
+        Http::send($groups);
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        if ($name === '') {
+            Http::error('Name erforderlich', 422);
+        }
+        $permissions = Permissions::sanitizeList($body['permissions'] ?? []);
+
+        $db = Database::connection();
+        $stmt = $db->prepare('INSERT INTO permission_groups (name, description) VALUES (?, ?)');
+        $stmt->execute([$name, $body['description'] ?? null]);
+        $id = (int) $db->lastInsertId();
+
+        self::savePermissions($db, $id, $permissions);
+
+        Http::send(['id' => $id], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        $name = trim($body['name'] ?? '');
+        if ($name === '') {
+            Http::error('Name erforderlich', 422);
+        }
+        $permissions = Permissions::sanitizeList($body['permissions'] ?? []);
+
+        $db = Database::connection();
+        $stmt = $db->prepare('UPDATE permission_groups SET name = ?, description = ? WHERE id = ?');
+        $stmt->execute([$name, $body['description'] ?? null, $id]);
+
+        self::savePermissions($db, $id, $permissions);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM permission_groups WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    /** @param string[] $permissions */
+    private static function savePermissions(\PDO $db, int $groupId, array $permissions): void
+    {
+        $db->prepare('DELETE FROM permission_group_permissions WHERE permission_group_id = ?')->execute([$groupId]);
+
+        if (!$permissions) {
+            return;
+        }
+
+        $stmt = $db->prepare('INSERT INTO permission_group_permissions (permission_group_id, permission) VALUES (?, ?)');
+        foreach ($permissions as $permission) {
+            $stmt->execute([$groupId, $permission]);
+        }
+    }
+}
diff --git a/hifi/api/src/Controllers/ProductController.php b/hifi/api/src/Controllers/ProductController.php
new file mode 100644
index 0000000..31b3bff
--- /dev/null
+++ b/hifi/api/src/Controllers/ProductController.php
@@ -0,0 +1,117 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Services\Audio4CarsScraper;
+use App\Support\Http;
+
+class ProductController
+{
+    private static function scraper(): Audio4CarsScraper
+    {
+        $config = require __DIR__ . '/../../config/config.php';
+        return new Audio4CarsScraper($config['scraper']['timeout'], $config['scraper']['user_agent']);
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        $packageId = (int) ($body['package_id'] ?? 0);
+        $sourceUrl = trim($body['source_url'] ?? '');
+
+        if ($packageId <= 0 || $sourceUrl === '') {
+            Http::error('Paket und Produkt-URL erforderlich', 422);
+        }
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'INSERT INTO package_products (package_id, source_url, name_override, sort_order, scrape_status)
+             VALUES (?, ?, ?, ?, "pending")'
+        );
+        $stmt->execute([
+            $packageId,
+            $sourceUrl,
+            $body['name_override'] ?? null,
+            (int) ($body['sort_order'] ?? 0),
+        ]);
+        $id = (int) $db->lastInsertId();
+
+        self::applyScrape($id, $sourceUrl);
+        self::returnProduct($id);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'UPDATE package_products SET source_url = ?, name_override = ?, sort_order = ? WHERE id = ?'
+        );
+        $stmt->execute([
+            trim($body['source_url'] ?? ''),
+            $body['name_override'] ?? null,
+            (int) ($body['sort_order'] ?? 0),
+            $id,
+        ]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM package_products WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    public static function refreshPrice(array $params): void
+    {
+        $id = (int) $params['id'];
+
+        $stmt = Database::connection()->prepare('SELECT source_url FROM package_products WHERE id = ?');
+        $stmt->execute([$id]);
+        $product = $stmt->fetch();
+
+        if (!$product) {
+            Http::error('Produkt nicht gefunden', 404);
+        }
+
+        self::applyScrape($id, $product['source_url']);
+        self::returnProduct($id);
+    }
+
+    private static function applyScrape(int $id, string $sourceUrl): void
+    {
+        $result = self::scraper()->scrape($sourceUrl);
+        $db = Database::connection();
+
+        if ($result['ok']) {
+            $stmt = $db->prepare(
+                'UPDATE package_products
+                 SET scraped_name = ?, scraped_price = ?, scraped_currency = ?, scraped_image_url = ?,
+                     price_updated_at = NOW(), scrape_status = "ok", scrape_error = NULL
+                 WHERE id = ?'
+            );
+            $stmt->execute([$result['name'], $result['price'], $result['currency'], $result['image'], $id]);
+        } else {
+            $stmt = $db->prepare(
+                'UPDATE package_products SET scrape_status = "error", scrape_error = ? WHERE id = ?'
+            );
+            $stmt->execute([$result['error'], $id]);
+        }
+    }
+
+    private static function returnProduct(int $id): void
+    {
+        $stmt = Database::connection()->prepare(
+            'SELECT id, package_id, source_url, name_override, scraped_name, scraped_price, scraped_currency,
+                    scraped_image_url, price_updated_at, scrape_status, scrape_error, sort_order
+             FROM package_products WHERE id = ?'
+        );
+        $stmt->execute([$id]);
+        Http::send($stmt->fetch());
+    }
+}
diff --git a/hifi/api/src/Controllers/SchemaController.php b/hifi/api/src/Controllers/SchemaController.php
new file mode 100644
index 0000000..912a015
--- /dev/null
+++ b/hifi/api/src/Controllers/SchemaController.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use App\Support\Schema;
+
+class SchemaController
+{
+    public static function check(): void
+    {
+        Http::send(self::buildReport());
+    }
+
+    public static function migrate(): void
+    {
+        $db = Database::connection();
+        $existingTables = self::existingTables($db);
+        $actions = [];
+
+        foreach (Schema::CREATE_STATEMENTS as $table => $createSql) {
+            if (!in_array($table, $existingTables, true)) {
+                try {
+                    $db->exec($createSql);
+                    $actions[] = "Tabelle `$table` angelegt";
+                } catch (\Throwable $e) {
+                    $actions[] = "FEHLER beim Anlegen von `$table`: " . $e->getMessage();
+                }
+                continue;
+            }
+
+            $existingColumns = self::existingColumns($db, $table);
+            foreach (Schema::COLUMNS[$table] ?? [] as $column => $definition) {
+                if ($column === 'id' || in_array($column, $existingColumns, true)) {
+                    continue;
+                }
+                try {
+                    $db->exec("ALTER TABLE `$table` ADD COLUMN `$column` $definition");
+                    $actions[] = "Spalte `$table`.`$column` ergänzt";
+                } catch (\Throwable $e) {
+                    $actions[] = "FEHLER bei `$table`.`$column`: " . $e->getMessage();
+                }
+            }
+        }
+
+        Http::send(['ok' => true, 'actions' => $actions, 'report' => self::buildReport()]);
+    }
+
+    private static function buildReport(): array
+    {
+        $db = Database::connection();
+        $existingTables = self::existingTables($db);
+
+        $tables = [];
+        $allOk = true;
+
+        foreach (Schema::CREATE_STATEMENTS as $table => $createSql) {
+            $exists = in_array($table, $existingTables, true);
+            $missingColumns = [];
+
+            if ($exists) {
+                $existingColumns = self::existingColumns($db, $table);
+                foreach (array_keys(Schema::COLUMNS[$table] ?? []) as $column) {
+                    if ($column !== 'id' && !in_array($column, $existingColumns, true)) {
+                        $missingColumns[] = $column;
+                    }
+                }
+            }
+
+            $tableOk = $exists && count($missingColumns) === 0;
+            if (!$tableOk) {
+                $allOk = false;
+            }
+
+            $tables[] = [
+                'table' => $table,
+                'exists' => $exists,
+                'missing_columns' => $missingColumns,
+                'ok' => $tableOk,
+            ];
+        }
+
+        return ['ok' => $allOk, 'tables' => $tables];
+    }
+
+    /** @return string[] */
+    private static function existingTables(\PDO $db): array
+    {
+        $stmt = $db->query('SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = DATABASE()');
+        return $stmt->fetchAll(\PDO::FETCH_COLUMN);
+    }
+
+    /** @return string[] */
+    private static function existingColumns(\PDO $db, string $table): array
+    {
+        $stmt = $db->prepare('SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ?');
+        $stmt->execute([$table]);
+        return $stmt->fetchAll(\PDO::FETCH_COLUMN);
+    }
+}
diff --git a/hifi/api/src/Controllers/ServiceController.php b/hifi/api/src/Controllers/ServiceController.php
new file mode 100644
index 0000000..759d913
--- /dev/null
+++ b/hifi/api/src/Controllers/ServiceController.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+
+class ServiceController
+{
+    public static function index(): void
+    {
+        $stmt = Database::connection()->query(
+            'SELECT id, icon_name, title, description, image_path, cta_label, cta_url, sort_order
+             FROM services ORDER BY sort_order, title'
+        );
+        Http::send($stmt->fetchAll());
+    }
+
+    public static function store(): void
+    {
+        $body = Http::jsonBody();
+        [$iconName, $title, $description] = self::validate($body);
+
+        $db = Database::connection();
+        $stmt = $db->prepare(
+            'INSERT INTO services (icon_name, title, description, image_path, cta_label, cta_url, sort_order)
+             VALUES (?, ?, ?, ?, ?, ?, ?)'
+        );
+        $stmt->execute([
+            $iconName,
+            $title,
+            $description,
+            $body['image_path'] ?? null,
+            $body['cta_label'] ?? null,
+            $body['cta_url'] ?? null,
+            (int) ($body['sort_order'] ?? 0),
+        ]);
+
+        Http::send(['id' => (int) $db->lastInsertId()], 201);
+    }
+
+    public static function update(array $params): void
+    {
+        $id = (int) $params['id'];
+        $body = Http::jsonBody();
+        [$iconName, $title, $description] = self::validate($body);
+
+        $stmt = Database::connection()->prepare(
+            'UPDATE services SET icon_name = ?, title = ?, description = ?, image_path = ?, cta_label = ?, cta_url = ?, sort_order = ?
+             WHERE id = ?'
+        );
+        $stmt->execute([
+            $iconName,
+            $title,
+            $description,
+            $body['image_path'] ?? null,
+            $body['cta_label'] ?? null,
+            $body['cta_url'] ?? null,
+            (int) ($body['sort_order'] ?? 0),
+            $id,
+        ]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function destroy(array $params): void
+    {
+        $stmt = Database::connection()->prepare('DELETE FROM services WHERE id = ?');
+        $stmt->execute([(int) $params['id']]);
+        Http::send(['ok' => true]);
+    }
+
+    private static function validate(array $body): array
+    {
+        $iconName = trim($body['icon_name'] ?? '');
+        $title = trim($body['title'] ?? '');
+        $description = trim($body['description'] ?? '');
+
+        if ($iconName === '' || $title === '' || $description === '') {
+            Http::error('Icon, Name und Beschreibung sind erforderlich', 422);
+        }
+
+        return [$iconName, $title, $description];
+    }
+}
diff --git a/hifi/api/src/Controllers/SettingsController.php b/hifi/api/src/Controllers/SettingsController.php
new file mode 100644
index 0000000..372faaf
--- /dev/null
+++ b/hifi/api/src/Controllers/SettingsController.php
@@ -0,0 +1,203 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Support\Http;
+use PDO;
+
+class SettingsController
+{
+    // Nur diese Spalten pro Tabelle werden exportiert/importiert – schützt vor
+    // manipulierten Spaltennamen in Import-Dateien und erlaubt trotzdem, dass
+    // Exporte aus älteren/neueren Versionen (mit weniger/mehr Spalten) importiert
+    // werden können (fehlende Spalten bekommen einfach ihren DB-Standardwert).
+    private const TABLE_COLUMNS = [
+        'brands' => ['id', 'name', 'slug', 'sort_order', 'created_at', 'updated_at'],
+        'car_models' => ['id', 'brand_id', 'name', 'slug', 'sort_order', 'created_at', 'updated_at'],
+        'packages' => ['id', 'car_model_id', 'name', 'slug', 'description', 'markup_type', 'markup_value', 'sort_order', 'created_at', 'updated_at'],
+        'package_products' => ['id', 'package_id', 'source_url', 'name_override', 'scraped_name', 'scraped_price', 'scraped_currency', 'scraped_image_url', 'price_updated_at', 'scrape_status', 'scrape_error', 'sort_order', 'created_at', 'updated_at'],
+        'package_upgrades' => ['id', 'package_id', 'name', 'description', 'price', 'sort_order', 'created_at', 'updated_at'],
+        'services' => ['id', 'icon_name', 'title', 'description', 'image_path', 'cta_label', 'cta_url', 'sort_order', 'created_at', 'updated_at'],
+    ];
+
+    private const UPLOADS_URL_PREFIX = '/hifi/api/uploads/';
+
+    public static function exportData(): void
+    {
+        $db = Database::connection();
+        $data = [];
+        foreach (array_keys(self::TABLE_COLUMNS) as $table) {
+            $data[$table] = $db->query("SELECT * FROM `$table`")->fetchAll();
+        }
+
+        $images = [];
+        foreach (['services' => 'image_path'] as $table => $column) {
+            foreach ($data[$table] as $row) {
+                self::collectImage($row[$column] ?? null, $images);
+            }
+        }
+
+        $payload = [
+            'app' => 'hifiplanet',
+            'export_version' => 1,
+            'exported_at' => date('c'),
+            'data' => $data,
+            'images' => $images,
+        ];
+
+        $filename = 'hifiplanet-export-' . date('Y-m-d_His') . '.json';
+        header('Content-Type: application/json; charset=utf-8');
+        header('Content-Disposition: attachment; filename="' . $filename . '"');
+        echo json_encode($payload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+        exit;
+    }
+
+    public static function importData(): void
+    {
+        if (!empty($_FILES['file']) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {
+            $raw = file_get_contents($_FILES['file']['tmp_name']);
+        } else {
+            $raw = file_get_contents('php://input');
+        }
+
+        $payload = json_decode((string) $raw, true);
+        if (!is_array($payload) || !isset($payload['data']) || !is_array($payload['data'])) {
+            Http::error('Ungültige oder beschädigte Import-Datei', 422);
+        }
+
+        $data = $payload['data'];
+        $images = is_array($payload['images'] ?? null) ? $payload['images'] : [];
+
+        $db = Database::connection();
+        $counts = [];
+
+        try {
+            $db->beginTransaction();
+            $db->exec('SET FOREIGN_KEY_CHECKS=0');
+
+            foreach (self::TABLE_COLUMNS as $table => $allowedColumns) {
+                $rows = is_array($data[$table] ?? null) ? $data[$table] : [];
+                $db->exec("DELETE FROM `$table`");
+                $counts[$table] = self::insertRows($db, $table, $allowedColumns, $rows);
+            }
+
+            self::restoreImages($images);
+
+            $db->exec('SET FOREIGN_KEY_CHECKS=1');
+            $db->commit();
+        } catch (\Throwable $e) {
+            $db->rollBack();
+            $db->exec('SET FOREIGN_KEY_CHECKS=1');
+            Http::error('Import fehlgeschlagen, es wurde nichts verändert: ' . $e->getMessage(), 500);
+        }
+
+        Http::send(['ok' => true, 'counts' => $counts, 'images_restored' => count($images)]);
+    }
+
+    public static function resetServicesToDefaults(): void
+    {
+        $db = Database::connection();
+        $defaults = self::defaultServices();
+
+        $db->exec('DELETE FROM services');
+        $stmt = $db->prepare(
+            'INSERT INTO services (icon_name, title, description, image_path, cta_label, cta_url, sort_order) VALUES (?,?,?,?,?,?,?)'
+        );
+        foreach ($defaults as $row) {
+            $stmt->execute($row);
+        }
+
+        Http::send(['ok' => true, 'count' => count($defaults)]);
+    }
+
+    /** Löscht Marken (Foreign-Key-Kaskade räumt Modelle, Pakete, Produkte & Upgrades automatisch mit auf). */
+    public static function resetCatalog(): void
+    {
+        $db = Database::connection();
+        $brandCount = (int) $db->query('SELECT COUNT(*) FROM brands')->fetchColumn();
+        $db->exec('DELETE FROM brands');
+        Http::send(['ok' => true, 'brands_removed' => $brandCount]);
+    }
+
+    public static function resetAll(): void
+    {
+        $db = Database::connection();
+        $brandCount = (int) $db->query('SELECT COUNT(*) FROM brands')->fetchColumn();
+        $db->exec('DELETE FROM brands');
+
+        $defaults = self::defaultServices();
+        $db->exec('DELETE FROM services');
+        $stmt = $db->prepare(
+            'INSERT INTO services (icon_name, title, description, image_path, cta_label, cta_url, sort_order) VALUES (?,?,?,?,?,?,?)'
+        );
+        foreach ($defaults as $row) {
+            $stmt->execute($row);
+        }
+
+        Http::send(['ok' => true, 'brands_removed' => $brandCount, 'services_reset' => count($defaults)]);
+    }
+
+    /** @param string[] $allowedColumns @param array<int,array<string,mixed>> $rows */
+    private static function insertRows(PDO $db, string $table, array $allowedColumns, array $rows): int
+    {
+        if (!$rows) {
+            return 0;
+        }
+
+        $columns = array_values(array_intersect(array_keys($rows[0]), $allowedColumns));
+        if (!$columns) {
+            return 0;
+        }
+
+        $columnList = '`' . implode('`,`', $columns) . '`';
+        $placeholders = '(' . implode(',', array_fill(0, count($columns), '?')) . ')';
+        $stmt = $db->prepare("INSERT INTO `$table` ($columnList) VALUES $placeholders");
+
+        foreach ($rows as $row) {
+            $values = array_map(fn($col) => $row[$col] ?? null, $columns);
+            $stmt->execute($values);
+        }
+
+        return count($rows);
+    }
+
+    private static function collectImage(?string $path, array &$images): void
+    {
+        if (!$path || isset($images[$path]) || !str_starts_with($path, self::UPLOADS_URL_PREFIX)) {
+            return;
+        }
+        $filename = basename($path);
+        $fullPath = __DIR__ . '/../../uploads/' . $filename;
+        if (is_file($fullPath)) {
+            $images[$path] = base64_encode((string) file_get_contents($fullPath));
+        }
+    }
+
+    /** @param array<string,string> $images */
+    private static function restoreImages(array $images): void
+    {
+        $uploadsDir = __DIR__ . '/../../uploads';
+        foreach ($images as $path => $base64) {
+            $filename = basename((string) $path);
+            if ($filename === '' || str_contains($filename, '..')) {
+                continue;
+            }
+            file_put_contents($uploadsDir . '/' . $filename, base64_decode((string) $base64));
+        }
+    }
+
+    private static function defaultServices(): array
+    {
+        return [
+            ['car', 'Car-Hifi', 'Individuelle Sound-Umbauten vom dezenten Upgrade bis zum kompromisslosen High-End-System – konfigurierbar direkt auf unserer Seite.', self::UPLOADS_URL_PREFIX . 'seed-leistung-car-hifi.jpg', 'Fahrzeug konfigurieren', '/fahrzeuge', 0],
+            ['caravan', 'Wohnmobil & Caravan', 'Sound- und Elektronik-Lösungen speziell für Reisemobile und Caravans – reversibel oder fest verbaut.', self::UPLOADS_URL_PREFIX . 'seed-leistung-wohnmobil.jpg', null, null, 1],
+            ['car-front', 'Oldtimer', 'Zeitgemäßer Klang für Klassiker – wir modernisieren die Anlage, ohne den Charakter deines Oldtimers zu verlieren.', self::UPLOADS_URL_PREFIX . 'seed-leistung-oldtimer.jpg', null, null, 2],
+            ['cog', 'CNC Zerspanen', 'Fräsen, Bohren, Schneiden und Schleifen auf einer Fläche von 1500 × 3000 mm – für Prototypen, Kleinserien und Großauflagen. Massivholz, Verbundwerkstoffe, Plattenmaterial und mehr.', self::UPLOADS_URL_PREFIX . 'seed-leistung-cnc-zerspanen.jpg', null, null, 3],
+            ['zap', 'CNC Lasertechnik', 'Präzises Laserschneiden und -gravieren für Leder, Glas, Acryl, Holz, Karton und mehr – für Einzelstücke ebenso wie Serienfertigung.', self::UPLOADS_URL_PREFIX . 'seed-leistung-cnc-laser.jpg', null, null, 4],
+            ['boxes', '3D-Druck', 'Über 20 Drucker (FDM & SLA) für individuelle Halterungen, Blenden und Kleinserien – Fertigung meist in 1–3 Tagen, auf Wunsch auch farbig.', self::UPLOADS_URL_PREFIX . 'seed-leistung-3d-druck.jpg', null, null, 5],
+            ['shield-alert', 'Alarmanlagen', 'Zuverlässiger Diebstahlschutz für dein Fahrzeug, abgestimmt auf deine Ansprüche und dein Budget.', self::UPLOADS_URL_PREFIX . 'seed-leistung-alarmanlagen.jpg', null, null, 6],
+            ['video', 'Dash Cams', 'Beweissichere Aufzeichnung fürs Auto – wir beraten dich zur passenden Kamera und übernehmen den unauffälligen Einbau.', self::UPLOADS_URL_PREFIX . 'seed-leistung-dashcam.jpg', null, null, 7],
+        ];
+    }
+}
diff --git a/hifi/api/src/Controllers/TwoFactorController.php b/hifi/api/src/Controllers/TwoFactorController.php
new file mode 100644
index 0000000..17b6d21
--- /dev/null
+++ b/hifi/api/src/Controllers/TwoFactorController.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Config\Database;
+use App\Middleware\AuthMiddleware;
+use App\Support\Http;
+use App\Support\RecoveryCodes;
+use App\Support\Totp;
+
+class TwoFactorController
+{
+    public static function setup(): void
+    {
+        AuthMiddleware::requireAdmin();
+        $username = $_SESSION['admin_username'];
+
+        $secret = Totp::generateSecret();
+        $_SESSION['pending_2fa_secret'] = $secret;
+
+        Http::send([
+            'secret' => $secret,
+            'otpauth_url' => Totp::provisioningUri($secret, $username),
+        ]);
+    }
+
+    public static function enable(): void
+    {
+        $userId = AuthMiddleware::requireAdmin();
+        $body = Http::jsonBody();
+        $code = trim($body['code'] ?? '');
+
+        if (empty($_SESSION['pending_2fa_secret'])) {
+            Http::error('Bitte zuerst die 2FA-Einrichtung starten', 400);
+        }
+        $secret = $_SESSION['pending_2fa_secret'];
+
+        if (!Totp::verifyCode($secret, $code)) {
+            Http::error('Code ungültig. Bitte erneut versuchen.', 422);
+        }
+
+        $recoveryCodes = RecoveryCodes::generate();
+        $hashes = RecoveryCodes::hashAll($recoveryCodes);
+
+        $stmt = Database::connection()->prepare(
+            'UPDATE admin_users SET two_factor_secret = ?, two_factor_enabled = 1, two_factor_recovery_codes = ? WHERE id = ?'
+        );
+        $stmt->execute([$secret, json_encode($hashes), $userId]);
+
+        unset($_SESSION['pending_2fa_secret']);
+
+        Http::send(['ok' => true, 'recovery_codes' => $recoveryCodes]);
+    }
+
+    public static function disable(): void
+    {
+        $userId = AuthMiddleware::requireAdmin();
+        $body = Http::jsonBody();
+        $password = (string) ($body['password'] ?? '');
+
+        $stmt = Database::connection()->prepare('SELECT password_hash FROM admin_users WHERE id = ?');
+        $stmt->execute([$userId]);
+        $user = $stmt->fetch();
+
+        if (!$user || !password_verify($password, $user['password_hash'])) {
+            Http::error('Passwort falsch', 401);
+        }
+
+        $update = Database::connection()->prepare(
+            'UPDATE admin_users SET two_factor_secret = NULL, two_factor_enabled = 0, two_factor_recovery_codes = NULL WHERE id = ?'
+        );
+        $update->execute([$userId]);
+
+        Http::send(['ok' => true]);
+    }
+
+    public static function regenerateRecoveryCodes(): void
+    {
+        $userId = AuthMiddleware::requireAdmin();
+        $body = Http::jsonBody();
+        $password = (string) ($body['password'] ?? '');
+
+        $stmt = Database::connection()->prepare(
+            'SELECT password_hash, two_factor_enabled FROM admin_users WHERE id = ?'
+        );
+        $stmt->execute([$userId]);
+        $user = $stmt->fetch();
+
+        if (!$user || !password_verify($password, $user['password_hash'])) {
+            Http::error('Passwort falsch', 401);
+        }
+        if (!$user['two_factor_enabled']) {
+            Http::error('2FA ist nicht aktiv', 400);
+        }
+
+        $recoveryCodes = RecoveryCodes::generate();
+        $hashes = RecoveryCodes::hashAll($recoveryCodes);
+
+        $update = Database::connection()->prepare('UPDATE admin_users SET two_factor_recovery_codes = ? WHERE id = ?');
+        $update->execute([json_encode($hashes), $userId]);
+
+        Http::send(['ok' => true, 'recovery_codes' => $recoveryCodes]);
+    }
+}
diff --git a/hifi/api/src/Controllers/UploadController.php b/hifi/api/src/Controllers/UploadController.php
new file mode 100644
index 0000000..2a341d2
--- /dev/null
+++ b/hifi/api/src/Controllers/UploadController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Support\Http;
+
+class UploadController
+{
+    private const ALLOWED_MIME = [
+        'image/jpeg' => 'jpg',
+        'image/png' => 'png',
+        'image/webp' => 'webp',
+    ];
+    private const MAX_BYTES = 5 * 1024 * 1024;
+
+    public static function store(): void
+    {
+        if (empty($_FILES['file'])) {
+            Http::error('Keine Datei übermittelt', 422);
+        }
+
+        $file = $_FILES['file'];
+        if ($file['error'] !== UPLOAD_ERR_OK) {
+            Http::error('Upload fehlgeschlagen', 422);
+        }
+        if ($file['size'] > self::MAX_BYTES) {
+            Http::error('Datei zu groß (max. 5 MB)', 422);
+        }
+
+        $mime = mime_content_type($file['tmp_name']);
+        if (!isset(self::ALLOWED_MIME[$mime])) {
+            Http::error('Nur JPG, PNG oder WEBP erlaubt', 422);
+        }
+
+        $extension = self::ALLOWED_MIME[$mime];
+        $filename = bin2hex(random_bytes(16)) . '.' . $extension;
+        $destination = __DIR__ . '/../../uploads/' . $filename;
+
+        if (!move_uploaded_file($file['tmp_name'], $destination)) {
+            Http::error('Datei konnte nicht gespeichert werden', 500);
+        }
+
+        Http::send(['path' => '/hifi/api/uploads/' . $filename], 201);
+    }
+}
diff --git a/hifi/api/src/Middleware/AuthMiddleware.php b/hifi/api/src/Middleware/AuthMiddleware.php
new file mode 100644
index 0000000..b291208
--- /dev/null
+++ b/hifi/api/src/Middleware/AuthMiddleware.php
@@ -0,0 +1,96 @@
+<?php
+
+namespace App\Middleware;
+
+use App\Config\Database;
+use App\Support\Http;
+
+class AuthMiddleware
+{
+    public static function requireAdmin(): int
+    {
+        if (empty($_SESSION['admin_id'])) {
+            Http::error('Nicht angemeldet', 401);
+        }
+        return (int) $_SESSION['admin_id'];
+    }
+
+    public static function requirePermission(string $permission): int
+    {
+        $userId = self::requireAdmin();
+        if (!self::userHasPermission($userId, $permission)) {
+            Http::error('Keine Berechtigung für diese Aktion', 403);
+        }
+        return $userId;
+    }
+
+    /** @param string[] $permissions */
+    public static function requireAnyPermission(array $permissions): int
+    {
+        $userId = self::requireAdmin();
+        foreach ($permissions as $permission) {
+            if (self::userHasPermission($userId, $permission)) {
+                return $userId;
+            }
+        }
+        Http::error('Keine Berechtigung für diese Aktion', 403);
+    }
+
+    public static function isSuperAdmin(int $userId): bool
+    {
+        $stmt = Database::connection()->prepare('SELECT is_super_admin FROM admin_users WHERE id = ?');
+        $stmt->execute([$userId]);
+        $user = $stmt->fetch();
+        return (bool) ($user['is_super_admin'] ?? false);
+    }
+
+    public static function userHasPermission(int $userId, string $permission): bool
+    {
+        if (self::isSuperAdmin($userId)) {
+            return true;
+        }
+
+        $db = Database::connection();
+
+        $stmt = $db->prepare('SELECT 1 FROM admin_user_permissions WHERE admin_user_id = ? AND permission = ?');
+        $stmt->execute([$userId, $permission]);
+        if ($stmt->fetch()) {
+            return true;
+        }
+
+        $stmt = $db->prepare(
+            'SELECT 1 FROM admin_user_groups aug
+             JOIN permission_group_permissions pgp ON pgp.permission_group_id = aug.permission_group_id
+             WHERE aug.admin_user_id = ? AND pgp.permission = ?'
+        );
+        $stmt->execute([$userId, $permission]);
+        return (bool) $stmt->fetch();
+    }
+
+    /** @return string[] */
+    public static function effectivePermissions(int $userId): array
+    {
+        if (self::isSuperAdmin($userId)) {
+            return array_keys(\App\Support\Permissions::CATALOG);
+        }
+
+        $db = Database::connection();
+
+        $direct = $db->prepare('SELECT permission FROM admin_user_permissions WHERE admin_user_id = ?');
+        $direct->execute([$userId]);
+
+        $fromGroups = $db->prepare(
+            'SELECT DISTINCT pgp.permission FROM admin_user_groups aug
+             JOIN permission_group_permissions pgp ON pgp.permission_group_id = aug.permission_group_id
+             WHERE aug.admin_user_id = ?'
+        );
+        $fromGroups->execute([$userId]);
+
+        $perms = array_unique(array_merge(
+            $direct->fetchAll(\PDO::FETCH_COLUMN),
+            $fromGroups->fetchAll(\PDO::FETCH_COLUMN)
+        ));
+
+        return array_values($perms);
+    }
+}
diff --git a/hifi/api/src/Router.php b/hifi/api/src/Router.php
new file mode 100644
index 0000000..53f824f
--- /dev/null
+++ b/hifi/api/src/Router.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App;
+
+class Router
+{
+    private array $routes = [];
+
+    public function add(string $method, string $pattern, callable $handler): void
+    {
+        $regex = preg_replace('#\{([a-zA-Z_]+)\}#', '(?P<$1>[^/]+)', $pattern);
+        $this->routes[] = [
+            'method' => strtoupper($method),
+            'regex' => '#^' . $regex . '$#',
+            'handler' => $handler,
+        ];
+    }
+
+    public function get(string $pattern, callable $handler): void
+    {
+        $this->add('GET', $pattern, $handler);
+    }
+
+    public function post(string $pattern, callable $handler): void
+    {
+        $this->add('POST', $pattern, $handler);
+    }
+
+    public function put(string $pattern, callable $handler): void
+    {
+        $this->add('PUT', $pattern, $handler);
+    }
+
+    public function patch(string $pattern, callable $handler): void
+    {
+        $this->add('PATCH', $pattern, $handler);
+    }
+
+    public function delete(string $pattern, callable $handler): void
+    {
+        $this->add('DELETE', $pattern, $handler);
+    }
+
+    public function dispatch(string $method, string $path): void
+    {
+        $method = strtoupper($method);
+        $matchedPath = false;
+
+        foreach ($this->routes as $route) {
+            if (!preg_match($route['regex'], $path, $matches)) {
+                continue;
+            }
+
+            $matchedPath = true;
+
+            if ($route['method'] !== $method) {
+                continue;
+            }
+
+            $params = array_filter($matches, fn($key) => !is_int($key), ARRAY_FILTER_USE_KEY);
+            call_user_func($route['handler'], $params);
+            return;
+        }
+
+        http_response_code($matchedPath ? 405 : 404);
+        echo json_encode(['error' => $matchedPath ? 'Methode nicht erlaubt' : 'Nicht gefunden']);
+    }
+}
diff --git a/hifi/api/src/Services/Audio4CarsScraper.php b/hifi/api/src/Services/Audio4CarsScraper.php
new file mode 100644
index 0000000..605180b
--- /dev/null
+++ b/hifi/api/src/Services/Audio4CarsScraper.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Services;
+
+use DOMDocument;
+use DOMXPath;
+
+class Audio4CarsScraper
+{
+    private int $timeout;
+    private string $userAgent;
+
+    public function __construct(int $timeout = 12, string $userAgent = 'Mozilla/5.0')
+    {
+        $this->timeout = $timeout;
+        $this->userAgent = $userAgent;
+    }
+
+    /**
+     * @return array{ok: bool, name?: string, price?: float, currency?: string, image?: ?string, error?: string}
+     */
+    public function scrape(string $url): array
+    {
+        if (!preg_match('#^https://www\.audio4cars\.de/#', $url)) {
+            return ['ok' => false, 'error' => 'URL muss auf www.audio4cars.de zeigen'];
+        }
+
+        $html = $this->fetch($url);
+        if ($html === null) {
+            return ['ok' => false, 'error' => 'Seite konnte nicht geladen werden'];
+        }
+
+        $dom = new DOMDocument();
+        libxml_use_internal_errors(true);
+        $dom->loadHTML($html);
+        libxml_clear_errors();
+        $xpath = new DOMXPath($dom);
+
+        $title = $this->firstText($xpath, "//h1[contains(@class,'product_title')]");
+        if ($title === null) {
+            $title = $this->firstText($xpath, '//meta[@property="og:title"]/@content');
+        }
+
+        $priceText = $this->firstText(
+            $xpath,
+            "(//p[contains(@class,'price')]//ins//span[contains(@class,'woocommerce-Price-amount')]//bdi)[1]"
+        );
+        if ($priceText === null) {
+            $priceText = $this->firstText(
+                $xpath,
+                "(//p[contains(@class,'price')]//span[contains(@class,'woocommerce-Price-amount')]//bdi)[1]"
+            );
+        }
+
+        if ($title === null || $priceText === null) {
+            return ['ok' => false, 'error' => 'Preis/Titel konnten nicht gefunden werden (Seitenstruktur geändert?)'];
+        }
+
+        $price = $this->parseGermanPrice($priceText);
+        if ($price === null) {
+            return ['ok' => false, 'error' => 'Preis konnte nicht geparst werden: ' . $priceText];
+        }
+
+        $image = $this->firstText($xpath, '//meta[@property="og:image"]/@content');
+
+        return [
+            'ok' => true,
+            'name' => trim($title),
+            'price' => $price,
+            'currency' => 'EUR',
+            'image' => $image,
+        ];
+    }
+
+    private function fetch(string $url): ?string
+    {
+        $ch = curl_init($url);
+        curl_setopt_array($ch, [
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_FOLLOWLOCATION => true,
+            CURLOPT_MAXREDIRS => 5,
+            CURLOPT_TIMEOUT => $this->timeout,
+            CURLOPT_USERAGENT => $this->userAgent,
+            CURLOPT_SSL_VERIFYPEER => true,
+        ]);
+        $body = curl_exec($ch);
+        $status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        $error = curl_error($ch);
+        curl_close($ch);
+
+        if ($body === false || $error !== '' || $status >= 400) {
+            return null;
+        }
+
+        return $body;
+    }
+
+    private function firstText(DOMXPath $xpath, string $query): ?string
+    {
+        $nodes = $xpath->query($query);
+        if ($nodes === false || $nodes->length === 0) {
+            return null;
+        }
+        return trim($nodes->item(0)->textContent);
+    }
+
+    private function parseGermanPrice(string $text): ?float
+    {
+        $clean = preg_replace('/[^0-9,.]/', '', $text);
+        $clean = str_replace('.', '', $clean);
+        $clean = str_replace(',', '.', $clean);
+
+        return is_numeric($clean) ? (float) $clean : null;
+    }
+}
diff --git a/hifi/api/src/Support/Base32.php b/hifi/api/src/Support/Base32.php
new file mode 100644
index 0000000..d2c2c4f
--- /dev/null
+++ b/hifi/api/src/Support/Base32.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Support;
+
+/** RFC 4648 Base32 – wird für TOTP-Secrets im Google-Authenticator-Format gebraucht. */
+class Base32
+{
+    private const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
+    public static function encode(string $binary): string
+    {
+        if ($binary === '') {
+            return '';
+        }
+
+        $bits = '';
+        foreach (str_split($binary) as $char) {
+            $bits .= str_pad(decbin(ord($char)), 8, '0', STR_PAD_LEFT);
+        }
+
+        $output = '';
+        foreach (str_split($bits, 5) as $chunk) {
+            $chunk = str_pad($chunk, 5, '0', STR_PAD_RIGHT);
+            $output .= self::ALPHABET[bindec($chunk)];
+        }
+
+        return $output;
+    }
+
+    public static function decode(string $base32): string
+    {
+        $base32 = strtoupper(preg_replace('/[^A-Z2-7]/i', '', $base32));
+
+        $bits = '';
+        foreach (str_split($base32) as $char) {
+            $pos = strpos(self::ALPHABET, $char);
+            if ($pos === false) {
+                continue;
+            }
+            $bits .= str_pad(decbin($pos), 5, '0', STR_PAD_LEFT);
+        }
+
+        $binary = '';
+        foreach (str_split($bits, 8) as $byte) {
+            if (strlen($byte) < 8) {
+                break;
+            }
+            $binary .= chr(bindec($byte));
+        }
+
+        return $binary;
+    }
+}
diff --git a/hifi/api/src/Support/Http.php b/hifi/api/src/Support/Http.php
new file mode 100644
index 0000000..5ac1962
--- /dev/null
+++ b/hifi/api/src/Support/Http.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Support;
+
+class Http
+{
+    public static function jsonBody(): array
+    {
+        $raw = file_get_contents('php://input');
+        if ($raw === false || $raw === '') {
+            return [];
+        }
+        $data = json_decode($raw, true);
+        return is_array($data) ? $data : [];
+    }
+
+    public static function send($data, int $status = 200): void
+    {
+        http_response_code($status);
+        header('Content-Type: application/json; charset=utf-8');
+        echo json_encode($data);
+        exit;
+    }
+
+    public static function error(string $message, int $status = 400): void
+    {
+        self::send(['error' => $message], $status);
+    }
+}
diff --git a/hifi/api/src/Support/Permissions.php b/hifi/api/src/Support/Permissions.php
new file mode 100644
index 0000000..60013e7
--- /dev/null
+++ b/hifi/api/src/Support/Permissions.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Support;
+
+class Permissions
+{
+    public const CATALOG = [
+        'brands.manage' => 'Marken verwalten',
+        'models.manage' => 'Modelle verwalten',
+        'packages.manage' => 'Pakete, Produkte & Upgrades verwalten',
+        'services.manage' => 'Leistungen verwalten',
+        'contact.manage' => 'Kontaktanfragen ansehen & bearbeiten',
+        'contact.delete' => 'Kontaktanfragen löschen',
+        'users.manage' => 'Benutzer verwalten',
+        'permission_groups.manage' => 'Berechtigungsgruppen verwalten',
+        'settings.manage' => 'Systemeinstellungen (Export/Import/Zurücksetzen) verwalten',
+        'maintenance.bypass' => 'Wartungsmodus umgehen (Inhalte trotzdem sehen)',
+    ];
+
+    public static function isValid(string $permission): bool
+    {
+        return isset(self::CATALOG[$permission]);
+    }
+
+    /** @return string[] */
+    public static function sanitizeList(array $permissions): array
+    {
+        return array_values(array_intersect(array_unique($permissions), array_keys(self::CATALOG)));
+    }
+}
diff --git a/hifi/api/src/Support/RecoveryCodes.php b/hifi/api/src/Support/RecoveryCodes.php
new file mode 100644
index 0000000..12ed322
--- /dev/null
+++ b/hifi/api/src/Support/RecoveryCodes.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Support;
+
+class RecoveryCodes
+{
+    private const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // ohne O/0/I/1 (Verwechslungsgefahr)
+
+    /** @return string[] Klartext-Codes – werden nur einmal angezeigt. */
+    public static function generate(int $count = 8): array
+    {
+        $codes = [];
+        for ($i = 0; $i < $count; $i++) {
+            $codes[] = self::randomCode() . '-' . self::randomCode();
+        }
+        return $codes;
+    }
+
+    private static function randomCode(): string
+    {
+        $out = '';
+        for ($i = 0; $i < 5; $i++) {
+            $out .= self::CHARS[random_int(0, strlen(self::CHARS) - 1)];
+        }
+        return $out;
+    }
+
+    /** @param string[] $plainCodes @return string[] Passwort-Hashes zur Speicherung. */
+    public static function hashAll(array $plainCodes): array
+    {
+        return array_map(fn($c) => password_hash($c, PASSWORD_DEFAULT), $plainCodes);
+    }
+
+    /**
+     * Prüft $code gegen die gespeicherten Hashes. Bei Treffer wird der Code verbraucht
+     * (Single-Use) und die reduzierte Hash-Liste zurückgegeben, sonst null.
+     *
+     * @param string[] $hashes
+     * @return string[]|null
+     */
+    public static function consume(array $hashes, string $code): ?array
+    {
+        $code = trim($code);
+        foreach ($hashes as $i => $hash) {
+            if (password_verify($code, $hash)) {
+                unset($hashes[$i]);
+                return array_values($hashes);
+            }
+        }
+        return null;
+    }
+}
diff --git a/hifi/api/src/Support/Schema.php b/hifi/api/src/Support/Schema.php
new file mode 100644
index 0000000..ef67548
--- /dev/null
+++ b/hifi/api/src/Support/Schema.php
@@ -0,0 +1,295 @@
+<?php
+
+namespace App\Support;
+
+/**
+ * Soll-Zustand der Datenbankstruktur für den aktuellen Code-Stand. Wird genutzt,
+ * um zu prüfen, ob eine (z. B. ältere) Live-Datenbank noch Tabellen oder Spalten
+ * vermissen lässt, und um diese bei Bedarf additiv nachzurüsten (nichts wird
+ * gelöscht oder verändert, was schon da ist).
+ */
+class Schema
+{
+    // Reihenfolge ist wichtig wegen Foreign-Key-Abhängigkeiten (erst referenzierte Tabellen).
+    public const CREATE_STATEMENTS = [
+        'admin_users' => "CREATE TABLE admin_users (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            username VARCHAR(64) NOT NULL UNIQUE,
+            password_hash VARCHAR(255) NOT NULL,
+            is_super_admin TINYINT(1) NOT NULL DEFAULT 0,
+            two_factor_secret VARCHAR(64) NULL,
+            two_factor_enabled TINYINT(1) NOT NULL DEFAULT 0,
+            two_factor_recovery_codes TEXT NULL,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB",
+
+        'app_settings' => "CREATE TABLE app_settings (
+            id INT PRIMARY KEY DEFAULT 1,
+            maintenance_global TINYINT(1) NOT NULL DEFAULT 0,
+            maintenance_global_message VARCHAR(500) NULL,
+            maintenance_services TINYINT(1) NOT NULL DEFAULT 0,
+            maintenance_services_message VARCHAR(500) NULL,
+            maintenance_vehicles TINYINT(1) NOT NULL DEFAULT 0,
+            maintenance_vehicles_message VARCHAR(500) NULL,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB",
+
+        'services' => "CREATE TABLE services (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            icon_name VARCHAR(100) NOT NULL,
+            title VARCHAR(150) NOT NULL,
+            description TEXT NOT NULL,
+            image_path VARCHAR(255) NULL,
+            cta_label VARCHAR(100) NULL,
+            cta_url VARCHAR(255) NULL,
+            sort_order INT NOT NULL DEFAULT 0,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB",
+
+        'permission_groups' => "CREATE TABLE permission_groups (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            name VARCHAR(100) NOT NULL UNIQUE,
+            description VARCHAR(255) NULL,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB",
+
+        'permission_group_permissions' => "CREATE TABLE permission_group_permissions (
+            permission_group_id INT NOT NULL,
+            permission VARCHAR(64) NOT NULL,
+            PRIMARY KEY (permission_group_id, permission),
+            CONSTRAINT fk_pgp_group FOREIGN KEY (permission_group_id) REFERENCES permission_groups(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'admin_user_permissions' => "CREATE TABLE admin_user_permissions (
+            admin_user_id INT NOT NULL,
+            permission VARCHAR(64) NOT NULL,
+            PRIMARY KEY (admin_user_id, permission),
+            CONSTRAINT fk_aup_user FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'admin_user_groups' => "CREATE TABLE admin_user_groups (
+            admin_user_id INT NOT NULL,
+            permission_group_id INT NOT NULL,
+            PRIMARY KEY (admin_user_id, permission_group_id),
+            CONSTRAINT fk_aug_user FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE CASCADE,
+            CONSTRAINT fk_aug_group FOREIGN KEY (permission_group_id) REFERENCES permission_groups(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'brands' => "CREATE TABLE brands (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            name VARCHAR(100) NOT NULL,
+            slug VARCHAR(120) NOT NULL UNIQUE,
+            sort_order INT NOT NULL DEFAULT 0,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB",
+
+        'car_models' => "CREATE TABLE car_models (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            brand_id INT NOT NULL,
+            name VARCHAR(100) NOT NULL,
+            slug VARCHAR(150) NOT NULL,
+            sort_order INT NOT NULL DEFAULT 0,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+            UNIQUE KEY uniq_brand_slug (brand_id, slug),
+            CONSTRAINT fk_car_models_brand FOREIGN KEY (brand_id) REFERENCES brands(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'packages' => "CREATE TABLE packages (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            car_model_id INT NOT NULL,
+            name VARCHAR(150) NOT NULL,
+            slug VARCHAR(170) NOT NULL,
+            description TEXT NULL,
+            markup_type ENUM('none','fixed','percent') NOT NULL DEFAULT 'none',
+            markup_value DECIMAL(10,2) NOT NULL DEFAULT 0,
+            sort_order INT NOT NULL DEFAULT 0,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+            UNIQUE KEY uniq_model_slug (car_model_id, slug),
+            CONSTRAINT fk_packages_model FOREIGN KEY (car_model_id) REFERENCES car_models(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'package_upgrades' => "CREATE TABLE package_upgrades (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            package_id INT NOT NULL,
+            name VARCHAR(150) NOT NULL,
+            description VARCHAR(255) NULL,
+            price DECIMAL(10,2) NOT NULL DEFAULT 0,
+            sort_order INT NOT NULL DEFAULT 0,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+            CONSTRAINT fk_upgrades_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'package_products' => "CREATE TABLE package_products (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            package_id INT NOT NULL,
+            source_url VARCHAR(500) NOT NULL,
+            name_override VARCHAR(255) NULL,
+            scraped_name VARCHAR(255) NULL,
+            scraped_price DECIMAL(10,2) NULL,
+            scraped_currency VARCHAR(8) NOT NULL DEFAULT 'EUR',
+            scraped_image_url VARCHAR(500) NULL,
+            price_updated_at DATETIME NULL,
+            scrape_status ENUM('pending','ok','error') NOT NULL DEFAULT 'pending',
+            scrape_error VARCHAR(255) NULL,
+            sort_order INT NOT NULL DEFAULT 0,
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+            CONSTRAINT fk_products_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB",
+
+        'contact_requests' => "CREATE TABLE contact_requests (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            name VARCHAR(150) NOT NULL,
+            email VARCHAR(150) NOT NULL,
+            phone VARCHAR(50) NULL,
+            message TEXT NULL,
+            brand_name VARCHAR(100) NULL,
+            model_name VARCHAR(100) NULL,
+            package_name VARCHAR(150) NULL,
+            product_name VARCHAR(255) NULL,
+            package_id INT NULL,
+            package_product_id INT NULL,
+            selected_upgrades TEXT NULL,
+            status ENUM('new','in_progress','done') NOT NULL DEFAULT 'new',
+            created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+            CONSTRAINT fk_contact_package FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE SET NULL,
+            CONSTRAINT fk_contact_product FOREIGN KEY (package_product_id) REFERENCES package_products(id) ON DELETE SET NULL
+        ) ENGINE=InnoDB",
+    ];
+
+    // Erwartete Spalten je Tabelle (ohne Primary Key / Unique / Foreign-Key-Klauseln –
+    // die werden nur bei der Tabellen-Neuanlage berücksichtigt, nicht beim Nachrüsten
+    // einzelner Spalten). Reihenfolge = Definitionsreihenfolge, "id" wird beim
+    // Spalten-Nachrüsten übersprungen (Primary Key kann nicht nachträglich per
+    // ADD COLUMN ergänzt werden, ist aber immer vorhanden, wenn die Tabelle existiert).
+    public const COLUMNS = [
+        'admin_users' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'username' => 'VARCHAR(64) NOT NULL',
+            'password_hash' => 'VARCHAR(255) NOT NULL',
+            'is_super_admin' => 'TINYINT(1) NOT NULL DEFAULT 0',
+            'two_factor_secret' => 'VARCHAR(64) NULL',
+            'two_factor_enabled' => 'TINYINT(1) NOT NULL DEFAULT 0',
+            'two_factor_recovery_codes' => 'TEXT NULL',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+        ],
+        'app_settings' => [
+            'id' => 'INT PRIMARY KEY DEFAULT 1',
+            'maintenance_global' => 'TINYINT(1) NOT NULL DEFAULT 0',
+            'maintenance_global_message' => 'VARCHAR(500) NULL',
+            'maintenance_services' => 'TINYINT(1) NOT NULL DEFAULT 0',
+            'maintenance_services_message' => 'VARCHAR(500) NULL',
+            'maintenance_vehicles' => 'TINYINT(1) NOT NULL DEFAULT 0',
+            'maintenance_vehicles_message' => 'VARCHAR(500) NULL',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'services' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'icon_name' => 'VARCHAR(100) NOT NULL',
+            'title' => 'VARCHAR(150) NOT NULL',
+            'description' => 'TEXT NOT NULL',
+            'image_path' => 'VARCHAR(255) NULL',
+            'cta_label' => 'VARCHAR(100) NULL',
+            'cta_url' => 'VARCHAR(255) NULL',
+            'sort_order' => 'INT NOT NULL DEFAULT 0',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'permission_groups' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'name' => 'VARCHAR(100) NOT NULL',
+            'description' => 'VARCHAR(255) NULL',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'permission_group_permissions' => [
+            'permission_group_id' => 'INT NOT NULL',
+            'permission' => 'VARCHAR(64) NOT NULL',
+        ],
+        'admin_user_permissions' => [
+            'admin_user_id' => 'INT NOT NULL',
+            'permission' => 'VARCHAR(64) NOT NULL',
+        ],
+        'admin_user_groups' => [
+            'admin_user_id' => 'INT NOT NULL',
+            'permission_group_id' => 'INT NOT NULL',
+        ],
+        'brands' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'name' => 'VARCHAR(100) NOT NULL',
+            'slug' => 'VARCHAR(120) NOT NULL',
+            'sort_order' => 'INT NOT NULL DEFAULT 0',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'car_models' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'brand_id' => 'INT NOT NULL',
+            'name' => 'VARCHAR(100) NOT NULL',
+            'slug' => 'VARCHAR(150) NOT NULL',
+            'sort_order' => 'INT NOT NULL DEFAULT 0',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'packages' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'car_model_id' => 'INT NOT NULL',
+            'name' => 'VARCHAR(150) NOT NULL',
+            'slug' => 'VARCHAR(170) NOT NULL',
+            'description' => 'TEXT NULL',
+            'markup_type' => "ENUM('none','fixed','percent') NOT NULL DEFAULT 'none'",
+            'markup_value' => 'DECIMAL(10,2) NOT NULL DEFAULT 0',
+            'sort_order' => 'INT NOT NULL DEFAULT 0',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'package_upgrades' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'package_id' => 'INT NOT NULL',
+            'name' => 'VARCHAR(150) NOT NULL',
+            'description' => 'VARCHAR(255) NULL',
+            'price' => 'DECIMAL(10,2) NOT NULL DEFAULT 0',
+            'sort_order' => 'INT NOT NULL DEFAULT 0',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'package_products' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'package_id' => 'INT NOT NULL',
+            'source_url' => 'VARCHAR(500) NOT NULL',
+            'name_override' => 'VARCHAR(255) NULL',
+            'scraped_name' => 'VARCHAR(255) NULL',
+            'scraped_price' => 'DECIMAL(10,2) NULL',
+            'scraped_currency' => "VARCHAR(8) NOT NULL DEFAULT 'EUR'",
+            'scraped_image_url' => 'VARCHAR(500) NULL',
+            'price_updated_at' => 'DATETIME NULL',
+            'scrape_status' => "ENUM('pending','ok','error') NOT NULL DEFAULT 'pending'",
+            'scrape_error' => 'VARCHAR(255) NULL',
+            'sort_order' => 'INT NOT NULL DEFAULT 0',
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+            'updated_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP',
+        ],
+        'contact_requests' => [
+            'id' => 'INT AUTO_INCREMENT PRIMARY KEY',
+            'name' => 'VARCHAR(150) NOT NULL',
+            'email' => 'VARCHAR(150) NOT NULL',
+            'phone' => 'VARCHAR(50) NULL',
+            'message' => 'TEXT NULL',
+            'brand_name' => 'VARCHAR(100) NULL',
+            'model_name' => 'VARCHAR(100) NULL',
+            'package_name' => 'VARCHAR(150) NULL',
+            'product_name' => 'VARCHAR(255) NULL',
+            'package_id' => 'INT NULL',
+            'package_product_id' => 'INT NULL',
+            'selected_upgrades' => 'TEXT NULL',
+            'status' => "ENUM('new','in_progress','done') NOT NULL DEFAULT 'new'",
+            'created_at' => 'DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP',
+        ],
+    ];
+}
diff --git a/hifi/api/src/Support/Slug.php b/hifi/api/src/Support/Slug.php
new file mode 100644
index 0000000..db15d6a
--- /dev/null
+++ b/hifi/api/src/Support/Slug.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Support;
+
+class Slug
+{
+    public static function make(string $text): string
+    {
+        $map = [
+            'ä' => 'ae', 'ö' => 'oe', 'ü' => 'ue', 'ß' => 'ss',
+            'Ä' => 'ae', 'Ö' => 'oe', 'Ü' => 'ue',
+        ];
+        $text = strtr($text, $map);
+        $text = strtolower($text);
+        $text = preg_replace('/[^a-z0-9]+/', '-', $text);
+        return trim($text, '-');
+    }
+}
diff --git a/hifi/api/src/Support/Totp.php b/hifi/api/src/Support/Totp.php
new file mode 100644
index 0000000..d264a9c
--- /dev/null
+++ b/hifi/api/src/Support/Totp.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Support;
+
+/** TOTP nach RFC 6238 (HMAC-SHA1, 6 Stellen, 30s-Schritt) – kompatibel mit Google Authenticator. */
+class Totp
+{
+    private const PERIOD = 30;
+    private const DIGITS = 6;
+
+    public static function generateSecret(): string
+    {
+        return Base32::encode(random_bytes(20));
+    }
+
+    public static function provisioningUri(string $secret, string $accountLabel, string $issuer = 'HifiPlanet'): string
+    {
+        $label = rawurlencode($issuer . ':' . $accountLabel);
+        return sprintf(
+            'otpauth://totp/%s?secret=%s&issuer=%s&algorithm=SHA1&digits=%d&period=%d',
+            $label,
+            $secret,
+            rawurlencode($issuer),
+            self::DIGITS,
+            self::PERIOD
+        );
+    }
+
+    public static function currentCode(string $secretBase32, ?int $timestamp = null): string
+    {
+        $timestamp ??= time();
+        $counter = intdiv($timestamp, self::PERIOD);
+        return self::codeForCounter($secretBase32, $counter);
+    }
+
+    public static function verifyCode(string $secretBase32, string $code, int $window = 1): bool
+    {
+        $code = preg_replace('/\s+/', '', $code);
+        if ($code === '' || $secretBase32 === '') {
+            return false;
+        }
+
+        $counter = intdiv(time(), self::PERIOD);
+        for ($i = -$window; $i <= $window; $i++) {
+            if (hash_equals(self::codeForCounter($secretBase32, $counter + $i), $code)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    private static function codeForCounter(string $secretBase32, int $counter): string
+    {
+        $secretRaw = Base32::decode($secretBase32);
+        $binaryCounter = pack('N*', 0, $counter);
+        $hash = hash_hmac('sha1', $binaryCounter, $secretRaw, true);
+
+        $offset = ord(substr($hash, -1)) & 0x0F;
+        $truncated = ((ord($hash[$offset]) & 0x7F) << 24)
+            | ((ord($hash[$offset + 1]) & 0xFF) << 16)
+            | ((ord($hash[$offset + 2]) & 0xFF) << 8)
+            | (ord($hash[$offset + 3]) & 0xFF);
+
+        $code = $truncated % (10 ** self::DIGITS);
+        return str_pad((string) $code, self::DIGITS, '0', STR_PAD_LEFT);
+    }
+}
diff --git a/hifi/api/uploads/.htaccess b/hifi/api/uploads/.htaccess
new file mode 100644
index 0000000..15c04dd
--- /dev/null
+++ b/hifi/api/uploads/.htaccess
@@ -0,0 +1,3 @@
+<FilesMatch "\.(php|phtml|php\d)$">
+    Require all denied
+</FilesMatch>
diff --git a/hifi/api/uploads/seed-leistung-3d-druck.jpg b/hifi/api/uploads/seed-leistung-3d-druck.jpg
new file mode 100644
index 0000000..c3b5e46
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-3d-druck.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-alarmanlagen.jpg b/hifi/api/uploads/seed-leistung-alarmanlagen.jpg
new file mode 100644
index 0000000..1ef0c56
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-alarmanlagen.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-car-hifi.jpg b/hifi/api/uploads/seed-leistung-car-hifi.jpg
new file mode 100644
index 0000000..0ebcb39
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-car-hifi.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-cnc-laser.jpg b/hifi/api/uploads/seed-leistung-cnc-laser.jpg
new file mode 100644
index 0000000..1929371
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-cnc-laser.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-cnc-zerspanen.jpg b/hifi/api/uploads/seed-leistung-cnc-zerspanen.jpg
new file mode 100644
index 0000000..9131087
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-cnc-zerspanen.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-dashcam.jpg b/hifi/api/uploads/seed-leistung-dashcam.jpg
new file mode 100644
index 0000000..72a4051
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-dashcam.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-oldtimer.jpg b/hifi/api/uploads/seed-leistung-oldtimer.jpg
new file mode 100644
index 0000000..59cd649
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-oldtimer.jpg differ
diff --git a/hifi/api/uploads/seed-leistung-wohnmobil.jpg b/hifi/api/uploads/seed-leistung-wohnmobil.jpg
new file mode 100644
index 0000000..dde654a
Binary files /dev/null and b/hifi/api/uploads/seed-leistung-wohnmobil.jpg differ

Cookie-Einstellungen

Wartungsarbeiten

Keine Berechtigung

Mein Konto

Passwort ändern

Zwei-Faktor-Authentifizierung

Benutzer

{editingId ? 'Benutzer bearbeiten' : 'Neuer Benutzer'}

Marken

{editingId ? 'Marke bearbeiten' : 'Neue Marke'}

Kontaktanfragen

Willkommen, {user?.username}!

Admin-Login

Bestätigungscode

Modelle

{editingId ? 'Modell bearbeiten' : 'Neues Modell'}

Produkte im Paket

Optionale Upgrades

{editingId ? 'Upgrade bearbeiten' : 'Neues Upgrade'}