diff --git a/README.md b/README.md
index a7b310e..88cc779 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="dokumentation/assets/readme/versorgungs-kompass-header-v2.svg" alt="#Mitmachen und Versorgungs-Kompass mit den Modulen Versorgung, Stakeholder, Hospitation und Formate" width="100%" />
+  <img src="dokumentation/assets/readme/mitmachen-kompass-banner-v3.png" alt="#Mitmachen mit Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass" width="100%" />
 </p>
 
 <p align="center">
@@ -17,11 +17,40 @@
 > [!IMPORTANT]
 > Die öffentliche Demo arbeitet ausschließlich mit fiktiven Beispieldaten. Verbindliche Informationen zu [#Mitmachen](https://www.gematik.de/mitmachen) und dem [Versorgungs-Netzwerk](https://www.gematik.de/mitmachen/versorgungs-netzwerk) stehen auf gematik.de.
 
+## Vier Kompasse
+
+**#Mitmachen** verbindet vier gleichrangige Kompasse. Eigene Signets und Farben schaffen Orientierung; die vollständigen Namen bleiben in allen Ansichten sichtbar.
+
+<table>
+  <tr>
+    <td width="50%" align="center">
+      <img src="public/brand/versorgungs-kompass/lockup-horizontal.svg" alt="Versorgungs-Kompass" width="92%" />
+      <br /><sub>Versorgung regional verstehen.</sub>
+    </td>
+    <td width="50%" align="center">
+      <img src="public/brand/modules/stakeholder/lockup-horizontal.svg" alt="Stakeholder-Kompass" width="92%" />
+      <br /><sub>Perspektiven gezielt verbinden.</sub>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center">
+      <img src="public/brand/modules/hospitation/lockup-horizontal.svg" alt="Hospitations-Kompass" width="92%" />
+      <br /><sub>Von Beobachtung zu Evidenz.</sub>
+    </td>
+    <td width="50%" align="center">
+      <img src="public/brand/modules/formate/lockup-horizontal.svg" alt="Format-Kompass" width="92%" />
+      <br /><sub>Austausch wirksam gestalten.</sub>
+    </td>
+  </tr>
+</table>
+
+## Aktueller Einblick
+
 <p align="center">
-  <img src="dokumentation/assets/readme/versorgungs-kompass-module-collage-v2.png" alt="#Mitmachen mit Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass" width="100%" />
+  <img src="dokumentation/assets/readme/mitmachen-kompass-collage-v3.png" alt="Aktuelle Anwendungscollage mit Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass" width="100%" />
 </p>
 
-<p align="center"><sub>Vier Marken, eine gemeinsame Anwendung. Sämtliche dargestellten Personen, Organisationen und Fachdaten sind fiktiv.</sub></p>
+<p align="center"><sub>Vier Kompasse, eine gemeinsame Anwendung. Sämtliche dargestellten Personen, Organisationen und Fachdaten sind fiktiv.</sub></p>
 
 **#Mitmachen** verbindet Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass in einer gemeinsamen Anwendung. So werden regionale Perspektiven sichtbar, Erfahrungen nachvollziehbar und Erkenntnisse für die gemeinsame Arbeit nutzbar.
 
diff --git a/dokumentation/assets/readme/README.md b/dokumentation/assets/readme/README.md
index 735d6ab..8a926b7 100644
--- a/dokumentation/assets/readme/README.md
+++ b/dokumentation/assets/readme/README.md
@@ -2,6 +2,10 @@
 
 Diese Bilder sind versionierte Dokumentationsassets und keine Laufzeitquellen der Anwendung.
 
+- `mitmachen-kompass-banner-v3.png`: aktuelles Markenbanner mit `#Mitmachen` und den vier gleichrangigen Kompassen.
+- `mitmachen-kompass-collage-v3.png`: aktuelle Collage aus neu aufgenommenen Browserzuständen aller vier Kompasse.
+- `mitmachen-kompass-collage-v3.html`: reproduzierbare Browserquelle der aktuellen Collage.
+- `module-previews-v3/`: aktuelle Browseraufnahmen für die vier Collage-Kacheln.
 - `versorgungs-kompass-header-v2.svg`: skalierbarer README-Header mit den vier Produktmodulen.
 - `versorgungs-kompass-module-collage-v2.png`: gerenderte Collage aus realen Browserzuständen aller vier Produktmodule.
 - `versorgungs-kompass-module-collage-v2.html`: reproduzierbare Browserquelle der Collage.
diff --git a/dokumentation/assets/readme/mitmachen-kompass-banner-v3.png b/dokumentation/assets/readme/mitmachen-kompass-banner-v3.png
new file mode 100644
index 0000000..679f1fc
Binary files /dev/null and b/dokumentation/assets/readme/mitmachen-kompass-banner-v3.png differ
diff --git a/dokumentation/assets/readme/mitmachen-kompass-collage-v3.html b/dokumentation/assets/readme/mitmachen-kompass-collage-v3.html
new file mode 100644
index 0000000..55e69b8
--- /dev/null
+++ b/dokumentation/assets/readme/mitmachen-kompass-collage-v3.html
@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:," />
+    <title>#Mitmachen – vier Kompasse</title>
+    <style>
+      :root {
+        font-family: Arial, Helvetica, sans-serif;
+        color: #17275f;
+        background: #eef3fa;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1600px;
+        height: 1200px;
+        margin: 0;
+        overflow: hidden;
+      }
+
+      body {
+        background:
+          radial-gradient(circle at 92% 4%, rgba(0, 255, 101, 0.1), transparent 24%),
+          linear-gradient(180deg, #f8faff 0%, #edf2f9 100%);
+      }
+
+      .collage {
+        width: 100%;
+        height: 100%;
+        padding: 42px 54px 46px;
+      }
+
+      .collage__header {
+        height: 132px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 42px;
+      }
+
+      .collage__headline {
+        display: flex;
+        align-items: center;
+        gap: 30px;
+      }
+
+      .mitmachen-lockup {
+        width: 330px;
+        height: auto;
+      }
+
+      .header-divider {
+        width: 1px;
+        height: 64px;
+        background: #cbd6e8;
+      }
+
+      .collage__title {
+        max-width: 610px;
+        margin: 0;
+        color: #10236e;
+        font-size: 36px;
+        line-height: 1.08;
+        letter-spacing: -1.2px;
+      }
+
+      .collage__badge {
+        padding: 12px 18px;
+        border: 1px solid #cbd8eb;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.8);
+        color: #65728a;
+        font-size: 15px;
+        font-weight: 700;
+      }
+
+      .compass-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-rows: repeat(2, 1fr);
+        gap: 24px;
+        height: calc(100% - 132px);
+      }
+
+      .compass-card {
+        --accent: #559ee8;
+        overflow: hidden;
+        border: 1px solid #d5deec;
+        border-top: 8px solid var(--accent);
+        border-radius: 22px;
+        background: #ffffff;
+        box-shadow: 0 18px 44px rgba(16, 35, 110, 0.1);
+      }
+
+      .compass-card--stakeholder {
+        --accent: #43b391;
+      }
+
+      .compass-card--hospitation {
+        --accent: #e0a44d;
+      }
+
+      .compass-card--format {
+        --accent: #a980da;
+      }
+
+      .compass-card__media {
+        height: 330px;
+        overflow: hidden;
+        border-bottom: 1px solid #dce4f0;
+        background: #eef3fa;
+      }
+
+      .compass-card__media img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+        object-position: top center;
+      }
+
+      .compass-card__body {
+        min-height: 140px;
+        padding: 21px 26px 22px;
+      }
+
+      .compass-card__lockup {
+        width: min(430px, 100%);
+        height: auto;
+        display: block;
+        margin-bottom: 12px;
+      }
+
+      .compass-card p {
+        margin: 0;
+        color: #59677f;
+        font-size: 18px;
+        font-weight: 650;
+        line-height: 1.35;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="collage" aria-labelledby="collage-title">
+      <header class="collage__header">
+        <div class="collage__headline">
+          <img class="mitmachen-lockup" src="../../../public/brand/mitmachen/lockup-horizontal.svg" alt="#Mitmachen" />
+          <span class="header-divider" aria-hidden="true"></span>
+          <h1 class="collage__title" id="collage-title">Vier Kompasse.<br />Gemeinsam Versorgung gestalten.</h1>
+        </div>
+        <span class="collage__badge">Aktueller Einblick · synthetische Demo</span>
+      </header>
+
+      <section class="compass-grid" aria-label="Einblicke in die vier Kompasse">
+        <article class="compass-card">
+          <div class="compass-card__media">
+            <img src="./module-previews-v3/versorgung.png" alt="Kartenansicht mit regional verteilten Kontakten" />
+          </div>
+          <div class="compass-card__body">
+            <img class="compass-card__lockup" src="../../../public/brand/versorgungs-kompass/lockup-horizontal.svg" alt="Versorgungs-Kompass" />
+            <p>Versorgung regional verstehen.</p>
+          </div>
+        </article>
+
+        <article class="compass-card compass-card--stakeholder">
+          <div class="compass-card__media">
+            <img src="./module-previews-v3/stakeholder.png" alt="Stakeholder-Organisationen in einer strukturierten Übersicht" />
+          </div>
+          <div class="compass-card__body">
+            <img class="compass-card__lockup" src="../../../public/brand/modules/stakeholder/lockup-horizontal.svg" alt="Stakeholder-Kompass" />
+            <p>Perspektiven gezielt verbinden.</p>
+          </div>
+        </article>
+
+        <article class="compass-card compass-card--hospitation">
+          <div class="compass-card__media">
+            <img src="./module-previews-v3/hospitation.png" alt="Hospitationsframework von Beobachtungen bis zu nächsten Schritten" />
+          </div>
+          <div class="compass-card__body">
+            <img class="compass-card__lockup" src="../../../public/brand/modules/hospitation/lockup-horizontal.svg" alt="Hospitations-Kompass" />
+            <p>Von Beobachtung zu Evidenz.</p>
+          </div>
+        </article>
+
+        <article class="compass-card compass-card--format">
+          <div class="compass-card__media">
+            <img src="./module-previews-v3/formate.png" alt="Formate für Roundtables, Fachgespräche und Veranstaltungen" />
+          </div>
+          <div class="compass-card__body">
+            <img class="compass-card__lockup" src="../../../public/brand/modules/formate/lockup-horizontal.svg" alt="Format-Kompass" />
+            <p>Austausch wirksam gestalten.</p>
+          </div>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/dokumentation/assets/readme/mitmachen-kompass-collage-v3.png b/dokumentation/assets/readme/mitmachen-kompass-collage-v3.png
new file mode 100644
index 0000000..9d91821
Binary files /dev/null and b/dokumentation/assets/readme/mitmachen-kompass-collage-v3.png differ
diff --git a/dokumentation/assets/readme/module-previews-v3/formate.png b/dokumentation/assets/readme/module-previews-v3/formate.png
new file mode 100644
index 0000000..ee5e9ee
Binary files /dev/null and b/dokumentation/assets/readme/module-previews-v3/formate.png differ
diff --git a/dokumentation/assets/readme/module-previews-v3/hospitation.png b/dokumentation/assets/readme/module-previews-v3/hospitation.png
new file mode 100644
index 0000000..fa581b3
Binary files /dev/null and b/dokumentation/assets/readme/module-previews-v3/hospitation.png differ
diff --git a/dokumentation/assets/readme/module-previews-v3/stakeholder.png b/dokumentation/assets/readme/module-previews-v3/stakeholder.png
new file mode 100644
index 0000000..1993302
Binary files /dev/null and b/dokumentation/assets/readme/module-previews-v3/stakeholder.png differ
diff --git a/dokumentation/assets/readme/module-previews-v3/versorgung.png b/dokumentation/assets/readme/module-previews-v3/versorgung.png
new file mode 100644
index 0000000..9d81e42
Binary files /dev/null and b/dokumentation/assets/readme/module-previews-v3/versorgung.png differ

+ + _{Versorgung regional verstehen.} +	+ + _{Perspektiven gezielt verbinden.} +
+ + _{Von Beobachtung zu Evidenz.} +	+ + _{Austausch wirksam gestalten.} +