Kopfleiste: Timer, Historie und Einstellungen in die Leiste

- Die drei Knöpfe hängen als slot="aktionen" rechts in der Portal-Leiste,
  die aktuelle Ansicht ist hervorgehoben
- Unter 600 px nur die Symbole, der Name steht im title
- Der eigene Header (Logo + Knöpfe) entfällt, solange die Leiste da ist;
  lädt topbar.js nicht, bleibt er als Rückfall
- Nach Ablauf der Sitzung (Anmeldeseite) sind Knöpfe und
  Sitzungsanzeige ausgeblendet

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

frontend/index.html

@@ -797,10 +797,36 @@
         hi-topbar { flex-shrink: 0; }
         @media print { hi-topbar { display: none !important; } }
 
-        /* Benutzername und Abmelden sitzen im Benutzer-Menue der Leiste. Die
-           eigenen bleiben nur als Rueckfall, wenn topbar.js nicht laedt. */
-        hi-topbar ~ .container #currentUser,
-        hi-topbar ~ .container #logoutBtn { display: none; }
+        /* Navigation, Benutzername und Abmelden sitzen in der Leiste. Der eigene
+           Header bleibt nur als Rueckfall, wenn topbar.js nicht laedt
+           (!important, weil app.js ihn per style.display einblendet). */
+        hi-topbar ~ .container #header { display: none !important; }
+
+        /* Navigation rechts in der Leiste (slot="aktionen"), Text erbt Weiss */
+        .topbar-nav { display: flex; gap: 2px; }
+        .topbar-nav[hidden] { display: none; }
+        .topbar-nav button {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.35rem;
+            height: 32px;
+            padding: 0 0.7rem;
+            border: 0;
+            border-radius: 8px;
+            background: none;
+            color: inherit;
+            font: inherit;
+            font-size: 13.5px;
+            cursor: pointer;
+        }
+        .topbar-nav button:hover { background: rgba(255, 255, 255, 0.14); }
+        .topbar-nav button.active { background: rgba(255, 255, 255, 0.22); }
+        .topbar-nav button:focus-visible { outline: 2px solid #cbbdf7; outline-offset: 1px; }
+        /* Schmal: nur die Symbole, der Name steht im title */
+        @media (max-width: 600px) {
+            .topbar-nav button { padding: 0 0.55rem; font-size: 16px; }
+            .topbar-nav button span { display: none; }
+        }
 
         /* Sitzungsanzeige im Benutzer-Menue (slot="benutzer"), Schriftfarbe kommt von der Leiste */
         .topbar-session { padding: 10px 16px; font-size: 13px; line-height: 1.4; }
@@ -1029,6 +1055,6 @@
 
     <div class="toast" id="toast"></div>
 
-    <script src="/app.js?v=20261025-topbar"></script>
+    <script src="/app.js?v=20261025-topbar-nav"></script>
 </body>
 </html>