- The three market Content Blocks preview as compact collapsible rows:

thumbnail of the actual image (hero background, intro image, insights
  cover), key copy in the summary line, full details expanded; card and
  intro-paragraph previews are wrapped in the same mechanism
- New SubmarketPluginPreview for vitec_usecaselist / vitec_productfeature /
  vitec_productlist: instead of bare standard boxes they now list the
  selected story titles (flagging stories that still lack a quote), the
  featured product and the hand-picked products in order
- Container-style collapse for whole page-module COLUMNS: a chevron at the
  right of every column header folds a section down to its title row,
  state kept per page and colPos in localStorage - the slot view of a
  sub-market page folds to six slim bands
- Previews sit under the page module's pointer-events lock and its
  click-to-edit layer: pointer events are re-enabled inside the collapse
  markup and the toggle runs on pointerdown in the capture phase
- Two more v14 removals fixed on the way, both latent in the OLDER preview
  classes too (Usecaseshow, Modelcard would have crashed the page module):
  GridColumnItem::getRecord() now returns a Domain\Record object, and
  StandaloneView is gone - previews normalize the record via a shared
  helper and render through the ViewFactory

packages/vitec/ContentBlocks/ContentElements/card/templates/backend-preview.html

@@ -3,7 +3,16 @@
 <f:section name="Content">
 
 <f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
+<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>
 
+<details class="vitec-collapse">
+<summary>
+    <f:if condition="{data.image.0}"><f:image image="{data.image.0}" class="vitec-collapse__thumb" width="72c" height="44c" alt=""/></f:if>
+    <span class="vitec-collapse__label">Card</span>
+    <span class="vitec-collapse__hint">{data.header}</span>
+    <f:if condition="{data.layout_variant} == 'flipcard'"><span class="vitec-badge">Flip</span></f:if>
+</summary>
+<div class="vitec-collapse__body">
 <div class="vitec-preview vitec-preview--{data.background_variant}">
 
     <f:comment>Thumbnail: image > icon > placeholder</f:comment>
@@ -151,6 +160,8 @@
     </div>
 
 </div>
+</div>
+</details>
 
 </f:section>
 </html>

packages/vitec/ContentBlocks/ContentElements/intro-paragraph/templates/backend-preview.html

@@ -3,7 +3,14 @@
 <f:section name="Content">
 
 <f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
+<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>
 
+<details class="vitec-collapse">
+<summary>
+    <span class="vitec-collapse__label">Intro Paragraph</span>
+    <span class="vitec-collapse__hint">{data.header}</span>
+</summary>
+<div class="vitec-collapse__body">
 <div class="vitec-preview">
     <div class="vitec-preview__body">
         <div class="vitec-preview__label">VITEC · Intro Paragraph</div>
@@ -83,6 +90,8 @@
     </div>
 
 </div>
+</div>
+</details>
 
 </f:section>
 </html>

packages/vitec/ContentBlocks/ContentElements/market-hero/templates/backend-preview.html

@@ -1,12 +1,31 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:layout name="Preview"/>
 <f:section name="Content">
+
 <f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
-<div class="vitec-preview">
-    <div class="vitec-preview__body">
-        <strong>Market Hero</strong> — {data.vitec_subline}
-        <f:if condition="{data.vitec_video_url}"><span> · 🎬 {data.vitec_video_title}</span></f:if>
+<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>
+
+<details class="vitec-collapse">
+    <summary>
+        <f:if condition="{data.bgimage.0}">
+            <f:image image="{data.bgimage.0}" class="vitec-collapse__thumb" width="72c" height="44c" alt=""/>
+        </f:if>
+        <span class="vitec-collapse__label">1 · Market Hero</span>
+        <span class="vitec-collapse__hint"><f:format.crop maxCharacters="80">{data.subline}</f:format.crop></span>
+        <f:if condition="{data.video_url}"><span class="vitec-badge">🎬 Video</span></f:if>
+    </summary>
+    <div class="vitec-collapse__body">
+        <p><strong>Subline:</strong> {data.subline}</p>
+        <p><strong>CTA:</strong> <f:if condition="{data.cta_label}"><f:then>{data.cta_label}</f:then><f:else>Get in touch (Default)</f:else></f:if></p>
+        <f:if condition="{data.video_url}">
+            <p><strong>Video:</strong> {data.video_title} — {data.video_url}</p>
+        </f:if>
+        <f:if condition="{data.bgimage.0}">
+            <f:then><f:image image="{data.bgimage.0}" width="280c" alt=""/></f:then>
+            <f:else><p><em>Kein Hintergrundbild — Fallback: dunkler Verlauf.</em></p></f:else>
+        </f:if>
     </div>
