# SwimMonitor Style Gestaltungsregeln für den SwimMonitor-Bereich (Container-Überwachung, Administration, Kalender, Signage). Die Umsetzung steckt in `public/css/swimmonitor.css` und `public/js/swimmonitor.js`. Diese Datei ist die Referenz: Was hier nicht steht, wird nicht erfunden, sondern zuerst hier ergänzt. Vorschau aller Bausteine: `styleguide.html` (im Browser öffnen, über einen lokalen Webserver). --- ## 1. Haltung SwimMonitor ist ein Werkzeug für Technik und Betrieb, kein Marketing-Auftritt. Die Oberfläche soll wirken wie ein gutes Messgerät: ruhig, präzise, Zahlen stehen im Vordergrund. **So ja** - Flache Flächen, 1 px Linien, kleine Radien (4 px, bei Tags 2 px). - Farbe nur mit Bedeutung: Markenblau für Navigation und Hauptaktion, Grün/Gelb/Rot nur für Zustände. - Zahlen immer in IBM Plex Mono mit gleich breiten Ziffern, damit Spalten sauber untereinander stehen. - Kurze, sachliche Beschriftungen auf Deutsch. Lieber „Warnung“ als „Achtung!“. - Dichte Informationen in Zeilen und Tabellen statt einzelner Karten. **So nicht** (wirkt schnell generisch bzw. „nach KI“) - Keine Farbverläufe, kein Glas-Effekt, keine weichen Schatten auf Flächen. - Keine Pillen-Badges und keine runden „Bubbles“, keine Emojis. - Keine Icons vor jedem Menüpunkt oder jeder Überschrift. Icons nur, wo sie schneller lesbar sind als Text (z. B. Bearbeiten/Löschen in engen Tabellenspalten), dann Font Awesome, einfarbig. - Keine Hover-Animationen, die Elemente anheben oder vergrößern. - Keine Füllwörter in Überschriften („Willkommen in deiner Übersicht“). Die Überschrift sagt, was die Seite ist. --- ## 2. Technische Regeln 1. **Kein Inline-CSS.** Kein `style="…"`, keine `