Logo in die Kopfzeile aufnehmen

Animierte Marke aus zwei Bögen mit Pfeilspitzen: dreht sich beim Laden einmal
abbremsend und bleibt in der symmetrischen Endstellung; bei reduzierter
Bewegung sofort statisch. Farbe folgt dem Text (Weiß auf tradeo-Blau).
Statische, animierte und Favicon-Variante unter public/logo.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/style.css

@@ -49,7 +49,15 @@ svg.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-w
   background: var(--tradeo-blue); color: var(--white);
   position: sticky; top: 0; z-index: 5;
 }
-.topbar h1 { color: var(--white); padding: 14px 0; }
+.topbar h1 { color: var(--white); padding: 14px 0; display: inline-flex; align-items: center; gap: 10px; }
+/* Logo: zwei Bögen, die beim Laden einmal abbremsend rotieren und in der symmetrischen Endstellung stehen bleiben */
+.logo { width: 28px; height: 28px; display: block; overflow: visible; }
+.logo .arc { transform-box: view-box; transform-origin: 400px 400px; animation: 7.04s cubic-bezier(.176, .23, .833, .833) 1 forwards; }
+.logo .arc-a { animation-name: logo-spin-a; }
+.logo .arc-b { animation-name: logo-spin-b; }
+@keyframes logo-spin-a { from { transform: rotate(-538deg); } to { transform: rotate(1481.105deg); } }
+@keyframes logo-spin-b { from { transform: rotate(-358.8deg); } to { transform: rotate(1660.305deg); } }
+@media (prefers-reduced-motion: reduce) { .logo .arc { animation: none; } }
 .topbar nav { display: flex; gap: 4px; flex-wrap: wrap; align-self: stretch; }
 .topbar nav a {
   display: inline-flex; align-items: center; padding: 0 12px; min-height: 56px;