# rima.AppShell 1.1.6

Gemeinsamer visueller Rahmen für rima-Webanwendungen. Referenz: /dokumentation/app-rahmen.
Status: freigegebene Designreferenz 1.1.6, exportierte Integrationsvorlage; kein veröffentlichtes npm-Paket.
Öffentliche Referenzadresse nach dem Website-Update: https://rima-pflege.de/dokumentation/app-rahmen

## Einstieg für die umsetzende Session

1. Diese README und spec.json vollständig lesen. example.html ist eine statische Layoutreferenz; disabled Buttons sind absichtlich keine fertige Anwendung.
2. shell.css unverändert als gekapselte Basis einbinden. Alle Klassen beginnen mit rima-. Die Hauptklasse rima-shell benötigt die Attribute data-theme="light|dark", data-accent="system|service", data-pinned="true|false" und data-menu-open="true|false".
3. theme=dark muss durch die tatsächliche Farbschemawahl gesetzt werden. Systemwahl berücksichtigen. Für rima.System accent=system setzen. Die Hülle bleibt monochrom; Teal ist der gemeinsame Akzent.
4. Icons aus icons/filled und icons/outline nutzen. SVGs inline beziehungsweise als SVG-Komponente einbinden, damit currentColor dem umgebenden Text folgt. Ein img mit SVG-Datei erbt diese Textfarbe nicht; einfarbige Formen alternativ als CSS-Maske verwenden. Inaktive Navigation als graue Kontur, aktive als gefülltes Schwarz/Weiß. Das grüne Hausnotruf-Detail behält seine Bedeutung.
5. Poppins liegt lokal in fonts/ bei, einschließlich unverändertem OFL-Lizenztext. Keine Google-Fonts-Abfrage nötig. Die rima-Marken- und Symbolformen werden für rima-Anwendungen bereitgestellt; daraus folgt keine pauschale Open-Source-Lizenz der gesamten App. Eigene Drittanbieter-Abhängigkeiten separat lizenzieren.
6. Die eigene Anwendung verbindet Navigation, Tabs und Inhalte mit ihren bestehenden Routen. Aktive Auswahl aus einer gemeinsamen Route ableiten. Tab-Liste nicht als ARIA-tablist ausgeben, wenn damit echte Seiten navigiert werden.
7. Mobil links den runden Sidebar-Knopf mit einem langen und einem kurzen Strich und daneben rima zeigen. Die Suche gehört in das aufgeklappte Menü. Mobile Tabs ausblenden. Die vollhohe Sidebar verschiebt die Seite um ihre Breite; 64 px der Seite bleiben sichtbar und schließen bei Berührung das Menü. Hauptbereiche einmalig im Menü darstellen. Schließen, Escape, Fokusbegrenzung, Rückgabe des Fokus, Hintergrundsperre und Scrollwiederherstellung implementieren. In der echten App sollte das Menü ein zugänglicher modaler Dialog sein. Die Vorlage liefert nur dessen Gestaltung.
8. Unsichere Schreibvorgänge, offene Eingaben, Sitzungen, Berechtigungen und gruppengebundene Caches im bestehenden Fachvertrag schützen. Kein Backend, Login oder fremder Session-Code wird mit dieser Gestaltung übernommen.
9. Bei 320, 390, 760, 761, 1100 und 1365 px prüfen; Light/Dark, Tastatur, 200% Zoom, reduzierte Bewegung/Transparenz sowie lange Seitentitel testen. Daten- und Rechteprüfungen zusätzlich beibehalten.

## Maße

- Werkzeugleiste: 64 px. Icons 20 / 23 px; Ziele 48 × 44 px, 14 px Radius
- Toolbar-Gruppen: 24 × 1 px. Kurzer Trennstrich, links und rechts 20 px Abstand
- Kopfzeile: 52 px. Tabs und Toolbar ohne gemeinsame Trennlinie
- Menüspalte: 240 / 216 px. 216 px bei 761–1100 px Bildschirmbreite
- Arbeitsfenster: 20 px Radius. 1 px Rand, außen rechts/unten 8 px Abstand
- Tabs: 10 px Radius. 34 px inaktiv, 40 px aktiv; aktive Breite ab 160 px
- Mobil: bis 760 px. 60 px Kopfzeile; vollhohes Menü bis 352 px, 64 px Seitenausschnitt
- Buttons: 44 px Höhe. 10 px Radius, freundliche graue Flächen
- Glas: 78 % / 24 px. Deckkraft des Chroms / Hintergrundunschärfe

## Regeln

### Die rima-Wortmarke

Die originale Wortmarke rima. verwendet Poppins Bold 700 mit engem Zeichenabstand (-0,025 em). Sie steht in Teal: #007882 im hellen und #2FB6BF im dunklen Farbschema. Toolbar, Tabs und Auswahlflächen verwenden die gemeinsamen neutralen Grautöne.

### Ein gemeinsamer Rahmen

Links die feste Werkzeugleiste, oben die geöffneten Seiten, darunter das Arbeitsfenster mit vier runden Ecken und einem feinen Rand. Toolbar und Tabbar bilden eine Fläche ohne Trennlinie am Übergang.

### Navigation und Seitenabschnitte

Die Toolbar wechselt Hauptbereiche. Die zusätzliche Menüspalte beginnt unter der Tabbar. Fest geöffnet reserviert sie Platz; eingeklappt darf sie bei Mausabsicht oder Tastaturfokus über dem Inhalt erscheinen. Abschnittslinks stehen beim zugehörigen Bereich im Seitenmenü, auch auf dem Smartphone. Eine zusätzliche feststehende Querleiste über dem Seiteninhalt entfällt.

### Monochrome Auswahl

