{
  "id": "rima-app-shell",
  "version": "1.1.6",
  "status": "published-reference",
  "reference": "/dokumentation/app-rahmen",
  "source": "Website-Portal, mobile Abschnittsnavigation 24.10.2026",
  "dimensions": {
    "toolbar": 64,
    "header": 52,
    "sidebar": 240,
    "sidebarNarrow": 216,
    "narrowDesktopMax": 1100,
    "mobileMax": 760,
    "windowInset": 8,
    "windowRadius": 20,
    "mobileWindowRadius": 16,
    "mobileWindowInset": 6,
    "mobileHeader": 60,
    "mobileDrawerHeader": 72,
    "mobileMenuGap": 16,
    "mobileSidebar": 352,
    "mobilePagePeek": 64,
    "mobilePageRadius": 32,
    "mobilePageInset": 12,
    "mobileControlRadius": 22,
    "mobileSidebarInset": 0,
    "mobileSidebarTop": 0,
    "tabRadius": 10,
    "tabHeight": 34,
    "activeTabHeight": 40,
    "activeTabMinWidth": 160,
    "toolbarTargetWidth": 48,
    "toolbarTargetHeight": 44,
    "toolbarTargetRadius": 14,
    "toolbarIcon": 20,
    "activeToolbarIcon": 23,
    "outlineStroke": 1.8,
    "toolbarSeparatorWidth": 24,
    "toolbarSeparatorHeight": 1,
    "buttonRadius": 10,
    "buttonHeight": 44,
    "touchTarget": 44,
    "border": 1,
    "blur": 24,
    "chromeOpacity": 0.78
  },
  "themes": {
    "light": {
      "surface": "#FFFFFF",
      "foreground": "#000000",
      "muted": "#52525B",
      "subtle": "#8A8A93",
      "chromeMix": 3,
      "sidebarMix": 2
    },
    "dark": {
      "surface": "#000000",
      "foreground": "#FFFFFF",
      "muted": "#A1A1AA",
      "subtle": "#8A8A93",
      "chromeMix": 10,
      "sidebarMix": 6
    }
  },
  "accents": {
    "system": {
      "light": "#007882",
      "dark": "#2FB6BF"
    },
    "service": {
      "light": "#007882",
      "dark": "#2FB6BF"
    }
  },
  "brand": {
    "wordmark": "rima.",
    "family": "Poppins",
    "weight": 700,
    "trackingEm": -0.025,
    "light": "#007882",
    "dark": "#2FB6BF",
    "source": "src/components/layout/wordmark.tsx"
  },
  "typography": {
    "family": "Poppins",
    "weights": [
      400,
      500,
      600,
      700
    ],
    "fallback": "system-ui, sans-serif",
    "loading": "local; font-display: swap"
  },
  "motion": {
    "menu": 160,
    "mobileMenu": 220,
    "hoverIntent": 160,
    "hoverBridge": 220,
    "decorativeIntroMax": 5000
  },
  "rules": [
    {
      "title": "Die rima-Wortmarke",
      "text": "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."
    },
    {
      "title": "Ein gemeinsamer Rahmen",
      "text": "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."
    },
    {
      "title": "Navigation und Seitenabschnitte",
      "text": "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."
    },
    {
      "title": "Monochrome Auswahl",
      "text": "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."
    },
    {
      "title": "Die Werkzeugleiste gliedern",
      "text": "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."
    },
    {
      "title": "Tabs gehören zur Anwendung",
      "text": "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."
    },
    {
      "title": "Mobil eine Sidebar",
      "text": "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."
    },
    {
      "title": "Teal und monochrome Flächen",
      "text": "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."
    },
    {
      "title": "Bewegung und Material",
      "text": "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."
    },
    {
      "title": "Anwendungsgrenzen erhalten",
      "text": "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."
    }
  ]
}