From 96be810cc9d94f0784ca44ba471e6110ff342d67 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Thu, 9 Jul 2026 04:19:50 +0200
Subject: [PATCH] Collapse long feature lists behind a per-card "+X weitere
 Leistungen" toggle

Cards show the first 5 bullet points; anything beyond that sits behind an
accent-colored toggle whose count itself signals package depth (pricier
packages carry longer lists). Expanding affects only the clicked card -
the row aligns items-start instead of stretching every neighbor to the
tallest card. The darkening gradient behind the list holds its opacity
almost to the bottom edge so the toggle and deep list entries stay
readable over the bright road glow, and the expanded state uses a denser
scrim for the same reason.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 hifi-src/src/i18n/de.js                 |   2 +
 hifi-src/src/i18n/en.js                 |   2 +
 hifi-src/src/pages/public/ModelPage.jsx | 318 ++++++++++++++----------
 3 files changed, 184 insertions(+), 138 deletions(-)

diff --git a/hifi-src/src/i18n/de.js b/hifi-src/src/i18n/de.js
index d40ed8a..83fe8ed 100644
--- a/hifi-src/src/i18n/de.js
+++ b/hifi-src/src/i18n/de.js
@@ -155,6 +155,8 @@ export default {
     productLoading: 'Produkt wird geladen…',
     requestContact: 'Kontakt anfragen',
     featuredBadge: 'Empfohlen',
+    moreBullets: (n) => (n === 1 ? '+ 1 weitere Leistung' : `+ ${n} weitere Leistungen`),
+    lessBullets: 'Weniger anzeigen',
   },
   leistungen: {
     metaTitle: 'Leistungen',
diff --git a/hifi-src/src/i18n/en.js b/hifi-src/src/i18n/en.js
index 1af9c9c..4a7e732 100644
--- a/hifi-src/src/i18n/en.js
+++ b/hifi-src/src/i18n/en.js
@@ -155,6 +155,8 @@ export default {
     productLoading: 'Loading product…',
     requestContact: 'Request contact',
     featuredBadge: 'Recommended',
+    moreBullets: (n) => (n === 1 ? '+ 1 more feature' : `+ ${n} more features`),
+    lessBullets: 'Show less',
   },
   leistungen: {
     metaTitle: 'Services',
diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx
index 09fbb13..78b2fa9 100644
--- a/hifi-src/src/pages/public/ModelPage.jsx
+++ b/hifi-src/src/pages/public/ModelPage.jsx
@@ -85,6 +85,172 @@ const PRICE_COLOR = '#f2f2f2';
 const LABEL_COLOR = '#8a8a8a';
 const BULLET_COLOR = '#c4c4c4';
 
+// Mehr sichtbare Stichpunkte wuerden das Straßenbild verdraengen - gerade bei den teuren
+// Paketen (die laut Kunde die laengsten Listen haben) soll die Kachel ruhig bleiben. Der
+// Rest steckt hinter einem "+X weitere Leistungen"-Toggle, dessen Zaehler selbst als
+// Wertigkeitssignal wirkt.
+const VISIBLE_BULLETS = 5;
+
+function PackageCard({ pkg, tier, tierT, isStripLayout, bullets, formatPrice, contactUrl, t }) {
+  const [expanded, setExpanded] = useState(false);
+  const hiddenCount = bullets.length - VISIBLE_BULLETS;
+  const shownBullets = expanded ? bullets : bullets.slice(0, VISIBLE_BULLETS);
+
+  // Fuer die Themes ohne eigenes Straßenbild: neutrales Glow-Motiv, per Maske
+  // in die Akzentfarbe eingefaerbt (zwei Ebenen: weicher Halo + scharfe Kontur).
+  const glowMask = tier.img
+    ? null
+    : {
+        backgroundColor: tier.accent,
+        WebkitMaskImage: `url(${roadGlowTexture})`,
+        maskImage: `url(${roadGlowTexture})`,
+        maskMode: 'luminance',
+        WebkitMaskSize: 'cover',
+        maskSize: 'cover',
+        WebkitMaskPosition: 'center',
+        maskPosition: 'center',
+        WebkitMaskRepeat: 'no-repeat',
+        maskRepeat: 'no-repeat',
+      };
+
+  return (
+    <div
+      style={{
+        borderColor: tier.border,
+        background: `linear-gradient(180deg, ${tier.bgTop} 0%, #0b0b0b 55%, #080808 100%)`,
+      }}
+      className={
+        isStripLayout
+          ? 'relative flex min-h-[640px] grow shrink basis-[190px] min-w-[190px] max-w-[240px] snap-start flex-col overflow-hidden rounded-[18px] border shadow-xl shadow-neutral-900/20 dark:shadow-black/40 sm:basis-[210px]'
+          : 'relative flex min-h-[640px] flex-col overflow-hidden rounded-[18px] border shadow-xl shadow-neutral-900/20 dark:shadow-black/40'
+      }
+    >
+      {/* Vollflaechiges Straßen-Glow-Bild der Preisstufe (Referenzdesign). */}
+      {tier.img ? (
+        <img
+          src={tier.img}
+          alt=""
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 h-full w-full object-cover"
+        />
+      ) : (
+        <>
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{ ...glowMask, opacity: 0.2 + tierT * 0.45, filter: 'blur(18px)' }}
+            aria-hidden="true"
+          />
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{ ...glowMask, opacity: 0.55 + tierT * 0.45 }}
+            aria-hidden="true"
+          />
+        </>
+      )}
+
+      {pkg.is_featured && (
+        <span className="absolute -top-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
+          {t('modelPage.featuredBadge')}
+        </span>
+      )}
+
+      {/* Kopf: Name + Trennlinie (exakt Referenz). */}
+      <div className="relative z-10 text-center" style={{ padding: '34px 20px 0' }}>
+        <div
+          style={{
+            fontFamily: "'Barlow Condensed', sans-serif",
+            fontSize: '30px',
+            letterSpacing: '3px',
+            fontWeight: 600,
+            color: tier.accent,
+            textTransform: 'uppercase',
+            lineHeight: 1.1,
+          }}
+        >
+          {pkg.name}
+        </div>
+        <div
+          style={{
+            width: '44px',
+            height: '2px',
+            margin: '14px auto 0',
+            background: `linear-gradient(90deg, rgba(255,255,255,0) 0%, ${tier.accent} 50%, rgba(255,255,255,0) 100%)`,
+          }}
+        />
+      </div>
+
+      {/* Stichpunkte direkt unter dem Kopf, leicht abgedunkelter Hintergrund fuer
+          Lesbarkeit ueber dem Straßenbild - aufgeklappt deckender, da die Liste dann
+          weiter ins helle Bildzentrum hineinreicht. */}
+      {bullets.length > 0 && (
+        <div
+          className="relative z-10"
+          style={{
+            padding: '18px 20px 14px',
+            background: expanded
+              ? 'linear-gradient(180deg, rgba(8,8,8,0.7) 0%, rgba(8,8,8,0.62) 94%, rgba(8,8,8,0) 100%)'
+              : 'linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.48) 92%, rgba(8,8,8,0) 100%)',
+          }}
+        >
+          <ul className="space-y-1.5 text-left">
+            {shownBullets.map((line, i) => (
+              <li key={i} className="flex items-start gap-2" style={{ fontSize: '13px', color: BULLET_COLOR }}>
+                <DynamicIcon name="check" className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: tier.accent }} />
+                <span className="leading-snug">{line}</span>
+              </li>
+            ))}
+          </ul>
+          {hiddenCount > 0 && (
+            <button
+              type="button"
+              onClick={() => setExpanded((e) => !e)}
+              className="mt-2.5 flex items-center gap-1 hover:opacity-80"
+              style={{ fontSize: '13px', color: tier.accent }}
+            >
+              {expanded ? t('modelPage.lessBullets') : t('modelPage.moreBullets')(hiddenCount)}
+              <DynamicIcon name={expanded ? 'chevron-up' : 'chevron-down'} className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Freiraum, damit das Straßenbild zur Geltung kommt. */}
+      <div className="relative z-10 flex-1" />
+
+      {/* Preis-Sektion mit dunklem Verlauf (Referenz): "ab ca." + Preis + CTA. */}
+      <div
+        className="relative z-10"
+        style={{
+          padding: '20px 20px 28px',
+          background: 'linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0.85) 45%, rgba(8,8,8,0.95) 100%)',
+        }}
+      >
+        <div className="text-center">
+          <div style={{ fontSize: '13px', color: LABEL_COLOR }}>{t('modelPage.totalPrice')}</div>
+          <div
+            style={{
+              marginTop: '4px',
+              fontFamily: "'Barlow Condensed', sans-serif",
+              fontSize: '30px',
+              fontWeight: 600,
+              letterSpacing: '1px',
+              color: PRICE_COLOR,
+            }}
+          >
+            {formatPrice(pkg.total_price)}
+          </div>
+          <Link
+            to={contactUrl(pkg)}
+            className="mt-4 inline-block rounded-md bg-brand-500 px-4 py-2 text-center text-sm font-semibold text-white shadow-lg shadow-brand-500/30 hover:bg-brand-400"
+          >
+            {t('modelPage.requestContact')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ModelPage() {
   const { brandSlug, modelSlug } = useParams();
   const [data, setData] = useState(null);
@@ -189,150 +355,26 @@ export default function ModelPage() {
             <div
               className={
                 isStripLayout
-                  ? 'flex items-stretch gap-[18px] overflow-x-auto pb-3 snap-x snap-mandatory [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.3)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.25)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/30 dark:[&::-webkit-scrollbar-thumb]:bg-white/25'
-                  : 'grid gap-[18px] sm:grid-cols-2 xl:grid-cols-3'
+                  ? // items-start statt items-stretch: klappt jemand eine Kachel auf, waechst
+                    // nur DIESE in die Hoehe - die Nachbarn behalten ihre Referenzhoehe.
+                    'flex items-start gap-[18px] overflow-x-auto pb-3 snap-x snap-mandatory [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.3)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.25)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/30 dark:[&::-webkit-scrollbar-thumb]:bg-white/25'
+                  : 'grid items-start gap-[18px] sm:grid-cols-2 xl:grid-cols-3'
               }
             >
               {packages.map((pkg) => {
                 const { tier, tierT } = tierOf(pkg);
-                const bullets = bulletsOf(pkg);
-                // Fuer die Themes ohne eigenes Straßenbild: neutrales Glow-Motiv, per Maske
-                // in die Akzentfarbe eingefaerbt (zwei Ebenen: weicher Halo + scharfe Kontur).
-                const glowMask = tier.img
-                  ? null
-                  : {
-                      backgroundColor: tier.accent,
-                      WebkitMaskImage: `url(${roadGlowTexture})`,
-                      maskImage: `url(${roadGlowTexture})`,
-                      maskMode: 'luminance',
-                      WebkitMaskSize: 'cover',
-                      maskSize: 'cover',
-                      WebkitMaskPosition: 'center',
-                      maskPosition: 'center',
-                      WebkitMaskRepeat: 'no-repeat',
-                      maskRepeat: 'no-repeat',
-                    };
-
                 return (
-                  <div
+                  <PackageCard
                     key={pkg.id}
-                    style={{
-                      borderColor: tier.border,
-                      background: `linear-gradient(180deg, ${tier.bgTop} 0%, #0b0b0b 55%, #080808 100%)`,
-                    }}
-                    className={
-                      isStripLayout
-                        ? 'relative flex min-h-[640px] grow shrink basis-[190px] min-w-[190px] max-w-[240px] snap-start flex-col overflow-hidden rounded-[18px] border shadow-xl shadow-neutral-900/20 dark:shadow-black/40 sm:basis-[210px]'
-                        : 'relative flex min-h-[640px] flex-col overflow-hidden rounded-[18px] border shadow-xl shadow-neutral-900/20 dark:shadow-black/40'
-                    }
-                  >
-                    {/* Vollflaechiges Straßen-Glow-Bild der Preisstufe (Referenzdesign). */}
-                    {tier.img ? (
-                      <img
-                        src={tier.img}
-                        alt=""
-                        aria-hidden="true"
-                        className="pointer-events-none absolute inset-0 h-full w-full object-cover"
-                      />
-                    ) : (
-                      <>
-                        <div
-                          className="pointer-events-none absolute inset-0"
-                          style={{ ...glowMask, opacity: 0.2 + tierT * 0.45, filter: 'blur(18px)' }}
-                          aria-hidden="true"
-                        />
-                        <div
-                          className="pointer-events-none absolute inset-0"
-                          style={{ ...glowMask, opacity: 0.55 + tierT * 0.45 }}
-                          aria-hidden="true"
-                        />
-                      </>
-                    )}
-
-                    {pkg.is_featured && (
-                      <span className="absolute -top-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
-                        {t('modelPage.featuredBadge')}
-                      </span>
-                    )}
-
-                    {/* Kopf: Name + Trennlinie (exakt Referenz). */}
-                    <div className="relative z-10 text-center" style={{ padding: '34px 20px 0' }}>
-                      <div
-                        style={{
-                          fontFamily: "'Barlow Condensed', sans-serif",
-                          fontSize: '30px',
-                          letterSpacing: '3px',
-                          fontWeight: 600,
-                          color: tier.accent,
-                          textTransform: 'uppercase',
-                          lineHeight: 1.1,
-                        }}
-                      >
-                        {pkg.name}
-                      </div>
-                      <div
-                        style={{
-                          width: '44px',
-                          height: '2px',
-                          margin: '14px auto 0',
-                          background: `linear-gradient(90deg, rgba(255,255,255,0) 0%, ${tier.accent} 50%, rgba(255,255,255,0) 100%)`,
-                        }}
-                      />
-                    </div>
-
-                    {/* Stichpunkte direkt unter dem Kopf (von oben nach unten), leicht
-                        abgedunkelter Hintergrund fuer Lesbarkeit ueber dem Straßenbild. */}
-                    {bullets.length > 0 && (
-                      <ul
-                        className="relative z-10 space-y-2 text-left"
-                        style={{
-                          padding: '18px 20px 14px',
-                          background: 'linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.35) 70%, rgba(8,8,8,0) 100%)',
-                        }}
-                      >
-                        {bullets.map((line, i) => (
-                          <li key={i} className="flex items-start gap-2" style={{ fontSize: '13px', color: BULLET_COLOR }}>
-                            <DynamicIcon name="check" className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: tier.accent }} />
-                            <span className="leading-snug">{line}</span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-
-                    {/* Freiraum, damit das Straßenbild zur Geltung kommt. */}
-                    <div className="relative z-10 flex-1" />
-
-                    {/* Preis-Sektion mit dunklem Verlauf (Referenz): "ab ca." + Preis + CTA. */}
-                    <div
-                      className="relative z-10"
-                      style={{
-                        padding: '20px 20px 28px',
-                        background: 'linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0.85) 45%, rgba(8,8,8,0.95) 100%)',
-                      }}
-                    >
-                      <div className="text-center">
-                        <div style={{ fontSize: '13px', color: LABEL_COLOR }}>{t('modelPage.totalPrice')}</div>
-                        <div
-                          style={{
-                            marginTop: '4px',
-                            fontFamily: "'Barlow Condensed', sans-serif",
-                            fontSize: '30px',
-                            fontWeight: 600,
-                            letterSpacing: '1px',
-                            color: PRICE_COLOR,
-                          }}
-                        >
-                          {formatPrice(pkg.total_price)}
-                        </div>
-                        <Link
-                          to={contactUrl(pkg)}
-                          className="mt-4 inline-block rounded-md bg-brand-500 px-4 py-2 text-center text-sm font-semibold text-white shadow-lg shadow-brand-500/30 hover:bg-brand-400"
-                        >
-                          {t('modelPage.requestContact')}
-                        </Link>
-                      </div>
-                    </div>
-                  </div>
+                    pkg={pkg}
+                    tier={tier}
+                    tierT={tierT}
+                    isStripLayout={isStripLayout}
+                    bullets={bulletsOf(pkg)}
+                    formatPrice={formatPrice}
+                    contactUrl={contactUrl}
+                    t={t}
+                  />
                 );
               })}
             </div>