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>

README.md

@@ -5,6 +5,8 @@ Rotatory plant die Moderation des werktäglichen Morning Meetings: Pro Tag werde
 ausgelost. Die Monatsansicht zeigt auf jedem Tag die Fotos der beiden Personen. Der fertige
 Plan lässt sich per Knopfdruck als Termine in einen Nextcloud-Kalender schreiben.
 
+<img src="public/logo/rotatory-mark.svg" alt="" width="64" height="64" align="left">
+
 ## Funktionen
 
 - Personen mit Vor- und Nachname, optionaler E-Mail, Foto (Upload, wird im Browser auf

demo/rotatory.json

@@ -0,0 +1,151 @@
+{
+  "persons": [],
+  "absences": [],
+  "holidays": [
+    {
+      "date": "2026-01-01",
+      "name": "Neujahr",
+      "auto": true
+    },
+    {
+      "date": "2026-01-06",
+      "name": "Heilige Drei Könige",
+      "auto": true
+    },
+    {
+      "date": "2026-04-03",
+      "name": "Karfreitag",
+      "auto": true
+    },
+    {
+      "date": "2026-04-06",
+      "name": "Ostermontag",
+      "auto": true
+    },
+    {
+      "date": "2026-05-01",
+      "name": "Tag der Arbeit",
+      "auto": true
+    },
+    {
+      "date": "2026-05-14",
+      "name": "Christi Himmelfahrt",
+      "auto": true
+    },
+    {
+      "date": "2026-05-25",
+      "name": "Pfingstmontag",
+      "auto": true
+    },
+    {
+      "date": "2026-06-04",
+      "name": "Fronleichnam",
+      "auto": true
+    },
+    {
+      "date": "2026-08-15",
+      "name": "Mariä Himmelfahrt",
+      "auto": true
+    },
+    {
+      "date": "2026-10-03",
+      "name": "Tag der Deutschen Einheit",
+      "auto": true
+    },
+    {
+      "date": "2026-11-01",
+      "name": "Allerheiligen",
+      "auto": true
+    },
+    {
+      "date": "2026-12-25",
+      "name": "1. Weihnachtstag",
+      "auto": true
+    },
+    {
+      "date": "2026-12-26",
+      "name": "2. Weihnachtstag",
+      "auto": true
+    },
+    {
+      "date": "2027-01-01",
+      "name": "Neujahr",
+      "auto": true
+    },
+    {
+      "date": "2027-01-06",
+      "name": "Heilige Drei Könige",
+      "auto": true
+    },
+    {
+      "date": "2027-03-26",
+      "name": "Karfreitag",
+      "auto": true
+    },
+    {
+      "date": "2027-03-29",
+      "name": "Ostermontag",
+      "auto": true
+    },
+    {
+      "date": "2027-05-01",
+      "name": "Tag der Arbeit",
+      "auto": true
+    },
+    {
+      "date": "2027-05-06",
+      "name": "Christi Himmelfahrt",
+      "auto": true
+    },
+    {
+      "date": "2027-05-17",
+      "name": "Pfingstmontag",
+      "auto": true
+    },
+    {
+      "date": "2027-05-27",
+      "name": "Fronleichnam",
+      "auto": true
+    },
+    {
+      "date": "2027-08-15",
+      "name": "Mariä Himmelfahrt",
+      "auto": true
+    },
+    {
+      "date": "2027-10-03",
+      "name": "Tag der Deutschen Einheit",
+      "auto": true
+    },
+    {
+      "date": "2027-11-01",
+      "name": "Allerheiligen",
+      "auto": true
+    },
+    {
+      "date": "2027-12-25",
+      "name": "1. Weihnachtstag",
+      "auto": true
+    },
+    {
+      "date": "2027-12-26",
+      "name": "2. Weihnachtstag",
+      "auto": true
+    }
+  ],
+  "assignments": {},
+  "exported": {},
+  "settings": {
+    "meetingTime": "09:30",
+    "durationMinutes": 15,
+    "bundesland": "BY",
+    "calendarDisplayName": "Morning Meeting",
+    "inviteAttendees": false,
+    "historyWindowDays": 60,
+    "holidaysSeeded": true,
+    "targetCalendarHref": "",
+    "targetCalendarName": "",
+    "absenceCalendarHref": "",
+    "absenceCalendarName": ""
+  }
+}

demo/session-secret

@@ -0,0 +1 @@
+1f47c69a927a879d9c5b1acaee7dd242d8f4e848ae03ac048e1c245061177f59

public/index.html

@@ -7,11 +7,11 @@
   <title>Rotatory – Morning-Meeting-Moderation</title>
   <link rel="stylesheet" href="fonts/fonts.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%23122E45'/%3E%3C/svg%3E">
+  <link rel="icon" href="logo/favicon.svg" type="image/svg+xml">
 </head>
 <body>
   <header class="topbar">
-    <h1>Rotatory</h1>
+    <h1><svg class="logo" viewBox="0 0 800 800" aria-hidden="true" focusable="false"><g class="arc arc-a" transform="rotate(41.105 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g><g class="arc arc-b" transform="rotate(220.305 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g></svg><span>Rotatory</span></h1>
     <nav aria-label="Bereiche">
       <a href="#kalender" data-view="kalender">Kalender</a>
       <a href="#personen" data-view="personen">Personen</a>

public/logo/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><rect width="800" height="800" rx="120" fill="#122E45"/><g color="#FFFFFF" transform="translate(400 400) scale(0.72) translate(-400 -400)"><g transform="rotate(41.105 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g><g transform="rotate(220.305 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g></g></svg>

public/logo/rotatory-mark-animated.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" role="img" aria-label="Rotatory">
+  <title>Rotatory</title>
+  <g color="#122E45">
+    <g transform="rotate(41.105 400 400)">
+      <animateTransform attributeName="transform" type="rotate" values="-538 400 400; 1481.105 400 400" keyTimes="0; 1" calcMode="spline" keySplines="0.176 0.23 0.833 0.833" dur="7.04s" begin="0s" fill="freeze"/>
+      <g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g>
+    </g>
+    <g transform="rotate(220.305 400 400)">
+      <animateTransform attributeName="transform" type="rotate" values="-358.8 400 400; 1660.305 400 400" keyTimes="0; 1" calcMode="spline" keySplines="0.176 0.23 0.833 0.833" dur="7.04s" begin="0s" fill="freeze"/>
+      <g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g>
+    </g>
+  </g>
+</svg>

public/logo/rotatory-mark.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" role="img" aria-label="Rotatory">
+  <title>Rotatory</title>
+  <g color="#122E45">
+    <g transform="rotate(41.105 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g>
+    <g transform="rotate(220.305 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g>
+  </g>
+</svg>

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;