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

@@ -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 === */
+
+

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');