fix(design): Trennlinie der Seitenleiste wieder buendig zum Header

Das groessere Logo machte die Logo-Zeile 79 px hoch, der Header blieb bei
71,5 px - die Linie lief schief. Beide haengen jetzt an
--app-bar-height (4,5 rem); das Logo begrenzt nur seine maximale Hoehe.
So bleibt es buendig, auch wenn Logo oder Titel sich aendern.

Dazu die neu zugeschnittene Logovorlage uebernommen: weniger Freiflaeche,
freigestellt und auf 160 px Hoehe skaliert.

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

src/components/layout/Header.tsx

@@ -16,7 +16,8 @@ export const Header: React.FC<HeaderProps> = ({ title, subtitle, onToggleSidebar
   const isDark = theme === 'dark';
 
   return (
-    <header className="app-header relative flex shrink-0 items-center gap-3 border-b border-ink-200 bg-surface px-4 py-3 md:px-6 md:py-4">
+    /* Feste Hoehe (--app-bar-height), damit die Seitenleiste bündig anschließt. */
+    <header className="app-header relative flex h-[var(--app-bar-height)] shrink-0 items-center gap-3 border-b border-ink-200 bg-surface px-4 md:px-6">
       {isMobile ? (
         <PulseMark size={34} />
       ) : (

src/components/layout/Sidebar.tsx

@@ -56,7 +56,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ current, onNavigate, collapsed
     >
       <button
         onClick={() => onNavigate(home)}
-        className={`flex shrink-0 items-center border-b border-ink-100 transition hover:bg-ink-50 ${collapsed ? 'justify-center py-5' : 'gap-3 px-5 py-4'}`}
+        className={`flex h-[var(--app-bar-height)] shrink-0 items-center border-b border-ink-200 transition hover:bg-ink-50 ${
+          collapsed ? 'justify-center' : 'gap-3 px-5'
+        }`}
         title="Zur Startseite"
       >
         {collapsed ? (
@@ -67,7 +69,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ current, onNavigate, collapsed
            * Schriftzug mehr. Kein logo-adaptive: die Wuerfel sind gruen und
            * sollen im Dunkelmodus nicht umgefaerbt werden.
            */
-          <img src="/pulse-logo.png" alt="Pulse" className="h-[46px] w-auto max-w-full object-contain" />
+          <img src="/pulse-logo.png" alt="Pulse" className="max-h-[46px] w-auto max-w-full object-contain" />
         )}
       </button>
 

src/index.css

@@ -998,6 +998,15 @@ html.theme-aura.dark {
 }
 
 @layer base {
+  :root {
+    /*
+     * Hoehe der oberen Leiste. Die Logo-Zeile der Seitenleiste nutzt denselben
+     * Wert, damit die Trennlinie auf einer Hoehe liegt - sonst haengt sie schief,
+     * sobald das Logo oder der Titel ihre Groesse aendern.
+     */
+    --app-bar-height: 4.5rem;
+  }
+
   html,
   body {
     height: 100%;