style(web): eingeklappte Seitenleiste mit groesseren Symbolen, dichter

Kacheln 24 statt 20 px, Navigationssymbole 22 statt 20 px, Eintraege
34 px hoch mit 1 px Abstand (vorher 36 + 2 px) — Nutzerwunsch 29.09.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/web/src/components/layout/sidebar.tsx

@@ -116,6 +116,11 @@ export function Sidebar() {
   const moduleItemClass = (active: boolean) =>
     itemClass(active).replace('h-9', 'h-8').replace('gap-3', 'gap-2.5').replace('text-sm', 'text-[13px]');
 
+  // Eingeklappt (Nutzerwunsch 29.09.): Symbole etwas groesser (Kachel 24 statt
+  // 20 px, Navigationssymbole 22 statt 20 px), Eintraege dichter — 34 px hoch
+  // mit 1 px Abstand statt 36 + 2 px.
+  const collapsedItemClass = (active: boolean) => itemClass(active).replace('h-9', 'h-[34px]');
+
   const fetchActiveModules = useCallback(async () => {
     const loadBuiltIn = async () => {
       try {
@@ -203,7 +208,7 @@ export function Sidebar() {
   }, [entries, searchQuery, categoryLabel]);
 
   const navIcon = (children: React.ReactNode) => (
-    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width={isCollapsed ? 22 : 20} height={isCollapsed ? 22 : 20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
       {children}
     </svg>
   );
@@ -211,9 +216,9 @@ export function Sidebar() {
   const sidebarContent = (
     <div className="flex h-full flex-col bg-sidebar">
       <nav className={`flex-1 overflow-y-auto py-3 ${isCollapsed ? 'px-2' : 'px-3'}`}>
-        <ul className="flex flex-col gap-0.5">
+        <ul className={`flex flex-col ${isCollapsed ? 'gap-px' : 'gap-0.5'}`}>
           <li>
-            <Link href="/" className={linkClass('/')} aria-label={t('dashboard')} title={isCollapsed ? t('dashboard') : undefined}>
+            <Link href="/" className={isCollapsed ? collapsedItemClass(isActive('/')) : linkClass('/')} aria-label={t('dashboard')} title={isCollapsed ? t('dashboard') : undefined}>
               {isActive('/') && <SelectionPill />}
               {navIcon(
                 <>
@@ -227,7 +232,7 @@ export function Sidebar() {
             </Link>
           </li>
           <li>
-            <Link href="/marketplace" className={linkClass('/marketplace')} aria-label={t('marketplace')} title={isCollapsed ? t('marketplace') : undefined}>
+            <Link href="/marketplace" className={isCollapsed ? collapsedItemClass(isActive('/marketplace')) : linkClass('/marketplace')} aria-label={t('marketplace')} title={isCollapsed ? t('marketplace') : undefined}>
               {isActive('/marketplace') && <SelectionPill />}
               {navIcon(
                 <>
@@ -242,14 +247,14 @@ export function Sidebar() {
 
         {/* Eingeklappt: nur die Modul-Kacheln untereinander (Name als Tooltip). */}
         {isCollapsed && entries.length > 0 && (
-          <ul className="mt-3 flex flex-col gap-0.5 border-t border-sidebar-border pt-3">
+          <ul className="mt-3 flex flex-col gap-px border-t border-sidebar-border pt-3">
             {entries.map((entry) => {
               const active = isEntryActive(entry);
               return (
                 <li key={entry.key}>
-                  <Link href={entry.href} className={itemClass(active)} aria-label={entry.name} title={entry.name}>
+                  <Link href={entry.href} className={collapsedItemClass(active)} aria-label={entry.name} title={entry.name}>
                     {active && <SelectionPill />}
-                    <ModuleTile slug={entry.tileSlug} size={20} tone={active ? 'accent' : 'neutral'} />
+                    <ModuleTile slug={entry.tileSlug} size={24} tone={active ? 'accent' : 'neutral'} />
                   </Link>
                 </li>
               );