diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index 8a59b43..dd1eeb5 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -44,13 +44,14 @@ export default function AppLayout({ children }: { children: ReactNode }) {
     </nav>
   );
   const bottomLink = (href: string, label: string) => <Link href={href} aria-current={path === href || path.startsWith(href + '/') ? 'page' : undefined}>{label}</Link>;
-  return (<div className="shell">
+  return (<>
     {me.impersonating && (
-      <div role="status" style={{ position: 'sticky', top: 0, zIndex: 100, background: 'var(--warn)', color: '#1a1200', padding: '8px 16px', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
+      <div role="status" style={{ position: 'sticky', top: 0, zIndex: 100, width: '100%', background: 'var(--warn)', color: '#1a1200', padding: '8px 16px', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
         <span>👁 Ansicht als Kunde: <strong>{me.impersonating.orgName}</strong> ({me.impersonating.customerNumber}) · Grund: {me.impersonating.reason}</span>
         <button className="btn small" onClick={() => void stopImpersonation()}>Zurück zur Verwaltung</button>
       </div>
     )}
+    <div className="shell">
     <div className="topbar"><strong>Kundencenter</strong><ThemeToggle compact /></div>
     {nav}<main id="main" className="main">{children}</main>
     {!enrollNeeded && <nav className="bottomnav" aria-label="Hauptnavigation (mobil)">
@@ -60,5 +61,6 @@ export default function AppLayout({ children }: { children: ReactNode }) {
       {(me.kind === 'customer' || can('invoices.read')) && bottomLink('/rechnungen', 'Rechnungen')}
       <button type="button" aria-expanded={open} onClick={() => setOpen(!open)}>Mehr</button>
     </nav>}
-  </div>);
+    </div>
+  </>);
 }