Added Room and some little design updates

app/views/dashboard/index.html.erb

@@ -1,134 +1,205 @@
-<% content_for :title, "Dashboard Übersicht" %>
+<% content_for :title, "Dashboard" %>
 
 <div class="space-y-6">
-
-  <!-- KENNZAHLEN-GRID -->
-  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-
-    <!-- Karte 1: Gesamtartikel -->
-    <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4">
-      <div class="p-3 bg-blue-50 text-blue-600 rounded-lg">
-        <!-- Heroicon: cube -->
-        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" /></svg>
-      </div>
-      <div>
-        <p class="text-xs font-semibold uppercase text-gray-400">Objekte im System</p>
-        <h3 class="text-2xl font-bold text-gray-800"><%= @total_items %></h3>
+  
+  <!-- DYNAMISCHES STATISTIK-RASTER (3 Spalten auf Desktop, 1 auf Mobile) -->
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    
+    <!-- KACHEL 1: GESAMTZEIT INVENTAR -->
+    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex items-center justify-between gap-4">
+      <div class="flex items-center gap-4 min-w-0">
+        <!-- Icon jetzt links -->
+        <div class="p-3 bg-blue-50 text-blue-600 rounded-xl shrink-0 shadow-sm border border-blue-100">
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
+          </svg>
+        </div>
+        <div class="space-y-0.5 min-w-0">
+          <p class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate">Gesamtbestand</p>
+          <p class="text-xs text-gray-500 truncate">Registrierte Unikate</p>
+        </div>
       </div>
+      <!-- Große Zahl jetzt rechtsbündig -->
+      <h3 class="text-3xl font-black text-gray-900 text-end shrink-0"><%= Item.count %></h3>
     </div>
 
-    <!-- Karte 2: Im Lager -->
-    <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4">
-      <div class="p-3 bg-amber-50 text-amber-600 rounded-lg">
-        <!-- Heroicon: archive-box -->
-        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /></svg>
-      </div>
-      <div>
-        <p class="text-xs font-semibold uppercase text-gray-400">Aktuell im Lager</p>
-        <h3 class="text-2xl font-bold text-amber-600"><%= @items_in_storage %></h3>
+    <!-- KACHEL 2: KATEGORIEN -->
+    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex items-center justify-between gap-4">
+      <div class="flex items-center gap-4 min-w-0">
+        <!-- Icon jetzt links -->
+        <div class="p-3 bg-emerald-50 text-emerald-600 rounded-xl shrink-0 shadow-sm border border-emerald-100">
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
+          </svg>
+        </div>
+        <div class="space-y-0.5 min-w-0">
+          <p class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate">Kategorien</p>
+          <p class="text-xs text-gray-500 truncate">Geräte-Typen</p>
+        </div>
       </div>
+      <!-- Große Zahl jetzt rechtsbündig -->
+      <h3 class="text-3xl font-black text-gray-900 text-end shrink-0"><%= Category.count %></h3>
     </div>
 
