Oberfläche auf das tradeo Corporate Design umstellen

Nur tradeo Blue und Weiß, Neutraltöne als Deckkraft-Abstufungen. Poppins für
Titel und Kennzeichen, Inter für Bedienelemente, beide selbst gehostet.
Kopfzeile als Markenfläche, Listen mit Trennlinien statt Kästen, Linien-SVGs
statt Emojis, Rot nur noch funktional. Design-System unter docs/DESIGN.md
abgelegt und in CLAUDE.md verankert.

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

public/index.html

@@ -3,14 +3,15 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="color-scheme" content="light dark">
+  <meta name="color-scheme" content="light">
   <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 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8E%99%3C/text%3E%3C/svg%3E">
+  <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">
 </head>
 <body>
   <header class="topbar">
-    <h1><span aria-hidden="true">🎙</span> Rotatory</h1>
+    <h1>Rotatory</h1>
     <nav aria-label="Bereiche">
       <a href="#kalender" data-view="kalender">Kalender</a>
       <a href="#personen" data-view="personen">Personen</a>
@@ -24,15 +25,15 @@
     <section id="view-kalender" class="view" aria-labelledby="cal-title">
       <div class="toolbar">
         <div class="month-nav">
-          <button type="button" id="prev-month" aria-label="Vorheriger Monat">‹</button>
+          <button type="button" id="prev-month" class="icon-button" aria-label="Vorheriger Monat"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button>
           <h2 id="cal-title">Monat</h2>
-          <button type="button" id="next-month" aria-label="Nächster Monat">›</button>
+          <button type="button" id="next-month" class="icon-button" aria-label="Nächster Monat"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button>
           <button type="button" id="today-month" class="ghost">Heute</button>
         </div>
         <div class="actions">
           <button type="button" id="open-plan" class="primary">Auslosen …</button>
           <button type="button" id="open-nextcloud">Nextcloud …</button>
-          <a id="download-ics" class="button ghost" href="#" download>ICS</a>
+          <a id="download-ics" class="button ghost" href="#" download>ICS-Datei</a>
         </div>
       </div>
       <p id="cal-hint" class="hint" hidden></p>
@@ -45,7 +46,7 @@
       <div class="legend">
         <span><span class="badge main">H</span> Hauptmoderation</span>
         <span><span class="badge co">N</span> Nebenmoderation</span>
-        <span><span class="lock" aria-hidden="true">🔒</span> fixiert</span>
+        <span><span class="lock" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span> fixiert</span>
         <span><span class="avatar empty small" aria-hidden="true">?</span> unbesetzt</span>
       </div>
       <section class="stats" aria-labelledby="stats-title">
@@ -123,7 +124,7 @@
         </div>
       </form>
       <p class="hint">Abwesenheiten wirken auf die nächste Auslosung. Bereits ausgeloste Tage werden markiert und lassen sich im Kalender neu auslosen.</p>
-      <label class="inline"><input type="checkbox" id="absence-show-past"> Vergangene anzeigen</label>
+      <label class="inline" id="absence-toggle"><input type="checkbox" id="absence-show-past"> Vergangene anzeigen</label>
       <ul id="absence-list" class="list"></ul>
     </section>
 
@@ -169,7 +170,7 @@
       <label class="inline"><input type="checkbox" name="locked"> Fixieren (bleibt bei jeder Auslosung erhalten)</label>
       <label class="inline"><input type="checkbox" name="off"> Kein Meeting an diesem Tag</label>
       <div class="form-actions">
-        <button type="button" id="day-reroll">🎲 Neu auslosen</button>
+        <button type="button" id="day-reroll">Neu auslosen</button>
         <button type="button" id="day-clear" class="ghost danger">Entfernen</button>
         <span class="spacer"></span>
         <button type="button" id="day-close" class="ghost">Abbrechen</button>
@@ -213,7 +214,7 @@
         <button type="button" id="nextcloud-test">Verbindung testen</button>
         <span class="spacer"></span>
         <button type="button" class="ghost" id="nextcloud-close">Schließen</button>
-        <button type="submit" class="primary" id="nextcloud-go">Go – schreiben</button>
+        <button type="submit" class="primary" id="nextcloud-go">In Nextcloud schreiben</button>
       </div>
     </form>
   </dialog>