fix: CI-Zeitgrenze fuer Urkundentests, Cookie-Banner mobil, Hydration im Warenkorb-Effekt

Die Layout-Matrix der Urkunde lief auf dem CI-Runner in die 5-Sekunden-
Grenze; Tests bekommen 30 s. Die Cookie-Knoepfe stapeln sich unter 430 px,
statt ineinanderzulaufen. Der Tropfen im Warenkorb-Effekt wird immer
gerendert und nur bei reduzierter Bewegung nicht animiert.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/components/cart-landing-effect.tsx

@@ -85,7 +85,10 @@ export function CartLandingEffect() {
         </svg>
       </motion.span>
 
-      {reduceMotion ? null : (
+      {/* Immer gerendert, nur bei reduzierter Bewegung nie animiert (bleibt
+          bei opacity 0). Ein bedingtes Rendern wich zwischen Server
+          (useReducedMotion = null) und Browser ab und loeste einen
+          Hydration-Fehler aus. */}
       <motion.span
         initial={{ opacity: 0 }}
         animate={dripControls}
@@ -110,7 +113,6 @@ export function CartLandingEffect() {
           <ellipse cx="2" cy="5.8" rx="0.7" ry="1" fill="#fff" opacity="0.6" />
         </svg>
       </motion.span>
-      )}
     </span>
   );
 }

src/components/cookie-consent.tsx

@@ -54,7 +54,11 @@ export function CookieConsentBanner() {
                 verlangen, dass Ablehnen nicht schwerer faellt als Zustimmen).
                 Vorher war "Alle akzeptieren" Waldgruen auf Waldgruen und damit
                 kaum als Knopf erkennbar. */}
-            <div className="grid grid-cols-2 gap-3">
+            {/* Auf schmalen Telefonen untereinander: nebeneinander und ohne
+                Umbruch liefen "Nur notwendige" und "Alle akzeptieren" bei 390 px
+                ineinander. Gestapelt bleiben beide gleich breit und gleich
+                gewichtet. */}
+            <div className="grid grid-cols-1 gap-3 min-[430px]:grid-cols-2">
               <Button variant="inverted" className="whitespace-nowrap px-4" onClick={() => choose("essential")}>
                 {t.cookieConsent.essentialOnly}
               </Button>

src/lib/certificate/layout.test.ts

@@ -142,7 +142,10 @@ function assertSound(layout: CertificateLayout, personalization: Personalization
 
 describe.each(listTemplateVersions())("Vorlage %s", (version) => {
   describe.each(Object.entries(DATASETS))("Datensatz %s", (_name, data) => {
-    test.each(["de", "en"] as const)("Geschenk und eigene Patenschaft (%s)", (locale) => {
+    // Grosszuegige Zeitgrenze: jeder Fall setzt mehrere Seiten mit echten
+    // Schriftmetriken. Auf den CI-Runnern (geteilte CPU) reichten die
+    // voreingestellten 5 Sekunden nicht immer, lokal braucht es Bruchteile.
+    test.each(["de", "en"] as const)("Geschenk und eigene Patenschaft (%s)", { timeout: 60_000 }, (locale) => {
       for (const occasion of ["GEBURTSTAG", "SELBST"] as const) {
         const { layout, personalization } = build(version, data, occasion, locale, TERMS.einmalig);
         assertSound(layout, personalization);

vitest.config.ts

@@ -17,5 +17,10 @@ export default defineConfig({
     include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
     exclude: ["e2e/**"],
     setupFiles: ["./vitest.setup.ts"],
+    // Urkunden-, Medaillen- und PDF-Tests setzen echte Schriften und rendern
+    // Bilder. Auf den CI-Runnern (geteilte CPU) dauert das ein Vielfaches
+    // der lokalen Zeit; die voreingestellten 5 Sekunden liessen dort einzelne
+    // Faelle zufaellig scheitern.
+    testTimeout: 30_000,
   },
 });