Nicht ausgewählte Symbole sind hellgraue Konturen. Ausgewählte Symbole sind gefüllt und schwarz, im Dunkeln weiß. Nur eine kleine neutrale Fläche markiert den aktiven Hauptbereich. Im Untermenü genügen Textfarbe und Schriftgewicht; keine Auswahlbalken, Verläufe oder Abschnittstrennlinien.

### Die Werkzeugleiste gliedern

Am Desktop stehen die Kernbereiche oben. Auf der Website sind das Startseite, Pflege, Versorgung und – erst nach Freigabe – Ärzte & Praxen. Ein kurzer, seitlich eingerückter Strich trennt Fahrdienst, Hausnotruf und Wissen darunter. Symbole messen 20 px inaktiv und 23 px aktiv; die Bedienflächen bleiben 48 × 44 px. Andere Anwendungen übernehmen die Gruppierung für ihre eigenen Haupt- und Zusatzbereiche. Das mobile Menü bleibt eine zusammenhängende Liste.

### Tabs gehören zur Anwendung

Eine bereits geöffnete Seite wird wiederverwendet. Aktiver Tab und Toolbar müssen dieselbe Route abbilden. Schließen wählt einen benachbarten Tab; der letzte Tab bleibt erreichbar. Zurück/Vorwärts bleiben innerhalb der Anwendung. Ladefeedback sofort, ohne künstliche Verzögerung.

### Mobil eine Sidebar

Der Seiteninhalt scrollt innerhalb einer tatsächlich begrenzten, abgerundeten Fläche unter der Kopfzeile. Die dynamische Viewporthöhe und Safe-Area begrenzen auch Karten und GPU-Inhalte. Bei offenem Menü entfällt der zusätzliche Menüknopf im verschobenen Seitenausschnitt; X und Seitenausschnitt schließen das Menü. Bis 760 px stehen der Sidebar-Knopf mit einem langen und einem kurzen Strich links und rima daneben in einer 60 px hohen Kopfzeile mit Safe-Area. Eine vollhohe Sidebar (maximal 352 px) schiebt die aktuelle Seite nach rechts; mindestens 64 px der Seite bleiben sichtbar. Ein durchgehender 32-px-Radius, 12 px Abstand oben/unten, ein feiner Rand und ein seitlicher Schatten machen die Seite als eigene Fläche erkennbar. Die Suche bleibt im aufgeklappten Menü. Logos, Suche und Schließen liegen auf derselben Mittellinie wie der Menüknopf der verschobenen Seite. Die Menükopfzeile berücksichtigt dafür zusätzlich den 12-px-Seitenversatz und ist 72 px plus Safe-Area hoch; die Einträge beginnen mit 16 px Abstand darunter. Beide Wortmarken sind 22 px groß. Kopfzeilen-Schalter sind runde, neutrale Glasbuttons mit 44 px Bedienfläche. Jeder Hauptbereich erscheint einmal; ein eigener Pfeil klappt Unterpunkte auf. Mobile Tabs und zusätzliche untere Hauptnavigation entfallen. Der sichtbare Seitenausschnitt schließt das Menü und ist sonst für Eingaben gesperrt. Escape, Schließen und Navigation beenden das Menü; Fokus und Scrollen werden zuverlässig wiederhergestellt.

### Teal und monochrome Flächen

Geometrie, Typografie, Graustufen und Bedienverhalten bleiben gleich. Teal (#007882, im Dunkeln #2FB6BF) ist die gemeinsame Markenfarbe für Website und Anwendungen. Flächen, Toolbar, Tabs und Auswahlzustände bleiben monochrom. Pink, Weinrot und Magenta gehören nicht mehr zur aktuellen Gestaltung. Statusfarben brauchen zusätzlich einen verständlichen Text oder ein Symbol.

### Bewegung und Material

Kurze Menüübergänge, keine Layoutsprünge. Transparenz braucht einen deckenden Fallback. Reduzierte Bewegung und reduzierte Transparenz berücksichtigen. Dekorative Intros enden spätestens nach fünf Sekunden und bleiben danach ruhig.

### Anwendungsgrenzen erhalten

Der gemeinsame Rahmen teilt Gestaltung, keine Anmeldungen oder Daten. Nur berechtigte Ziele zeigen; Rechte zusätzlich serverseitig prüfen. Offene Eingaben vor dem Schließen schützen. Cache und Scrollposition pro öffentlichem beziehungsweise angemeldetem Kontext behandeln und bei Konto-/Gruppenwechsel verwerfen.

## Grenzen und Aktualisierung

Diese Vorlage beschreibt den Rahmen; sie ist kein fertiger Router, Cache, Hover-Controller oder Anmeldedienst. spec.json enthält dazu den Sollvertrag. reference/ enthält die tatsächlichen Website-CSS-Quellen zum Vergleich; CSS-Module-Selektoren nicht direkt in eine andere Laufzeit kopieren.
MANIFEST.json listet jeden enthaltenen Dateihash, ausgenommen sich selbst. Beim Update Versionsnummer, Dokumentation, Beispiel und Hashes gemeinsam ändern, das freigegebene Paket archivieren und den konsumierenden Anwendungen den neuen Stand nennen. Inhalte und private Daten gehören nicht in das Paket. Die App-Session übernimmt und prüft den Stand bewusst; andere Anwendungen aktualisieren sich nicht automatisch.
Die öffentliche Referenzadresse zeigt den Stand des dort veröffentlichten Website-Builds. Ein lokal geöffnetes localhost oder 127.0.0.1 verweist auf den jeweiligen Rechner; daraus folgt keine Veröffentlichung. Vor dem Website-Update oder ohne Zugriff auf dessen Adresse das ZIP beziehungsweise die freigegebenen Quellen übergeben.