Update-Banner: klebt oben fest (sticky), Sticky-Header rasten darunter ein

Der Hinweis "Neue Version verfuegbar" scrollte bisher weg. Jetzt sticky an
der Viewport-Oberkante; das Banner meldet seine gemessene Hoehe als CSS-Var
--app-banner-h, an der sich die Sticky-Header von ContractDetail/ContractForm
ausrichten (top-[var(--app-banner-h,0px)]), damit sie nicht dahinter
verschwinden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/contracts/ContractDetail.tsx

@@ -1828,7 +1828,7 @@ export default function ContractDetail() {
       {/* Sticky-Header: Vertragsnummer + Kunde + Aktionsbuttons bleiben
           beim Scrollen oben stehen. -mx-8 px-8 zieht den Balken auf die
           Layout-Padding-Kante, damit's optisch bündig ist. */}
-      <div className="sticky top-0 z-20 -mx-8 px-8 py-4 mb-6 bg-gray-100 border-b border-gray-200 flex items-center justify-between">
+      <div className="sticky top-[var(--app-banner-h,0px)] z-20 -mx-8 px-8 py-4 mb-6 bg-gray-100 border-b border-gray-200 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-4 mb-2">
             <Button

frontend/src/pages/contracts/ContractForm.tsx

@@ -860,7 +860,7 @@ export default function ContractForm() {
       {/* Sticky-Header: Zurück-Button + Titel + Kunde-Zeile bleiben beim
           Scrollen oben stehen. Layout-Padding wird per -mx-8 px-8
           überbrückt, damit der Balken bündig ist. */}
-      <div className="sticky top-0 z-20 -mx-8 px-8 pt-4 pb-3 mb-6 bg-gray-100 border-b border-gray-200">
+      <div className="sticky top-[var(--app-banner-h,0px)] z-20 -mx-8 px-8 pt-4 pb-3 mb-6 bg-gray-100 border-b border-gray-200">
         <div className="flex items-center gap-4 mb-2">
           <Button variant="ghost" size="sm" onClick={() => navigate(back.to, { state: back.state })}>
             <ArrowLeft className="w-4 h-4" />