chore: release v0.1.0.44

Verwendet recovery_rotate_confirm_no statt remove_passkey_confirm_no.

Co-authored-by: Cursor <cursoragent@cursor.com>

VERSION

@@ -1 +1 @@
-0.1.0.38
+0.1.0.45

client/index.html

@@ -5,11 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Kostenloses, werbefreies digitales Yacht-Logbuch mit End-to-End-Verschlüsselung und Passkey-Anmeldung. Reisetage, GPS-Tracks, Crew und Schiffsdaten sicher dokumentieren – auch offline als PWA." />
-    <meta name="keywords" content="Yacht-Logbuch, Schiffstagebuch, Bordlogbuch, Segeln, Passkey, E2E-Verschlüsselung, GPS-Track, maritimes Logbuch, kostenlos, werbefrei, gratis, ohne Werbung" />
+    <meta name="keywords" content="Yacht-Logbuch, Schiffstagebuch, Bordlogbuch, Segeln, Passkey, E2E-Verschlüsselung, GPS-Track, maritimes Logbuch, kostenlos, werbefrei, gratis, ohne Werbung, yacht logbook, sailing log, ad-free" />
     <meta name="author" content="Markus F.J. Busche" />
     <meta name="robots" content="index, follow" />
     <meta name="application-name" content="Kapteins Daagbok" />
     <link rel="canonical" href="https://kapteins-daagbok.eu/" />
+    <link rel="alternate" hreflang="de" href="https://kapteins-daagbok.eu/?lng=de" />
+    <link rel="alternate" hreflang="en" href="https://kapteins-daagbok.eu/?lng=en" />
+    <link rel="alternate" hreflang="x-default" href="https://kapteins-daagbok.eu/" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

client/src/App.css

@@ -63,6 +63,16 @@ body {
   margin-bottom: 15px;
 }
 
