Match sidebar bottom layout to the Wochenplanung reference (theme toggle + Abmelden in one row)

Square icon-only theme toggle sits next to the Abmelden button in a shared
row, collapsing to just the toggle when the sidebar is collapsed - same
arrangement as pm-app's Sidebar.tsx.

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

src/app/globals.css

@@ -323,23 +323,24 @@ a {
 }
 
 .sidebar-footer {
-  padding: 12px;
+  padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
+/* Square and icon-only so it fits next to Abmelden in .sidebar-bottom-row. */
 .sidebar-theme-toggle {
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: center;
-  padding: 10px 14px;
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  padding: 0;
   border-radius: 8px;
   color: #c7d6e0;
   font-size: 0.92rem;
-  font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.06);
-  width: 100%;
-  text-align: left;
   cursor: pointer;
 }
 
@@ -2747,12 +2748,20 @@ button.structure-entry-main:focus-visible {
   white-space: nowrap;
 }
 
+/* Toggle (square) and Abmelden (fills the rest) share one row. */
+.sidebar-bottom-row {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  padding: 0 14px 12px;
+}
+
 .sidebar-logout {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  flex: 1 1 auto;
-  margin-top: 8px;
+  min-width: 0;
   padding: 8px 14px;
   border-radius: 8px;
   color: #c7d6e0;
@@ -2760,7 +2769,6 @@ button.structure-entry-main:focus-visible {
   font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: transparent;
-  width: 100%;
   cursor: pointer;
 }
 
@@ -2773,6 +2781,11 @@ button.structure-entry-main:focus-visible {
   display: none;
 }
 
+.sidebar-collapsed .sidebar-bottom-row {
+  justify-content: center;
+  padding-inline: 0;
+}
+
 .login-gate-screen {
   min-height: 100vh;
   display: flex;

src/frontend/components/Sidebar.tsx

@@ -200,12 +200,17 @@ export function Sidebar({ isCollapsed, onToggleCollapsed }: SidebarProps) {
             <span className="sidebar-identity-name">{user.name}</span>
           </div>
         )}
-        <ThemeToggle />
+        {/* Toggle and Abmelden share one row: the toggle stays a fixed-size
-        {user && (
+            square, Abmelden takes the rest of the width. Collapsed, only
-          <button type="button" className="sidebar-logout" onClick={() => void logout()}>
+            the square toggle remains (centered). */}
-            {isCollapsed ? "⏻" : "Abmelden"}
+        <div className="sidebar-bottom-row">
-          </button>
+          <ThemeToggle />
-        )}
+          {user && !isCollapsed && (
+            <button type="button" className="sidebar-logout" onClick={() => void logout()}>
+              Abmelden
+            </button>
+          )}
+        </div>
       </div>
     </aside>
   );

src/frontend/components/ThemeToggle.tsx

@@ -48,16 +48,17 @@ export function ThemeToggle() {
   }
 
   return (
+    // Square, icon-only: it shares a row with the Abmelden button, so there
+    // is no room for a text label. The label moves to title/aria-label.
     <button
       aria-pressed={theme === "dark"}
       className="sidebar-theme-toggle"
       onClick={toggleTheme}
+      title={theme === "dark" ? "Hellmodus" : "Dunkelmodus"}
+      aria-label={theme === "dark" ? "Hellmodus einschalten" : "Dunkelmodus einschalten"}
       type="button"
     >
-      <span className="sidebar-icon" aria-hidden="true">
+      <span aria-hidden="true">{theme === "dark" ? "☀" : "☾"}</span>
-        {theme === "dark" ? "☀" : "☾"}
-      </span>
-      {theme === "dark" ? "Hellmodus" : "Dunkelmodus"}
     </button>
   );
 }