-    <!-- Karte 3: Gesamtwert (Wird formatiert in Euro ausgegeben) -->
-    <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4">
-      <div class="p-3 bg-green-50 text-green-600 rounded-lg">
-        <!-- Heroicon: banknotes -->
-        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75m0 .75h-.75m0 0v-.75m0 .75h.75m0 0V18m0-13.5h16.5M1.5 6h21M3.75 18v.75m0-.75h-.75m0 0v.75m0-.75h.75m0 0V6M10.5 9a2.25 2.25 0 114.5 0 2.25 2.25 0 01-4.5 0z" /></svg>
-      </div>
-      <div>
-        <p class="text-xs font-semibold uppercase text-gray-400">Gesamtwert Inventar</p>
-        <h3 class="text-2xl font-bold text-gray-800">
-          <%= number_to_currency(@total_value, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
-        </h3>
+    <!-- KACHEL 3: RÄUME & STANDORTE -->
+    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex items-center justify-between gap-4 sm:col-span-2 lg:col-span-1">
+      <div class="flex items-center gap-4 min-w-0">
+        <!-- Icon jetzt links -->
+        <div class="p-3 bg-amber-50 text-amber-600 rounded-xl shrink-0 shadow-sm border border-amber-100">
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+          </svg>
+        </div>
+        <div class="space-y-0.5 min-w-0">
+          <p class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate">Räume & Büros</p>
+          <p class="text-xs text-gray-500 truncate">Erfasste Standorte</p>
+        </div>
       </div>
+      <!-- Große Zahl jetzt rechtsbündig -->
+      <h3 class="text-3xl font-black text-gray-900 text-end shrink-0"><%= Room.count %></h3>
     </div>
+
   </div>
 
-  <!-- NEUESTE SYSTEMZUGÄNGE -->
-  <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
-    <h2 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
-      <!-- Heroicon: clock -->
-      <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-      Zuletzt registrierte Artikel
-    </h2>
-
-    <% if @recent_items.any? %>
-      <div class="space-y-3">
-        <% @recent_items.each do |item| %>
-          <div class="flex items-start sm:items-center justify-between p-3 bg-gray-50 rounded-lg text-sm border border-gray-100 gap-4">
-            <div class="flex items-center gap-3 min-w-0">
-              <span class="p-1.5 bg-blue-100 text-blue-700 rounded-md font-mono text-[10px] font-bold">#<%= item.sticker_id %></span>
-              <div class="min-w-0">
-                <p class="font-semibold text-gray-800 truncate"><%= item.name %></p>
-                <p class="text-xs text-gray-500">
+  <!-- UNTERER BEREICH: BREITEN-OPTIMIERTE LISTEN (items-start verhindert vertikale Streckung) -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 items-start">
+    
+    <!-- SPALTE 1: ZULETZT HINZUGEFÜGTE ARTIKEL -->
+    <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col h-fit">
+      <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2 shrink-0">
+        <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+        </svg>
+        <h3 class="font-bold text-gray-700 text-sm">Zuletzt hinzugefügt</h3>
+      </div>
+      
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 text-xs table-fixed">
+          <tbody class="divide-y divide-gray-200 bg-white">
+            <% @recent_items.each.each do |item| %>
+              <tr class="hover:bg-gray-50/50 transition">
+                <!-- KORREKTUR: max-w begrenzt die Breite, whitespace-normal erlaubt Zeilenumbruch -->
+                <td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]">
+                  <div class="flex items-start gap-2.5">
+                    <%= link_to item_path(item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %>
+                      <span class="inline-flex items-center font-mono font-bold text-[10px] text-white bg-blue-600 px-1.5 py-0.5 rounded shadow-sm tracking-wider mt-0.5">
+                        #<%= item.sticker_id %>
+                      </span>
+                    <% end %>        
+                    <div class="min-w-0 whitespace-normal break-words">
+                      <%= link_to item_path(item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
+                        <%= item.name %>
+                      <% end %>
+                      <span class="block text-[10px] text-gray-400 mt-0.5"><%= item.category.name %></span>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-3.5 whitespace-nowrap align-middle shrink-0 w-32">
                   <% if item.user.present? %>
-                    👤 <%= item.user.name %>
+                    <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-green-50 text-green-800 px-2 py-0.5 rounded border border-green-200 shadow-sm">
+                      <svg class="h-3 w-3 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                      </svg>
+                      <%= item.user.name %>
+                    </span>
                   <% elsif item.room.present? %>
-                    📍 <%= item.room.name_with_building %>
+                    <%= link_to room_path item.room do %>
+                      <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-blue-50 text-blue-800 px-2 py-0.5 rounded border border-blue-200 shadow-sm">
+                        <svg class="h-3 w-3 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+                        </svg>
+                        <%= item.room.name %>
+                      </span>
+                    <% end %>
                   <% else %>
-                    📦 Im Hauptlager
+                    <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-800 px-2 py-0.5 rounded border border-amber-200 shadow-sm">
+                      <svg class="h-3 w-3 text-amber-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
+                      </svg>
+                      Hauptlager
+                    </span>
                   <% end %>
-                </p>
-              </div>
-            </div>
-            <div class="text-xs text-gray-400 text-right shrink-0">
-              <%= time_ago_in_words(item.created_at) %>
-            </div>
-          </div>
-        <% end %>
+                </td>
+                <td class="px-5 py-3.5 whitespace-nowrap text-end text-gray-400 font-medium align-middle shrink-0 w-24">
+                  <%= time_ago_in_words(item.created_at) %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
       </div>
-    <% else %>
-      <div class="text-center py-6 text-gray-400 text-sm">
-        Bisher wurden keine Artikel im System erfasst.
-      </div>
-    <% end %>
-  </div>
-  <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 mt-6">
-    <h2 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
-      <!-- Heroicon: arrows-right-left -->
-      <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
-      </svg>
-      Letzte Artikel-Zuordnungen & Bewegungen
-    </h2>
+    </div>
 
-    <% if @recent_assignments.any? %>
-      <div class="space-y-3">
-        <% @recent_assignments.each do |log| %>
-          <div class="flex items-start sm:items-center justify-between p-3 bg-gray-50 rounded-lg text-sm border border-gray-100 gap-4">
-            <div class="flex items-center gap-3 min-w-0">
-              <!-- Markantes blaues Badge für die Sticker-ID des bewegten Artikels -->
-              <span class="p-1.5 bg-blue-100 text-blue-700 rounded-md font-mono text-[10px] font-bold shrink-0">
-                #<%= log.item.sticker_id %>
-              </span>
-
-              <div class="min-w-0">
-                <p class="font-semibold text-gray-800">
-                  <%= link_to log.item.name, item_path(log.item), class: "hover:text-blue-600 transition" %>
-                </p>
-                <p class="text-xs text-gray-500">
-                  <% if log.user.present? %>
-                    👤 <%= log.user.name %>
-                  <% elsif log.room.present? %>
-                    📍 <%= log.room.name_with_building %>
-                  <% else %>
-                    📦 Ins Hauptlager gelegt
-                  <% end %>
-                </p>
-              </div>
-            </div>
-
-            <div class="text-xs text-gray-400 text-right shrink-0">
-              <%= time_ago_in_words(log.created_at) %>
-            </div>
-          </div>
-        <% end %>
+    <!-- SPALTE 2: LETZTE LOGBUCH-AKTIVITÄTEN (HISTORIE) -->
+    <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col h-fit">
+      <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2 shrink-0">
+        <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+        </svg>
+        <h3 class="font-bold text-gray-700 text-sm">Letzte Aktivitäten</h3>
       </div>
-    <% else %>
-      <div class="text-center py-6 text-gray-400 text-sm">
-        Es wurden noch keine Artikel-Bewegungen im System registriert.
+      
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 text-xs table-fixed">
+          <tbody class="divide-y divide-gray-200 bg-white">
+            <% @recent_assignments.each do |log| %>
+              <tr class="hover:bg-gray-50/50 transition">
+                <!-- KORREKTUR: max-w begrenzt die Breite, whitespace-normal erlaubt Zeilenumbruch -->
+                <td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]">
+                  <div class="flex items-start gap-2.5">
+                    <%= link_to item_path(log.item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %>
+                      <span class="inline-flex items-center font-mono font-bold text-[10px] text-white bg-blue-600 px-1.5 py-0.5 rounded shadow-sm tracking-wider mt-0.5">
+                        #<%= log.item.sticker_id %>
+                      </span>
+                    <% end %>        
+                  <div class="min-w-0 whitespace-normal break-words">
+                    <% if log.item.present? %>
+                      <%= link_to item_path(log.item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
+                        <%= log.item.name %>
+                      <% end %>
+                      <% else %>
+                        <span class="font-bold text-gray-400">Gelöschter Artikel</span>
+                      <% end %>
+                      
+                      <div class="mt-1">
+                        <% if log.user.present? %>
+                          <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-green-50 text-green-800 px-2 py-0.5 rounded border border-green-200 shadow-sm">
+                            <svg class="h-3 w-3 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                            </svg>
+                            <%= log.user.name %> zugewiesen
+                          </span>
+                        <% elsif log.room.present? %>
+                          <%= link_to room_path log.room do %>
+                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-blue-50 text-blue-800 px-2 py-0.5 rounded border border-blue-200 shadow-sm">
+                              <svg class="h-3 w-3 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+                              </svg>
+                              In <%= log.room.name %> platziert
+                            </span>
+                          <% end %>
+                        <% else %>
+                          <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-800 px-2 py-0.5 rounded border border-amber-200 shadow-sm">
+                            <svg class="h-3 w-3 text-amber-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
+                            </svg>
+                            Hauptlager zurückgebracht
+                          </span>
+                        <% end %>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-3.5 whitespace-nowrap text-end text-gray-400 font-medium align-middle shrink-0 w-24">
+                  <%= time_ago_in_words(log.assigned_at) %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
       </div>
-    <% end %>
+    </div>
+
   </div>
 
-</div>

app/views/items/_list.html.erb

@@ -1,82 +1,75 @@
 <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
 
-  <!-- ========================================================================= -->
-  <!-- 1. HANDY-ANSICHT: OPTIMIERTE INVENTAR-CARDS (md:hidden) -->
-  <!-- ========================================================================= -->
-  <div class="block md:hidden divide-y divide-gray-200 bg-white">
-    <% items.each do |item| %>
-      <div class="p-4 space-y-3 hover:bg-gray-50/50 transition">
-
-        <!-- Zeile 1: Name, Kategorie & die markante Sticker-ID Plakette -->
-        <div class="flex justify-between items-start gap-3">
+ <!-- ========================================================================= -->
+<!-- 1. MOBIL-ANSICHT: TEXTE BÜNDIG ZUM ARTIKELNAMEN & VERTIKALE BUTTONS       -->
+<!-- ========================================================================= -->
+<div class="block md:hidden divide-y divide-gray-200 bg-white">
+  <% items.each do |item| %>
+    <div class="p-4 hover:bg-gray-50/50 transition flex items-center justify-between gap-4">
+      
+      <!-- LINKER BEREICH: STRUKTURIERTER INHALT -->
+      <div class="flex-1 min-w-0 flex items-start gap-3">
+        
+        <!-- Das ID-Badge steht als sauberer, fester Anker ganz links -->
+        <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "shrink-0 transition hover:scale-105 active:scale-95 block mt-0.5" do %>
+          <span class="inline-flex items-center font-mono font-black text-xs text-white bg-blue-600 px-2.5 py-0.5 rounded shadow-sm tracking-widest">
+            #<%= item.sticker_id %>
+          </span>
+        <% end %>
+        
+        <!-- DIESER CONTAINER ERZWINGT DIE BÜNDIGKEIT UNTER DEM NAMEN -->
+        <div class="flex-1 min-w-0 space-y-2">
+          
+          <!-- Zeile 1: Fetter Artikelname -->
           <div class="min-w-0">
-            <h4 class="font-bold text-gray-900 text-sm leading-snug truncate"><%= item.name %></h4>
-            <p class="text-xs text-gray-500 font-medium mt-0.5"><%= item.category.name %></p>
+            <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "font-black text-gray-900 hover:text-blue-600 text-base leading-tight block truncate" do %>
+              <%= item.name %>
+            <% end %>
           </div>
 
-          <!-- Rechte Box für ID und den optimal platzierten Preis direkt darunter -->
-          <div class="flex flex-col items-end gap-1.5 shrink-0">
-            <span class="inline-flex items-center font-mono font-black text-xs text-white bg-blue-600 px-2.5 py-1 rounded-md shadow-sm tracking-wider">
-              #<%= item.sticker_id %>
-            </span>
-            <span class="text-xs font-bold text-gray-600 font-mono bg-gray-100 px-1.5 py-0.5 rounded">
-              <%= number_to_currency(item.price, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
-            </span>
+          <!-- Zeile 2: Kategorie & SKU (Jetzt perfekt bündig unter dem Namen!) -->
+          <div class="flex items-center gap-2 text-xs font-medium text-gray-500 font-mono">
+            <span class="font-sans font-bold text-gray-400"><%= item.category.name %></span>
+            <span class="text-gray-300">•</span>
+            <span>SKU: <span class="text-gray-700 font-bold"><%= item.sku %></span></span>
           </div>
-        </div>
 
-        <!-- Zeile 2: Technische Gerätedaten (SKU & Seriennummer) -->
-        <div class="grid grid-cols-2 gap-3 bg-gray-50 p-2.5 rounded-lg text-xs font-mono text-gray-600">
-          <div class="truncate">
-            <span class="text-gray-400 font-sans block text-[10px] uppercase font-bold tracking-wider mb-0.5">SKU</span>
-            <%= item.sku %>
-          </div>
-          <div class="truncate">
-            <span class="text-gray-400 font-sans block text-[10px] uppercase font-bold tracking-wider mb-0.5">Seriennummer</span>
-            <%= item.serial_number %>
-          </div>
-        </div>
-
-        <!-- Zeile 3: Standort & Quick-Actions -->
-        <div class="flex justify-between items-center pt-1">
-          <!-- Standort-Badge -->
-          <div class="text-xs">
+          <!-- Zeile 3: Das Standort-Badge (Ebenfalls perfekt bündig unter dem Namen) -->
+          <div class="pt-0.5">
             <% if item.user.present? %>
-              <span class="inline-flex items-center gap-1 text-gray-900 font-semibold bg-green-50 text-green-800 px-2 py-1 rounded-md border border-green-200">
-                👤 <%= item.user.name %>
+              <span class="inline-flex items-center gap-1.5 text-xs font-bold bg-green-50 text-green-800 px-2.5 py-1 rounded-md border border-green-200 shadow-sm">
+                <svg class="h-3.5 w-3.5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
+                <%= item.user.name %>
               </span>
             <% elsif item.room.present? %>
-              <span class="inline-flex items-center gap-1 text-gray-700 bg-blue-50 text-blue-800 px-2 py-1 rounded-md border border-blue-200">
-                📍 <%= item.room.name %>
+              <span class="inline-flex items-center gap-1.5 text-xs font-bold bg-blue-50 text-blue-800 px-2.5 py-1 rounded-md border border-blue-200 shadow-sm">
+                <svg class="h-3.5 w-3.5 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" /></svg>
+                <%= item.room.name %>
               </span>
             <% else %>
-              <span class="inline-flex items-center gap-1 text-amber-800 bg-amber-50 px-2 py-1 rounded-md border border-amber-200 font-medium">
-                📦 Hauptlager
+              <span class="inline-flex items-center gap-1.5 text-xs font-bold bg-amber-50 text-amber-900 px-2.5 py-1 rounded-md border border-amber-200 shadow-sm">
+                <svg class="h-3.5 w-3.5 text-amber-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" /></svg>
+                Hauptlager
               </span>
             <% end %>
           </div>
 
-          <!-- Aktions-Icons -->
-          <div class="flex items-center gap-1 shrink-0">
-            <!-- DETAILS BUTTON mit _top Ausbruch -->
-            <%= link_to item_path(item),
-                        data: { turbo_frame: "_top" },
-                        class: "p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm" do %>
-              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
-            <% end %>
-
-            <!-- BEARBEITEN BUTTON mit _top Ausbruch -->
-            <%= link_to edit_item_path(item),
-                        data: { turbo_frame: "_top" },
-                        class: "p-2 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm" do %>
-              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
-            <% end %>
-          </div>
         </div>
-
       </div>
-    <% end %>
-  </div>
+
+      <!-- RECHTER BEREICH: VERTIKAL GESTAPELTE QUICK-ACTIONS -->
+      <div class="flex flex-col gap-2 shrink-0">
+        <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center", title: "Details" do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
+        <% end %>
+        <%= link_to edit_item_path(item), data: { turbo_frame: "_top" }, class: "p-2 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center", title: "Bearbeiten" do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+        <% end %>
+      </div>
+
+    </div>
+  <% end %>
+</div>
 
   <!-- ========================================================================= -->
   <!-- 2. DESKTOP-ANSICHT: STICKY-TABELLE (hidden md:block) -->
@@ -86,8 +79,8 @@
       <thead class="bg-gray-50 sticky top-0 z-20 shadow-[0_1px_0_0_rgba(229,231,235,1)]">
         <tr>
           <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Artikel / Details</th>
-          <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Seriennummer (SN)</th>
-          <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Aktueller Standort / Inhaber</th>
+          <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">SN</th>
+          <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Standort / Inhaber</th>
           <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Sticker-ID</th>
           <th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Wert</th>
           <th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Aktionen</th>
@@ -101,46 +94,77 @@
               <div class="text-xs text-gray-400">SKU: <%= item.sku %> • <%= item.category.name %></div>
             </td>
             <td class="px-6 py-4 whitespace-nowrap font-mono text-xs text-gray-600"><%= item.serial_number %></td>
-            <td class="px-6 py-4 whitespace-nowrap text-gray-700">
+            <!-- Spalte 3: Inhaber-Weiche mit markanten Badges (Desktop Tabelle) -->
+            <td class="px-6 py-4 whitespace-nowrap text-sm">
               <% if item.user.present? %>
-                <span class="inline-flex items-center gap-1.5 text-gray-900 font-medium">👤 <%= item.user.name %></span>
+                <span class="inline-flex items-center gap-1.5 text-gray-900 font-semibold bg-green-50 text-green-800 px-2.5 py-1 rounded-md border border-green-200 shadow-sm">
+                  <!-- Heroicon: user -->
+                  <svg class="h-4 w-4 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                  </svg>
+                  <%= item.user.name %>
+                </span>
               <% elsif item.room.present? %>
-                <span class="inline-flex items-center gap-1.5 text-gray-600">📍 <%= item.room.name_with_building %></span>
+                <span class="inline-flex items-center gap-1.5 text-gray-900 font-semibold bg-blue-50 text-blue-800 px-2.5 py-1 rounded-md border border-blue-200 shadow-sm">
+                  <!-- Heroicon: map-pin -->
+                  <svg class="h-4 w-4 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+                  </svg>
+                  <%= item.room.name_with_building %>
+                </span>
               <% else %>
-                <span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-medium bg-amber-50 text-amber-800 border border-amber-200">📦 Im Hauptlager</span>
+                <span class="inline-flex items-center gap-1.5 text-amber-900 font-semibold bg-amber-50 text-amber-800 px-2.5 py-1 rounded-md border border-amber-200 shadow-sm">
+                  <!-- Heroicon: cube / box -->
+                  <svg class="h-4 w-4 text-amber-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
+                  </svg>
+                  Hauptlager
+                </span>
               <% end %>
             </td>
 
             <!-- STICKER-ID ALS BADGE (Jetzt auch in der Desktop-Tabelle markant) -->
+            <!-- Erste Tabellenspalte der Desktop-Schleife -->
             <td class="px-6 py-4 whitespace-nowrap">
-              <span class="inline-flex items-center font-mono font-bold text-xs text-white bg-blue-600 px-2 py-0.5 rounded shadow-sm tracking-wider">
-                #<%= item.sticker_id %>
-              </span>
-            </td>
+              <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "inline-block transition hover:scale-105" do %>
+                <span class="inline-flex items-center font-mono font-black text-xs text-white bg-blue-600 px-2.5 py-1 rounded-md shadow-sm tracking-widest">
+                  #<%= item.sticker_id %>
+                </span>
+              <% end %>
 
             <td class="px-6 py-4 whitespace-nowrap text-end font-medium text-gray-900">
               <%= number_to_currency(item.price, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
             </td>
-            <!-- In der Schleife der Desktop-Tabelle (_list.html.erb) -->
-            <td class="px-6 py-4 whitespace-nowrap text-end font-medium text-xs">
+            <!-- Letzte Spalte der Desktop-Tabelle in app/views/items/_list.html.erb -->
+            <td class="px-6 py-4 whitespace-nowrap text-end font-medium text-xs w-24 shrink-0">
+              <!-- Mit 'justify-end' fluchten die echten Button-Boxen perfekt bündig rechts -->
               <div class="flex items-center justify-end gap-2">
-                <!-- DETAILS ICON mit _top Ausbruch -->
-                <%= link_to item_path(item),
-                            data: { turbo_frame: "_top" },
-                            class: "p-1.5 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors border border-transparent hover:border-blue-100",
+                
+                <!-- DETAILS BUTTON (Weißes Button-Design mit feinem Rahmen & Schatten) -->
+                <%= link_to item_path(item), 
+                            data: { turbo_frame: "_top" }, 
+                            class: "p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition", 
                             title: "Details anzeigen" do %>
-                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
+                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  </svg>
                 <% end %>
 
-                <!-- BEARBEITEN ICON mit _top Ausbruch -->
-                <%= link_to edit_item_path(item),
-                            data: { turbo_frame: "_top" },
-                            class: "p-1.5 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-colors border border-transparent hover:border-amber-100",
+                <!-- BEARBEITEN BUTTON (Weißes Button-Design mit feinem Rahmen & Schatten) -->
+                <%= link_to edit_item_path(item), 
+                            data: { turbo_frame: "_top" }, 
+                            class: "p-2 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition", 
                             title: "Artikel bearbeiten" do %>
-                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                  </svg>
                 <% end %>
+
               </div>
             </td>
+
           </tr>
         <% end %>
       </tbody>

app/views/layouts/_sidebar.html.erb

@@ -0,0 +1,39 @@
+<!-- Navigations-Links mit dynamischen Helper-Klassen (Ausgelagertes Partial) -->
+<nav class="flex-1 p-3 space-y-1 overflow-hidden">
+  
+  <!-- 1. DASHBOARD -->
+  <%= link_to root_path, class: nav_link_class("dashboard") do %>
+    <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h2.25A1.125 1.125 0 0 1 7.5 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /></svg>
+    <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Dashboard</span>
+  <% end %>
+
+  <!-- 2. BESTANDSLISTE -->
+  <%= link_to items_path, class: nav_link_class("items") do %>
+    <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.007 5.25H3.75v.008h.008V12Zm0 5.25H3.75v.008h.008v-.008Z" /></svg>
+    <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Bestandsliste</span>
+  <% end %>
+
+  <!-- 3. WARENEINGANG -->
+  <%= link_to "", class: nav_link_class("inbound_shipments") do %>
+    <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
+    <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Wareneingang</span>
+  <% end %>
+
+  <!-- 4. KATEGORIEN -->
+  <%= link_to categories_path, class: nav_link_class("categories") do %>
+    <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
+    </svg>
+    <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Kategorien</span>
+  <% end %>
+
+  <!-- 5. NEU: RÄUME & STANDORTE -->
+  <%= link_to rooms_path, class: nav_link_class("rooms") do %>
+    <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+    </svg>
+    <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Räume</span>
+  <% end %>
+
+</nav>

app/views/layouts/application.html.erb

@@ -60,28 +60,7 @@
         </div>
 
         <!-- Navigations-Links mit dynamischen Helper-Klassen -->
-        <nav class="flex-1 p-3 space-y-1 overflow-hidden">
-          <%= link_to root_path, class: nav_link_class("dashboard") do %>
-            <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h2.25A1.125 1.125 0 0 1 7.5 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /></svg>
-            <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Dashboard</span>
-          <% end %>
-
-          <%= link_to items_path, class: nav_link_class("items") do %>
-            <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.007 5.25H3.75v.008h.008V12Zm0 5.25H3.75v.008h.008v-.008Z" /></svg>
-            <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Bestandsliste</span>
-          <% end %>
-
-          <%= link_to "", class: nav_link_class("inbound_shipments") do %>
-            <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
-            <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Wareneingang</span>
-          <% end %>
-          <%= link_to categories_path, class: nav_link_class("categories") do %>
-            <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
-            </svg>
-            <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Kategorien</span>
-          <% end %>
-        </nav>
+        <%= render "layouts/sidebar" %>
 
         <!-- DER NEUE, AUFGERÄUMTE SIDEBAR-FOOTER -->
         <div class="border-t border-gray-200 bg-gray-50 flex flex-col p-3 space-y-1 shrink-0">

app/views/rooms/_form.html.erb

@@ -0,0 +1,51 @@
+<%= form_with(model: room, class: "space-y-6 max-w-xl mx-auto bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8") do |form| %>
+
+  <% if room.errors.any? %>
+    <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200" role="alert">
+      <h2 class="font-bold mb-1"><%= pluralize(room.errors.count, "Fehler") %> verhinderten das Speichern:</h2>
+      <ul class="list-disc list-inside text-xs">
+        <% room.errors.each do |error| %>
+          <li><%= error.full_message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div>
+    <h2 class="text-xl font-bold text-gray-800">
+      <%= room.new_record? ? "Raum anlegen" : "Raum bearbeiten" %>
+    </h2>
+    <p class="text-sm text-gray-500 mt-1">
+      <%= room.new_record? ? "Definiere einen neuen physischen Standort für deine Inventargegenstände." : "Aktualisiere die Standortbezeichnung oder die Etage." %>
+    </p>
+  </div>
+
+  <hr class="border-gray-200">
+
+  <!-- Raumnummer / Name -->
+  <div>
+    <%= form.label :name, "Raumbezeichnung / Raumnummer", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
+    <%= form.text_field :name, placeholder: "z.B. Raum 101, Serverraum, Werkstatt", class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
+  </div>
+
+  <!-- Gebäude & Etage im Grid nebeneinander -->
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <div>
+      <%= form.label :building, "Gebäude / Gebäudeteil", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
+      <%= form.text_field :building, placeholder: "z.B. Hauptgebäude, Bau B", class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
+    </div>
+    <div>
+      <%= form.label :floor, "Etage / Stockwerk", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
+      <%= form.text_field :floor, placeholder: "z.B. EG, 1. OG, Keller", class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
+    </div>
+  </div>
+
+  <hr class="border-gray-200">
+
+  <!-- Aktions-Buttons -->
+  <div class="flex justify-end gap-x-3">
+    <%= link_to "Abbrechen", rooms_path, class: "py-2.5 px-4 inline-flex items-center text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition shadow-sm" %>
+    <%= form.submit room.new_record? ? "Raum erstellen" : "Änderungen speichern", class: "py-2.5 px-4 inline-flex items-center text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm transition cursor-pointer" %>
+  </div>
+
+<% end %>

app/views/rooms/_room.html.erb

@@ -0,0 +1,2 @@
+<div id="<%= dom_id room %>" class="w-full sm:w-auto my-5 space-y-5">
+</div>

app/views/rooms/_room.json.jbuilder

@@ -0,0 +1,2 @@
+json.extract! room, :id, :created_at, :updated_at
+json.url room_url(room, format: :json)

app/views/rooms/edit.html.erb

@@ -0,0 +1,27 @@
+<% content_for :title, "Raum bearbeiten: #{@room.name}" %>
+
+<% content_for :top_bar_actions do %>
+  <%= link_to rooms_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
+    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
+    Zurück zur Übersicht
+  <% end %>
+<% end %>
+
+<div class="space-y-6 p-4 md:p-6">
+  <%= render "form", room: @room %>
+
+  <!-- GEFAHRENBEREICH: Raum löschen -->
+  <div class="max-w-xl mx-auto bg-red-50/50 border border-red-200 rounded-xl p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 shadow-sm">
+    <div class="flex items-start gap-3">
+      <div class="p-2 bg-red-100 text-red-700 rounded-lg shrink-0 mt-0.5">
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+      </div>
+      <div>
+        <h3 class="text-sm font-bold text-red-800">Raum löschen</h3>
+        <p class="text-xs text-red-600 mt-0.5">In diesem Raum gelistete Artikel verlieren ihren Standort und werden automatisch ins Hauptlager umgebucht.</p>
+      </div>
+    </div>
+    
+    <%= link_to "Raum löschen", room_path(@room), data: { turbo_method: :delete, turbo_confirm: "Möchtest du diesen Standort wirklich löschen?" }, class: "py-2 px-4 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition" %>
+  </div>
+</div>

app/views/rooms/index.html.erb

@@ -0,0 +1,138 @@
+<div class="w-full space-y-4">
+
+  <% content_for :title, "Räume" %>  
+  
+  <% content_for :top_bar_actions do %>
+  <%= link_to new_room_path, data: { turbo_frame: "_top" }, class: "py-2 px-4 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-1.5 shadow-sm transition" do %>
+    <!-- Heroicon: plus -->
+    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+    Raum anlegen
+  <% end %>
+<% end %>
+
+  <!-- 1. Suchleiste steht außerhalb des Frames (CSV-Export bleibt hier aus) -->
+  <%= render "items/search_bar", show_csv: false %>
+
+  <!-- 2. NUR DIE TABELLE WIRD IN DEN TURBO-FRAME GEPAKT -->
+  <%= turbo_frame_tag "items_list_frame" do %>
+    <% if @rooms.any? %>
+      <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+        
+<!-- ========================================================================= -->
+<!-- 1. HANDY-ANSICHT: KOMPAKTE CARDS MIT KLEINEN BUTTONS (Bis md:)            -->
+<!-- ========================================================================= -->
+<div class="block md:hidden divide-y divide-gray-200 bg-white">
+  <% @rooms.each do |room| %>
+    <div class="p-3 hover:bg-gray-50/50 transition space-y-2">
+      
+      <!-- OBERE ZEILE: Icon + Name & Geräte-Badge -->
+      <div class="flex items-start justify-between gap-3 w-full">
+        <div class="flex items-start gap-2 text-gray-500 min-w-0 flex-1">
+          <svg class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+          </svg>
+          <div class="min-w-0">
+            <h4 class="font-black text-gray-900 text-base leading-tight truncate"><%= room.name %></h4>
+            <div class="flex items-center gap-1.5 text-xs font-semibold text-gray-400 font-sans mt-0.5">
+              <span><%= room.building %></span>
+              <span class="text-gray-300">•</span>
+              <span>Etage <%= room.floor %></span>
+            </div>
+          </div>
+        </div>
+
+        <div class="shrink-0">
+          <span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-bold <%= room.items.count > 0 ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200' %>">
+            <%= room.items.count %> <%= room.items.count == 1 ? "Gerät" : "Geräte" %>
+          </span>
+        </div>
+      </div>
+
+      <!-- UNTERE ZEILE: RECHTSBÜNDIGE, QUADRATISCHE BUTTONS (WICHTIG: 'w-auto' erzwingt Kompaktheit) -->
+      <div class="flex items-center justify-end gap-1.5 w-full">
+        
+        <!-- DETAILS BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
+        <%= link_to room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Inventar anzeigen" do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
+        <% end %>
+        
+        <!-- BEARBEITEN BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
+        <%= link_to edit_room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Bearbeiten" do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+        <% end %>
+        
+      </div>
+
+    </div>
+  <% end %>
+</div>
+
+        <!-- ========================================================================= -->
+        <!-- 2. DESKTOP-ANSICHT: STICKY-RÄUME-TABELLE -->
+        <!-- ========================================================================= -->
+        <div class="hidden md:block overflow-x-auto max-h-[calc(100vh-12rem)]">
+          <table class="min-w-full divide-y divide-gray-200 text-sm">
+            <thead class="bg-gray-50 sticky top-0 z-20 shadow-[0_1px_0_0_rgba(229,231,235,1)]">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Raum</th>
+                <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Gebäudeteil</th>
+                <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Etage</th>
+                <th scope="col" class="px-6 py-3 text-center font-semibold text-gray-500 uppercase tracking-wider">Aktiver Bestand</th>
+                <th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              <% @rooms.each do |room| %>
+                <tr class="hover:bg-gray-50/50 transition">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center gap-3 text-gray-400">
+                      <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+                      </svg>
+                      <div class="font-semibold text-gray-900"><%= room.name %></div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-gray-700 font-medium"><%= room.building %></td>
+                  <td class="px-6 py-4 whitespace-nowrap text-gray-500 font-mono text-xs"><%= room.floor %></td>
+                  <td class="px-6 py-4 whitespace-nowrap text-center">
+                    <span class="inline-flex items-center py-0.5 px-2.5 rounded-full text-xs font-semibold <%= room.items.count > 0 ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200' %>">
+                      <%= room.items.count %> <%= room.items.count == 1 ? "Gerät" : "Geräte" %>
+                    </span>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-end font-medium text-xs">
+                    <!-- KORREKTUR FÜR DIE RÄUME-ÜBERSICHT (Mobil-Bereich) -->
+                    <div class="flex items-center justify-end gap-2 shrink-0">
+                      <!-- DETAILS BUTTON im edlen weißen Design -->
+                      <%= link_to room_path(room), data: { turbo_frame: "_top" }, 
+                                  class: "p-2.5 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center", 
+                                  title: "Inventar öffnen" do %>
+                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
+                      <% end %>
+
+                      <!-- BEARBEITEN BUTTON im edlen weißen Design -->
+                      <%= link_to edit_room_path(room), data: { turbo_frame: "_top" }, 
+                                  class: "p-2.5 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center", 
+                                  title: "Bearbeiten" do %>
+                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                      <% end %>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+        
+      </div>
+    <% else %>
+      <div class="text-center py-16 text-gray-400 bg-white border border-gray-200 rounded-xl shadow-sm">
+        <p class="text-sm font-medium">Keine passenden Gebäude oder Büros gefunden.</p>
+      </div>
+    <% end %>
+  <% end %>
+
+</div>

app/views/rooms/index.json.jbuilder

@@ -0,0 +1 @@
+json.array! @rooms, partial: "rooms/room", as: :room

app/views/rooms/new.html.erb

@@ -0,0 +1,12 @@
+<% content_for :title, "Neuen Raum hinzufügen" %>
+
+<% content_for :top_bar_actions do %>
+  <%= link_to rooms_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
+    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
+    Zurück zur Übersicht
+  <% end %>
+<% end %>
+
+<div class="p-4 md:p-6">
+  <%= render "form", room: @room %>
+</div>

app/views/rooms/show.html.erb

@@ -0,0 +1,38 @@
+<% content_for :title, "Standort: #{@room.name}" %>
+
+<% content_for :top_bar_actions do %>
+  <%= link_to rooms_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
+    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
+    Alle Räume
+  <% end %>
+<% end %>
+
+<div class="w-full space-y-6">
+  <!-- Metadaten des Raums -->
+  <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm max-w-xl">
+    <div>
+      <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Gebäude</p>
+      <p class="text-gray-800 font-semibold mt-0.5"><%= @room.building %></p>
+    </div>
+    <div>
+      <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Stockwerk / Etage</p>
+      <p class="text-gray-800 font-semibold mt-0.5"><%= @room.floor %></p>
+    </div>
+  </div>
+
+  <div>
+    <!-- 1. Suchleiste steht außerhalb des Frames (CSV-Export hier deaktiviert) -->
+    <%= render "items/search_bar", show_csv: false %>
+
+    <!-- 2. NUR DAS REUSE-LIST-PARTIAL IN DEN FRAME GEPAKT -->
+    <%= turbo_frame_tag "items_list_frame" do %>
+      <% if @items.any? %>
+        <%= render "items/list", items: @items %>
+      <% else %>
+        <div class="text-center py-12 text-gray-400 bg-white border border-gray-200 rounded-xl shadow-sm">
+          <p class="text-sm">Keine passenden Artikel an diesem Standort gefunden.</p>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/views/rooms/show.json.jbuilder

@@ -0,0 +1 @@
+json.partial! "rooms/room", room: @room