TimoFrank · TimoFrank · Jul 29, 2026 · Jul 29, 2026
@@ -156,7 +156,7 @@ jobs:
           no_script_style_path="${RUNNER_TEMP}/pages-no-script.css"
           app_path="${RUNNER_TEMP}/pages-versorgungs-kompass.html"
           registration_path="${RUNNER_TEMP}/pages-versorgungs-netzwerk.html"
-          root_share_image_path="${RUNNER_TEMP}/mitmachen-share-v1.png"
+          root_share_image_path="${RUNNER_TEMP}/mitmachen-share-v2.png"
           network_share_image_path="${RUNNER_TEMP}/versorgungs-netzwerk-share-v1.png"
 
           curl --fail "${curl_retry_args[@]}" \
@@ -181,7 +181,7 @@ jobs:
           curl --fail "${curl_retry_args[@]}" \
             "${page_root}/data/data-service.js?${cache_buster}" >/dev/null
           root_share_content_type="$(curl --fail "${curl_retry_args[@]}" \
-            "${page_root}/public/media/social/mitmachen-share-v1.png?${cache_buster}" \
+            "${page_root}/public/media/social/mitmachen-share-v2.png?${cache_buster}" \
             --output "$root_share_image_path" --write-out '%{content_type}')"
           network_share_content_type="$(curl --fail "${curl_retry_args[@]}" \
             "${page_root}/public/media/social/versorgungs-netzwerk-share-v1.png?${cache_buster}" \
@@ -228,7 +228,7 @@ jobs:
               canonical: "https://timofrank.github.io/mitmachen/",
               title: "Jetzt #Mitmachen: Gemeinsam Versorgung besser machen",
               description: "Entdecken Sie vier Kompasse, die Menschen, Wissen und Ideen verbinden – in einer öffentlichen Demo mit ausschließlich fiktiven Daten.",
-              image: "https://timofrank.github.io/mitmachen/public/media/social/mitmachen-share-v1.png"
+              image: "https://timofrank.github.io/mitmachen/public/media/social/mitmachen-share-v2.png"
             }],
             ["Versorgungs-Netzwerk", registrationHtml, {
               canonical: "https://timofrank.github.io/mitmachen/mitmachen/versorgungs-netzwerk.html",

@@ -3,8 +3,9 @@
 Die HTML-Dateien in diesem Ordner sind die reproduzierbaren Browserquellen für
 die 1200 × 630 Pixel großen Open-Graph-Bilder der öffentlichen `#Mitmachen`-Demo.
 
-- `mitmachen-share-v1.html` rendert
-  `public/media/social/mitmachen-share-v1.png`.
+- `mitmachen-share-v1.html` dokumentiert die erste veröffentlichte Fassung.
+- `mitmachen-share-v2.html` rendert die aktuelle
+  `public/media/social/mitmachen-share-v2.png`.
 - `versorgungs-netzwerk-share-v1.html` rendert
   `public/media/social/versorgungs-netzwerk-share-v1.png`.
 - `share-card-preview.html` zeigt beide Bilder zusammen mit den zugehörigen

@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1200, initial-scale=1" />
+    <link rel="icon" href="data:," />
+    <title>#Mitmachen – Share-Vorschau</title>
+    <style>
+      :root {
+        font-family: Arial, Helvetica, sans-serif;
+        color: #ffffff;
+        background: #061652;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1200px;
+        height: 630px;
+        margin: 0;
+        overflow: hidden;
+      }
+
+      body {
+        background:
+          radial-gradient(circle at 88% 42%, rgba(0, 255, 101, 0.2), transparent 29%),
+          radial-gradient(circle at 72% 110%, rgba(85, 158, 232, 0.24), transparent 38%),
+          linear-gradient(132deg, #061652 0%, #0b2b70 62%, #0b466e 100%);
+      }
+
+      .share-card {
+        position: relative;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        width: 100%;
+        height: 100%;
+        padding: 44px 60px 50px;
+      }
+
+      .share-card::before {
+        position: absolute;
+        right: -150px;
+        bottom: -300px;
+        width: 760px;
+        height: 760px;
+        border: 2px solid rgba(255, 255, 255, 0.09);
+        border-radius: 50%;
+        box-shadow:
+          0 0 0 84px rgba(255, 255, 255, 0.022),
+          0 0 0 168px rgba(255, 255, 255, 0.014);
+        content: "";
+        pointer-events: none;
+      }
+
+      .share-card__top,
+      .share-card__content {
+        position: relative;
+        z-index: 1;
+      }
+
+      .share-card__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .mitmachen-lockup {
+        display: block;
+        width: 460px;
+        height: auto;
+      }
+
+      .demo-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 150px;
+        padding: 14px 22px;
+        border-radius: 13px;
+        background: #00e45e;
+        color: #05245c;
+        font-size: 32px;
+        font-weight: 800;
+        letter-spacing: 0.035em;
+        text-transform: uppercase;
+        box-shadow: 0 14px 28px rgba(0, 8, 48, 0.22);
+      }
+
+      .share-card__content {
+        display: grid;
+        grid-template-columns: 690px 340px;
+        gap: 50px;
+        align-items: center;
+        padding-top: 24px;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: 84px;
+        font-weight: 800;
+        letter-spacing: -3.5px;
+        line-height: 0.95;
+      }
+
+      h1 span {
+        color: #86ffb5;
+      }
+
+      .brand-symbol {
+        position: relative;
+        display: grid;
+        width: 340px;
+        height: 340px;
+        place-items: center;
+      }
+
+      .brand-symbol::before {
+        position: absolute;
+        inset: -42px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 255, 101, 0.17), rgba(69, 161, 255, 0.08) 48%, transparent 72%);
+        content: "";
+      }
+
+      .brand-symbol img {
+        position: relative;
+        display: block;
+        width: 340px;
+        height: 340px;
+        filter: drop-shadow(0 22px 38px rgba(0, 8, 48, 0.24));
+      }
+    </style>
+  </head>
+  <body>
+    <main class="share-card" aria-labelledby="share-title">
+      <header class="share-card__top">
+        <img
+          class="mitmachen-lockup"
+          src="../../../public/brand/mitmachen/lockup-horizontal-on-dark.svg"
+          alt="#Mitmachen"
+        />
+        <span class="demo-badge">Demo</span>
+      </header>
+
+      <section class="share-card__content">
+        <h1 id="share-title">Gemeinsam<br />Versorgung<br /><span>besser machen.</span></h1>
+        <div class="brand-symbol" aria-hidden="true">
+          <img src="../../../public/brand/mitmachen/mark-on-dark.svg" alt="" />
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
@@ -170,7 +170,7 @@ <h1>#Mitmachen-Linkvorschauen</h1>
       <section class="cards" aria-label="Vorschau der beiden öffentlichen Seiten">
         <article class="preview-card">
           <p class="preview-card__label">Öffentliche Demo</p>
