From bea7c1eb7ae918d987a36c594a4cff117d4ad5fd Mon Sep 17 00:00:00 2001
From: Claude Code <noreply@anthropic.com>
Date: Sun, 26 Apr 2026 14:15:38 +0200
Subject: [PATCH] Vorschau: Karussell-Excerpt vereinheitlicht +
 Hero-Slide-Uebergang glaetten

- demo-excerpt mit fester Hoehe (760px Desktop, 640px Mobile) und weicher
  Fade-out-Maske; vereinheitlicht die Kartenhoehe ueber alle Lagen ohne
  harte Abschneidung des Inhalts.
- heroGoTo() haelt die .ended-Klasse waehrend des Fade-outs aktiv und
  raeumt sie erst nach 400ms auf. Verhindert das Aufblitzen des
  pausierten Video-Frames beim Wechsel von der Endcard zur naechsten Slide.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 vorschau/css/style.css | 17 +++++++++++++++++
 vorschau/js/app.js     |  6 ++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/vorschau/css/style.css b/vorschau/css/style.css
index c40342f..1ca9ae9 100644
--- a/vorschau/css/style.css
+++ b/vorschau/css/style.css
@@ -456,3 +456,20 @@ a.dev-source-pill:hover {
 #demos + .divider    { background: linear-gradient(to bottom, var(--tone-3), var(--tone-4)); height: 60px; }
 #contact + .divider  { background: var(--tone-4); }                                    /* diagonal-dark Contact->Trust, Top-Farbe an Contact angleichen */
 #trust { margin-top: -1px; }                                                           /* schließt Subpixel-Lücke zum Diagonal-Divider darüber */
+
+/* === EXCERPT FADE-MASK PATCH 2026-04-26 START === */
+/* Vereinheitlicht die Karussell-Kartenhoehe ueber feste Excerpt-Hoehe */
+/* + weicher Fade-out bei langen Lagen statt harter Abschneidung */
+.carousel-card .demo-excerpt {
+    position: relative;
+    height: 760px;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
+}
+@media(max-width:768px) {
+    .carousel-card .demo-excerpt { height: 640px; }
+}
+/* === EXCERPT FADE-MASK PATCH 2026-04-26 END === */
+
+
diff --git a/vorschau/js/app.js b/vorschau/js/app.js
index 1addad3..f45b528 100644
--- a/vorschau/js/app.js
+++ b/vorschau/js/app.js
@@ -103,14 +103,16 @@
 
         var oldIndex = heroCurrentSlide;
         heroSlides[oldIndex].classList.add('exiting');
-        heroSlides[oldIndex].classList.remove('active', 'ended');
+        heroSlides[oldIndex].classList.remove('active');
+        // .ended bleibt waehrend des Fade-outs erhalten - sonst blitzt das pausierte
+        // Video-Frame durch, waehrend die Endcard ausfadet und der Container fadet aus.
         if (heroEl) heroEl.classList.remove('endcard');
         if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
 
         heroPauseSlideVideo(heroSlides[oldIndex]);
 
         setTimeout(function () {
-            heroSlides[oldIndex].classList.remove('exiting');
+            heroSlides[oldIndex].classList.remove('exiting', 'ended');
             heroCurrentSlide = index;
             heroSlides[heroCurrentSlide].classList.add('active');
             if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');