feat: Initialize project with Vite, React, and TypeScript

Sets up the foundational structure for the Obsidian | RP Plattform. This includes configuring Vite as the build tool, integrating React for the UI, and establishing TypeScript for type safety. Also includes initial styling and placeholder data to define the application's core interfaces.

components/InventoryGrid.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Item } from '../types';
+import { ItemIcon } from './IconSet';
+
+interface InventoryGridProps {
+  items: (Item | null)[];
+}
+
+const InventoryGrid: React.FC<InventoryGridProps> = ({ items }) => {
+  return (
+    <div className="bg-surface rounded-xl border border-border p-4 shadow-card">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-sm font-bold uppercase tracking-wider text-textMuted">Inventar</h3>
+        <div className="text-xs text-textMuted bg-surfaceHighlight px-2 py-1 rounded">
+          {items.filter(i => i !== null).length} / {items.length} Plätze
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-5 sm:grid-cols-9 gap-2">
+        {items.map((item, index) => (
+          <div 
+            key={index} 
+            className="group relative aspect-square bg-surfaceHighlight/50 border border-white/5 rounded-md transition-all duration-200 hover:scale-105 hover:bg-surfaceHighlight hover:border-accentInfo/30 hover:shadow-glow hover:z-10 cursor-pointer flex items-center justify-center"
+          >
+            {item ? (
+              <>
+                <div className="w-8 h-8 text-textMuted group-hover:text-accentInfo transition-colors">
+                  <ItemIcon type={item.type} />
+                </div>
+                
+                {/* Count Badge */}
+                {item.count > 1 && (
+                  <span className="absolute bottom-1 right-1 font-mono text-[10px] font-bold text-textMain leading-none drop-shadow-md">
+                    {item.count}
+                  </span>
+                )}
+
+                {/* Tooltip */}
+                <div className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-[150px] z-50 pointer-events-none">
+                  <div className="bg-surface border border-border rounded p-2 shadow-xl text-xs">
+                    <div className={`font-semibold ${item.rarity === 'epic' ? 'text-accentInfo' : 'text-textMain'}`}>
+                      {item.name}
+                    </div>
+                    {item.nbtSummary && (
+                      <div className="text-[10px] text-textMuted mt-1 border-t border-white/10 pt-1">
+                        {item.nbtSummary}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+            ) : (
+              // Empty slot styling
+              <div className="absolute inset-2 border border-dashed border-white/5 rounded-sm" />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default InventoryGrid;