-          <img src="../../../public/media/social/mitmachen-share-v1.png" alt="" />
+          <img src="../../../public/media/social/mitmachen-share-v2.png" alt="" />
           <div class="preview-card__copy">
             <span class="preview-card__site">timofrank.github.io</span>
             <h2>Jetzt #Mitmachen: Gemeinsam Versorgung besser machen</h2>

@@ -106,7 +106,7 @@ <h1>Abnahme im Messenger-Maßstab</h1>
           <p class="check__label">300 × 158<br />Pixel</p>
           <div class="check__images">
             <figure>
-              <img src="../../../public/media/social/mitmachen-share-v1.png" alt="#Mitmachen-Vorschau in 300 mal 158 Pixel" />
+              <img src="../../../public/media/social/mitmachen-share-v2.png" alt="#Mitmachen-Vorschau in 300 mal 158 Pixel" />
               <figcaption>#Mitmachen</figcaption>
             </figure>
             <figure>
@@ -120,7 +120,7 @@ <h1>Abnahme im Messenger-Maßstab</h1>
           <p class="check__label">160 × 84<br />Pixel</p>
           <div class="check__images">
             <figure>
-              <img src="../../../public/media/social/mitmachen-share-v1.png" alt="#Mitmachen-Vorschau in 160 mal 84 Pixel" />
+              <img src="../../../public/media/social/mitmachen-share-v2.png" alt="#Mitmachen-Vorschau in 160 mal 84 Pixel" />
               <figcaption>#Mitmachen</figcaption>
             </figure>
             <figure>

@@ -143,12 +143,20 @@
     },
     {
       "path": "public/media/social/mitmachen-share-v1.png",
-      "role": "public-demo-social-preview",
+      "role": "public-demo-social-preview-legacy",
       "owner": "Versorgungs-CRM project",
       "source": "browser-rendered from dokumentation/assets/social/mitmachen-share-v1.html",
       "status": "approved-for-public-demo",
       "mayBeModified": true
     },