+.auth-brand-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.auth-brand-title-row h1,
 .auth-brand h1 {
   font-size: 32px;
   font-weight: 700;
@@ -71,7 +81,7 @@ body {
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  margin: 0 0 14px 0;
+  margin: 0;
   line-height: 1.25;
   letter-spacing: -0.5px;
 }
@@ -722,17 +732,13 @@ html.scheme-dark .themed-select-option.is-selected {
   border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
-.skipper-badge {
-  display: flex;
-  align-items: center;
+.skipper-badge.btn-icon {
+  width: auto;
+  border-radius: 18px;
+  padding: 0 12px;
   gap: 6px;
   font-size: 13px;
-  padding: 6px 12px;
-  border-radius: 20px;
-  background: rgba(148, 163, 184, 0.08);
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  color: var(--app-text-muted);
-  cursor: default;
+  font-weight: 500;
   user-select: none;
 }
 
@@ -790,6 +796,274 @@ html.scheme-dark .themed-select-option.is-selected {
   padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
 }
 
+.profile-main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 24px 48px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  text-align: left;
+}
+
+.dashboard-header--profile .profile-header-brand {
+  align-items: flex-start;
+  flex: 1;
+  min-width: 0;
+  gap: 16px;
+}
+
+.profile-back-btn {
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+.profile-dl {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.profile-dl-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
+  gap: 8px 20px;
+  align-items: start;
+}
+
+.profile-dl-row dt {
+  margin: 0;
+  font-size: 13px;
+  color: var(--app-text-muted);
+  text-align: left;
+  line-height: 1.4;
+}
+
+.profile-dl-row dd {
+  margin: 0;
+  font-size: 14px;
+  word-break: break-word;
+  text-align: left;
+  justify-self: start;
+}
+
+.profile-user-id {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.profile-user-id code {
+  font-size: 12px;
+  background: rgba(148, 163, 184, 0.08);
+  padding: 4px 8px;
+  border-radius: 6px;
+  word-break: break-all;
+}
+
+.profile-copy-btn {
+  flex-shrink: 0;
+}
+
+.profile-section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.profile-section-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.profile-section-desc,
+.profile-pin-status,
+.profile-empty {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--app-text-muted);
+  line-height: 1.5;
+  text-align: left;
+}
+
+.profile-pin-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.profile-pin-form .input-group label {
+  display: block;
+  text-align: left;
+  font-size: 13.5px;
+  color: var(--app-text-muted);
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.profile-main .form-actions:not(.account-danger-zone__actions) {
+  justify-content: flex-start;
+}
+
+.profile-passkey-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.profile-passkey-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(148, 163, 184, 0.06);
+  border: 1px solid rgba(148, 163, 184, 0.12);
+}
+
+.profile-passkey-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.profile-passkey-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--app-text);
+  margin-bottom: 2px;
+}
+
+.profile-passkey-rename {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.profile-passkey-rename .input-text {
+  flex: 1 1 160px;
+  min-width: 0;
+  padding: 10px 12px;
+  font-size: 14px;
+}
+
+.profile-add-passkey {
+  margin-top: 16px;
+}
+
+.profile-add-passkey .input-group label {
+  display: block;
+  text-align: left;
+  font-size: 13.5px;
+  color: var(--app-text-muted);
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.profile-security-list {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.profile-security-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.profile-security-item--ok {
+  color: #4ade80;
+}
+
+.profile-security-item--warn {
+  color: #fbbf24;
+}
+
+.profile-recovery-hint {
+  margin-bottom: 0;
+  font-size: 12px;
+}
+
+.profile-recovery-actions {
+  margin-top: 16px;
+  justify-content: flex-start;
+}
+
+.profile-recovery-actions .btn {
+  width: auto;
+}
+
+.profile-recovery-card .phrase-grid {
+  margin-bottom: 24px;
+}
+
+.profile-recovery-warning {
+  margin: 0 0 20px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #fbbf24;
+  text-align: left;
+}
+
+.profile-device-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.account-danger-zone__hint {
+  margin: 0 0 16px;
+  font-size: 13px;
+  color: var(--app-text-muted);
+  line-height: 1.5;
+}
+
+.profile-passkey-id {
+  display: block;
+  font-family: ui-monospace, monospace;
+  font-size: 13px;
+}
+
+.profile-passkey-transports {
+  display: block;
+  font-size: 11px;
+  color: var(--app-text-muted);
+  margin-top: 2px;
+}
+
+@media (max-width: 640px) {
+  .profile-dl-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .dashboard-header--profile .profile-header-brand {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .profile-back-btn {
+    margin-top: 0;
+    align-self: flex-start;
+  }
+}
+
 .account-danger-zone {
   border-top: 1px solid rgba(239, 68, 68, 0.2);
   padding-top: 24px;
@@ -895,6 +1169,36 @@ html.scheme-dark .themed-select-option.is-selected {
   color: var(--app-text-heading);
 }
 
+.section-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.copy-link-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.copy-link-row .input-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.form-actions--start {
+  justify-content: flex-start;
+}
+
+.table-responsive {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .btn-refresh {
   background: none;
   border: none;
@@ -1635,6 +1939,229 @@ html.scheme-dark .themed-select-option.is-selected {
   .hide-mobile {
     display: none !important;
   }
+
+  .dashboard-header,
+  .app-header {
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .app-header-left {
+    flex: 1 1 100%;
+    min-width: 0;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .app-title-area {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .app-title-area h2 {
+    font-size: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .app-title-row {
+    gap: 6px;
+  }
+
+  .app-subtitle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .header-brand {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .header-brand h1 {
+    font-size: 20px;
+  }
+
+  .header-actions {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .conn-status > span:not(.pulse-dot) {
+    display: none;
+  }
+
+  .skipper-badge__name {
+    display: none;
+  }
+
+  .skipper-badge.btn-icon {
+    width: 36px;
+    padding: 0;
+  }
+
+  .btn-back {
+    padding: 8px 10px;
+    flex-shrink: 0;
+  }
+
+  .section-title-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .section-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .section-toolbar .btn {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .section-toolbar .btn.primary {
+    flex: 1 1 100%;
+  }
+
+  .section-title-left {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .section-title-left .form-header h2 {
+    font-size: 16px;
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  .logbooks-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .logbook-card {
+    flex-wrap: wrap;
+    padding: 16px;
+    gap: 12px;
+  }
+
+  .card-meta {
+    flex-wrap: wrap;
+  }
+
+  .card-info h3 {
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  .editor-header {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .crew-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .copy-link-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .copy-link-row .btn {
+    width: 100%;
+  }
+
+  .form-actions--start {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-actions--start .btn {
+    width: 100%;
+  }
+
+  .table-responsive {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .table-responsive table {
+    min-width: 480px;
+  }
+
+  .custom-dialog-overlay {
+    padding: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
+    align-items: flex-end;
+  }
+
+  .custom-dialog-card {
+    width: 100%;
+    max-width: none;
+    padding: 22px 18px;
+    margin-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  .custom-dialog-actions {
+    flex-direction: column-reverse;
+    gap: 10px;
+  }
+
+  .custom-dialog-actions .btn {
+    width: 100%;
+    margin: 0 !important;
+  }
+
+  .disclaimer-modal-overlay {
+    padding: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
+    align-items: flex-end;
+  }
+
+  .disclaimer-modal-panel,
+  .registration-disclaimer--modal {
+    width: 100%;
+    max-width: none;
+  }
+
+  .auth-card {
+    padding: 28px 20px;
+    max-width: calc(100vw - 24px);
+  }
+
+  .app-layout,
+  .dashboard-container {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .track-info-left {
+    flex-wrap: wrap;
+  }
+
+  .track-actions {
+    width: 100%;
+  }
+
+  .track-actions .btn {
+    flex: 1 1 calc(50% - 4px);
+    justify-content: center;
+  }
+
+  #openseamap-container,
+  .track-map-container {
+    height: min(360px, 45svh);
+  }
 }
 
 /* ========================================== */
@@ -2257,6 +2784,12 @@ html.theme-cupertino .events-scroll-container {
   color: #94a3b8;
 }
 
+.track-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .track-error-msg {
   color: #ef4444;
   background: rgba(239, 68, 68, 0.1);
@@ -2396,6 +2929,13 @@ html.theme-cupertino .events-scroll-container {
   color: var(--app-text-muted);
 }
 
+.stats-section-subtitle {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--app-text-primary);
+}
+
 .stats-route-chain {
   margin: 0;
   font-size: 15px;
@@ -2498,6 +3038,14 @@ html.theme-cupertino .events-scroll-container {
   background: linear-gradient(180deg, #38bdf8, #0284c7);
 }
 
+.stats-bar--motor-hours {
+  background: linear-gradient(180deg, #a78bfa, #7c3aed);
+}
+
+.stats-bar--fuel-per-hour {
+  background: linear-gradient(180deg, #fb923c, #ea580c);
+}
+
 .stats-bar-label {
   margin-top: 8px;
   font-size: 11px;
@@ -3191,6 +3739,28 @@ html.theme-cupertino .events-scroll-container {
   border: 1px solid rgba(251, 191, 36, 0.25);
 }
 
+.beta-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--app-accent-light);
+  background: var(--app-accent-bg);
+  border: 1px solid var(--app-accent-focus-ring);
+  flex-shrink: 0;
+}
+
+.header-brand-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
 .role-badge {
   display: inline-flex;
   align-items: center;
@@ -3320,7 +3890,9 @@ body.app-tour-active .app-tour-target-active {
 .app-tour-tooltip {
   position: fixed;
   z-index: 10002;
+  box-sizing: border-box;
   width: min(420px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
   padding: 20px 20px 16px;
   border-radius: 16px;
   background: #1e293b;
@@ -3329,10 +3901,19 @@ body.app-tour-active .app-tour-target-active {
   pointer-events: auto;
 }
 
+.app-tour-tooltip:not(.centered) {
+  left: max(16px, env(safe-area-inset-left, 0px));
+  right: max(16px, env(safe-area-inset-right, 0px));
+  width: auto;
+  max-width: none;
+}
+
 .app-tour-tooltip.centered {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  width: min(420px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
+  max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
 }
 
 .app-tour-close {
@@ -3409,6 +3990,34 @@ body.app-tour-active .app-tour-target-active {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 520px) {
+  .app-tour-tooltip {
+    padding: 18px 16px 14px;
+  }
+
+  .app-tour-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .app-tour-nav {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .app-tour-nav-btn {
+    flex: 1;
+    justify-content: center;
+    min-width: 0;
+  }
+}
+
+body.app-tour-active .pwa-install-banner {
+  display: none !important;
 }
 
 body.app-tour-active .disclaimer-modal-overlay.feedback-modal-overlay--tour {

client/src/App.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react'
 import './App.css'
 import { DialogProvider } from './components/ModalDialog.tsx'
 import AuthOnboarding from './components/AuthOnboarding.tsx'
+import UserProfilePage from './components/UserProfilePage.tsx'
 import LogbookDashboard from './components/LogbookDashboard.tsx'
 import VesselForm from './components/VesselForm.tsx'
 import CrewForm from './components/CrewForm.tsx'
@@ -13,6 +14,7 @@ import SettingsForm from './components/SettingsForm.tsx'
 import InvitationAcceptance from './components/InvitationAcceptance.tsx'
 import AppTourOverlay from './components/AppTourOverlay.tsx'
 import { AppTourProvider, useAppTour, type AppTab } from './context/AppTourContext.tsx'
+import { UnsavedChangesProvider, useUnsavedChangesContext } from './context/UnsavedChangesContext.tsx'
 import { getActiveMasterKey, logoutUser, checkServerSession } from './services/auth.js'
 import { PlausibleEvents, trackPlausibleEvent } from './services/analytics.js'
 import {
@@ -28,6 +30,7 @@ import PwaInstallPrompt from './components/PwaInstallPrompt.tsx'
 import PwaUpdatePrompt from './components/PwaUpdatePrompt.tsx'
 import AppFooter from './components/AppFooter.tsx'
 import LogbookRoleBadge from './components/LogbookRoleBadge.tsx'
+import BetaBadge from './components/BetaBadge.tsx'
 import { db } from './services/db.js'
 import { getLogbookAccess } from './services/logbookAccess.js'
 import type { LogbookAccessRole } from './services/logbook.js'
@@ -47,6 +50,7 @@ const PENDING_PUSH_LOGBOOK_KEY = 'pending_push_logbook_id'
 
 function App() {
   const { t, i18n } = useTranslation()
+  const { confirmLeave } = useUnsavedChangesContext()
   const { registerNavigation, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
@@ -58,6 +62,7 @@ function App() {
   const [online, setOnline] = useState(navigator.onLine)
   const [isSyncing, setIsSyncing] = useState(false)
   const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
+  const [showUserProfile, setShowUserProfile] = useState(false)
 
   // Viewer mode for read-only shared links
   const [isViewerMode, setIsViewerMode] = useState(false)
@@ -346,18 +351,27 @@ function App() {
     consumePendingPushLogbook()
   }
 
-  const handleLogout = () => {
+  const handleTabChange = async (tab: AppTab) => {
+    if (tab === activeTab) return
+    if (!(await confirmLeave())) return
+    setActiveTab(tab)
+  }
+
+  const handleLogout = async () => {
+    if (!(await confirmLeave())) return
     void logoutUser()
     setIsAuthenticated(false)
     setActiveLogbookId(null)
     setActiveLogbookTitle(null)
+    setShowUserProfile(false)
     setTourSelectedEntryId(null)
     setDemoHighlightEntryId(null)
     localStorage.removeItem('active_logbook_id')
     localStorage.removeItem('active_logbook_title')
   }
 
-  const handleBackToDashboard = () => {
+  const handleBackToDashboard = async () => {
+    if (!(await confirmLeave())) return
     setActiveLogbookId(null)
     setActiveLogbookTitle(null)
     setTourSelectedEntryId(null)
@@ -420,19 +434,29 @@ function App() {
     )
   }
 
-  const pwaInstallBanner = <PwaInstallPrompt variant="banner" />
+  const pwaInstallBanner = !isActive ? <PwaInstallPrompt variant="banner" /> : null
 
   const logbookReadOnly =
     activeLogbookRecord?.isShared === 1 && activeAccessRole === 'READ'
+  const isLogbookOwner =
+    activeAccessRole === 'OWNER' || activeLogbookRecord?.isShared !== 1
 
   if (!activeLogbookId) {
     return (
       <div style={{ display: 'contents' }}>
         {pwaInstallBanner}
-        <LogbookDashboard
-          onSelectLogbook={selectLogbook}
-          onLogout={handleLogout}
-        />
+        {showUserProfile ? (
+          <UserProfilePage
+            onBack={() => setShowUserProfile(false)}
+            onLogout={handleLogout}
+          />
+        ) : (
+          <LogbookDashboard
+            onSelectLogbook={selectLogbook}
+            onLogout={handleLogout}
+            onOpenProfile={() => setShowUserProfile(true)}
+          />
+        )}
       </div>
     )
   }
@@ -445,13 +469,14 @@ function App() {
         {/* Active Logbook Header */}
         <header className="app-header">
           <div className="app-header-left">
-            <button className="btn-back" onClick={handleBackToDashboard}>
+            <button className="btn-back" onClick={handleBackToDashboard} title={t('nav.dashboard')}>
               <ChevronLeft size={16} />
-              {t('nav.dashboard')}
+              <span className="hide-mobile">{t('nav.dashboard')}</span>
             </button>
             <div className="app-title-area">
               <div className="app-title-row">
                 <h2>{activeLogbookTitle}</h2>
+                <BetaBadge />
                 {activeAccessRole && activeAccessRole !== 'OWNER' && (
                   <LogbookRoleBadge role={activeAccessRole} />
                 )}
@@ -503,7 +528,7 @@ function App() {
         <aside className="app-sidebar">
           <button
             className={`sidebar-btn ${activeTab === 'logs' ? 'active' : ''}`}
-            onClick={() => setActiveTab('logs')}
+            onClick={() => void handleTabChange('logs')}
             data-tour="nav-logs"
           >
             <FileText size={18} />
@@ -512,7 +537,7 @@ function App() {
           
           <button
             className={`sidebar-btn ${activeTab === 'vessel' ? 'active' : ''}`}
-            onClick={() => setActiveTab('vessel')}
+            onClick={() => void handleTabChange('vessel')}
             data-tour="nav-vessel"
           >
             <Ship size={18} />
@@ -521,7 +546,7 @@ function App() {
 
           <button
             className={`sidebar-btn ${activeTab === 'crew' ? 'active' : ''}`}
-            onClick={() => setActiveTab('crew')}
+            onClick={() => void handleTabChange('crew')}
             data-tour="nav-crew"
           >
             <Users size={18} />
@@ -540,7 +565,7 @@ function App() {
 
           <button
             className={`sidebar-btn ${activeTab === 'stats' ? 'active' : ''}`}
-            onClick={() => setActiveTab('stats')}
+            onClick={() => void handleTabChange('stats')}
             data-tour="nav-stats"
           >
             <BarChart2 size={18} />
@@ -549,7 +574,7 @@ function App() {
 
           <button
             className={`sidebar-btn ${activeTab === 'settings' ? 'active' : ''}`}
-            onClick={() => setActiveTab('settings')}
+            onClick={() => void handleTabChange('settings')}
           >
             <Settings size={18} />
             {t('nav.settings')}
@@ -569,11 +594,15 @@ function App() {
           )}
 
           {activeTab === 'vessel' && (
-            <VesselForm logbookId={activeLogbookId} readOnly={logbookReadOnly} />
+            <VesselForm logbookId={activeLogbookId} readOnly={logbookReadOnly || !isLogbookOwner} />
           )}
 
           {activeTab === 'crew' && (
-            <CrewForm logbookId={activeLogbookId} readOnly={logbookReadOnly} />
+            <CrewForm
+              logbookId={activeLogbookId}
+              readOnly={logbookReadOnly}
+              skipperReadOnly={!isLogbookOwner}
+            />
           )}
 
           {activeTab === 'stats' && activeLogbookId && activeLogbookTitle && (
@@ -602,12 +631,14 @@ function App() {
 export default function AppWrapper() {
   return (
     <DialogProvider>
-      <AppTourProvider>
-        <PwaUpdatePrompt />
-        <App />
-        <AppTourOverlay />
-      </AppTourProvider>
-      <AppFooter />
+      <UnsavedChangesProvider>
+        <AppTourProvider>
+          <PwaUpdatePrompt />
+          <App />
+          <AppTourOverlay />
+        </AppTourProvider>
+        <AppFooter />
+      </UnsavedChangesProvider>
     </DialogProvider>
   )
 }

client/src/components/AccountDangerZone.tsx

@@ -46,6 +46,7 @@ export default function AccountDangerZone({ className = '' }: AccountDangerZoneP
       </div>
 
       <p className="account-danger-zone__desc">{t('settings.danger_zone_desc')}</p>
+      <p className="account-danger-zone__hint">{t('settings.delete_backup_hint')}</p>
 
       <div className="form-actions account-danger-zone__actions">
         <button

client/src/components/AppTourOverlay.tsx

@@ -15,12 +15,33 @@ interface SpotlightRect {
   height: number
 }
 
+const TOOLTIP_EDGE_MARGIN = 16
+const TOOLTIP_ESTIMATED_HEIGHT = 240
+
 function buildCutoutClipPath(rect: SpotlightRect): string {
   const right = rect.left + rect.width
   const bottom = rect.top + rect.height
   return `polygon(evenodd, 0 0, 100vw 0, 100vw 100vh, 0 100vh, 0 0, ${rect.left}px ${rect.top}px, ${right}px ${rect.top}px, ${right}px ${bottom}px, ${rect.left}px ${bottom}px, ${rect.left}px ${rect.top}px)`
 }
 
+function computeTooltipTop(spotlight: SpotlightRect): number {
+  const viewportBottom = window.innerHeight - TOOLTIP_EDGE_MARGIN
+  const below = spotlight.top + spotlight.height + 12
+  if (below + TOOLTIP_ESTIMATED_HEIGHT <= viewportBottom) {
+    return below
+  }
+
+  const above = spotlight.top - 12 - TOOLTIP_ESTIMATED_HEIGHT
+  if (above >= TOOLTIP_EDGE_MARGIN) {
+    return above
+  }
+
+  return Math.max(
+    TOOLTIP_EDGE_MARGIN,
+    Math.min(below, viewportBottom - TOOLTIP_ESTIMATED_HEIGHT)
+  )
+}
+
 export default function AppTourOverlay() {
   const { t } = useTranslation()
   const {
@@ -111,12 +132,8 @@ export default function AppTourOverlay() {
   const tooltipStyle = centered
     ? undefined
     : spotlight
-      ? {
-          top: Math.min(window.innerHeight - 220, spotlight.top + spotlight.height + 12),
-          left: Math.min(window.innerWidth - 340, Math.max(16, spotlight.left)),
-          maxWidth: '420px'
-        }
-      : { top: '20%', left: '50%', transform: 'translateX(-50%)', maxWidth: '420px' }
+      ? { top: computeTooltipTop(spotlight) }
+      : { top: '20%' }
 
   const backdropStyle = spotlight && !centered
     ? { clipPath: buildCutoutClipPath(spotlight) }

client/src/components/AuthOnboarding.tsx

@@ -13,6 +13,7 @@ import {
 } from '../services/auth.js'
 import { KeyRound, ShieldAlert, Languages, HelpCircle, UserRound, X } from 'lucide-react'
 import RegistrationDisclaimer from './RegistrationDisclaimer.tsx'
+import BetaBadge from './BetaBadge.tsx'
 
 interface AuthOnboardingProps {
   onAuthenticated: () => void
@@ -272,6 +273,7 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
             </label>
             <input
               type="password"
+              name="new-pin"
               inputMode="numeric"
               pattern="[0-9]*"
               maxLength={8}
@@ -281,6 +283,7 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
               onChange={(e) => setPinInput(e.target.value.replace(/\D/g, ''))}
               disabled={loading}
               required
+              autoComplete="new-password"
               style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
             />
           </div>
@@ -321,6 +324,7 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
           <div className="input-group">
             <input
               type="password"
+              name="pin"
               inputMode="numeric"
               pattern="[0-9]*"
               maxLength={8}
@@ -330,6 +334,7 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
               onChange={(e) => setPinLoginInput(e.target.value.replace(/\D/g, ''))}
               disabled={loading}
               required
+              autoComplete="current-password"
               style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
             />
           </div>
@@ -408,7 +413,10 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
     <div className="auth-card glass">
       <div className="auth-brand">
         <img src="/logo.png" alt="Kapteins Daagbok" className="auth-logo-img" />
-        <h1>{t('app.name')}</h1>
+        <div className="auth-brand-title-row">
+          <h1>{t('app.name')}</h1>
+          <BetaBadge />
+        </div>
         <p className="tagline">{t('auth.tagline')}</p>
       </div>
 

client/src/components/BetaBadge.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+
+interface BetaBadgeProps {
+  className?: string
+}
+
+export default function BetaBadge({ className = '' }: BetaBadgeProps) {
+  const { t } = useTranslation()
+
+  return (
+    <span
+      className={`beta-badge ${className}`.trim()}
+      title={t('app.beta_hint')}
+      aria-label={t('app.beta_hint')}
+    >
+      {t('app.beta')}
+    </span>
+  )
+}

client/src/components/CrewForm.tsx

@@ -12,6 +12,7 @@ import { Users, User, Plus, Trash2, Edit2, Save, X, Check, Camera } from 'lucide
 interface CrewFormProps {
   logbookId: string
   readOnly?: boolean
+  skipperReadOnly?: boolean
   preloadedData?: any[]
 }
 
@@ -34,9 +35,15 @@ interface DecryptedCrew {
   data: CrewMemberData
 }
 
-export default function CrewForm({ logbookId, readOnly = false, preloadedData }: CrewFormProps) {
+export default function CrewForm({
+  logbookId,
+  readOnly = false,
+  skipperReadOnly = false,
+  preloadedData
+}: CrewFormProps) {
   const { t } = useTranslation()
   const { showConfirm } = useDialog()
+  const skipperFormReadOnly = readOnly || skipperReadOnly
 
   // Skipper profile state
   const [skipName, setSkipName] = useState('')
@@ -192,7 +199,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
 
   const handleSaveSkipper = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (readOnly) return
+    if (skipperFormReadOnly) return
     setSavingSkipper(true)
     setError(null)
     setSkipperSuccess(false)
@@ -397,10 +404,14 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
 
         {error && <div className="auth-error mb-4">{error}</div>}
 
+        {skipperReadOnly && !readOnly && (
+          <p className="help-text mb-4">{t('crew.skipper_read_only_hint')}</p>
+        )}
+
         <form onSubmit={handleSaveSkipper} className="vessel-form">
           <div className="form-grid">
             <div className="vessel-photo-wrapper">
-              <div className="vessel-photo-preview" onClick={readOnly ? undefined : () => skipFileInputRef.current?.click()} style={{ cursor: readOnly ? 'default' : 'pointer' }}>
+              <div className="vessel-photo-preview" onClick={skipperFormReadOnly ? undefined : () => skipFileInputRef.current?.click()} style={{ cursor: skipperFormReadOnly ? 'default' : 'pointer' }}>
                 {skipPhoto ? (
                   <img src={skipPhoto} alt={skipName || 'Skipper'} className="vessel-photo" />
                 ) : (
@@ -408,7 +419,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                     <User size={48} className="placeholder-icon" />
                   </div>
                 )}
-                {!readOnly && (
+                {!skipperFormReadOnly && (
                   <div className="vessel-photo-overlay">
                     <Camera size={24} />
                     <span>{skipPhoto ? t('vessel.photo_change') : t('vessel.photo_add')}</span>
@@ -416,7 +427,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 )}
               </div>
               
-              {!readOnly && (
+              {!skipperFormReadOnly && (
                 <div className="vessel-photo-actions">
                   <button
                     type="button"
@@ -473,7 +484,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipName}
                 onChange={(e) => setSkipName(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
                 required
               />
             </div>
@@ -485,7 +496,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipAddress}
                 onChange={(e) => setSkipAddress(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -496,7 +507,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipBirthDate}
                 onChange={(e) => setSkipBirthDate(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -507,7 +518,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipPhone}
                 onChange={(e) => setSkipPhone(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -518,7 +529,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipNationality}
                 onChange={(e) => setSkipNationality(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -529,7 +540,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipPassport}
                 onChange={(e) => setSkipPassport(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -540,7 +551,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipBloodType}
                 onChange={(e) => setSkipBloodType(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -551,7 +562,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipAllergies}
                 onChange={(e) => setSkipAllergies(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -562,12 +573,12 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipDiseases}
                 onChange={(e) => setSkipDiseases(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
           </div>
 
-          {!readOnly && (
+          {!skipperFormReadOnly && (
             <div className="form-actions">
               {skipperSuccess && (
                 <div className="success-toast">

client/src/components/LogEntriesList.tsx

@@ -372,7 +372,7 @@ export default function LogEntriesList({
           <Calendar size={24} className="form-icon" />
           <h2>{t('logs.title')}</h2>
         </div>
-        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <div className="section-toolbar">
           <button className="btn secondary" onClick={handleDownloadCsv} disabled={loading || exporting || entries.length === 0} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.export_csv')}>
             <Download size={16} />
             <span className="hide-mobile">{exporting ? t('logs.exporting') : t('logs.export_csv')}</span>
@@ -384,9 +384,9 @@ export default function LogEntriesList({
           </button>
 
           {!readOnly && (
-            <button className="btn primary" onClick={handleCreate} disabled={loading || exporting} style={{ width: 'auto', padding: '8px 16px' }}>
+            <button className="btn primary" onClick={handleCreate} disabled={loading || exporting} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.new_entry')}>
               <Plus size={16} />
-              {t('logs.new_entry')}
+              <span className="hide-mobile">{t('logs.new_entry')}</span>
             </button>
           )}
         </div>

client/src/components/LogEntryEditor.tsx

@@ -16,11 +16,13 @@ import {
   fingerprintSignature,
   normalizedSerializedSignature,
   isPasskeySignature,
+  isClassicSignature,
+  createClassicSignature,
   isSignatureValidForEntry,
   hasAnySignature
 } from '../utils/signatures.js'
 import type { SignatureValue } from '../types/signatures.js'
-import { buildLogEntryPayload, type LogEventPayload } from '../utils/logEntryPayload.js'
+import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, type LogEventPayload } from '../utils/logEntryPayload.js'
 import { hashEntryForSigning } from '../utils/entryCanonicalHash.js'
 import { signLogEntry } from '../services/entrySigning.js'
 import { getLogbookAccess } from '../services/logbookAccess.js'
@@ -35,6 +37,8 @@ import {
   type SavedTrack
 } from '../services/trackUpload.js'
 import { computeTrackStats, formatTrackStats } from '../utils/trackStats.js'
+import { computeFuelPerMotorHour, formatFuelPerMotorHour } from '../utils/fuelStats.js'
+import { useRegisterUnsavedChanges } from '../context/UnsavedChangesContext.tsx'
 
 function emptyTankLevels() {
   return { morning: 0, refilled: 0, evening: 0, consumption: 0 }
@@ -46,6 +50,7 @@ function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string
   const trackDistance = decrypted.trackDistanceNm
   const trackSpeedMax = decrypted.trackSpeedMaxKn
   const trackSpeedAvg = decrypted.trackSpeedAvgKn
+  const motorHoursRaw = decrypted.motorHours
 
   const payload = buildLogEntryPayload({
     date: String(decrypted.date || ''),
@@ -76,6 +81,10 @@ function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string
       trackSpeedAvg != null && trackSpeedAvg !== ''
         ? parseFloat(String(trackSpeedAvg))
         : undefined,
+    motorHours:
+      motorHoursRaw != null && motorHoursRaw !== ''
+        ? parseFloat(String(motorHoursRaw))
+        : undefined,
     events: (decrypted.events as LogEventPayload[]) || []
   })
 
@@ -137,7 +146,7 @@ export default function LogEntryEditor({
   const [signSkipper, setSignSkipper] = useState<SignatureValue | ''>('')
   const [signCrew, setSignCrew] = useState<SignatureValue | ''>('')
   const [canSignSkipper, setCanSignSkipper] = useState(false)
-  const [hasWriteCollaborators, setHasWriteCollaborators] = useState(false)
+  const [canSignCrew, setCanSignCrew] = useState(false)
   const [isOnline, setIsOnline] = useState(navigator.onLine)
   const [entryHash, setEntryHash] = useState('')
 
@@ -146,6 +155,9 @@ export default function LogEntryEditor({
   const [trackSpeedMaxKn, setTrackSpeedMaxKn] = useState('')
   const [trackSpeedAvgKn, setTrackSpeedAvgKn] = useState('')
 
+  // Motor hours under engine propulsion (per travel day)
+  const [motorHours, setMotorHours] = useState('')
+
   // Events list state
   const [events, setEvents] = useState<LogEvent[]>([])
 
@@ -206,6 +218,11 @@ export default function LogEntryEditor({
     if (entry?.trackSpeedAvgKn != null && entry.trackSpeedAvgKn !== '') {
       setTrackSpeedAvgKn(String(entry.trackSpeedAvgKn))
     }
+    if (entry?.motorHours != null && entry.motorHours !== '') {
+      setMotorHours(String(entry.motorHours))
+    } else {
+      setMotorHours('')
+    }
   }
 
   const buildPayloadForSigning = useCallback((eventsOverride?: LogEvent[]) => {
@@ -229,16 +246,22 @@ export default function LogEntryEditor({
       trackDistanceNm: trackDistanceNm.trim() ? parseFloat(trackDistanceNm) : undefined,
       trackSpeedMaxKn: trackSpeedMaxKn.trim() ? parseFloat(trackSpeedMaxKn) : undefined,
       trackSpeedAvgKn: trackSpeedAvgKn.trim() ? parseFloat(trackSpeedAvgKn) : undefined,
+      motorHours: motorHours.trim() ? parseFloat(motorHours) : undefined,
       events: eventsOverride ?? events
     })
   }, [
     date, dayOfTravel, departure, destination,
     fwMorning, fwRefilled, fwEvening, fwConsumption,
     fuelMorning, fuelRefilled, fuelEvening, fuelConsumption,
-    trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn,
+    trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn, motorHours,
     events
   ])
 
+  const fuelPerMotorHour = useMemo(
+    () => computeFuelPerMotorHour(parseFloat(fuelConsumption) || 0, parseFloat(motorHours) || 0),
+    [fuelConsumption, motorHours]
+  )
+
   const currentFingerprint = useMemo(() => {
     const payload = buildPayloadForSigning()
     return JSON.stringify({
@@ -248,7 +271,60 @@ export default function LogEntryEditor({
     })
   }, [buildPayloadForSigning, signSkipper, signCrew])
 
-  const isDirty = savedFingerprint !== null && currentFingerprint !== savedFingerprint
+  const buildEventFromForm = (): LogEvent =>
+    normalizeLogEvent({
+      time: evTime,
+      mgk: evMgk,
+      rwk: evRwk,
+      windPressure: evWindPressure,
+      windDirection: evWindDirection,
+      windStrength: evWindStrength,
+      seaState: evSeaState,
+      weatherIcon: evWeatherIcon,
+      current: evCurrent,
+      heel: evHeel,
+      sailsOrMotor: evSailsOrMotor,
+      logReading: evLogReading,
+      distance: evDistance,
+      gpsLat: evGpsLat,
+      gpsLng: evGpsLng,
+      remarks: evRemarks
+    })
+
+  const applyEventFormToEvents = (eventData: LogEvent): LogEvent[] => {
+    if (editingEventIndex !== null) {
+      return sortLogEventsByTime(events.map((ev, idx) => (idx === editingEventIndex ? eventData : ev)))
+    }
+    return sortLogEventsByTime([...events, eventData])
+  }
+
+  const hasPendingEventForm = useMemo(() => {
+    if (!evTime.trim()) return false
+    const draft = buildEventFromForm()
+    if (editingEventIndex !== null) {
+      const original = events[editingEventIndex]
+      return original ? !logEventsEqual(draft, original) : false
+    }
+    return true
+  }, [
+    evTime, evMgk, evRwk, evWindPressure, evWindDirection, evWindStrength, evSeaState,
+    evWeatherIcon, evCurrent, evHeel, evSailsOrMotor, evLogReading, evDistance,
+    evGpsLat, evGpsLng, evRemarks, editingEventIndex, events
+  ])
+
+  const isDirty = savedFingerprint !== null && (
+    currentFingerprint !== savedFingerprint || hasPendingEventForm
+  )
+
+  const { confirmLeave } = useRegisterUnsavedChanges(
+    `log-entry-${entryId}`,
+    !readOnly && !loading && isDirty
+  )
+
+  const handleBack = async () => {
+    if (!(await confirmLeave())) return
+    onBack()
+  }
 
   const persistEntryToDb = useCallback(async (eventsOverride?: LogEvent[]) => {
     if (readOnly) return
@@ -308,8 +384,11 @@ export default function LogEntryEditor({
   useEffect(() => {
     getLogbookAccess(logbookId).then((access) => {
       if (!access) return
-      setCanSignSkipper(access.isOwner || access.role === 'WRITE')
-      setHasWriteCollaborators(access.writeCollaboratorCount > 0)
+      setCanSignSkipper(access.isOwner)
+      setCanSignCrew(
+        access.role === 'WRITE' ||
+        (access.isOwner && access.writeCollaboratorCount === 0)
+      )
     })
   }, [logbookId])
 
@@ -375,6 +454,7 @@ export default function LogEntryEditor({
   const crewSignatureValid = !isPasskeySignature(signCrew) || isSignatureValidForEntry(signCrew, entryHash)
 
   const handlePasskeySignSkipper = async () => {
+    if (!canSignSkipper) return
     const confirmed = await confirmSignWarning()
     if (!confirmed) return
 
@@ -392,6 +472,7 @@ export default function LogEntryEditor({
   }
 
   const handlePasskeySignCrew = async () => {
+    if (!canSignCrew) return
     const confirmed = await confirmSignWarning()
     if (!confirmed) return
 
@@ -483,7 +564,7 @@ export default function LogEntryEditor({
           setSignSkipper(normalizeSignature(preloadedEntry.signSkipper) || '')
           setSignCrew(normalizeSignature(preloadedEntry.signCrew) || '')
           loadTrackStatsFromEntry(preloadedEntry)
-          setEvents(preloadedEntry.events || [])
+          setEvents(sortLogEventsByTime((preloadedEntry.events || []).map(normalizeLogEvent)))
           setSavedFingerprint(fingerprintFromStoredEntry(preloadedEntry))
           return
         }
@@ -516,7 +597,7 @@ export default function LogEntryEditor({
             setSignSkipper(normalizeSignature(decrypted.signSkipper) || '')
             setSignCrew(normalizeSignature(decrypted.signCrew) || '')
             loadTrackStatsFromEntry(decrypted)
-            setEvents(decrypted.events || [])
+            setEvents(sortLogEventsByTime((decrypted.events || []).map(normalizeLogEvent)))
             setSavedFingerprint(fingerprintFromStoredEntry(decrypted))
           }
         }
@@ -783,25 +864,6 @@ export default function LogEntryEditor({
     return currentItems.includes(item.toLowerCase())
   }
 
-  const buildEventFromForm = (): LogEvent => ({
-    time: evTime,
-    mgk: evMgk.trim(),
-    rwk: evRwk.trim(),
-    windPressure: evWindPressure.trim(),
-    windDirection: evWindDirection.trim(),
-    windStrength: evWindStrength.trim(),
-    seaState: evSeaState.trim(),
-    weatherIcon: evWeatherIcon.trim(),
-    current: evCurrent.trim(),
-    heel: evHeel.trim(),
-    sailsOrMotor: evSailsOrMotor.trim(),
-    logReading: evLogReading.trim(),
-    distance: evDistance.trim(),
-    gpsLat: evGpsLat.trim(),
-    gpsLng: evGpsLng.trim(),
-    remarks: evRemarks.trim()
-  })
-
   const clearEventForm = () => {
     setEvTime('')
     setEvMgk('')
@@ -824,22 +886,23 @@ export default function LogEntryEditor({
   }
 
   const fillEventForm = (ev: LogEvent) => {
-    setEvTime(ev.time)
-    setEvMgk(ev.mgk)
-    setEvRwk(ev.rwk)
-    setEvWindPressure(ev.windPressure)
-    setEvWindDirection(ev.windDirection)
-    setEvWindStrength(ev.windStrength)
-    setEvSeaState(ev.seaState)
-    setEvWeatherIcon(ev.weatherIcon)
-    setEvCurrent(ev.current)
-    setEvHeel(ev.heel)
-    setEvSailsOrMotor(ev.sailsOrMotor)
-    setEvLogReading(ev.logReading)
-    setEvDistance(ev.distance)
-    setEvGpsLat(ev.gpsLat)
-    setEvGpsLng(ev.gpsLng)
-    setEvRemarks(ev.remarks)
+    const normalized = normalizeLogEvent(ev)
+    setEvTime(normalized.time)
+    setEvMgk(normalized.mgk)
+    setEvRwk(normalized.rwk)
+    setEvWindPressure(normalized.windPressure)
+    setEvWindDirection(normalized.windDirection)
+    setEvWindStrength(normalized.windStrength)
+    setEvSeaState(normalized.seaState)
+    setEvWeatherIcon(normalized.weatherIcon)
+    setEvCurrent(normalized.current)
+    setEvHeel(normalized.heel)
+    setEvSailsOrMotor(normalized.sailsOrMotor)
+    setEvLogReading(normalized.logReading)
+    setEvDistance(normalized.distance)
+    setEvGpsLat(normalized.gpsLat)
+    setEvGpsLng(normalized.gpsLng)
+    setEvRemarks(normalized.remarks)
     setEvLocationName('')
   }
 
@@ -866,27 +929,25 @@ export default function LogEntryEditor({
     if (readOnly || !evTime) return
 
     const eventData = buildEventFromForm()
-    let nextEvents: LogEvent[]
+    const isEdit = editingEventIndex !== null
+    const hadSkipperSignature = isEdit && !!signSkipper
 
-    if (editingEventIndex !== null) {
-      const hadSkipperSignature = !!signSkipper
+    if (hadSkipperSignature) {
       markSkipperSignatureClearedForEventChange()
-      nextEvents = events.map((ev, idx) => (idx === editingEventIndex ? eventData : ev))
+    }
+
+    const nextEvents = applyEventFormToEvents(eventData)
+
+    try {
+      await persistEntryToDb(nextEvents)
+      setEvents(nextEvents)
+      clearEventForm()
       if (hadSkipperSignature) {
         void showAlertRef.current(
           t('logs.sign_cleared_skipper_re_sign'),
           t('logs.sign_cleared_skipper_re_sign_title')
         )
       }
-    } else {
-      nextEvents = [...events, eventData]
-    }
-
-    setEvents(nextEvents)
-    clearEventForm()
-
-    try {
-      await persistEntryToDb(nextEvents)
     } catch (err: any) {
       console.error('Failed to auto-save event:', err)
       setError(err.message || 'Failed to save event.')
@@ -935,13 +996,28 @@ export default function LogEntryEditor({
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (readOnly || !isDirty) return
+    if (readOnly) return
+
+    let eventsToSave = events
+
+    if (hasPendingEventForm) {
+      const isEdit = editingEventIndex !== null
+      if (isEdit && signSkipper) {
+        markSkipperSignatureClearedForEventChange()
+      }
+      eventsToSave = applyEventFormToEvents(buildEventFromForm())
+      setEvents(eventsToSave)
+      clearEventForm()
+    } else if (!isDirty) {
+      return
+    }
+
     setSaving(true)
     setError(null)
     setSuccess(false)
 
     try {
-      await persistEntryToDb()
+      await persistEntryToDb(eventsToSave)
 
       setSuccess(true)
       trackPlausibleEvent(PlausibleEvents.TRAVEL_DAY_SAVED)
@@ -972,7 +1048,7 @@ export default function LogEntryEditor({
       <div className="form-card" style={{ paddingBottom: '20px' }}>
         <div className="section-title-bar">
           <div className="section-title-left">
-            <button className="btn-back" onClick={onBack} style={{ padding: '6px 12px' }}>
+            <button className="btn-back" onClick={() => void handleBack()} style={{ padding: '6px 12px' }}>
               <ChevronLeft size={16} />
               {t('logs.back_to_list')}
             </button>
@@ -992,7 +1068,7 @@ export default function LogEntryEditor({
             style={{ width: 'auto', padding: '8px 16px' }}
           >
             <Download size={16} />
-            <span>{exporting ? t('logs.exporting_pdf') : t('logs.export_pdf')}</span>
+            <span className="hide-mobile">{exporting ? t('logs.exporting_pdf') : t('logs.export_pdf')}</span>
           </button>
         </div>
       </div>
@@ -1053,6 +1129,20 @@ export default function LogEntryEditor({
                 disabled={saving || readOnly}
               />
             </div>
+
+            <div className="input-group">
+              <label>{t('logs.motor_hours')}</label>
+              <input
+                type="number"
+                className="input-text"
+                value={motorHours}
+                onChange={(e) => setMotorHours(e.target.value)}
+                disabled={saving || readOnly}
+                min="0"
+                step="0.1"
+                placeholder="0"
+              />
+            </div>
           </div>
         </div>
 
@@ -1163,6 +1253,22 @@ export default function LogEntryEditor({
                   aria-readonly="true"
                 />
               </div>
+
+              <div className="input-group">
+                <label>{t('logs.fuel_per_motor_hour')}</label>
+                <input
+                  type="text"
+                  className="input-text consumption-value"
+                  value={
+                    fuelPerMotorHour != null
+                      ? `${formatFuelPerMotorHour(fuelPerMotorHour)} L/h`
+                      : '—'
+                  }
+                  readOnly
+                  tabIndex={-1}
+                  aria-readonly="true"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -1567,15 +1673,16 @@ export default function LogEntryEditor({
                     )}
                   </span>
                 </div>
-                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+                <div className="track-actions">
                   <button
                     type="button"
                     className="btn secondary"
                     onClick={() => downloadTrackFile(savedTrack)}
                     style={{ width: 'auto', padding: '6px 12px', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px' }}
+                    title={t('logs.gps_tracking_btn_gpx')}
                   >
                     <Download size={14} />
-                    {t('logs.gps_tracking_btn_gpx')}
+                    <span className="hide-mobile">{t('logs.gps_tracking_btn_gpx')}</span>
                   </button>
                   {!readOnly && (
                     <button
@@ -1583,9 +1690,10 @@ export default function LogEntryEditor({
                       className="btn secondary"
                       onClick={handleDeleteTrack}
                       style={{ width: 'auto', padding: '6px 12px', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px', background: 'rgba(239, 68, 68, 0.1)', color: '#ef4444', borderColor: 'rgba(239, 68, 68, 0.2)' }}
+                      title={t('logs.gps_track_delete')}
                     >
                       <Trash2 size={14} />
-                      {t('logs.gps_track_delete')}
+                      <span className="hide-mobile">{t('logs.gps_track_delete')}</span>
                     </button>
                   )}
                 </div>
@@ -1646,13 +1754,40 @@ export default function LogEntryEditor({
           disabled={saving}
           isOnline={isOnline}
           canSignSkipper={canSignSkipper}
-          hasWriteCollaborators={hasWriteCollaborators}
+          canSignCrew={canSignCrew}
           signSkipper={signSkipper}
           signCrew={signCrew}
           skipperSignatureValid={skipperSignatureValid}
           crewSignatureValid={crewSignatureValid}
-          onSignSkipperChange={setSignSkipper}
-          onSignCrewChange={setSignCrew}
+          onSignSkipperChange={(value) => {
+            if (canSignSkipper && !readOnly) setSignSkipper(value)
+          }}
+          onSignCrewChange={(value) => {
+            if (!canSignCrew || readOnly) return
+            if (!value) {
+              setSignCrew('')
+              return
+            }
+            if (isPasskeySignature(value) || isClassicSignature(value)) {
+              setSignCrew(value)
+              return
+            }
+            if (!canSignSkipper) {
+              const userId = localStorage.getItem('active_userid') || ''
+              const username = localStorage.getItem('active_username') || ''
+              if (userId && username) {
+                setSignCrew(createClassicSignature({
+                  role: 'crew',
+                  userId,
+                  username,
+                  signedAt: new Date().toISOString(),
+                  payload: value
+                }))
+                return
+              }
+            }
+            setSignCrew(value)
+          }}
           onPasskeySignSkipper={handlePasskeySignSkipper}
           onPasskeySignCrew={handlePasskeySignCrew}
           onBeforeSign={confirmSignWarning}

client/src/components/LogbookBackupPanel.tsx

@@ -58,6 +58,16 @@ export default function LogbookBackupPanel({ logbookId, onRestored }: LogbookBac
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<string | null>(null)
 
+  const handleExportSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await handleExport()
+  }
+
+  const handleImportSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await handleRestore()
+  }
+
   const handleExport = async () => {
     setError(null)
     setSuccess(null)
@@ -209,40 +219,45 @@ export default function LogbookBackupPanel({ logbookId, onRestored }: LogbookBac
         </h4>
         <p className="text-muted backup-section-desc">{t('settings.backup_export_desc')}</p>
 
-        <div className="input-group">
-          <label htmlFor="backup-export-passphrase">{t('settings.backup_passphrase')}</label>
-          <input
-            id="backup-export-passphrase"
-            type="password"
-            className="input-text"
-            value={exportPassphrase}
-            onChange={(e) => setExportPassphrase(e.target.value)}
-            placeholder={t('settings.backup_passphrase_placeholder')}
-            autoComplete="new-password"
-            disabled={exporting}
-          />
-        </div>
-        <div className="input-group">
-          <label htmlFor="backup-export-confirm">{t('settings.backup_passphrase_confirm')}</label>
-          <input
-            id="backup-export-confirm"
-            type="password"
-            className="input-text"
-            value={exportConfirm}
-            onChange={(e) => setExportConfirm(e.target.value)}
-            autoComplete="new-password"
-            disabled={exporting}
-          />
-        </div>
-        <button
-          type="button"
-          className="btn primary"
-          onClick={handleExport}
-          disabled={exporting || !exportPassphrase || !exportConfirm}
-        >
-          <Download size={16} />
-          {exporting ? t('settings.backup_exporting') : t('settings.backup_export_btn')}
-        </button>
+        <form onSubmit={handleExportSubmit} className="backup-export-form">
+          <div className="input-group">
+            <label htmlFor="backup-export-passphrase">{t('settings.backup_passphrase')}</label>
+            <input
+              id="backup-export-passphrase"
+              name="backup-export-passphrase"
+              type="password"
+              className="input-text"
+              value={exportPassphrase}
+              onChange={(e) => setExportPassphrase(e.target.value)}
+              placeholder={t('settings.backup_passphrase_placeholder')}
+              autoComplete="new-password"
+              disabled={exporting}
+              required
+            />
+          </div>
+          <div className="input-group">
+            <label htmlFor="backup-export-confirm">{t('settings.backup_passphrase_confirm')}</label>
+            <input
+              id="backup-export-confirm"
+              name="backup-export-confirm"
+              type="password"
+              className="input-text"
+              value={exportConfirm}
+              onChange={(e) => setExportConfirm(e.target.value)}
+              autoComplete="new-password"
+              disabled={exporting}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="btn primary"
+            disabled={exporting || !exportPassphrase || !exportConfirm}
+          >
+            <Download size={16} />
+            {exporting ? t('settings.backup_exporting') : t('settings.backup_export_btn')}
+          </button>
+        </form>
       </section>
 
       <section className="backup-section backup-section--import" aria-labelledby="backup-import-heading">
@@ -252,58 +267,61 @@ export default function LogbookBackupPanel({ logbookId, onRestored }: LogbookBac
         </h4>
         <p className="text-muted backup-section-desc">{t('settings.backup_restore_desc')}</p>
 
-        <div className="input-group">
-          <label htmlFor="backup-import-file">{t('settings.backup_file_label')}</label>
-          <input
-            id="backup-import-file"
-            ref={fileInputRef}
-            type="file"
-            accept=".daagbok.json,application/json"
-            className="input-text"
-            onChange={handleFileChange}
-            disabled={importing}
-          />
-        </div>
+        <form onSubmit={handleImportSubmit} className="backup-import-form">
+          <div className="input-group">
+            <label htmlFor="backup-import-file">{t('settings.backup_file_label')}</label>
+            <input
+              id="backup-import-file"
+              ref={fileInputRef}
+              type="file"
+              accept=".daagbok.json,application/json"
+              className="input-text"
+              onChange={handleFileChange}
+              disabled={importing}
+            />
+          </div>
 
-        {importFile && (
-          <>
-            <div className="input-group">
-              <label htmlFor="backup-import-passphrase">{t('settings.backup_passphrase')}</label>
-              <input
-                id="backup-import-passphrase"
-                type="password"
-                className="input-text"
-                value={importPassphrase}
-                onChange={(e) => {
-                  setImportPassphrase(e.target.value)
-                  setImportPreview(null)
-                }}
-                autoComplete="current-password"
-                disabled={importing}
-              />
-            </div>
+          {importFile && (
+            <>
+              <div className="input-group">
+                <label htmlFor="backup-import-passphrase">{t('settings.backup_passphrase')}</label>
+                <input
+                  id="backup-import-passphrase"
+                  name="backup-import-passphrase"
+                  type="password"
+                  className="input-text"
+                  value={importPassphrase}
+                  onChange={(e) => {
+                    setImportPassphrase(e.target.value)
+                    setImportPreview(null)
+                  }}
+                  autoComplete="current-password"
+                  disabled={importing}
+                  required
+                />
+              </div>
 
-            <div className="backup-actions-row">
-              <button
-                type="button"
-                className="btn secondary"
-                onClick={handlePreviewImport}
-                disabled={previewing || importing || !importPassphrase}
-              >
-                {previewing ? t('settings.backup_previewing') : t('settings.backup_preview_btn')}
-              </button>
-              <button
-                type="button"
-                className="btn primary"
-                onClick={() => handleRestore()}
-                disabled={importing || !importPassphrase}
-              >
-                <Upload size={16} />
-                {importing ? t('settings.backup_restoring') : t('settings.backup_restore_btn')}
-              </button>
-            </div>
-          </>
-        )}
+              <div className="backup-actions-row">
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={handlePreviewImport}
+                  disabled={previewing || importing || !importPassphrase}
+                >
+                  {previewing ? t('settings.backup_previewing') : t('settings.backup_preview_btn')}
+                </button>
+                <button
+                  type="submit"
+                  className="btn primary"
+                  disabled={importing || !importPassphrase}
+                >
+                  <Upload size={16} />
+                  {importing ? t('settings.backup_restoring') : t('settings.backup_restore_btn')}
+                </button>
+              </div>
+            </>
+          )}
+        </form>
 
         {importPreview && (
           <div className="backup-preview glass">

client/src/components/LogbookDashboard.tsx

@@ -4,10 +4,10 @@ import { useLiveQuery } from 'dexie-react-hooks'
 import { db } from '../services/db.js'
 import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js'
 import LogbookRoleBadge from './LogbookRoleBadge.tsx'
+import BetaBadge from './BetaBadge.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { logoutUser } from '../services/auth.js'
 import { useDialog } from './ModalDialog.tsx'
-import AccountDangerZone from './AccountDangerZone.tsx'
 import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
 import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
 import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
@@ -15,9 +15,10 @@ import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
 interface LogbookDashboardProps {
   onSelectLogbook: (id: string, title: string) => void
   onLogout: () => void
+  onOpenProfile: () => void
 }
 
-export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookDashboardProps) {
+export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProfile }: LogbookDashboardProps) {
   const { t, i18n } = useTranslation()
   const { showConfirm } = useDialog()
   const [logbooks, setLogbooks] = useState<DecryptedLogbook[]>([])
@@ -177,7 +178,10 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
         <div className="header-brand">
           <Ship className="header-logo" size={32} />
           <div>
-            <h1>{t('app.name')}</h1>
+            <div className="header-brand-title-row">
+              <h1>{t('app.name')}</h1>
+              <BetaBadge />
+            </div>
             <p className="subtitle">{t('app.tagline')}</p>
           </div>
         </div>
@@ -206,14 +210,16 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
           </div>
 
           {/* Skipper profile */}
-          <div
-            className="skipper-badge"
-            title={t('dashboard.logged_in_as', { name: username })}
-            aria-label={t('dashboard.logged_in_as', { name: username })}
+          <button
+            type="button"
+            className="btn-icon skipper-badge"
+            onClick={onOpenProfile}
+            title={t('dashboard.open_profile', { name: username })}
+            aria-label={t('dashboard.open_profile', { name: username })}
           >
-            <User size={16} aria-hidden="true" />
+            <User size={18} aria-hidden="true" />
             <span className="skipper-badge__name">{username}</span>
-          </div>
+          </button>
 
           {/* Lang toggle */}
           <button className="btn-icon" onClick={toggleLanguage} title="Switch Language">
@@ -285,10 +291,6 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
           )}
         </section>
       </main>
-
-      <section className="dashboard-account-section" aria-label={t('settings.danger_zone_title')}>
-        <AccountDangerZone />
-      </section>
     </div>
   )
 }

client/src/components/PhotoCapture.tsx

@@ -233,7 +233,6 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
             <input
               type="file"
               accept="image/*"
-              capture="environment"
               ref={fileInputRef}
               onChange={handleFileChange}
               style={{ display: 'none' }}

client/src/components/ReadOnlyViewer.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { decryptJson } from '../services/crypto.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import VesselForm from './VesselForm.tsx'
 import CrewForm from './CrewForm.tsx'
 import LogEntriesList from './LogEntriesList.tsx'
@@ -124,6 +125,7 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
         }
       }
       setGpsTracks(decGpsTracks)
+      trackPlausibleEvent(PlausibleEvents.PUBLIC_LINK_OPENED)
 
     } catch (err: any) {
       console.error(err)

client/src/components/SettingsForm.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { Settings as SettingsIcon, Save, Check, Users, Trash2, Copy, Link as LinkIcon, Compass } from 'lucide-react'
 import { ensureLogbookKey } from '../services/logbookKeys.js'
 import LogbookBackupPanel from './LogbookBackupPanel.tsx'
-import AccountDangerZone from './AccountDangerZone.tsx'
 import PwaInstallPrompt from './PwaInstallPrompt.tsx'
 import PushNotificationSettings from './PushNotificationSettings.tsx'
 import { useDialog } from './ModalDialog.tsx'
@@ -111,6 +110,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
           const logbookKey = await ensureLogbookKey(logbookId)
           const hexKey = bufferToHex(logbookKey)
           setShareLink(`${window.location.origin}/share?token=${data.token}#key=${hexKey}`)
+          trackPlausibleEvent(PlausibleEvents.LOGBOOK_SHARED)
           showAlert('Public share link enabled!')
         } else {
           setShareEnabled(false)
@@ -292,12 +292,14 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
             </label>
             <input
               id="owm-api-key"
+              name="owm-api-key"
               type="password"
               className="input-text"
               placeholder="e.g. 8b6a7f...d8"
               value={apiKey}
               onChange={(e) => setApiKey(e.target.value)}
               disabled={saving}
+              autoComplete="off"
             />
           </div>
         </div>
@@ -398,6 +400,10 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
             {t('settings.share_desc')}
           </p>
 
+          <p className="signature-lock-notice" style={{ marginBottom: '16px' }}>
+            {t('settings.share_privacy_warning')}
+          </p>
+
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
             <label className="switch-label" style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', fontSize: '14px', color: '#f1f5f9' }}>
               <input
@@ -413,7 +419,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
           </div>
 
           {shareEnabled && shareLink && (
-            <div className="input-group mb-4" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <div className="input-group mb-4 copy-link-row">
               <input
                 type="text"
                 readOnly
@@ -454,7 +460,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
             {t('logs.invite_link_desc')}
           </p>
 
-          <div className="form-actions" style={{ justifyContent: 'flex-start', gap: '12px', marginBottom: '20px' }}>
+          <div className="form-actions form-actions--start" style={{ gap: '12px', marginBottom: '20px' }}>
             <button
               type="button"
               className="btn primary"
@@ -468,7 +474,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
           </div>
 
           {inviteLink && (
-            <div className="input-group mb-6" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <div className="input-group mb-6 copy-link-row">
               <input
                 type="text"
                 readOnly
@@ -534,8 +540,6 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
           )}
         </div>
       )}
-      {/* Danger Zone / Account Deletion */}
-      <AccountDangerZone className="mt-6" />
     </div>
   )
 }

client/src/components/SignatureSection.tsx

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react'
 import SignaturePad from './SignaturePad.tsx'
 import PasskeySignButton from './PasskeySignButton.tsx'
 import type { PasskeySignature, SignatureValue } from '../types/signatures.js'
-import { isPasskeySignature } from '../utils/signatures.js'
+import { isPasskeySignature, getSignaturePayload, getSignatureAttribution } from '../utils/signatures.js'
 
 type SignatureMode = 'passkey' | 'classic'
 
@@ -13,7 +13,7 @@ interface SignatureSectionProps {
   disabled?: boolean
   isOnline: boolean
   canSignSkipper: boolean
-  hasWriteCollaborators: boolean
+  canSignCrew: boolean
   signSkipper: SignatureValue | ''
   signCrew: SignatureValue | ''
   skipperSignatureValid: boolean
@@ -25,14 +25,30 @@ interface SignatureSectionProps {
   onBeforeSign?: () => Promise<boolean>
 }
 
+function SignerAttributionBadge({ value }: { value: SignatureValue | '' }) {
+  const { t, i18n } = useTranslation()
+  const attribution = getSignatureAttribution(value)
+  if (!attribution) return null
+
+  const formattedDate = new Date(attribution.signedAt).toLocaleString(
+    i18n.language === 'de' ? 'de-DE' : 'en-GB'
+  )
+
+  return (
+    <div className="passkey-sign-badge valid signature-attribution-badge">
+      <span>{t('logs.sign_passkey_signed', { username: attribution.username })}</span>
+      <span className="passkey-sign-date">{formattedDate}</span>
+    </div>
+  )
+}
+
 function padValue(value: SignatureValue | ''): string {
-  if (!value || isPasskeySignature(value)) return ''
-  return value
+  return getSignaturePayload(value)
 }
 
 function modeFromValue(value: SignatureValue | '', passkeyAvailable: boolean): SignatureMode {
   if (isPasskeySignature(value)) return 'passkey'
-  if (value) return 'classic'
+  if (getSignaturePayload(value)) return 'classic'
   return passkeyAvailable ? 'passkey' : 'classic'
 }
 
@@ -108,6 +124,7 @@ function RoleSignatureBlock({
     }
     return (
       <div className="signature-role-block">
+        <SignerAttributionBadge value={value} />
         <SignaturePad
           id={padId}
           label={roleLabel}
@@ -162,6 +179,7 @@ function RoleSignatureBlock({
 
       {showClassicPanel && (
         <>
+          <SignerAttributionBadge value={value} />
           <SignaturePad
             id={padId}
             label={roleLabel}
@@ -189,7 +207,7 @@ export default function SignatureSection({
   disabled = false,
   isOnline,
   canSignSkipper,
-  hasWriteCollaborators,
+  canSignCrew,
   signSkipper,
   signCrew,
   skipperSignatureValid,
@@ -203,7 +221,7 @@ export default function SignatureSection({
   const { t } = useTranslation()
 
   const showSkipperPasskey = canSignSkipper && isOnline
-  const showCrewPasskey = hasWriteCollaborators && isOnline
+  const showCrewPasskey = canSignCrew && isOnline
   const hasSignature = !!(signSkipper || signCrew)
 
   return (
@@ -228,7 +246,7 @@ export default function SignatureSection({
           passkeySignature={isPasskeySignature(signSkipper) ? signSkipper : undefined}
           signatureValid={skipperSignatureValid}
           showPasskey={showSkipperPasskey}
-          readOnly={readOnly}
+          readOnly={readOnly || !canSignSkipper}
           disabled={disabled}
           classicHint={showSkipperPasskey ? t('logs.sign_classic_or_passkey') : undefined}
           offlineHint={!isOnline && canSignSkipper ? t('logs.sign_offline_hint') : undefined}
@@ -245,7 +263,7 @@ export default function SignatureSection({
           passkeySignature={isPasskeySignature(signCrew) ? signCrew : undefined}
           signatureValid={crewSignatureValid}
           showPasskey={showCrewPasskey}
-          readOnly={readOnly}
+          readOnly={readOnly || !canSignCrew}
           disabled={disabled}
           classicHint={showCrewPasskey ? t('logs.sign_crew_passkey_hint') : undefined}
           onChange={onSignCrewChange}

client/src/components/StatsDashboard.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BarChart2, Anchor, Droplets, Fuel, Sailboat, Gauge } from 'lucide-react'
+import { BarChart2, Anchor, Droplets, Fuel, Sailboat, Gauge, Timer } from 'lucide-react'
 import MultiTrackMap from './MultiTrackMap.tsx'
 import {
   formatLiters,
+  formatHours,
   formatNm,
   loadAccountStats,
   loadLogbookStats,
@@ -12,6 +13,7 @@ import {
   type TravelDayStats
 } from '../services/statsAggregation.js'
 import { compareTravelDaysChronological } from '../utils/logEntryTankLevels.js'
+import { formatFuelPerMotorHour } from '../utils/fuelStats.js'
 
 interface StatsDashboardProps {
   logbookId: string
@@ -78,12 +80,26 @@ function TotalsGrid({ totals }: { totals: StatsTotals }) {
         value={formatNm(totals.motorDistanceNm)}
         unit={t('stats.unit_nm')}
       />
+      <KpiCard
+        icon={<Timer size={20} />}
+        label={t('stats.motor_hours_total')}
+        value={formatHours(totals.totalMotorHours)}
+        unit={t('stats.unit_h')}
+      />
       <KpiCard
         icon={<Fuel size={20} />}
         label={t('stats.fuel_total')}
         value={formatLiters(totals.totalFuelL)}
         unit={t('stats.unit_l')}
       />
+      {totals.fuelPerMotorHourL != null && (
+        <KpiCard
+          icon={<Timer size={20} />}
+          label={t('stats.fuel_per_motor_hour')}
+          value={formatFuelPerMotorHour(totals.fuelPerMotorHourL)}
+          unit={`${t('stats.unit_l')}/${t('stats.unit_h')}`}
+        />
+      )}
       <KpiCard
         icon={<Droplets size={20} />}
         label={t('stats.water_total')}
@@ -247,6 +263,36 @@ function LogbookScopeView({ summary }: { summary: LogbookStatsSummary }) {
         />
       </div>
 
+      <div className="member-editor-card glass mt-6">
+        <h3 className="stats-section-title">{t('stats.daily_motor_hours')}</h3>
+        <p className="stats-section-sub">
+          {t('stats.avg_motor_hours')}: {formatHours(totals.avgMotorHoursPerDay)} {t('stats.unit_h')}
+          {totals.fuelPerMotorHourL != null && (
+            <>
+              {' · '}
+              {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+            </>
+          )}
+        </p>
+        <DailyBarChart
+          days={travelDays}
+          valueFn={(d) => d.motorHours}
+          barClass="stats-bar--motor-hours"
+          formatValue={formatHours}
+        />
+        {travelDays.some((d) => d.fuelPerMotorHourL != null) && (
+          <>
+            <h4 className="stats-section-subtitle mt-4">{t('stats.daily_fuel_per_motor_hour')}</h4>
+            <DailyBarChart
+              days={travelDays}
+              valueFn={(d) => d.fuelPerMotorHourL ?? 0}
+              barClass="stats-bar--fuel-per-hour"
+              formatValue={(v) => formatFuelPerMotorHour(v > 0 ? v : null)}
+            />
+          </>
+        )}
+      </div>
+
       <div className="member-editor-card glass mt-6">
         <h3 className="stats-section-title">{t('stats.daily_consumption')}</h3>
         <p className="stats-section-sub">
@@ -256,6 +302,9 @@ function LogbookScopeView({ summary }: { summary: LogbookStatsSummary }) {
           {totals.fuelPerNmL != null && (
             <> · {t('stats.fuel_per_nm')}: {totals.fuelPerNmL} {t('stats.unit_l')}/{t('stats.unit_nm')}</>
           )}
+          {totals.fuelPerMotorHourL != null && (
+            <> · {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}</>
+          )}
         </p>
         <ConsumptionChart days={travelDays} />
       </div>
@@ -367,6 +416,7 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
                         <th>{t('stats.travel_days')}</th>
                         <th>{t('stats.total_distance')}</th>
                         <th>{t('stats.fuel_total')}</th>
+                        <th>{t('stats.motor_hours_total')}</th>
                         <th>{t('stats.water_total')}</th>
                       </tr>
                     </thead>
@@ -377,6 +427,7 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
                           <td>{lb.totals.travelDayCount}</td>
                           <td>{formatNm(lb.totals.totalDistanceNm)} {t('stats.unit_nm')}</td>
                           <td>{formatLiters(lb.totals.totalFuelL)} {t('stats.unit_l')}</td>
+                          <td>{formatHours(lb.totals.totalMotorHours)} {t('stats.unit_h')}</td>
                           <td>{formatLiters(lb.totals.totalFreshwaterL)} {t('stats.unit_l')}</td>
                         </tr>
                       ))}
@@ -397,8 +448,39 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
                     />
                   </div>
 
+                  <div className="member-editor-card glass mt-6">
+                    <h3 className="stats-section-title">{t('stats.daily_motor_hours')}</h3>
+                    {accountStats.totals.fuelPerMotorHourL != null && (
+                      <p className="stats-section-sub">
+                        {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(accountStats.totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+                      </p>
+                    )}
+                    <DailyBarChart
+                      days={allAccountDays}
+                      valueFn={(d) => d.motorHours}
+                      barClass="stats-bar--motor-hours"
+                      formatValue={formatHours}
+                    />
+                    {allAccountDays.some((d) => d.fuelPerMotorHourL != null) && (
+                      <>
+                        <h4 className="stats-section-subtitle mt-4">{t('stats.daily_fuel_per_motor_hour')}</h4>
+                        <DailyBarChart
+                          days={allAccountDays}
+                          valueFn={(d) => d.fuelPerMotorHourL ?? 0}
+                          barClass="stats-bar--fuel-per-hour"
+                          formatValue={(v) => formatFuelPerMotorHour(v > 0 ? v : null)}
+                        />
+                      </>
+                    )}
+                  </div>
+
                   <div className="member-editor-card glass mt-6">
                     <h3 className="stats-section-title">{t('stats.daily_consumption')}</h3>
+                    {accountStats.totals.fuelPerMotorHourL != null && (
+                      <p className="stats-section-sub">
+                        {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(accountStats.totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+                      </p>
+                    )}
                     <ConsumptionChart days={allAccountDays} />
                   </div>
 

client/src/components/UserProfilePage.tsx

@@ -0,0 +1,782 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLiveQuery } from 'dexie-react-hooks'
+import {
+  User,
+  ChevronLeft,
+  LogOut,
+  KeyRound,
+  Copy,
+  Check,
+  Plus,
+  Trash2,
+  BookOpen,
+  Anchor,
+  Gauge,
+  Sailboat,
+  Timer,
+  Share2,
+  Calendar,
+  Lock,
+  BarChart2,
+  Shield,
+  Smartphone,
+  RefreshCw,
+  Wifi,
+  WifiOff,
+  CircleCheck,
+  CircleAlert
+} from 'lucide-react'
+import AccountDangerZone from './AccountDangerZone.tsx'
+import BetaBadge from './BetaBadge.tsx'
+import { useDialog } from './ModalDialog.tsx'
+import {
+  addPasskey,
+  fetchUserProfile,
+  forgetUsername,
+  getActiveMasterKey,
+  getKnownUsernames,
+  hasLocalPin,
+  removeLocalPin,
+  removePasskey,
+  renamePasskey,
+  rotateRecoveryPhrase,
+  setLocalPin,
+  type UserProfile
+} from '../services/auth.js'
+import {
+  formatHours,
+  formatNm,
+  loadAccountStats,
+  type AccountStatsSummary
+} from '../services/statsAggregation.js'
+import { db } from '../services/db.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+interface UserProfilePageProps {
+  onBack: () => void
+  onLogout: () => void
+}
+
+function formatAccountAge(createdAt: string, locale: string): string {
+  const created = new Date(createdAt)
+  if (Number.isNaN(created.getTime())) return createdAt
+  return created.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+function KpiCard({
+  icon,
+  label,
+  value,
+  unit
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  unit?: string
+}) {
+  return (
+    <div className="stats-kpi-card glass">
+      <div className="stats-kpi-icon">{icon}</div>
+      <div className="stats-kpi-body">
+        <span className="stats-kpi-label">{label}</span>
+        <span className="stats-kpi-value">
+          {value}
+          {unit ? <span className="stats-kpi-unit">{unit}</span> : null}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SecurityCheckItem({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <li className={`profile-security-item ${ok ? 'profile-security-item--ok' : 'profile-security-item--warn'}`}>
+      {ok ? <CircleCheck size={18} aria-hidden="true" /> : <CircleAlert size={18} aria-hidden="true" />}
+      <span>{label}</span>
+    </li>
+  )
+}
+
+export default function UserProfilePage({ onBack, onLogout }: UserProfilePageProps) {
+  const { t, i18n } = useTranslation()
+  const { showConfirm, showAlert } = useDialog()
+  const username = localStorage.getItem('active_username') || 'Skipper'
+
+  const [profile, setProfile] = useState<UserProfile | null>(null)
+  const [accountStats, setAccountStats] = useState<AccountStatsSummary | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [copiedUserId, setCopiedUserId] = useState(false)
+  const [passkeyBusy, setPasskeyBusy] = useState(false)
+  const [pinBusy, setPinBusy] = useState(false)
+  const [pinInput, setPinInput] = useState('')
+  const [pinConfirm, setPinConfirm] = useState('')
+  const [pinActive, setPinActive] = useState(() => hasLocalPin(username))
+  const [newPasskeyLabel, setNewPasskeyLabel] = useState('')
+  const [passkeyLabels, setPasskeyLabels] = useState<Record<string, string>>({})
+  const [online, setOnline] = useState(navigator.onLine)
+  const [isKnownDevice, setIsKnownDevice] = useState(() =>
+    getKnownUsernames().some((u) => u.toLowerCase() === username.toLowerCase())
+  )
+  const [recoveryBusy, setRecoveryBusy] = useState(false)
+  const [pendingRecoveryPhrase, setPendingRecoveryPhrase] = useState<string | null>(null)
+  const [recoveryCopied, setRecoveryCopied] = useState(false)
+
+  const pendingSyncCount = useLiveQuery(() => db.syncQueue.count()) ?? 0
+
+  const sharedLogbookCount = useLiveQuery(
+    () => db.logbooks.filter((lb) => lb.isShared === 1).count(),
+    []
+  ) ?? 0
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const profileData = await fetchUserProfile()
+      setProfile(profileData)
+
+      try {
+        const stats = await loadAccountStats(false)
+        setAccountStats(stats)
+      } catch (statsErr) {
+        console.error('Failed to load account stats for profile:', statsErr)
+        setAccountStats(null)
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.load_error'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    trackPlausibleEvent(PlausibleEvents.PROFILE_OPENED)
+  }, [])
+
+  useEffect(() => {
+    const handleOnline = () => setOnline(true)
+    const handleOffline = () => setOnline(false)
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!profile) return
+    const labels: Record<string, string> = {}
+    for (const cred of profile.credentials) {
+      labels[cred.id] = cred.label ?? ''
+    }
+    setPasskeyLabels(labels)
+  }, [profile])
+
+  const statsTotals = accountStats?.totals
+  const logbookCount =
+    accountStats?.logbooks.length ?? profile?.serverMeta.ownedLogbookCount ?? 0
+
+  const accountAgeLabel = useMemo(() => {
+    if (!profile?.createdAt) return '—'
+    return formatAccountAge(profile.createdAt, i18n.language)
+  }, [profile?.createdAt, i18n.language])
+
+  const handleCopyUserId = async () => {
+    if (!profile?.userId) return
+    try {
+      await navigator.clipboard.writeText(profile.userId)
+      setCopiedUserId(true)
+      window.setTimeout(() => setCopiedUserId(false), 2000)
+    } catch {
+      showAlert(t('profile.copy_failed'))
+    }
+  }
+
+  const handleAddPasskey = async () => {
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      const hadLabel = Boolean(newPasskeyLabel.trim())
+      await addPasskey(newPasskeyLabel)
+      setNewPasskeyLabel('')
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_ADDED, { labeled: hadLabel })
+      showAlert(t('profile.add_passkey_success'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.add_passkey_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleRenamePasskey = async (credentialId: string) => {
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      await renamePasskey(credentialId, passkeyLabels[credentialId] ?? '')
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_RENAMED)
+      showAlert(t('profile.passkey_rename_success'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.passkey_rename_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleForgetDevice = async () => {
+    const confirmed = await showConfirm(
+      t('profile.device_forget_confirm_desc'),
+      t('profile.device_forget_confirm_title'),
+      t('profile.device_forget_confirm_yes'),
+      t('profile.device_forget_confirm_no')
+    )
+    if (!confirmed) return
+
+    forgetUsername(username)
+    setIsKnownDevice(false)
+    trackPlausibleEvent(PlausibleEvents.DEVICE_FORGOTTEN)
+  }
+
+  const handleRemovePasskey = async (credentialId: string) => {
+    if (profile && profile.credentials.length <= 1) {
+      trackPlausibleEvent(PlausibleEvents.LAST_PASSKEY_REMOVE_HINTED)
+      await showAlert(
+        t('profile.remove_passkey_last_desc'),
+        t('profile.remove_passkey_last_title')
+      )
+      return
+    }
+
+    const confirmed = await showConfirm(
+      t('profile.remove_passkey_confirm_desc'),
+      t('profile.remove_passkey_confirm_title'),
+      t('profile.remove_passkey_confirm_yes'),
+      t('profile.remove_passkey_confirm_no')
+    )
+    if (!confirmed) return
+
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      await removePasskey(credentialId)
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_REMOVED)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.remove_passkey_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleSavePin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (pinInput.length < 4) {
+      setError(t('profile.pin_length_error'))
+      return
+    }
+    if (pinInput !== pinConfirm) {
+      setError(t('profile.pin_mismatch'))
+      return
+    }
+
+    const masterKey = getActiveMasterKey()
+    if (!masterKey) {
+      setError(t('profile.pin_no_session'))
+      return
+    }
+
+    const pinAction = pinActive ? 'change' : 'set'
+
+    setPinBusy(true)
+    setError(null)
+    try {
+      await setLocalPin(pinInput.trim(), username, masterKey)
+      setPinActive(true)
+      setPinInput('')
+      setPinConfirm('')
+      trackPlausibleEvent(PlausibleEvents.LOCAL_PIN_SET, { action: pinAction })
+      showAlert(t('profile.pin_saved'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.pin_save_failed'))
+    } finally {
+      setPinBusy(false)
+    }
+  }
+
+  const handleRemovePin = async () => {
+    const confirmed = await showConfirm(
+      t('profile.remove_pin_confirm_desc'),
+      t('profile.remove_pin_confirm_title'),
+      t('profile.remove_pin_confirm_yes'),
+      t('profile.remove_pin_confirm_no')
+    )
+    if (!confirmed) return
+
+    removeLocalPin(username)
+    setPinActive(false)
+    setPinInput('')
+    setPinConfirm('')
+    trackPlausibleEvent(PlausibleEvents.LOCAL_PIN_REMOVED)
+  }
+
+  const handleRotateRecovery = async () => {
+    const confirmed = await showConfirm(
+      t('profile.recovery_rotate_confirm_desc'),
+      t('profile.recovery_rotate_confirm_title'),
+      t('profile.recovery_rotate_confirm_yes'),
+      t('profile.recovery_rotate_confirm_no')
+    )
+    if (!confirmed) return
+
+    if (!getActiveMasterKey()) {
+      setError(t('profile.recovery_rotate_no_session'))
+      return
+    }
+
+    setRecoveryBusy(true)
+    setError(null)
+    try {
+      const phrase = await rotateRecoveryPhrase()
+      setPendingRecoveryPhrase(phrase)
+      trackPlausibleEvent(PlausibleEvents.RECOVERY_ROTATED)
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'NO_ACTIVE_MASTER_KEY') {
+        setError(t('profile.recovery_rotate_no_session'))
+      } else {
+        setError(err instanceof Error ? err.message : t('profile.recovery_rotate_failed'))
+      }
+    } finally {
+      setRecoveryBusy(false)
+    }
+  }
+
+  const handleCopyRecoveryPhrase = async () => {
+    if (!pendingRecoveryPhrase) return
+    try {
+      await navigator.clipboard.writeText(pendingRecoveryPhrase)
+      setRecoveryCopied(true)
+      window.setTimeout(() => setRecoveryCopied(false), 2000)
+    } catch {
+      showAlert(t('profile.copy_failed'))
+    }
+  }
+
+  const handleConfirmRecoverySaved = () => {
+    setPendingRecoveryPhrase(null)
+    setRecoveryCopied(false)
+  }
+
+  return (
+    <div className="dashboard-container">
+      <header className="dashboard-header dashboard-header--profile">
+        <div className="header-brand profile-header-brand">
+          <button className="btn-back profile-back-btn" onClick={onBack} title={t('profile.back')}>
+            <ChevronLeft size={16} />
+            <span>{t('profile.back')}</span>
+          </button>
+          <div>
+            <div className="header-brand-title-row">
+              <h1>{t('profile.title')}</h1>
+              <BetaBadge />
+            </div>
+            <p className="subtitle">{t('profile.subtitle', { name: username })}</p>
+          </div>
+        </div>
+
+        <div className="header-actions">
+          <button className="btn-icon logout" onClick={onLogout} title={t('dashboard.logout')}>
+            <LogOut size={18} />
+          </button>
+        </div>
+      </header>
+
+      <main className="profile-main">
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        {loading ? (
+          <div className="tab-placeholder">
+            <User className="header-logo spin" size={48} />
+            <p>{t('profile.loading')}</p>
+          </div>
+        ) : pendingRecoveryPhrase ? (
+          <section className="form-card profile-recovery-card">
+            <div className="form-header">
+              <KeyRound size={24} className="form-icon" />
+              <h2>{t('auth.recovery_title')}</h2>
+            </div>
+            <p className="profile-recovery-warning">{t('profile.recovery_rotate_new_warning')}</p>
+            <div className="phrase-grid">
+              {pendingRecoveryPhrase.split(' ').map((word, idx) => (
+                <div key={idx} className="phrase-word">
+                  <span className="word-num">{idx + 1}</span>
+                  {word}
+                </div>
+              ))}
+            </div>
+            <div className="form-actions profile-recovery-actions">
+              <button type="button" className="btn secondary" onClick={() => void handleCopyRecoveryPhrase()}>
+                {recoveryCopied ? t('auth.copied') : t('auth.copy_phrase')}
+              </button>
+              <button type="button" className="btn primary" onClick={handleConfirmRecoverySaved}>
+                {t('auth.confirm_recovery')}
+              </button>
+            </div>
+          </section>
+        ) : profile ? (
+          <>
+            <section className="form-card">
+              <div className="form-header">
+                <User size={24} className="form-icon" />
+                <h2>{t('profile.identity_title')}</h2>
+              </div>
+
+              <dl className="profile-dl">
+                <div className="profile-dl-row">
+                  <dt>{t('profile.username')}</dt>
+                  <dd>{profile.username}</dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.user_id')}</dt>
+                  <dd className="profile-user-id">
+                    <code>{profile.userId}</code>
+                    <button
+                      type="button"
+                      className="btn-icon profile-copy-btn"
+                      onClick={() => void handleCopyUserId()}
+                      title={t('profile.copy_user_id')}
+                    >
+                      {copiedUserId ? <Check size={16} /> : <Copy size={16} />}
+                    </button>
+                  </dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.account_since')}</dt>
+                  <dd>{accountAgeLabel}</dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.prf_status')}</dt>
+                  <dd>
+                    {profile.hasPrfEncryption
+                      ? t('profile.prf_active')
+                      : t('profile.prf_inactive')}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Shield size={20} />
+                <h3>{t('profile.security_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.security_desc')}</p>
+              <ul className="profile-security-list">
+                <SecurityCheckItem
+                  ok={profile.credentials.length > 0}
+                  label={
+                    profile.credentials.length > 0
+                      ? t('profile.security_passkeys_ok')
+                      : t('profile.security_passkeys_missing')
+                  }
+                />
+                <SecurityCheckItem
+                  ok={profile.hasPrfEncryption}
+                  label={
+                    profile.hasPrfEncryption
+                      ? t('profile.security_prf_ok')
+                      : t('profile.security_prf_missing')
+                  }
+                />
+                <SecurityCheckItem
+                  ok={pinActive}
+                  label={pinActive ? t('profile.security_pin_ok') : t('profile.security_pin_missing')}
+                />
+                <SecurityCheckItem ok label={t('profile.security_recovery_ok')} />
+              </ul>
+              <p className="profile-section-desc profile-recovery-hint">{t('profile.security_recovery_hint')}</p>
+              <div className="form-actions profile-recovery-actions">
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={() => void handleRotateRecovery()}
+                  disabled={recoveryBusy || passkeyBusy || pinBusy}
+                >
+                  {recoveryBusy ? t('profile.processing') : t('profile.recovery_rotate_btn')}
+                </button>
+              </div>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Smartphone size={20} />
+                <h3>{t('profile.device_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.device_desc')}</p>
+              <div className={`profile-device-status conn-status ${online ? (pendingSyncCount > 0 ? 'warning' : 'online') : 'offline'}`}>
+                {online ? (
+                  pendingSyncCount > 0 ? (
+                    <>
+                      <RefreshCw size={16} className="spin" aria-hidden="true" />
+                      <span>{t('profile.device_sync_pending', { count: pendingSyncCount })}</span>
+                    </>
+                  ) : (
+                    <>
+                      <Wifi size={16} aria-hidden="true" />
+                      <span>{t('profile.device_sync_ok')}</span>
+                    </>
+                  )
+                ) : (
+                  <>
+                    <WifiOff size={16} aria-hidden="true" />
+                    <span>{t('sync.status_offline')}</span>
+                  </>
+                )}
+              </div>
+              <p className="profile-pin-status">
+                {isKnownDevice ? t('profile.device_remembered') : t('profile.device_not_remembered')}
+              </p>
+              {isKnownDevice && (
+                <div className="form-actions">
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={() => void handleForgetDevice()}
+                  >
+                    {t('profile.device_forget_btn')}
+                  </button>
+                </div>
+              )}
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Lock size={20} />
+                <h3>{t('profile.pin_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('auth.setup_pin_warning')}</p>
+              <p className="profile-pin-status">
+                {t('profile.pin_status')}:{' '}
+                <strong>{pinActive ? t('profile.pin_active') : t('profile.pin_inactive')}</strong>
+              </p>
+
+              <form onSubmit={(e) => void handleSavePin(e)} className="profile-pin-form">
+                <div className="input-group">
+                  <label htmlFor="profile-pin">{t('auth.pin_label')}</label>
+                  <input
+                    id="profile-pin"
+                    type="password"
+                    inputMode="numeric"
+                    autoComplete="new-password"
+                    className="input-text"
+                    placeholder={t('auth.pin_placeholder')}
+                    value={pinInput}
+                    onChange={(e) => setPinInput(e.target.value)}
+                    disabled={pinBusy}
+                  />
+                </div>
+                <div className="input-group">
+                  <label htmlFor="profile-pin-confirm">{t('profile.pin_confirm_label')}</label>
+                  <input
+                    id="profile-pin-confirm"
+                    type="password"
+                    inputMode="numeric"
+                    autoComplete="new-password"
+                    className="input-text"
+                    placeholder={t('profile.pin_confirm_placeholder')}
+                    value={pinConfirm}
+                    onChange={(e) => setPinConfirm(e.target.value)}
+                    disabled={pinBusy}
+                  />
+                </div>
+                <div className="form-actions">
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={pinBusy || pinInput.length < 4 || pinConfirm.length < 4}
+                  >
+                    {pinActive ? t('profile.pin_change_btn') : t('profile.pin_set_btn')}
+                  </button>
+                  {pinActive && (
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={() => void handleRemovePin()}
+                      disabled={pinBusy}
+                    >
+                      {t('profile.pin_remove_btn')}
+                    </button>
+                  )}
+                </div>
+              </form>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <KeyRound size={20} />
+                <h3>{t('profile.passkeys_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.passkeys_desc')}</p>
+
+              {profile.credentials.length === 0 ? (
+                <p className="profile-empty">{t('profile.passkeys_empty')}</p>
+              ) : (
+                <ul className="profile-passkey-list">
+                  {profile.credentials.map((cred) => (
+                    <li key={cred.id} className="profile-passkey-item">
+                      <div className="profile-passkey-main">
+                        <span className="profile-passkey-label">
+                          {cred.label || t('profile.passkey_unnamed')}
+                        </span>
+                        <span className="profile-passkey-id">{cred.credentialIdPreview}</span>
+                        {cred.transports.length > 0 && (
+                          <span className="profile-passkey-transports">
+                            {cred.transports.join(', ')}
+                          </span>
+                        )}
+                        <div className="profile-passkey-rename">
+                          <input
+                            type="text"
+                            className="input-text"
+                            value={passkeyLabels[cred.id] ?? ''}
+                            onChange={(e) =>
+                              setPasskeyLabels((prev) => ({ ...prev, [cred.id]: e.target.value }))
+                            }
+                            placeholder={t('profile.passkey_label_placeholder')}
+                            disabled={passkeyBusy}
+                            maxLength={64}
+                          />
+                          <button
+                            type="button"
+                            className="btn secondary"
+                            onClick={() => void handleRenamePasskey(cred.id)}
+                            disabled={passkeyBusy}
+                          >
+                            {t('profile.passkey_rename_btn')}
+                          </button>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="btn-icon danger"
+                        onClick={() => void handleRemovePasskey(cred.id)}
+                        disabled={passkeyBusy}
+                        title={t('profile.remove_passkey_btn')}
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              <div className="profile-add-passkey">
+                <div className="input-group">
+                  <label htmlFor="profile-new-passkey-label">{t('profile.passkey_label')}</label>
+                  <input
+                    id="profile-new-passkey-label"
+                    type="text"
+                    className="input-text"
+                    value={newPasskeyLabel}
+                    onChange={(e) => setNewPasskeyLabel(e.target.value)}
+                    placeholder={t('profile.passkey_label_placeholder')}
+                    disabled={passkeyBusy}
+                    maxLength={64}
+                  />
+                </div>
+              </div>
+
+              <div className="form-actions mt-4">
+                <button
+                  type="button"
+                  className="btn primary"
+                  onClick={() => void handleAddPasskey()}
+                  disabled={passkeyBusy}
+                >
+                  <Plus size={16} />
+                  {passkeyBusy ? t('profile.processing') : t('profile.add_passkey_btn')}
+                </button>
+              </div>
+            </section>
+
+            <section className="form-card">
+              <div className="form-header">
+                <BarChart2 size={24} className="form-icon" />
+                <div>
+                  <h2>{t('profile.stats_title')}</h2>
+                  <p className="stats-subtitle">{t('profile.stats_subtitle')}</p>
+                </div>
+              </div>
+
+              {(statsTotals || profile) && (
+                <div className="stats-kpi-grid">
+                  <KpiCard
+                    icon={<BookOpen size={20} />}
+                    label={t('profile.stats_logbooks')}
+                    value={String(logbookCount)}
+                  />
+                  {statsTotals && (
+                    <>
+                      <KpiCard
+                        icon={<Anchor size={20} />}
+                        label={t('stats.travel_days')}
+                        value={String(statsTotals.travelDayCount)}
+                      />
+                      <KpiCard
+                        icon={<Gauge size={20} />}
+                        label={t('stats.total_distance')}
+                        value={formatNm(statsTotals.totalDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Sailboat size={20} />}
+                        label={t('stats.sail_distance')}
+                        value={formatNm(statsTotals.sailDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Gauge size={20} />}
+                        label={t('stats.motor_distance')}
+                        value={formatNm(statsTotals.motorDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Timer size={20} />}
+                        label={t('stats.motor_hours_total')}
+                        value={formatHours(statsTotals.totalMotorHours)}
+                        unit={t('stats.unit_h')}
+                      />
+                      <KpiCard
+                        icon={<Share2 size={20} />}
+                        label={t('profile.stats_shared_logbooks')}
+                        value={String(sharedLogbookCount)}
+                      />
+                    </>
+                  )}
+                  <KpiCard
+                    icon={<Calendar size={20} />}
+                    label={t('profile.stats_account_since')}
+                    value={accountAgeLabel}
+                  />
+                </div>
+              )}
+            </section>
+
+            <AccountDangerZone className="mt-6" />
+          </>
+        ) : null}
+      </main>
+    </div>
+  )
+}

client/src/context/UnsavedChangesContext.tsx

@@ -0,0 +1,77 @@
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+  type ReactNode
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDialog } from '../components/ModalDialog.tsx'
+
+interface UnsavedChangesContextValue {
+  setDirty: (source: string, dirty: boolean) => void
+  confirmLeave: () => Promise<boolean>
+}
+
+const UnsavedChangesContext = createContext<UnsavedChangesContextValue | null>(null)
+
+export function UnsavedChangesProvider({ children }: { children: ReactNode }) {
+  const { t } = useTranslation()
+  const { showConfirm } = useDialog()
+  const dirtySources = useRef(new Set<string>())
+
+  const setDirty = useCallback((source: string, dirty: boolean) => {
+    if (dirty) dirtySources.current.add(source)
+    else dirtySources.current.delete(source)
+  }, [])
+
+  const confirmLeave = useCallback(async (): Promise<boolean> => {
+    if (dirtySources.current.size === 0) return true
+    return showConfirm(
+      t('common.unsaved_changes_message'),
+      t('common.unsaved_changes_title'),
+      t('common.unsaved_changes_leave'),
+      t('common.unsaved_changes_stay')
+    )
+  }, [showConfirm, t])
+
+  useEffect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (dirtySources.current.size === 0) return
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [])
+
+  const value = useMemo(() => ({ setDirty, confirmLeave }), [setDirty, confirmLeave])
+
+  return (
+    <UnsavedChangesContext.Provider value={value}>
+      {children}
+    </UnsavedChangesContext.Provider>
+  )
+}
+
+export function useUnsavedChangesContext(): UnsavedChangesContextValue {
+  const ctx = useContext(UnsavedChangesContext)
+  if (!ctx) {
+    throw new Error('useUnsavedChangesContext must be used within UnsavedChangesProvider')
+  }
+  return ctx
+}
+
+/** Register a form/view as having unsaved changes (cleared automatically on unmount). */
+export function useRegisterUnsavedChanges(source: string, isDirty: boolean) {
+  const { setDirty, confirmLeave } = useUnsavedChangesContext()
+
+  useEffect(() => {
+    setDirty(source, isDirty)
+    return () => setDirty(source, false)
+  }, [source, isDirty, setDirty])
+
+  return { confirmLeave }
+}

client/src/i18n/index.ts

@@ -3,6 +3,7 @@ import { initReactI18next } from 'react-i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import enTranslation from './locales/en.json'
 import deTranslation from './locales/de.json'
+import { initSeo } from '../utils/seo.js'
 
 i18n
   .use(LanguageDetector)
@@ -17,9 +18,12 @@ i18n
       escapeValue: false // React already escapes values (prevents XSS)
     },
     detection: {
-      order: ['localStorage', 'navigator'],
+      order: ['querystring', 'localStorage', 'navigator'],
+      lookupQuerystring: 'lng',
       caches: ['localStorage']
     }
   })
 
+initSeo(i18n)
+
 export default i18n

client/src/i18n/locales/de.json

@@ -2,7 +2,15 @@
   "translation": {
     "app": {
       "name": "Kapteins Daagbok",
-      "tagline": "Privates Yacht-Logbuch"
+      "tagline": "Privates Yacht-Logbuch",
+      "beta": "Beta",
+      "beta_hint": "Beta-Version — Funktionen können sich noch ändern"
+    },
+    "common": {
+      "unsaved_changes_title": "Ungespeicherte Änderungen",
+      "unsaved_changes_message": "Du hast ungespeicherte Änderungen. Möchtest du die Seite wirklich verlassen? Deine Änderungen gehen verloren.",
+      "unsaved_changes_leave": "Verlassen",
+      "unsaved_changes_stay": "Bleiben"
     },
     "nav": {
       "dashboard": "Dashboard",
@@ -143,6 +151,7 @@
       "sign_passkey_signing": "Passkey wird angefordert…",
       "sign_passkey_signed": "Freigegeben von {{username}}",
       "sign_passkey_export": "Passkey: {{username}} ({{date}})",
+      "sign_attribution_export": "{{username}} ({{date}})",
       "sign_passkey_clear": "Passkey-Freigabe entfernen",
       "sign_mode_passkey": "Passkey",
       "sign_mode_classic": "Klassisch",
@@ -196,6 +205,8 @@
       "event_heel": "Krängung (°)",
       "event_sails": "Segelführung / Motor",
       "motor_propulsion": "Maschinenfahrt",
+      "motor_hours": "Maschinenstunden (gesamt)",
+      "fuel_per_motor_hour": "Verbrauch pro Maschinenstunde",
       "event_distance": "Distanz (sm)",
       "export_csv": "CSV herunterladen",
       "share_csv": "CSV teilen",
@@ -258,11 +269,102 @@
       "role_crew": "Crew-Zugang",
       "role_crew_hint": "Eingeladenes Logbuch — du kannst als Crew mitarbeiten und signieren",
       "role_read": "Nur Lesen",
-      "role_read_hint": "Geteiltes Logbuch — nur Ansicht, keine Bearbeitung"
+      "role_read_hint": "Geteiltes Logbuch — nur Ansicht, keine Bearbeitung",
+      "open_profile": "Profil von {{name}} öffnen"
+    },
+    "profile": {
+      "title": "Benutzerprofil",
+      "subtitle": "Konto, Passkeys und Statistiken für {{name}}",
+      "back": "Zurück zum Dashboard",
+      "loading": "Profil wird geladen…",
+      "load_error": "Profil konnte nicht geladen werden.",
+      "copy_failed": "Kopieren fehlgeschlagen.",
+      "processing": "Wird verarbeitet…",
+      "identity_title": "Konto-Identität",
+      "username": "Benutzername",
+      "user_id": "Benutzer-ID",
+      "copy_user_id": "Benutzer-ID kopieren",
+      "account_since": "Konto seit",
+      "prf_status": "Passkey-Schlüsselableitung (PRF)",
+      "prf_active": "Aktiv",
+      "prf_inactive": "Nicht eingerichtet",
+      "passkeys_title": "Passkeys",
+      "passkeys_desc": "Registriere auf jedem Gerät einen eigenen Passkey. So kannst du dich auch nach einem Plattformwechsel anmelden.",
+      "passkeys_empty": "Keine Passkeys gefunden.",
+      "add_passkey_btn": "Neuen Passkey hinzufügen",
+      "add_passkey_success": "Passkey erfolgreich hinzugefügt.",
+      "add_passkey_failed": "Passkey konnte nicht hinzugefügt werden.",
+      "remove_passkey_btn": "Passkey entfernen",
+      "remove_passkey_last_title": "Letzter Passkey",
+      "remove_passkey_last_desc": "Der einzige Passkey kann nicht entfernt werden, ohne den Zugang zu deinem Konto zu verlieren. Um das Konto vollständig zu löschen, nutze die Gefahrenzone am Ende dieser Seite.",
+      "remove_passkey_failed": "Passkey konnte nicht entfernt werden.",
+      "remove_passkey_confirm_title": "Passkey entfernen?",
+      "remove_passkey_confirm_desc": "Dieses Gerät kann sich danach nicht mehr mit diesem Passkey anmelden.",
+      "remove_passkey_confirm_yes": "Entfernen",
+      "remove_passkey_confirm_no": "Abbrechen",
+      "pin_title": "Lokaler PIN",
+      "pin_status": "Status",
+      "pin_active": "Aktiv auf diesem Gerät",
+      "pin_inactive": "Nicht eingerichtet",
+      "pin_confirm_label": "PIN bestätigen",
+      "pin_confirm_placeholder": "PIN erneut eingeben",
+      "pin_set_btn": "PIN einrichten",
+      "pin_change_btn": "PIN ändern",
+      "pin_remove_btn": "PIN entfernen",
+      "pin_saved": "PIN gespeichert.",
+      "pin_save_failed": "PIN konnte nicht gespeichert werden.",
+      "pin_mismatch": "Die PIN-Eingaben stimmen nicht überein.",
+      "pin_length_error": "Die PIN muss mindestens 4 Zeichen haben.",
+      "pin_no_session": "Sitzung abgelaufen — bitte erneut anmelden.",
+      "remove_pin_confirm_title": "PIN entfernen?",
+      "remove_pin_confirm_desc": "Du musst dich auf diesem Gerät wieder mit Passkey oder Wiederherstellungsschlüssel anmelden.",
+      "remove_pin_confirm_yes": "PIN entfernen",
+      "remove_pin_confirm_no": "Abbrechen",
+      "security_title": "Sicherheits-Checkliste",
+      "security_desc": "Überblick über die wichtigsten Schutzmechanismen deines Kontos.",
+      "security_passkeys_ok": "Mindestens ein Passkey registriert",
+      "security_passkeys_missing": "Kein Passkey registriert",
+      "security_prf_ok": "PRF-Schlüsselableitung aktiv",
+      "security_prf_missing": "PRF nicht eingerichtet",
+      "security_pin_ok": "Lokaler PIN auf diesem Gerät",
+      "security_pin_missing": "Kein lokaler PIN",
+      "security_recovery_ok": "Wiederherstellungsschlüssel eingerichtet",
+      "security_recovery_hint": "Die 12 Wörter wurden bei der Registrierung angezeigt. Bewahre sie offline und getrennt vom Gerät auf. Du kannst unten einen neuen Schlüssel erstellen — der alte wird dann ungültig.",
+      "recovery_rotate_btn": "Neuen Wiederherstellungsschlüssel erstellen",
+      "recovery_rotate_confirm_title": "Neuen Wiederherstellungsschlüssel erstellen?",
+      "recovery_rotate_confirm_desc": "Der bisherige 12-Wörter-Schlüssel wird sofort ungültig. Stelle sicher, dass du den neuen Schlüssel sicher aufbewahrst, bevor du fortfährst.",
+      "recovery_rotate_confirm_yes": "Neuen Schlüssel erstellen",
+      "recovery_rotate_confirm_no": "Abbrechen",
+      "recovery_rotate_new_warning": "WICHTIG: Schreib diese 12 Wörter auf und bewahre sie offline auf. Der bisherige Wiederherstellungsschlüssel ist ab sofort ungültig.",
+      "recovery_rotate_failed": "Wiederherstellungsschlüssel konnte nicht erstellt werden.",
+      "recovery_rotate_no_session": "Verschlüsselungssitzung abgelaufen — bitte abmelden und erneut anmelden, dann erneut versuchen.",
+      "device_title": "Dieses Gerät",
+      "device_desc": "Lokaler Cache, Sync-Status und Schnell-Login auf diesem Browser.",
+      "device_sync_pending": "{{count}} ausstehende Sync-Einträge",
+      "device_sync_ok": "Alle lokalen Änderungen synchronisiert",
+      "device_remembered": "Account für Schnell-Login auf diesem Gerät gespeichert",
+      "device_not_remembered": "Account nicht in der Schnell-Login-Liste",
+      "device_forget_btn": "Account auf diesem Gerät vergessen",
+      "device_forget_confirm_title": "Schnell-Login entfernen?",
+      "device_forget_confirm_desc": "Der Account verschwindet aus der Schnell-Login-Liste auf diesem Gerät. Deine Session und lokalen Logbücher bleiben erhalten.",
+      "device_forget_confirm_yes": "Entfernen",
+      "device_forget_confirm_no": "Abbrechen",
+      "passkey_label": "Name für neuen Passkey (optional)",
+      "passkey_label_placeholder": "z. B. MacBook, iPhone",
+      "passkey_rename_btn": "Name speichern",
+      "passkey_rename_success": "Passkey-Name gespeichert.",
+      "passkey_rename_failed": "Passkey-Name konnte nicht gespeichert werden.",
+      "passkey_unnamed": "Unbenannter Passkey",
+      "stats_title": "Statistiken",
+      "stats_subtitle": "Über alle deine Logbücher auf diesem Gerät",
+      "stats_logbooks": "Logbücher",
+      "stats_account_since": "Konto seit",
+      "stats_shared_logbooks": "Geteilte Logbücher"
     },
     "crew": {
       "title": "Skipper- & Crew-Profile",
       "skipper_section": "Skipper-Profil",
+      "skipper_read_only_hint": "Das Skipper-Profil kann nur vom Logbuch-Eigner bearbeitet werden.",
       "crew_section": "Crew-Liste",
       "add_crew": "Crew-Mitglied hinzufügen",
       "edit_crew": "Crew-Mitglied bearbeiten",
@@ -320,6 +422,7 @@
       "color_scheme_dark": "Dunkel",
       "share_title": "Logbuch teilen (Schreibgeschützt)",
       "share_desc": "Aktiviere diese Option, um einen öffentlichen, schreibgeschützten Link zu erstellen. Jeder mit dem Link kann deine Reisen, Yacht-Profile und Besatzung ansehen. Die Verschlüsselungsschlüssel werden niemals an den Server übertragen (sie bleiben im Hash-Teil der URL).",
+      "share_privacy_warning": "Empfehlung: Teile diesen Link nur privat (z. B. per E-Mail oder Messenger), nicht in sozialen Medien.",
       "share_enable": "Öffentlichen Link aktivieren",
       "share_copied": "Link kopiert!",
       "share_copy_btn": "Link kopieren",
@@ -331,6 +434,7 @@
       "delete_account_confirm_yes": "Ja, Konto und alle Daten löschen",
       "delete_account_confirm_no": "Abbrechen",
       "delete_account_failed": "Konto konnte nicht gelöscht werden. Bitte versuche es erneut.",
+      "delete_backup_hint": "Tipp: Erstelle vor dem Löschen Backups deiner Logbücher (.daagbok.json) in den Einstellungen jedes Logbuchs.",
       "deleting_account": "Konto wird gelöscht…",
       "tour_title": "App-Tour",
       "tour_desc": "Lass dich erneut durch die wichtigsten Bereiche der App führen.",
@@ -469,6 +573,9 @@
       "travel_days": "Reisetage",
       "sail_distance": "Unter Segel",
       "motor_distance": "Maschinenfahrt",
+      "motor_hours_total": "Maschinenstunden gesamt",
+      "daily_motor_hours": "Maschinenstunden pro Reisetag",
+      "avg_motor_hours": "Ø Maschinenstunden pro Reisetag",
       "unknown_propulsion": "Unbekannt",
       "fuel_total": "Kraftstoff gesamt",
       "water_total": "Wasser gesamt",
@@ -482,9 +589,12 @@
       "avg_fuel": "Ø Kraftstoff",
       "avg_water": "Ø Wasser",
       "fuel_per_nm": "Kraftstoff pro sm",
+      "fuel_per_motor_hour": "Kraftstoff pro Maschinenstunde",
+      "daily_fuel_per_motor_hour": "Kraftstoffverbrauch pro Maschinenstunde je Reisetag",
       "fuel_legend": "Kraftstoff",
       "water_legend": "Wasser",
       "unit_nm": "sm",
+      "unit_h": "h",
       "unit_l": "L",
       "day_label": "Tag {{day}}",
       "account_logbooks": "Logbücher im Überblick",
@@ -542,6 +652,12 @@
           "body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit unter Einstellungen erneut starten. Gute Fahrt!"
         }
       }
+    },
+    "seo": {
+      "title": "Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch (werbefrei)",
+      "description": "Kostenloses, werbefreies digitales Yacht-Logbuch mit End-to-End-Verschlüsselung und Passkey-Anmeldung. Reisetage, GPS-Tracks, Crew und Schiffsdaten sicher dokumentieren – auch offline als PWA.",
+      "keywords": "Yacht-Logbuch, Schiffstagebuch, Bordlogbuch, Segeln, Passkey, E2E-Verschlüsselung, GPS-Track, maritimes Logbuch, kostenlos, werbefrei, gratis, ohne Werbung",
+      "ogImageAlt": "Kapteins Daagbok Logo"
     }
   }
 }

client/src/i18n/locales/en.json

@@ -2,7 +2,15 @@
   "translation": {
     "app": {
       "name": "Kapteins Daagbok",
-      "tagline": "Private Yacht Logbook"
+      "tagline": "Private Yacht Logbook",
+      "beta": "Beta",
+      "beta_hint": "Beta release — features may still change"
+    },
+    "common": {
+      "unsaved_changes_title": "Unsaved changes",
+      "unsaved_changes_message": "You have unsaved changes. Leave this page anyway? Your changes will be lost.",
+      "unsaved_changes_leave": "Leave",
+      "unsaved_changes_stay": "Stay"
     },
     "nav": {
       "dashboard": "Dashboard",
@@ -143,6 +151,7 @@
       "sign_passkey_signing": "Requesting Passkey…",
       "sign_passkey_signed": "Signed by {{username}}",
       "sign_passkey_export": "Passkey: {{username}} ({{date}})",
+      "sign_attribution_export": "{{username}} ({{date}})",
       "sign_passkey_clear": "Remove Passkey signature",
       "sign_mode_passkey": "Passkey",
       "sign_mode_classic": "Classic",
@@ -196,6 +205,8 @@
       "event_heel": "Heel Angle (°)",
       "event_sails": "Sails / Motor Status",
       "motor_propulsion": "Engine Propulsion",
+      "motor_hours": "Engine hours (total)",
+      "fuel_per_motor_hour": "Consumption per engine hour",
       "event_distance": "Distance (nm)",
       "export_csv": "Download CSV",
       "share_csv": "Share CSV",
@@ -258,11 +269,102 @@
       "role_crew": "Crew access",
       "role_crew_hint": "Invited logbook — you can collaborate and sign as crew",
       "role_read": "Read only",
-      "role_read_hint": "Shared logbook — view only, no editing"
+      "role_read_hint": "Shared logbook — view only, no editing",
+      "open_profile": "Open profile for {{name}}"
+    },
+    "profile": {
+      "title": "User profile",
+      "subtitle": "Account, passkeys and statistics for {{name}}",
+      "back": "Back to dashboard",
+      "loading": "Loading profile…",
+      "load_error": "Could not load profile.",
+      "copy_failed": "Copy failed.",
+      "processing": "Processing…",
+      "identity_title": "Account identity",
+      "username": "Username",
+      "user_id": "User ID",
+      "copy_user_id": "Copy user ID",
+      "account_since": "Account since",
+      "prf_status": "Passkey key derivation (PRF)",
+      "prf_active": "Active",
+      "prf_inactive": "Not configured",
+      "passkeys_title": "Passkeys",
+      "passkeys_desc": "Register a passkey on each device you use. This helps when switching platforms or browsers.",
+      "passkeys_empty": "No passkeys found.",
+      "add_passkey_btn": "Add new passkey",
+      "add_passkey_success": "Passkey added successfully.",
+      "add_passkey_failed": "Could not add passkey.",
+      "remove_passkey_btn": "Remove passkey",
+      "remove_passkey_last_title": "Last passkey",
+      "remove_passkey_last_desc": "The only passkey cannot be removed without losing access to your account. To delete the account entirely, use the danger zone at the bottom of this page.",
+      "remove_passkey_failed": "Could not remove passkey.",
+      "remove_passkey_confirm_title": "Remove passkey?",
+      "remove_passkey_confirm_desc": "This device will no longer be able to sign in with this passkey.",
+      "remove_passkey_confirm_yes": "Remove",
+      "remove_passkey_confirm_no": "Cancel",
+      "pin_title": "Local PIN",
+      "pin_status": "Status",
+      "pin_active": "Active on this device",
+      "pin_inactive": "Not configured",
+      "pin_confirm_label": "Confirm PIN",
+      "pin_confirm_placeholder": "Re-enter PIN",
+      "pin_set_btn": "Set PIN",
+      "pin_change_btn": "Change PIN",
+      "pin_remove_btn": "Remove PIN",
+      "pin_saved": "PIN saved.",
+      "pin_save_failed": "Could not save PIN.",
+      "pin_mismatch": "PIN entries do not match.",
+      "pin_length_error": "PIN must be at least 4 characters.",
+      "pin_no_session": "Session expired — please sign in again.",
+      "remove_pin_confirm_title": "Remove PIN?",
+      "remove_pin_confirm_desc": "You will need to sign in on this device with passkey or recovery phrase again.",
+      "remove_pin_confirm_yes": "Remove PIN",
+      "remove_pin_confirm_no": "Cancel",
+      "security_title": "Security checklist",
+      "security_desc": "Overview of the most important protections for your account.",
+      "security_passkeys_ok": "At least one passkey registered",
+      "security_passkeys_missing": "No passkey registered",
+      "security_prf_ok": "PRF key derivation active",
+      "security_prf_missing": "PRF not configured",
+      "security_pin_ok": "Local PIN on this device",
+      "security_pin_missing": "No local PIN",
+      "security_recovery_ok": "Recovery phrase configured",
+      "security_recovery_hint": "The 12 words were shown at registration. Store them offline and separately from this device. You can create a new phrase below — the old one will then be invalidated.",
+      "recovery_rotate_btn": "Create new recovery phrase",
+      "recovery_rotate_confirm_title": "Create new recovery phrase?",
+      "recovery_rotate_confirm_desc": "Your previous 12-word phrase will be invalidated immediately. Make sure you can store the new phrase securely before continuing.",
+      "recovery_rotate_confirm_yes": "Create new phrase",
+      "recovery_rotate_confirm_no": "Cancel",
+      "recovery_rotate_new_warning": "IMPORTANT: Write down these 12 words and store them offline. Your previous recovery phrase is no longer valid.",
+      "recovery_rotate_failed": "Could not create a new recovery phrase.",
+      "recovery_rotate_no_session": "Encryption session expired — please sign out and sign in again, then retry.",
+      "device_title": "This device",
+      "device_desc": "Local cache, sync status, and quick login on this browser.",
+      "device_sync_pending": "{{count}} pending sync items",
+      "device_sync_ok": "All local changes synced",
+      "device_remembered": "Account saved for quick login on this device",
+      "device_not_remembered": "Account not in the quick-login list",
+      "device_forget_btn": "Forget account on this device",
+      "device_forget_confirm_title": "Remove quick login?",
+      "device_forget_confirm_desc": "The account will be removed from the quick-login list on this device. Your session and local logbooks stay on this device.",
+      "device_forget_confirm_yes": "Remove",
+      "device_forget_confirm_no": "Cancel",
+      "passkey_label": "Name for new passkey (optional)",
+      "passkey_label_placeholder": "e.g. MacBook, iPhone",
+      "passkey_rename_btn": "Save name",
+      "passkey_rename_success": "Passkey name saved.",
+      "passkey_rename_failed": "Could not save passkey name.",
+      "passkey_unnamed": "Unnamed passkey",
+      "stats_title": "Statistics",
+      "stats_subtitle": "Across all your logbooks on this device",
+      "stats_logbooks": "Logbooks",
+      "stats_account_since": "Account since",
+      "stats_shared_logbooks": "Shared logbooks"
     },
     "crew": {
       "title": "Skipper & Crew Profiles",
       "skipper_section": "Skipper Profile",
+      "skipper_read_only_hint": "The skipper profile can only be edited by the logbook owner.",
       "crew_section": "Crew List",
       "add_crew": "Add Crew Member",
       "edit_crew": "Edit Crew Member",
@@ -320,6 +422,7 @@
       "color_scheme_dark": "Dark",
       "share_title": "Share Logbook (Read-Only)",
       "share_desc": "Enable this to generate a public, read-only link. Anyone with the link can view your travels, yacht profile, and crew members. Decryption keys are never transmitted to the server (they stay in the hash part of the URL).",
+      "share_privacy_warning": "Recommendation: Share this link only privately (e.g. via email or messenger), not on social media.",
       "share_enable": "Enable Public Link",
       "share_copied": "Link copied!",
       "share_copy_btn": "Copy Link",
@@ -331,6 +434,7 @@
       "delete_account_confirm_yes": "Yes, Delete Account and All Data",
       "delete_account_confirm_no": "Cancel",
       "delete_account_failed": "Failed to delete account. Please try again.",
+      "delete_backup_hint": "Tip: Before deleting, create backups of your logbooks (.daagbok.json) in each logbook's settings.",
       "deleting_account": "Deleting account…",
       "tour_title": "App tour",
       "tour_desc": "Take a guided walkthrough of the main areas of the app again.",
@@ -469,6 +573,9 @@
       "travel_days": "Travel days",
       "sail_distance": "Under sail",
       "motor_distance": "Engine",
+      "motor_hours_total": "Total engine hours",
+      "daily_motor_hours": "Engine hours per travel day",
+      "avg_motor_hours": "Avg. engine hours per travel day",
       "unknown_propulsion": "Unknown",
       "fuel_total": "Total fuel",
       "water_total": "Total water",
@@ -482,9 +589,12 @@
       "avg_fuel": "Avg. fuel",
       "avg_water": "Avg. water",
       "fuel_per_nm": "Fuel per nm",
+      "fuel_per_motor_hour": "Fuel per engine hour",
+      "daily_fuel_per_motor_hour": "Fuel consumption per engine hour by travel day",
       "fuel_legend": "Fuel",
       "water_legend": "Water",
       "unit_nm": "nm",
+      "unit_h": "h",
       "unit_l": "L",
       "day_label": "Day {{day}}",
       "account_logbooks": "Logbooks overview",
@@ -542,6 +652,12 @@
           "body": "You'll land on the statistics dashboard next. You can restart the tour anytime in Settings. Fair winds!"
         }
       }
+    },
+    "seo": {
+      "title": "Kapteins Daagbok – Free Digital Yacht Logbook (Ad-Free)",
+      "description": "Free, ad-free digital yacht logbook with end-to-end encryption and Passkey sign-in. Document travel days, GPS tracks, crew and vessel data securely — offline-capable PWA.",
+      "keywords": "yacht logbook, ship logbook, sailing log, maritime logbook, passkey, E2E encryption, GPS track, free, ad-free, offline PWA",
+      "ogImageAlt": "Kapteins Daagbok logo"
     }
   }
 }

client/src/services/analytics.ts

@@ -14,6 +14,8 @@ export const PlausibleEvents = {
   ONBOARDING_TOUR_SKIPPED: 'Onboarding Tour Skipped',
   INVITE_GENERATED: 'Invite Generated',
   INVITE_ACCEPTED: 'Invite Accepted',
+  LOGBOOK_SHARED: 'Logbook Shared',
+  PUBLIC_LINK_OPENED: 'Public Link Opened',
   PDF_EXPORTED: 'PDF Exported',
   CSV_EXPORTED: 'CSV Exported',
   CSV_SHARED: 'CSV Shared',
@@ -23,7 +25,16 @@ export const PlausibleEvents = {
   DEMO_OPENED: 'Demo Opened',
   PUSH_ENABLED: 'Push Enabled',
   PUSH_DISABLED: 'Push Disabled',
-  FOOTER_LINK_CLICKED: 'Footer Link Clicked'
+  FOOTER_LINK_CLICKED: 'Footer Link Clicked',
+  PROFILE_OPENED: 'Profile Opened',
+  PASSKEY_ADDED: 'Passkey Added',
+  PASSKEY_REMOVED: 'Passkey Removed',
+  PASSKEY_RENAMED: 'Passkey Renamed',
+  LAST_PASSKEY_REMOVE_HINTED: 'Last Passkey Remove Hinted',
+  LOCAL_PIN_SET: 'Local PIN Set',
+  LOCAL_PIN_REMOVED: 'Local PIN Removed',
+  DEVICE_FORGOTTEN: 'Device Forgotten',
+  RECOVERY_ROTATED: 'Recovery Rotated'
 } as const
 
 export type PlausibleEventName = (typeof PlausibleEvents)[keyof typeof PlausibleEvents]

client/src/services/auth.ts

@@ -543,3 +543,137 @@ export async function deleteAccount(): Promise<boolean> {
   }
   return false
 }
+
+export interface UserProfileCredential {
+  id: string
+  label: string | null
+  credentialIdPreview: string
+  transports: string[]
+}
+
+export interface UserProfile {
+  userId: string
+  username: string
+  createdAt: string
+  hasPrfEncryption: boolean
+  credentials: UserProfileCredential[]
+  serverMeta: {
+    ownedLogbookCount: number
+    collaborationCount: number
+  }
+}
+
+export async function fetchUserProfile(): Promise<UserProfile> {
+  return apiJson<UserProfile>(`${API_BASE}/profile`)
+}
+
+async function enrollPrfFromMasterKey(masterKey: ArrayBuffer, prfFirst: ArrayBuffer): Promise<void> {
+  const prfKey = await deriveKeyFromPrf(prfFirst)
+  const encryptedPrf = await encryptBuffer(masterKey, prfKey)
+  await apiJson(`${API_BASE}/enroll-prf`, {
+    method: 'POST',
+    body: JSON.stringify({
+      encryptedMasterKeyPrf: encryptedPrf.ciphertext,
+      encryptedMasterKeyPrfIv: encryptedPrf.iv,
+      encryptedMasterKeyPrfTag: encryptedPrf.tag
+    })
+  })
+}
+
+export async function addPasskey(label?: string): Promise<void> {
+  await reauthWithPasskey()
+
+  const options = await apiJson<any>(`${API_BASE}/add-credential-options`, {
+    method: 'POST'
+  })
+
+  if (!options.extensions) {
+    options.extensions = {}
+  }
+  options.extensions.prf = { eval: { first: PRF_SALT.buffer } }
+
+  let credentialResponse
+  const prfRequested = !!options.extensions?.prf
+  try {
+    credentialResponse = await startRegistration({ optionsJSON: options })
+  } catch (err: any) {
+    const isOptionError = err.name === 'NotSupportedError' ||
+      err.message?.toLowerCase().includes('options') ||
+      err.message?.toLowerCase().includes('process') ||
+      err.message?.toLowerCase().includes('unable to')
+    if (prfRequested && isOptionError) {
+      console.warn('Add passkey with PRF extension failed, retrying without PRF:', err)
+      if (options.extensions) {
+        delete options.extensions.prf
+      }
+      credentialResponse = await startRegistration({ optionsJSON: options })
+    } else {
+      throw err
+    }
+  }
+
+  await apiJson(`${API_BASE}/add-credential-verify`, {
+    method: 'POST',
+    body: JSON.stringify({
+      credentialResponse,
+      challenge: options.challenge,
+      ...(label?.trim() ? { label: label.trim() } : {})
+    })
+  })
+
+  const masterKey = getActiveMasterKey()
+  const prfFirstBuffer = extractPrfFirst(credentialResponse.clientExtensionResults || {})
+  if (masterKey && prfFirstBuffer) {
+    try {
+      await enrollPrfFromMasterKey(masterKey, prfFirstBuffer)
+    } catch (err) {
+      console.error('Failed to enroll PRF after adding passkey:', err)
+    }
+  }
+}
+
+export async function removePasskey(credentialDbId: string): Promise<void> {
+  await reauthWithPasskey()
+
+  const res = await apiFetch(`${API_BASE}/credentials/${credentialDbId}`, {
+    method: 'DELETE'
+  })
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.error || 'Failed to remove passkey')
+  }
+}
+
+export async function renamePasskey(credentialDbId: string, label: string): Promise<void> {
+  await reauthWithPasskey()
+
+  await apiJson(`${API_BASE}/credentials/${credentialDbId}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ label })
+  })
+}
+
+export async function rotateRecoveryPhrase(): Promise<string> {
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) {
+    throw new Error('NO_ACTIVE_MASTER_KEY')
+  }
+
+  await reauthWithPasskey()
+
+  const recoveryPhrase = generateRecoveryPhrase()
+  const recoveryKey = await deriveKeyFromPhrase(recoveryPhrase)
+  const encryptedRecovery = await encryptBuffer(masterKey, recoveryKey)
+
+  await apiJson(`${API_BASE}/rotate-recovery`, {
+    method: 'POST',
+    body: JSON.stringify({
+      encryptedMasterKeyRec: encryptedRecovery.ciphertext,
+      encryptedMasterKeyRecIv: encryptedRecovery.iv,
+      encryptedMasterKeyRecTag: encryptedRecovery.tag
+    })
+  })
+
+  return recoveryPhrase
+}

client/src/services/csvExport.ts

@@ -3,6 +3,7 @@ import { getActiveMasterKey } from './auth.js'
 import { getLogbookKey } from './logbookKeys.js'
 import { decryptJson } from './crypto.js'
 import { formatSignatureForExport, normalizeSignature } from '../utils/signatures.js'
+import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
 import i18n from '../i18n/index.js'
 
 function escapeCsvValue(val: string | number | undefined | null): string {
@@ -79,7 +80,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
   const headers = [
     'Date', 'Day of Travel', 'Departure Port', 'Destination Port',
     'Skipper Signature', 'Crew Signature',
-    'Track Distance (nm)', 'Track Max Speed (kn)', 'Track Avg Speed (kn)',
+    'Track Distance (nm)', 'Track Max Speed (kn)', 'Track Avg Speed (kn)', 'Motor Hours (h)',
     'Event Time', 'MgK Course', 'RwK Course',
     'Wind Dir', 'Wind Str', 'Barometer (hPa)', 'Sea State',
     'Current', 'Heel Angle', 'Sails/Motor', 'Log (nm)', 'Distance (nm)',
@@ -95,6 +96,10 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
     passkeyLabel: (username: string, signedAt: string) => {
       const date = new Date(signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
       return i18n.t('logs.sign_passkey_export', { username, date })
+    },
+    attributionLabel: (username: string, signedAt: string) => {
+      const date = new Date(signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
+      return i18n.t('logs.sign_attribution_export', { username, date })
     }
   };
 
@@ -108,6 +113,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
     const trackDist = entry.trackDistanceNm ?? '';
     const trackMax = entry.trackSpeedMaxKn ?? '';
     const trackAvg = entry.trackSpeedAvgKn ?? '';
+    const motorH = entry.motorHours ?? '';
     const fwM = entry.freshwater?.morning ?? '';
     const fwR = entry.freshwater?.refilled ?? '';
     const fwE = entry.freshwater?.evening ?? '';
@@ -123,7 +129,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
       rows.push([
         dateVal, travelDay, dep, dest,
         signS, signC,
-        trackDist, trackMax, trackAvg,
+        trackDist, trackMax, trackAvg, motorH,
         '', '', '',
         '', '', '', '',
         '', '', '', '', '',
@@ -134,12 +140,12 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
       ].map(escapeCsvValue));
     } else {
       // Sort events chronologically by time
-      const sortedEvents = [...eventsList].sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+      const sortedEvents = sortLogEventsByTime(eventsList);
       for (const ev of sortedEvents) {
         rows.push([
           dateVal, travelDay, dep, dest,
           signS, signC,
-          trackDist, trackMax, trackAvg,
+          trackDist, trackMax, trackAvg, motorH,
           ev.time || '', ev.mgk || '', ev.rwk || '',
           ev.windDirection || '', ev.windStrength || '', ev.windPressure || '', ev.seaState || '',
           ev.current || '', ev.heel || '', ev.sailsOrMotor || '', ev.logReading || '', ev.distance || '',

client/src/services/demoLogbookData.ts

@@ -26,6 +26,7 @@ export interface DemoDaySpec {
   filename: string
   freshwater: { morning: number; refilled: number; evening: number; consumption: number }
   fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  motorHours?: number
   events: Array<Record<string, string>>
 }
 
@@ -100,6 +101,7 @@ export function buildDemoDays(): DemoDaySpec[] {
       filename: 'laboe-damp.gpx',
       freshwater: { morning: 105, refilled: 25, evening: 110, consumption: 20 },
       fuel: { morning: 78, refilled: 0, evening: 70, consumption: 8 },
+      motorHours: 1.5,
       events: [
         {
           time: '09:00',
@@ -247,6 +249,9 @@ export function buildPublicDemoFixture(): PublicDemoFixture {
       entryPayload.trackSpeedMaxKn = stats.speedMaxKn
       entryPayload.trackSpeedAvgKn = stats.speedAvgKn
     }
+    if (day.motorHours != null && day.motorHours > 0) {
+      entryPayload.motorHours = day.motorHours
+    }
 
     entries.push(entryPayload as PublicDemoFixture['entries'][number])
 
@@ -303,6 +308,9 @@ export function buildDemoEntryPayloads(): Array<{
       entryPayload.trackSpeedMaxKn = stats.speedMaxKn
       entryPayload.trackSpeedAvgKn = stats.speedAvgKn
     }
+    if (day.motorHours != null && day.motorHours > 0) {
+      entryPayload.motorHours = day.motorHours
+    }
 
     return {
       entryId,

client/src/services/pdfExport.ts

@@ -3,7 +3,8 @@ import { db } from './db.js'
 import { getActiveMasterKey } from './auth.js'
 import { getLogbookKey } from './logbookKeys.js'
 import { decryptJson } from './crypto.js'
-import { isSignatureImage, isPasskeySignature } from '../utils/signatures.js'
+import { isSignatureImage, isPasskeySignature, isClassicSignature, getSignaturePayload } from '../utils/signatures.js'
+import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
 import i18n from '../i18n/index.js'
 
 function formatPasskeySignDate(signedAt: string): string {
@@ -132,7 +133,7 @@ export async function generateLogbookPagePdf(logbookId: string, entryId: string,
   // Draw Data Rows
   const events = entry.events || [];
   const maxRows = 16;
-  const sortedEvents = [...events].sort((a: any, b: any) => (a.time || '').localeCompare(b.time || ''));
+  const sortedEvents = sortLogEventsByTime(events);
 
   doc.setFont('Helvetica', 'normal');
 
@@ -255,8 +256,16 @@ export async function generateLogbookPagePdf(logbookId: string, entryId: string,
     const crewDate = formatPasskeySignDate(entry.signCrew.signedAt);
     doc.text(`Passkey: ${entry.signCrew.username}`, sigX + 80.5, sigY + 9);
     doc.text(crewDate, sigX + 80.5, sigY + 13.5);
-  } else if (isSignatureImage(entry.signCrew)) {
-    doc.addImage(entry.signCrew, 'PNG', sigX + 80.5, sigY + 6, 72, 14)
+  } else if (isClassicSignature(entry.signCrew)) {
+    doc.setFont('Helvetica', 'normal');
+    const crewDate = formatPasskeySignDate(entry.signCrew.signedAt);
+    doc.text(entry.signCrew.username, sigX + 80.5, sigY + 9);
+    doc.text(crewDate, sigX + 80.5, sigY + 13.5);
+    if (isSignatureImage(entry.signCrew.payload)) {
+      doc.addImage(entry.signCrew.payload, 'PNG', sigX + 80.5, sigY + 6, 72, 14)
+    }
+  } else if (isSignatureImage(getSignaturePayload(entry.signCrew))) {
+    doc.addImage(getSignaturePayload(entry.signCrew), 'PNG', sigX + 80.5, sigY + 6, 72, 14)
   } else {
     doc.setFont('Helvetica', 'normal');
     doc.text(String(entry.signCrew || '—').toUpperCase(), sigX + 80.5, sigY + 11.2);

client/src/services/statsAggregation.ts

@@ -10,6 +10,7 @@ import {
   parseEventDistanceNm,
   splitDistanceByPropulsion
 } from '../utils/propulsionStats.js'
+import { computeFuelPerMotorHour } from '../utils/fuelStats.js'
 
 export type DistanceSource = 'gps' | 'events' | 'none'
 
@@ -27,6 +28,8 @@ export interface TravelDayStats {
   sailDistanceNm: number
   motorDistanceNm: number
   unknownPropulsionNm: number
+  motorHours: number
+  fuelPerMotorHourL: number | null
   hasGpsTrack: boolean
 }
 
@@ -59,12 +62,15 @@ export interface StatsTotals {
   sailDistanceNm: number
   motorDistanceNm: number
   unknownPropulsionNm: number
+  totalMotorHours: number
   totalFuelL: number
   totalFreshwaterL: number
   avgDistancePerDayNm: number
+  avgMotorHoursPerDay: number
   avgFuelPerDayL: number
   avgFreshwaterPerDayL: number
   fuelPerNmL: number | null
+  fuelPerMotorHourL: number | null
 }
 
 const TRACK_COLORS = [
@@ -102,6 +108,7 @@ function buildTotals(days: TravelDayStats[]): StatsTotals {
   const sailDistanceNm = days.reduce((sum, d) => sum + d.sailDistanceNm, 0)
   const motorDistanceNm = days.reduce((sum, d) => sum + d.motorDistanceNm, 0)
   const unknownPropulsionNm = days.reduce((sum, d) => sum + d.unknownPropulsionNm, 0)
+  const totalMotorHours = days.reduce((sum, d) => sum + d.motorHours, 0)
   const totalFuelL = days.reduce((sum, d) => sum + d.fuelConsumptionL, 0)
   const totalFreshwaterL = days.reduce((sum, d) => sum + d.freshwaterConsumptionL, 0)
 
@@ -112,10 +119,13 @@ function buildTotals(days: TravelDayStats[]): StatsTotals {
     sailDistanceNm: Number(sailDistanceNm.toFixed(2)),
     motorDistanceNm: Number(motorDistanceNm.toFixed(2)),
     unknownPropulsionNm: Number(unknownPropulsionNm.toFixed(2)),
+    totalMotorHours: Number(totalMotorHours.toFixed(1)),
     totalFuelL: Number(totalFuelL.toFixed(1)),
     totalFreshwaterL: Number(totalFreshwaterL.toFixed(1)),
     avgDistancePerDayNm:
       travelDayCount > 0 ? Number((totalDistanceNm / travelDayCount).toFixed(2)) : 0,
+    avgMotorHoursPerDay:
+      travelDayCount > 0 ? Number((totalMotorHours / travelDayCount).toFixed(1)) : 0,
     avgFuelPerDayL:
       travelDayCount > 0 ? Number((totalFuelL / travelDayCount).toFixed(1)) : 0,
     avgFreshwaterPerDayL:
@@ -123,7 +133,8 @@ function buildTotals(days: TravelDayStats[]): StatsTotals {
     fuelPerNmL:
       totalDistanceNm > 0 && totalFuelL > 0
         ? Number((totalFuelL / totalDistanceNm).toFixed(2))
-        : null
+        : null,
+    fuelPerMotorHourL: computeFuelPerMotorHour(totalFuelL, totalMotorHours)
   }
 }
 
@@ -180,6 +191,9 @@ async function loadTravelDaysForLogbook(
       hasGpsTrack = !!(await db.gpsTracks.get(entry.payloadId))
     }
 
+    const fuelConsumptionL = Number(payload.fuel?.consumption) || 0
+    const motorHours = Number(payload.motorHours) || 0
+
     days.push({
       entryId: entry.payloadId,
       logbookId,
@@ -189,11 +203,13 @@ async function loadTravelDaysForLogbook(
       destination: payload.destination || '',
       distanceNm,
       distanceSource,
-      fuelConsumptionL: Number(payload.fuel?.consumption) || 0,
+      fuelConsumptionL,
       freshwaterConsumptionL: Number(payload.freshwater?.consumption) || 0,
       sailDistanceNm: propulsion.sailDistanceNm,
       motorDistanceNm: propulsion.motorDistanceNm,
       unknownPropulsionNm: propulsion.unknownPropulsionNm,
+      motorHours,
+      fuelPerMotorHourL: computeFuelPerMotorHour(fuelConsumptionL, motorHours),
       hasGpsTrack
     })
   }
@@ -249,3 +265,7 @@ export function formatNm(value: number): string {
 export function formatLiters(value: number): string {
   return Number.isInteger(value) ? String(value) : value.toFixed(1)
 }
+
+export function formatHours(value: number): string {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1)
+}

client/src/types/signatures.ts

@@ -11,5 +11,16 @@ export interface PasskeySignature {
   clientVerified: boolean
 }
 
-/** Legacy: PNG data URL oder getippter Name */
-export type SignatureValue = string | PasskeySignature
+/** Klassische Unterschrift mit Benutzer-Zuordnung (Crew) */
+export interface ClassicSignature {
+  kind: 'classic'
+  version: 1
+  role: 'skipper' | 'crew'
+  userId: string
+  username: string
+  signedAt: string
+  payload: string
+}
+
+/** Legacy: PNG data URL oder getippter Name; oder strukturierte Signaturen */
+export type SignatureValue = string | PasskeySignature | ClassicSignature

client/src/utils/fuelStats.ts

@@ -0,0 +1,13 @@
+/** Liters per motor hour from daily fuel consumption and motor hours. */
+export function computeFuelPerMotorHour(
+  fuelConsumptionL: number,
+  motorHours: number
+): number | null {
+  if (motorHours <= 0) return null
+  return Number((fuelConsumptionL / motorHours).toFixed(2))
+}
+
+export function formatFuelPerMotorHour(value: number | null | undefined): string {
+  if (value == null) return '—'
+  return Number.isInteger(value) ? String(value) : value.toFixed(2)
+}

client/src/utils/logEntryPayload.ts

@@ -17,6 +17,50 @@ export interface LogEventPayload {
   remarks: string
 }
 
+const LOG_EVENT_FIELDS: (keyof LogEventPayload)[] = [
+  'time', 'mgk', 'rwk', 'windPressure', 'windDirection', 'windStrength', 'seaState',
+  'weatherIcon', 'current', 'heel', 'sailsOrMotor', 'logReading', 'distance',
+  'gpsLat', 'gpsLng', 'remarks'
+]
+
+/** Normalize partial/legacy events so all fields are strings (safe for form + save). */
+export function normalizeLogEvent(event: Partial<LogEventPayload> | Record<string, unknown>): LogEventPayload {
+  const e = event as Record<string, unknown>
+  const timeRaw = String(e.time ?? '').trim()
+  const normalized: LogEventPayload = {
+    time: timeRaw.length >= 5 ? timeRaw.slice(0, 5) : timeRaw,
+    mgk: '',
+    rwk: '',
+    windPressure: '',
+    windDirection: '',
+    windStrength: '',
+    seaState: '',
+    weatherIcon: '',
+    current: '',
+    heel: '',
+    sailsOrMotor: '',
+    logReading: '',
+    distance: '',
+    gpsLat: '',
+    gpsLng: '',
+    remarks: ''
+  }
+  for (const key of LOG_EVENT_FIELDS) {
+    if (key === 'time') continue
+    normalized[key] = String(e[key] ?? '').trim()
+  }
+  return normalized
+}
+
+export function logEventsEqual(a: LogEventPayload, b: LogEventPayload): boolean {
+  return LOG_EVENT_FIELDS.every((key) => a[key] === b[key])
+}
+
+/** Chronological order: earliest time first (HH:MM). */
+export function sortLogEventsByTime<T extends LogEventPayload>(events: T[]): T[] {
+  return [...events].sort((a, b) => (a.time || '').localeCompare(b.time || ''))
+}
+
 export interface LogEntryPayloadInput {
   date: string
   dayOfTravel: string
@@ -27,6 +71,7 @@ export interface LogEntryPayloadInput {
   trackDistanceNm?: number
   trackSpeedMaxKn?: number
   trackSpeedAvgKn?: number
+  motorHours?: number
   events: LogEventPayload[]
 }
 
@@ -38,12 +83,15 @@ export function buildLogEntryPayload(input: LogEntryPayloadInput): Record<string
     destination: input.destination.trim(),
     freshwater: { ...input.freshwater },
     fuel: { ...input.fuel },
-    events: input.events.map((e) => ({ ...e }))
+    events: sortLogEventsByTime(input.events.map((e) => normalizeLogEvent(e)))
   }
 
   if (input.trackDistanceNm !== undefined) payload.trackDistanceNm = input.trackDistanceNm
   if (input.trackSpeedMaxKn !== undefined) payload.trackSpeedMaxKn = input.trackSpeedMaxKn
   if (input.trackSpeedAvgKn !== undefined) payload.trackSpeedAvgKn = input.trackSpeedAvgKn
+  if (input.motorHours !== undefined && input.motorHours > 0) {
+    payload.motorHours = Number(input.motorHours.toFixed(2))
+  }
 
   return payload
 }

client/src/utils/seo.ts

@@ -0,0 +1,73 @@
+import type { i18n as I18nInstance } from 'i18next'
+
+const SITE_ORIGIN = 'https://kapteins-daagbok.eu'
+
+export type SeoLang = 'de' | 'en'
+
+let i18nRef: I18nInstance | null = null
+
+export function normalizeSeoLang(lng: string): SeoLang {
+  return lng.startsWith('de') ? 'de' : 'en'
+}
+
+function setMeta(attr: 'name' | 'property', key: string, content: string) {
+  let el = document.querySelector(`meta[${attr}="${key}"]`)
+  if (!el) {
+    el = document.createElement('meta')
+    el.setAttribute(attr, key)
+    document.head.appendChild(el)
+  }
+  el.setAttribute('content', content)
+}
+
+function syncLanguageUrl(lang: SeoLang) {
+  const url = new URL(window.location.href)
+  const currentLng = url.searchParams.get('lng')
+  if (currentLng && normalizeSeoLang(currentLng) === lang) return
+
+  url.searchParams.set('lng', lang)
+  const next = `${url.pathname}${url.search}${url.hash}`
+  window.history.replaceState({}, '', next)
+}
+
+export function updatePageSeo(lng?: string) {
+  if (!i18nRef?.isInitialized) return
+
+  const lang = normalizeSeoLang(lng ?? i18nRef.language)
+  document.documentElement.lang = lang
+
+  const title = i18nRef.t('seo.title')
+  document.title = title
+
+  const description = i18nRef.t('seo.description')
+  const keywords = i18nRef.t('seo.keywords')
+  const imageAlt = i18nRef.t('seo.ogImageAlt')
+
+  setMeta('name', 'description', description)
+  setMeta('name', 'keywords', keywords)
+  setMeta('property', 'og:title', title)
+  setMeta('property', 'og:description', description)
+  setMeta('property', 'og:locale', lang === 'de' ? 'de_DE' : 'en_US')
+  setMeta('property', 'og:locale:alternate', lang === 'de' ? 'en_US' : 'de_DE')
+  setMeta('name', 'twitter:title', title)
+  setMeta('name', 'twitter:description', description)
+  setMeta('property', 'og:image:alt', imageAlt)
+  setMeta('name', 'twitter:image:alt', imageAlt)
+
+  syncLanguageUrl(lang)
+}
+
+export function initSeo(i18n: I18nInstance) {
+  i18nRef = i18n
+  i18n.on('initialized', () => updatePageSeo())
+  i18n.on('languageChanged', (lng) => updatePageSeo(lng))
+  if (i18n.isInitialized) {
+    updatePageSeo()
+  }
+}
+
+export function hreflangUrl(lang: SeoLang): string {
+  return `${SITE_ORIGIN}/?lng=${lang}`
+}
+
+export const seoSiteOrigin = SITE_ORIGIN

client/src/utils/signatures.ts

@@ -1,8 +1,13 @@
 import { hashEntryForSigning } from './entryCanonicalHash.js'
-import type { PasskeySignature, SignatureValue } from '../types/signatures.js'
+import type { ClassicSignature, PasskeySignature, SignatureValue } from '../types/signatures.js'
 
 export type SkipperSignStatus = 'none' | 'valid' | 'invalid'
 
+export interface SignatureAttribution {
+  username: string
+  signedAt: string
+}
+
 export function isSignatureImage(value: string | undefined | null): boolean {
   return typeof value === 'string' && value.startsWith('data:image/')
 }
@@ -16,9 +21,52 @@ export function isPasskeySignature(value: unknown): value is PasskeySignature {
   )
 }
 
+export function isClassicSignature(value: unknown): value is ClassicSignature {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as ClassicSignature).kind === 'classic' &&
+    (value as ClassicSignature).version === 1
+  )
+}
+
+export function getSignaturePayload(value: SignatureValue | '' | undefined | null): string {
+  if (!value) return ''
+  if (isClassicSignature(value)) return value.payload
+  if (isPasskeySignature(value)) return ''
+  return value
+}
+
+export function getSignatureAttribution(value: SignatureValue | '' | undefined | null): SignatureAttribution | null {
+  if (!value || typeof value === 'string') return null
+  if (isPasskeySignature(value) || isClassicSignature(value)) {
+    return { username: value.username, signedAt: value.signedAt }
+  }
+  return null
+}
+
+export function createClassicSignature(input: {
+  role: 'skipper' | 'crew'
+  userId: string
+  username: string
+  signedAt: string
+  payload: string
+}): ClassicSignature {
+  return {
+    kind: 'classic',
+    version: 1,
+    role: input.role,
+    userId: input.userId,
+    username: input.username,
+    signedAt: input.signedAt,
+    payload: input.payload
+  }
+}
+
 export function normalizeSignature(value: unknown): SignatureValue | undefined {
   if (value === null || value === undefined || value === '') return undefined
   if (isPasskeySignature(value)) return value
+  if (isClassicSignature(value)) return value
   if (typeof value === 'string') return value
   return undefined
 }
@@ -47,6 +95,7 @@ export async function getSkipperSignStatus(
 export interface SignatureExportLabels {
   imagePlaceholder: string
   passkeyLabel: (username: string, signedAt: string) => string
+  attributionLabel: (username: string, signedAt: string) => string
 }
 
 export function formatSignatureForExport(
@@ -57,15 +106,19 @@ export function formatSignatureForExport(
   if (isPasskeySignature(value)) {
     return labels.passkeyLabel(value.username, value.signedAt)
   }
+  if (isClassicSignature(value)) {
+    return labels.attributionLabel(value.username, value.signedAt)
+  }
   if (isSignatureImage(value)) return labels.imagePlaceholder
   return value
 }
 
 export function serializeSignature(value: SignatureValue | '' | undefined): SignatureValue | undefined {
   if (!value) return undefined
-  if (isPasskeySignature(value)) return value
-  if (isSignatureImage(value)) return value
-  const trimmed = value.trim()
+  if (isPasskeySignature(value) || isClassicSignature(value)) return value
+  const payload = typeof value === 'string' ? value : getSignaturePayload(value)
+  if (isSignatureImage(payload)) return payload
+  const trimmed = payload.trim()
   return trimmed || undefined
 }
 

client/vite.config.ts

@@ -49,7 +49,9 @@ export default defineConfig({
       manifest: {
         name: 'Kapteins Daagbok',
         short_name: 'Daagbok',
-        description: 'Free, ad-free maritime logbook with E2E encryption and Passkeys',
+        lang: 'de',
+        description:
+          'Digitales Yacht-Logbuch — E2E-verschlüsselt, offline-fähig.',
         theme_color: '#1e293b',
         background_color: '#0f172a',
         display: 'standalone',

docs/marketing/beta-flyer.html

@@ -28,9 +28,11 @@
     .page {
       width: 210mm;
       height: 297mm;
-      padding: 14mm 16mm 12mm;
+      max-height: 297mm;
+      padding: 12mm 15mm 10mm;
       display: flex;
       flex-direction: column;
+      gap: 5mm;
       background:
         radial-gradient(ellipse 120% 80% at 100% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
         radial-gradient(ellipse 90% 60% at 0% 100%, rgba(134, 59, 255, 0.14) 0%, transparent 50%),
@@ -52,20 +54,20 @@
       display: flex;
       align-items: center;
       gap: 5mm;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
 
     .logo {
-      width: 14mm;
-      height: 14mm;
+      width: 16mm;
+      height: 16mm;
       flex-shrink: 0;
       object-fit: contain;
     }
 
     .title-block h1 {
-      font-size: 22pt;
+      font-size: 23pt;
       font-weight: 700;
       letter-spacing: -0.02em;
       color: #f8fafc;
@@ -73,7 +75,7 @@
     }
 
     .title-block p {
-      font-size: 10.5pt;
+      font-size: 12pt;
       color: #94a3b8;
       margin-top: 1.5mm;
     }
@@ -83,19 +85,19 @@
       align-self: flex-start;
       background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
       color: #1e293b;
-      font-size: 9pt;
+      font-size: 11pt;
       font-weight: 800;
       letter-spacing: 0.12em;
-      padding: 2mm 4mm;
+      padding: 2.5mm 4.5mm;
       border-radius: 2mm;
       text-transform: uppercase;
     }
 
     .intro {
-      font-size: 10.5pt;
-      line-height: 1.55;
+      font-size: 12pt;
+      line-height: 1.5;
       color: #cbd5e1;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       max-width: 95%;
       position: relative;
       z-index: 1;
@@ -105,11 +107,48 @@
       color: #f8fafc;
     }
 
+    .screenshots {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 3mm;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    .screenshot-card {
+      border-radius: 2.5mm;
+      overflow: hidden;
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      background: rgba(15, 23, 42, 0.55);
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .screenshot-card img {
+      width: 100%;
+      height: 50mm;
+      object-fit: contain;
+      object-position: top center;
+      display: block;
+      background: #0b1220;
+    }
+
+    .screenshot-caption {
+      font-size: 9pt;
+      color: #94a3b8;
+      text-align: center;
+      padding: 1.5mm 2mm;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
     .features {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 3mm 6mm;
-      margin-bottom: 6mm;
+      gap: 2.5mm 6mm;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
@@ -118,7 +157,7 @@
       display: flex;
       gap: 2.5mm;
       align-items: flex-start;
-      font-size: 9.5pt;
+      font-size: 10.5pt;
       line-height: 1.4;
       color: #e2e8f0;
     }
@@ -130,26 +169,53 @@
       width: 4mm;
     }
 
+    .lang-list {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 1.5mm;
+    }
+
+    .lang-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 1.2mm;
+      white-space: nowrap;
+    }
+
+    .feature-flag {
+      display: inline-block;
+      width: 5mm;
+      height: 3.5mm;
+      border-radius: 0.3mm;
+      flex-shrink: 0;
+      box-shadow: 0 0 0 0.15mm rgba(0, 0, 0, 0.25);
+    }
+
+    .lang-sep {
+      color: #94a3b8;
+    }
+
     .beta-box {
       background: rgba(30, 41, 59, 0.85);
       border: 1px solid rgba(251, 191, 36, 0.35);
       border-left: 3px solid #fbbf24;
       border-radius: 3mm;
       padding: 5mm 6mm;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
 
     .beta-box h2 {
-      font-size: 11pt;
+      font-size: 12.5pt;
       color: #fbbf24;
       margin-bottom: 2mm;
       font-weight: 700;
     }
 
     .beta-box p {
-      font-size: 9.5pt;
+      font-size: 10.5pt;
       line-height: 1.5;
       color: #cbd5e1;
     }
@@ -157,12 +223,12 @@
     .cta {
       display: flex;
       align-items: center;
-      gap: 8mm;
+      gap: 7mm;
       background: rgba(15, 23, 42, 0.6);
       border: 1px solid rgba(148, 163, 184, 0.2);
       border-radius: 4mm;
       padding: 5mm 6mm;
-      margin-bottom: auto;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
@@ -183,16 +249,16 @@
     }
 
     .cta-text h3 {
-      font-size: 13pt;
+      font-size: 14.5pt;
       color: #38bdf8;
       font-weight: 700;
       margin-bottom: 2mm;
     }
 
     .cta-text p {
-      font-size: 9pt;
+      font-size: 11pt;
       color: #94a3b8;
-      line-height: 1.45;
+      line-height: 1.5;
     }
 
     .tags {
@@ -203,7 +269,7 @@
     }
 
     .tag {
-      font-size: 7.5pt;
+      font-size: 9.5pt;
       font-weight: 600;
       letter-spacing: 0.04em;
       text-transform: uppercase;
@@ -216,8 +282,9 @@
     footer {
       border-top: 1px solid rgba(148, 163, 184, 0.15);
       padding-top: 3mm;
-      margin-top: 5mm;
-      font-size: 7.5pt;
+      margin-top: auto;
+      flex-shrink: 0;
+      font-size: 9.5pt;
       line-height: 1.5;
       color: #64748b;
       position: relative;
@@ -242,20 +309,42 @@
     </header>
 
     <p class="intro">
-      Führe dein Bordlogbuch digital: Reisetage, GPS-Tracks, Crew und Schiffsdaten —
-      <strong>End-to-End-verschlüsselt</strong>, als App installierbar und
+      Führe dein Bordlogbuch digital: Reisetage, GPS-Tracks, Crew- und Schiffsdaten —
+      <strong>Ende-zu-Ende-verschlüsselt</strong>, als App installierbar und
       <strong>auch offline</strong> auf See nutzbar.
     </p>
 
     <section class="features" aria-label="Funktionen">
-      <div class="feature"><span class="feature-icon">✦</span><span>Reisetage im nautischen Logbuch-Format (Hafen, Wetter, Tankstände)</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>Offline-fähige PWA — installierbar auf Smartphone &amp; Tablet</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>Passkey-Anmeldung &amp; clientseitige Verschlüsselung</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>GPS-Tracks (GPX/KML), Karte &amp; Streckenstatistik</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Reisetage im nautischen Logbuch-Format (Hafen, Wetter, Besegelung, Crew, Tankstände)</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Offline-fähige PWA — läuft auf jedem Smartphone &amp; Tablet</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Einfache passwortlose Passkey-Anmeldung</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Ende-zu-Ende Verschlüsselung</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>GPS-Track Upload (GPX/KML) mit Kartendarstellung</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Streckenstatistik</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge pro Reisetag</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge für Skipper und Crew</span></div>
       <div class="feature"><span class="feature-icon">✦</span><span>Crew einladen — gemeinsam am Logbuch arbeiten</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>PDF- &amp; CSV-Export, verschlüsseltes Backup</span></div>
-      <div class="feature"><span class="feature-icon">✦</span><span>Mehrere Logbücher · Deutsch &amp; Englisch</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>PDF- &amp; CSV-Export</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Verschlüsseltes Backup &amp; Wiederherstellung</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Logbuch mit Freunden teilen</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Beliebig viele Schiffe und Logbücher</span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span class="lang-list"><span class="lang-item"><svg class="feature-flag" viewBox="0 0 5 3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#D00"/><rect y="2" width="5" height="1" fill="#FFCE00"/></svg>Deutsch</span><span class="lang-sep">&amp;</span><span class="lang-item"><svg class="feature-flag" viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><clipPath id="gb-a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="gb-b"><path d="M30 15h30v15zv15H0z"/></clipPath><g clip-path="url(#gb-a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(#gb-b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg>Englisch</span></span></div>
+      <div class="feature"><span class="feature-icon">✦</span><span>Crafted in Kiel.Sailing.City.</span></div>
+    </section>
+
+    <section class="screenshots" aria-label="App-Screenshots">
+      <figure class="screenshot-card">
+        <img src="assets/screenshot-login.png" alt="Anmeldung mit Passkey und Demo" />
+        <figcaption class="screenshot-caption">Anmeldung &amp; Passkey</figcaption>
+      </figure>
+      <figure class="screenshot-card">
+        <img src="assets/screenshot-logbook.png" alt="Logbuch-Journal mit Reisetagen" />
+        <figcaption class="screenshot-caption">Logbuch-Journal</figcaption>
+      </figure>
+      <figure class="screenshot-card">
+        <img src="assets/screenshot-vessel.png" alt="Schiffs-Stammdaten mit Yachtfoto" />
+        <figcaption class="screenshot-caption">Schiffsdaten</figcaption>
+      </figure>
     </section>
 
     <section class="beta-box">

docs/plausible-events.md

@@ -29,6 +29,8 @@ Kapteins Daagbok nutzt [Plausible Analytics](https://plausible.io/) mit dem Scri
 | Demo Opened | Public-Demo unter `/demo` geöffnet (`DemoViewer.tsx`) | — |
 | Invite Generated | Einladungslink erzeugt (`SettingsForm.tsx`) | — |
 | Invite Accepted | Einladung angenommen und Logbuch beigetreten (`InvitationAcceptance.tsx`) | — |
+| Logbook Shared | Öffentlicher Freigabelink aktiviert (`SettingsForm.tsx`) | — |
+| Public Link Opened | Freigabelink unter `/share` erfolgreich geladen (`ReadOnlyViewer.tsx`) | — |
 | PDF Exported | PDF-Export eines Reisetags (`LogEntryEditor.tsx`, `LogEntriesList.tsx`) | `scope`: `entry` |
 | CSV Exported | CSV-Download aus der Eintragsliste (`LogEntriesList.tsx`) | — |
 | CSV Shared | CSV über Web Share API geteilt (`LogEntriesList.tsx`) | — |
@@ -38,12 +40,23 @@ Kapteins Daagbok nutzt [Plausible Analytics](https://plausible.io/) mit dem Scri
 | Push Enabled | Crew-Änderungs-Push aktiviert (`PushNotificationSettings.tsx`) | — |
 | Push Disabled | Crew-Änderungs-Push deaktiviert (`PushNotificationSettings.tsx`) | — |
 | Footer Link Clicked | Klick auf Autoren-Link im App-Footer (`AppFooter.tsx`) | — |
+| Profile Opened | Profilseite geöffnet (`UserProfilePage.tsx`, einmal pro Mount) | — |
+| Passkey Added | Passkey erfolgreich registriert (`UserProfilePage.tsx`) | `labeled`: `true` \| `false` (optionaler Name gesetzt) |
+| Passkey Removed | Passkey entfernt, mindestens ein Key verbleibt (`UserProfilePage.tsx`) | — |
+| Passkey Renamed | Passkey-Name gespeichert (`UserProfilePage.tsx`) | — |
+| Last Passkey Remove Hinted | Löschen des einzigen Passkeys abgebrochen — Hinweisdialog zur Kontolöschung (`UserProfilePage.tsx`) | — |
+| Local PIN Set | Lokaler PIN gesetzt oder geändert (`UserProfilePage.tsx`) | `action`: `set` \| `change` |
+| Local PIN Removed | Lokaler PIN entfernt (`UserProfilePage.tsx`) | — |
+| Device Forgotten | Account aus Schnell-Login-Liste dieses Geräts entfernt (`UserProfilePage.tsx`) | — |
+| Recovery Rotated | Neuer 12-Wörter-Wiederherstellungsschlüssel erstellt (`UserProfilePage.tsx`) | — |
 
 ## Bewusst nicht getrackt
 
 - **Demo-Logbuch:** Beim automatischen Seed (`demoLogbook.ts`) werden keine Events ausgelöst — nur echte Nutzeraktionen zählen.
 - **Manuelle Signaturen:** Nur Passkey-Signaturen lösen `Entry Signed` aus.
 - **PII:** Keine Inhalte aus verschlüsselten Logbüchern in Properties.
+- **Profil-KPIs:** Statistik-Karten und User-ID-Kopieren werden nicht getrackt (reine Anzeige bzw. zu granular).
+- **Kontolöschung:** `Account Deleted` bleibt in `auth.ts` — unabhängig davon, ob die Gefahrenzone auf der Profilseite oder früher in den Einstellungen genutzt wurde.
 
 ## Typische Funnels (Plausible Goals)
 
@@ -52,8 +65,10 @@ Empfohlene Goal-Ketten für Auswertung:
 1. **Aktivierung:** Account Created → Logbook Created → Travel Day Created → Travel Day Saved
 2. **Onboarding:** Account Created → Onboarding Tour Completed (vs. Onboarding Tour Skipped)
 3. **Kollaboration:** Invite Generated → Invite Accepted
-4. **Export:** Travel Day Saved → PDF Exported / CSV Exported
-5. **Datensicherung:** Backup Exported → Backup Restored
+4. **Öffentliche Freigabe:** Logbook Shared → Public Link Opened
+5. **Export:** Travel Day Saved → PDF Exported / CSV Exported
+6. **Datensicherung:** Backup Exported → Backup Restored
+7. **Kontosicherheit:** Profile Opened → Passkey Added / Local PIN Set / Recovery Rotated; Last Passkey Remove Hinted → Account Deleted (selten, aber aussagekräftig)
 
 ## Entwicklung
 

server/prisma/schema.prisma

@@ -52,6 +52,7 @@ model Credential {
   id           String   @id @default(uuid())
   userId       String
   credentialId String   @unique
+  label        String?
   publicKey    Bytes
   counter      BigInt
   transports   String[] // WebAuthn transports list

server/src/routes/auth.ts

@@ -22,8 +22,22 @@ const rpID = process.env.RP_ID || 'localhost'
 const origin = process.env.ORIGIN || 'http://localhost:5173'
 
 const registrationChallenges = new Map<string, string>()
+/** WebAuthn registration challenges for add-credential flow: challenge -> userId */
+const addCredentialChallenges = new Map<string, string>()
 const activeChallenges = new Set<string>()
 
+function previewCredentialId(credentialId: string): string {
+  if (credentialId.length <= 16) return credentialId
+  return `${credentialId.slice(0, 8)}…${credentialId.slice(-8)}`
+}
+
+function normalizeCredentialLabel(label: unknown): string | null {
+  if (typeof label !== 'string') return null
+  const trimmed = label.trim()
+  if (!trimmed) return null
+  return trimmed.slice(0, 64)
+}
+
 router.post('/register-options', async (req, res) => {
   try {
     const { username } = req.body
@@ -381,4 +395,259 @@ router.post('/enroll-prf', requireReauth, async (req: any, res) => {
   }
 })
 
+router.post('/rotate-recovery', requireReauth, async (req: any, res) => {
+  try {
+    const { encryptedMasterKeyRec, encryptedMasterKeyRecIv, encryptedMasterKeyRecTag } = req.body
+    if (!encryptedMasterKeyRec || !encryptedMasterKeyRecIv || !encryptedMasterKeyRecTag) {
+      return res.status(400).json({ error: 'Missing required recovery key fields' })
+    }
+
+    if (
+      typeof encryptedMasterKeyRec !== 'string' ||
+      typeof encryptedMasterKeyRecIv !== 'string' ||
+      typeof encryptedMasterKeyRecTag !== 'string'
+    ) {
+      return res.status(400).json({ error: 'Invalid recovery key fields format' })
+    }
+
+    await prisma.user.update({
+      where: { id: req.userId },
+      data: {
+        encryptedMasterKeyRec,
+        encryptedMasterKeyRecIv,
+        encryptedMasterKeyRecTag
+      }
+    })
+
+    return res.json({ success: true })
+  } catch (error: any) {
+    console.error('Error rotating recovery key:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.get('/profile', requireUser, async (req: any, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.userId },
+      include: {
+        credentials: {
+          orderBy: { id: 'asc' }
+        },
+        _count: {
+          select: {
+            logbooks: true,
+            collaborations: true
+          }
+        }
+      }
+    })
+
+    if (!user) {
+      return res.status(404).json({ error: 'User not found' })
+    }
+
+    return res.json({
+      userId: user.id,
+      username: user.username,
+      createdAt: user.createdAt.toISOString(),
+      hasPrfEncryption: user.encryptedMasterKeyPrf != null,
+      credentials: user.credentials.map((cred) => ({
+        id: cred.id,
+        label: cred.label,
+        credentialIdPreview: previewCredentialId(cred.credentialId),
+        transports: cred.transports
+      })),
+      serverMeta: {
+        ownedLogbookCount: user._count.logbooks,
+        collaborationCount: user._count.collaborations
+      }
+    })
+  } catch (error: any) {
+    console.error('Error fetching user profile:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.post('/add-credential-options', requireReauth, async (req: any, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.userId },
+      include: { credentials: true }
+    })
+
+    if (!user) {
+      return res.status(404).json({ error: 'User not found' })
+    }
+
+    const userID = Buffer.from(user.username, 'utf8').toString('base64url')
+    const excludeCredentials = user.credentials.map((cred) => ({
+      id: Buffer.from(cred.credentialId, 'base64url'),
+      type: 'public-key' as const,
+      transports: cred.transports as any[]
+    }))
+
+    const options = await generateRegistrationOptions({
+      rpName,
+      rpID,
+      userID,
+      userName: user.username,
+      userDisplayName: user.username,
+      attestationType: 'none',
+      authenticatorSelection: {
+        residentKey: 'required',
+        userVerification: 'preferred'
+      },
+      supportedAlgorithmIDs: [-7, -257],
+      excludeCredentials
+    })
+
+    addCredentialChallenges.set(options.challenge, req.userId)
+
+    return res.json(options)
+  } catch (error: any) {
+    console.error('Error generating add-credential options:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.post('/add-credential-verify', requireReauth, async (req: any, res) => {
+  try {
+    const { credentialResponse, challenge } = req.body
+    if (!credentialResponse || !challenge) {
+      return res.status(400).json({ error: 'credentialResponse and challenge are required' })
+    }
+
+    const label = normalizeCredentialLabel(req.body.label)
+
+    const challengeUserId = addCredentialChallenges.get(challenge)
+    if (!challengeUserId) {
+      return res.status(400).json({ error: 'Challenge not found or expired' })
+    }
+
+    if (challengeUserId !== req.userId) {
+      return res.status(403).json({ error: 'Challenge does not belong to this account' })
+    }
+
+    // Single-use: invalidate before verification so failed attempts cannot be retried
+    addCredentialChallenges.delete(challenge)
+
+    const user = await prisma.user.findUnique({
+      where: { id: req.userId }
+    })
+
+    if (!user) {
+      return res.status(404).json({ error: 'User not found' })
+    }
+
+    const verification = await verifyRegistrationResponse({
+      response: credentialResponse,
+      expectedChallenge: challenge,
+      expectedOrigin: origin,
+      expectedRPID: rpID
+    })
+
+    if (!verification.verified || !verification.registrationInfo) {
+      return res.status(400).json({ error: 'WebAuthn verification failed' })
+    }
+
+    const { credentialID, credentialPublicKey, counter } = verification.registrationInfo
+    const credentialId = Buffer.from(credentialID).toString('base64url')
+
+    const existing = await prisma.credential.findUnique({
+      where: { credentialId }
+    })
+    if (existing) {
+      return res.status(400).json({ error: 'Credential already registered' })
+    }
+
+    const credential = await prisma.credential.create({
+      data: {
+        userId: req.userId,
+        credentialId,
+        label,
+        publicKey: Buffer.from(credentialPublicKey),
+        counter: BigInt(counter),
+        transports: credentialResponse.response.transports || []
+      }
+    })
+
+    return res.json({
+      verified: true,
+      credential: {
+        id: credential.id,
+        label: credential.label,
+        credentialIdPreview: previewCredentialId(credential.credentialId),
+        transports: credential.transports
+      }
+    })
+  } catch (error: any) {
+    console.error('Error verifying add-credential response:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.patch('/credentials/:id', requireReauth, async (req: any, res) => {
+  try {
+    const { id } = req.params
+    const label = normalizeCredentialLabel(req.body?.label)
+
+    const credential = await prisma.credential.findUnique({
+      where: { id }
+    })
+
+    if (!credential || credential.userId !== req.userId) {
+      return res.status(404).json({ error: 'Credential not found' })
+    }
+
+    const updated = await prisma.credential.update({
+      where: { id },
+      data: { label }
+    })
+
+    return res.json({
+      credential: {
+        id: updated.id,
+        label: updated.label,
+        credentialIdPreview: previewCredentialId(updated.credentialId),
+        transports: updated.transports
+      }
+    })
+  } catch (error: any) {
+    console.error('Error updating credential label:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
+router.delete('/credentials/:id', requireReauth, async (req: any, res) => {
+  try {
+    const { id } = req.params
+
+    const credential = await prisma.credential.findUnique({
+      where: { id }
+    })
+
+    if (!credential || credential.userId !== req.userId) {
+      return res.status(404).json({ error: 'Credential not found' })
+    }
+
+    const credentialCount = await prisma.credential.count({
+      where: { userId: req.userId }
+    })
+
+    if (credentialCount <= 1) {
+      return res.status(400).json({ error: 'Cannot remove the last passkey' })
+    }
+
+    await prisma.credential.delete({
+      where: { id }
+    })
+
+    return res.json({ success: true })
+  } catch (error: any) {
+    console.error('Error deleting credential:', error)
+    return res.status(500).json({ error: error.message || 'Internal server error' })
+  }
+})
+
 export default router

server/src/routes/sign.ts

@@ -57,6 +57,13 @@ function hasWriteAccess(access: { isOwner: boolean; collaboration?: { role: stri
   return access.isOwner || access.collaboration?.role === 'WRITE'
 }
 
+async function hasWriteCollaborators(logbookId: string): Promise<boolean> {
+  const count = await prisma.collaboration.count({
+    where: { logbookId, role: 'WRITE' }
+  })
+  return count > 0
+}
+
 async function getAllowCredentialsForRole(
   logbookId: string,
   role: 'skipper' | 'crew',
@@ -79,7 +86,16 @@ async function getAllowCredentialsForRole(
   })
 
   const userIds = collaborations.map((c) => c.userId)
-  if (userIds.length === 0) return []
+  if (userIds.length === 0) {
+    const credentials = await prisma.credential.findMany({
+      where: { userId: requestingUserId }
+    })
+    return credentials.map((cred) => ({
+      id: Buffer.from(cred.credentialId, 'base64url'),
+      type: 'public-key' as const,
+      transports: cred.transports as any[]
+    }))
+  }
 
   const credentials = await prisma.credential.findMany({
     where: { userId: { in: userIds } }
@@ -99,14 +115,7 @@ async function isAuthorizedSigner(
   role: 'skipper' | 'crew'
 ): Promise<boolean> {
   if (role === 'skipper') {
-    // Skipper signing: owner or WRITE collaborator (design §2.1), using their own passkey.
-    if (signerUserId === ownerUserId) return true
-    const collaboration = await prisma.collaboration.findUnique({
-      where: {
-        logbookId_userId: { logbookId, userId: signerUserId }
-      }
-    })
-    return collaboration?.role === 'WRITE'
+    return signerUserId === ownerUserId
   }
 
   const collaboration = await prisma.collaboration.findUnique({
@@ -114,7 +123,13 @@ async function isAuthorizedSigner(
       logbookId_userId: { logbookId, userId: signerUserId }
     }
   })
-  return collaboration?.role === 'WRITE'
+  if (collaboration?.role === 'WRITE') return true
+
+  if (signerUserId === ownerUserId) {
+    return !(await hasWriteCollaborators(logbookId))
+  }
+
+  return false
 }
 
 router.post('/options', async (req: any, res) => {
@@ -138,6 +153,16 @@ router.post('/options', async (req: any, res) => {
       return res.status(403).json({ error: 'Forbidden: WRITE access required to sign entries' })
     }
 
+    const authorized = await isAuthorizedSigner(
+      logbookId,
+      access.logbook.userId,
+      req.userId,
+      role
+    )
+    if (!authorized) {
+      return res.status(403).json({ error: 'Forbidden: Signer not authorized for this role' })
+    }
+
     const allowCredentials = await getAllowCredentialsForRole(
       logbookId,
       role,
@@ -146,9 +171,7 @@ router.post('/options', async (req: any, res) => {
 
     if (allowCredentials.length === 0) {
       return res.status(400).json({
-        error: role === 'crew'
-          ? 'No write collaborators with passkeys found'
-          : 'No passkey credentials found for signer'
+        error: 'No passkey credentials found for signer'
       })
     }
 

server/src/routes/sync.ts

@@ -121,6 +121,17 @@ router.post('/push', async (req: any, res) => {
           continue
         }
 
+        if (!isOwner && (type === 'yacht' || (type === 'crew' && payloadId === 'skipper'))) {
+          results.push({
+            payloadId,
+            status: 'error',
+            error: type === 'yacht'
+              ? 'Forbidden: Only owner can modify vessel data'
+              : 'Forbidden: Only owner can modify skipper profile'
+          })
+          continue
+        }
+
         if (action === 'delete') {
           if (type === 'yacht') {
             await prisma.yachtPayload.deleteMany({ where: { logbookId } })