-</div>
+</details>
+
 </f:section>
 </html>

packages/vitec/ContentBlocks/ContentElements/market-insights/templates/backend-preview.html

@@ -1,12 +1,28 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:layout name="Preview"/>
 <f:section name="Content">
+
 <f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
-<div class="vitec-preview">
-    <div class="vitec-preview__body">
-        <strong>Market Insights</strong> — <f:format.crop maxCharacters="100">{data.vitec_text1}</f:format.crop>
-        <f:if condition="{data.vitec_video_url}"><span> · 🎬 {data.vitec_video_person}</span></f:if>
+<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>
+
+<details class="vitec-collapse">
+    <summary>
+        <f:if condition="{data.video_cover.0}">
+            <f:image image="{data.video_cover.0}" class="vitec-collapse__thumb" width="72c" height="44c" alt=""/>
+        </f:if>
+        <span class="vitec-collapse__label">6 · Industry Insights</span>
+        <span class="vitec-collapse__hint"><f:format.crop maxCharacters="80">{data.text1}</f:format.crop></span>
+        <f:if condition="{data.video_url}"><span class="vitec-badge">🎬 {data.video_person}</span></f:if>
+    </summary>
+    <div class="vitec-collapse__body">
+        <p>{data.text1}</p>
+        <p>{data.text2}</p>
+        <p><strong>CTA:</strong> <f:if condition="{data.cta_label}"><f:then>{data.cta_label} → <f:if condition="{data.cta_target}"><f:then>{data.cta_target}</f:then><f:else>/success-stories</f:else></f:if></f:then><f:else>kein Button</f:else></f:if></p>
+        <f:if condition="{data.video_url}">
+            <p><strong>Video:</strong> {data.video_title} — {data.video_person}, {data.video_role}</p>
+        </f:if>
     </div>
-</div>
+</details>
+
 </f:section>
 </html>

packages/vitec/ContentBlocks/ContentElements/market-intro/templates/backend-preview.html

@@ -1,11 +1,29 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:layout name="Preview"/>
 <f:section name="Content">
+
 <f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
-<div class="vitec-preview">
-    <div class="vitec-preview__body">
-        <strong>Market Intro</strong> — <f:format.crop maxCharacters="120">{data.vitec_intro_text}</f:format.crop>
+<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>
+
+<details class="vitec-collapse">
+    <summary>
+        <f:if condition="{data.image.0}">
+            <f:image image="{data.image.0}" class="vitec-collapse__thumb" width="72c" height="44c" alt=""/>
+        </f:if>
+        <span class="vitec-collapse__label">2 · Market Intro</span>
+        <span class="vitec-collapse__hint"><f:format.crop maxCharacters="90">{data.intro_text}</f:format.crop></span>
+    </summary>
+    <div class="vitec-collapse__body">
+        <p>{data.intro_text}</p>
+        <p>
+            <strong>Learn more:</strong> <f:if condition="{data.learnmore_target}"><f:then>{data.learnmore_label} → {data.learnmore_target}</f:then><f:else>kein Button</f:else></f:if>
+            · <strong>Product Portfolio:</strong> <f:if condition="{data.show_portfolio}"><f:then>sichtbar</f:then><f:else>ausgeblendet</f:else></f:if>
+        </p>
+        <f:if condition="{data.image.0}">
+            <f:image image="{data.image.0}" width="280c" alt=""/>
+        </f:if>
     </div>
-</div>
+</details>
+
 </f:section>
 </html>