+    {
+      "path": "public/media/social/mitmachen-share-v2.png",
+      "role": "public-demo-social-preview",
+      "owner": "Versorgungs-CRM project",
+      "source": "browser-rendered from dokumentation/assets/social/mitmachen-share-v2.html",
+      "status": "approved-for-public-demo",
+      "mayBeModified": true
+    },
     {
       "path": "public/media/social/versorgungs-netzwerk-share-v1.png",
       "role": "registration-demo-social-preview",

@@ -131,9 +131,9 @@ const shareContracts = [
     url: `${pagesBaseUrl}/`,
     title: "Jetzt #Mitmachen: Gemeinsam Versorgung besser machen",
     description: "Entdecken Sie vier Kompasse, die Menschen, Wissen und Ideen verbinden – in einer öffentlichen Demo mit ausschließlich fiktiven Daten.",
-    image: `${pagesBaseUrl}/public/media/social/mitmachen-share-v1.png`,
-    imageAlt: "#Mitmachen: Gemeinsam Versorgung besser machen – mit vier Kompassen in einer öffentlichen Demo.",
-    imagePath: "public/media/social/mitmachen-share-v1.png"
+    image: `${pagesBaseUrl}/public/media/social/mitmachen-share-v2.png`,
+    imageAlt: "#Mitmachen: Gemeinsam Versorgung besser machen – großes Hashtag-Signet auf dunkelblauem Hintergrund.",
+    imagePath: "public/media/social/mitmachen-share-v2.png"
   },
   {
     documents: ["mitmachen/versorgungs-netzwerk.html"],
@@ -232,6 +232,7 @@ const requiredFiles = new Set([
   "public/hospitation/mitmachen-hospitations-framework.pdf",
   "public/media/demo/mitmachen/versorgungs-netzwerk-concept.svg",
   "public/media/social/mitmachen-share-v1.png",
+  "public/media/social/mitmachen-share-v2.png",
   "public/media/social/versorgungs-netzwerk-share-v1.png"
 ]);
 

@@ -250,6 +250,7 @@ EOF
   cp "$ROOT_DIR/public/brand/versorgungs-kompass/mark-on-dark.svg" "$STAGE_DIR/public/brand/versorgungs-kompass/mark-on-dark.svg"
   cp "$ROOT_DIR/public/media/demo/mitmachen/versorgungs-netzwerk-concept.svg" "$STAGE_DIR/public/media/demo/mitmachen/versorgungs-netzwerk-concept.svg"
   cp "$ROOT_DIR/public/media/social/mitmachen-share-v1.png" "$STAGE_DIR/public/media/social/mitmachen-share-v1.png"
+  cp "$ROOT_DIR/public/media/social/mitmachen-share-v2.png" "$STAGE_DIR/public/media/social/mitmachen-share-v2.png"
   cp "$ROOT_DIR/public/media/social/versorgungs-netzwerk-share-v1.png" "$STAGE_DIR/public/media/social/versorgungs-netzwerk-share-v1.png"
   cp "$ROOT_DIR/public/manifest.pages.webmanifest" "$STAGE_DIR/manifest.webmanifest"
   for asset in mitmachen-hospitations-framework.docx mitmachen-hospitations-framework.pdf; do
@@ -372,8 +373,8 @@ const rootShareMetadata = {
   url: `${pagesBaseUrl}/`,
   title: "Jetzt #Mitmachen: Gemeinsam Versorgung besser machen",
   description: "Entdecken Sie vier Kompasse, die Menschen, Wissen und Ideen verbinden – in einer öffentlichen Demo mit ausschließlich fiktiven Daten.",
-  image: `${pagesBaseUrl}/public/media/social/mitmachen-share-v1.png`,
-  imageAlt: "#Mitmachen: Gemeinsam Versorgung besser machen – mit vier Kompassen in einer öffentlichen Demo."
+  image: `${pagesBaseUrl}/public/media/social/mitmachen-share-v2.png`,
+  imageAlt: "#Mitmachen: Gemeinsam Versorgung besser machen – großes Hashtag-Signet auf dunkelblauem Hintergrund."
 };
 appHtml = injectShareMetadata(appHtml, rootShareMetadata);
 fs.writeFileSync(appPath, appHtml);

@@ -96,7 +96,8 @@ try {
   assert.equal(fs.existsSync(path.join(pagesDir, "data", "runtime-config.js")), true, "Pages muss eine explizite Demo-Runtime enthalten");
   assert.equal(fs.existsSync(path.join(pagesDir, "vendor", "leaflet", "leaflet.js")), true, "Pages muss die Kartenbibliothek enthalten");
   assert.equal(fs.existsSync(path.join(pagesDir, "vendor", "xlsx", "xlsx.bundle.js")), true, "Pages muss die Exportbibliothek der Voll-App enthalten");
-  assert.equal(fs.existsSync(path.join(pagesDir, "public", "media", "social", "mitmachen-share-v1.png")), true, "Pages muss das #Mitmachen-Share-Bild enthalten");
+  assert.equal(fs.existsSync(path.join(pagesDir, "public", "media", "social", "mitmachen-share-v1.png")), true, "Pages muss das bisherige #Mitmachen-Share-Bild fuer bestehende Vorschauen behalten");
+  assert.equal(fs.existsSync(path.join(pagesDir, "public", "media", "social", "mitmachen-share-v2.png")), true, "Pages muss das aktuelle #Mitmachen-Share-Bild enthalten");
   assert.equal(fs.existsSync(path.join(pagesDir, "public", "media", "social", "versorgungs-netzwerk-share-v1.png")), true, "Pages muss das Netzwerk-Share-Bild enthalten");
   const pagesRootHtml = fs.readFileSync(path.join(pagesDir, "index.html"), "utf8");
   const pagesAliasHtml = fs.readFileSync(path.join(pagesDir, "versorgungs-kompass.html"), "utf8");
@@ -111,15 +112,15 @@ try {
   assert.match(pagesRootHtml, /<link rel="canonical" href="https:\/\/timofrank\.github\.io\/mitmachen\/" \/>/);
   assert.match(pagesRootHtml, /<meta property="og:title" content="Jetzt #Mitmachen: Gemeinsam Versorgung besser machen" \/>/);
   assert.match(pagesRootHtml, /<meta property="og:description" content="Entdecken Sie vier Kompasse, die Menschen, Wissen und Ideen verbinden – in einer öffentlichen Demo mit ausschließlich fiktiven Daten\." \/>/);
-  assert.match(pagesRootHtml, /<meta property="og:image" content="https:\/\/timofrank\.github\.io\/mitmachen\/public\/media\/social\/mitmachen-share-v1\.png" \/>/);
+  assert.match(pagesRootHtml, /<meta property="og:image" content="https:\/\/timofrank\.github\.io\/mitmachen\/public\/media\/social\/mitmachen-share-v2\.png" \/>/);
   assert.match(pagesRootHtml, /<meta name="twitter:card" content="summary_large_image" \/>/);
   assert.match(pagesRootHtml, /\.\/data\/demo-data\.js[\s\S]*\.\/data\/demo-api\.js[\s\S]*\.\/data\/data-service\.js/);
   assert.doesNotMatch(pagesRootHtml, /data-public-entry="home"|data-public-entry-styles|>\s*Demo öffnen(?:\s|<)/i);
   assert.doesNotMatch(pagesRootHtml, /<meta\s+http-equiv="refresh"/i);
   const pagesDemoAliasHtml = fs.readFileSync(path.join(pagesDir, "demo", "index.html"), "utf8");
   assert.match(pagesDemoAliasHtml, /url=\.\.\/#home/);
   assert.match(pagesDemoAliasHtml, /<link rel="canonical" href="https:\/\/timofrank\.github\.io\/mitmachen\/" \/>/);
-  assert.match(pagesDemoAliasHtml, /<meta property="og:image" content="https:\/\/timofrank\.github\.io\/mitmachen\/public\/media\/social\/mitmachen-share-v1\.png" \/>/);
+  assert.match(pagesDemoAliasHtml, /<meta property="og:image" content="https:\/\/timofrank\.github\.io\/mitmachen\/public\/media\/social\/mitmachen-share-v2\.png" \/>/);
   assert.match(
     fs.readFileSync(path.join(pagesDir, "versorgungs-kompass.html"), "utf8"),
     /href="\.\/public\/brand\/mitmachen\/icons\/app-icon-32\.png"/
@@ -261,7 +262,7 @@ try {
   assert.match(`${auditResult.stderr}\n${auditResult.stdout}`, /Public Asset Audit FAILED/);
   fs.writeFileSync(pagesConfigPath, cleanPagesConfig);
 
-  const pagesShareImagePath = path.join(pagesDir, "public", "media", "social", "mitmachen-share-v1.png");
+  const pagesShareImagePath = path.join(pagesDir, "public", "media", "social", "mitmachen-share-v2.png");
   const cleanPagesShareImage = fs.readFileSync(pagesShareImagePath);
   fs.writeFileSync(pagesShareImagePath, cleanPagesShareImage.subarray(0, 24));
   auditResult = spawnSync(process.execPath, [publicAudit, "--artifact-root", pagesDir], {
@@ -391,6 +392,7 @@ try {
     "enrollment.css",
     "enrollment.js",
     "public/media/social/mitmachen-share-v1.png",
+    "public/media/social/mitmachen-share-v2.png",
     "public/media/social/versorgungs-netzwerk-share-v1.png"
   );