feat: UI/UX improvements and Tweet component redesign

- Unify card CSS classes to .text-card across all step components
- Replace dark-mode Tweet screenshot with HTML Tweet component (light-mode, accessible, clickable link to source)
- Add images to IntroStrangeNewMinds (system1-42.png) and IntroMethodik (expert-loop.png)
- Improve text-card styling: left-align text, increase max-width to 900px
- Enhance ProgressIndicator: glassmorphism design, integrate scroll-nav-button
- Increase PhaseHeader font sizes for better readability
- Add vault-template.zip download and case study images
- Update build output in docs/

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: chpollin

.claude/settings.local.json

@@ -11,7 +11,13 @@
       "Bash(npm install:*)",
       "Bash(git push)",
       "Bash(xcopy:*)",
-      "Bash(dir:*)"
+      "Bash(dir:*)",
+      "Bash(tree:*)",
+      "Bash(xargs:*)",
+      "Bash(wc:*)",
+      "Bash(cmd /c copy:*)",
+      "Bash(zip:*)",
+      "Bash(powershell -Command:*)"
     ],
     "deny": [],
     "ask": []

about.html

@@ -11,6 +11,11 @@
     <meta property="og:description" content="Über die Promptotyping-Methode für LLM-gestützte Werkzeugentwicklung." />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://dhcraft.org/PromptotypingExplainer/about.html" />
+    <meta property="og:image" content="https://dhcraft.org/PromptotypingExplainer/images/promptotyping-overview.png" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://dhcraft.org/PromptotypingExplainer/images/promptotyping-overview.png" />
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">

bibliographie.html

@@ -11,6 +11,11 @@
     <meta property="og:description" content="Wissenschaftliche Quellen zu Co-Intelligence, LLMs und Digital Humanities." />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://dhcraft.org/PromptotypingExplainer/bibliographie.html" />
+    <meta property="og:image" content="https://dhcraft.org/PromptotypingExplainer/images/promptotyping-overview.png" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://dhcraft.org/PromptotypingExplainer/images/promptotyping-overview.png" />
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">

docs/about.html

@@ -11,16 +11,21 @@
     <meta property="og:description" content="Über die Promptotyping-Methode für LLM-gestützte Werkzeugentwicklung." />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://dhcraft.org/PromptotypingExplainer/about.html" />
+    <meta property="og:image" content="https://dhcraft.org/PromptotypingExplainer/images/promptotyping-overview.png" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://dhcraft.org/PromptotypingExplainer/images/promptotyping-overview.png" />
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <script type="module" crossorigin src="/PromptotypingExplainer/assets/about-C8otJDHM.js"></script>
-    <link rel="modulepreload" crossorigin href="/PromptotypingExplainer/assets/legacy-C0Jhm6HA.js">
-    <link rel="modulepreload" crossorigin href="/PromptotypingExplainer/assets/html-Rx8xiX3v.js">
-    <link rel="modulepreload" crossorigin href="/PromptotypingExplainer/assets/PageLayout-7oe03jFT.js">
-    <link rel="stylesheet" crossorigin href="/PromptotypingExplainer/assets/legacy-BX4omXgw.css">
+    <script type="module" crossorigin src="/PromptotypingExplainer/assets/about-C6q1dprf.js"></script>
+    <link rel="modulepreload" crossorigin href="/PromptotypingExplainer/assets/legacy-DWVdwokI.js">
+    <link rel="modulepreload" crossorigin href="/PromptotypingExplainer/assets/html-C0ix7bGn.js">
+    <link rel="modulepreload" crossorigin href="/PromptotypingExplainer/assets/PageLayout-Bs27aQpO.js">
+    <link rel="stylesheet" crossorigin href="/PromptotypingExplainer/assets/legacy-Xfwo9L1_.css">
     <link rel="stylesheet" crossorigin href="/PromptotypingExplainer/assets/PageLayout-B5zEQNVE.css">
     <link rel="stylesheet" crossorigin href="/PromptotypingExplainer/assets/about-Bbs_J7xM.css">
   </head>