From 9bfd0affd06813be5c4ada739bcae6c2a94a807a Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Fri, 24 Jul 2026 17:47:06 +0000
Subject: [PATCH] Tighten Impressum text blocks and drop Reveal's y-translate
 jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AnbieterAngaben.tsx's address/VAT/register blocks each got the same
gap-4 as the section headings, so related lines (e.g. name/street/zip+
city) read as visually disconnected paragraphs instead of one block —
wrapped each in its own gap-1 container, keeping gap-4 only between
sections.

Reveal.tsx's shared fadeUp variant animated opacity and a 28px y-
translate together, which read as the whole section hopping into place
on top of the fade. Renamed to fadeIn, opacity only — applies site-wide
via Reveal/RevealGroup/RevealItem.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/Reveal.tsx                    | 19 ++++---
 app/impressum/components/AnbieterAngaben.tsx | 55 ++++++++++++--------
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/app/components/Reveal.tsx b/app/components/Reveal.tsx
index 630b451..500e9fc 100644
--- a/app/components/Reveal.tsx
+++ b/app/components/Reveal.tsx
@@ -3,9 +3,14 @@
 import { motion, type Variants } from "motion/react";
 import type { CSSProperties, ReactNode } from "react";
 
-const fadeUp: Variants = {
-  hidden: { opacity: 0, y: 28 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
+// Plain fade, no y-translate — fixed 2026-07-24. Used to animate opacity
+// 0→1 *and* y 28→0 together ("fade up"), which read as the whole section
+// visibly hopping/jumping into place on top of the fade — one motion cue
+// too many. The fade alone is already a clear enough "this just appeared"
+// signal without the extra jump.
+const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
 };
 
 type RevealProps = {
@@ -16,7 +21,7 @@ type RevealProps = {
   delay?: number;
 };
 
-/** Fades a section up into place once, the first time it scrolls into view. */
+/** Fades a section into view once, the first time it scrolls into view. */
 export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
   return (
     <motion.div
@@ -25,7 +30,7 @@ export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
       initial="hidden"
       whileInView="show"
       viewport={{ once: true, margin: "-80px" }}
-      variants={fadeUp}
+      variants={fadeIn}
       transition={{ delay }}
     >
       {children}
@@ -53,10 +58,10 @@ export function RevealGroup({ children, className }: { children: ReactNode; clas
   );
 }
 
-/** Child item for use inside a RevealGroup — same fade-up motion, driven by the parent's stagger. */
+/** Child item for use inside a RevealGroup — same fade motion, driven by the parent's stagger. */
 export function RevealItem({ children, className }: { children: ReactNode; className?: string }) {
   return (
-    <motion.div className={className} variants={fadeUp}>
+    <motion.div className={className} variants={fadeIn}>
       {children}
     </motion.div>
   );
diff --git a/app/impressum/components/AnbieterAngaben.tsx b/app/impressum/components/AnbieterAngaben.tsx
index 5d33677..4647845 100644
--- a/app/impressum/components/AnbieterAngaben.tsx
+++ b/app/impressum/components/AnbieterAngaben.tsx
@@ -63,27 +63,38 @@ export function AnbieterAngaben({ seller }: { seller: CompanySettings }) {
   return (
     <div className="flex flex-col gap-4 w-full">
       <Heading>Angaben zum Anbieter</Heading>
-      <P>{seller.sellerName}</P>
-      <P>{seller.sellerStreet}</P>
-      <P>
-        {seller.sellerZip} {seller.sellerCity}
-      </P>
-      <P>{seller.sellerCountry}</P>
-      <P>E-Mail: {seller.sellerEmail}</P>
+      {/* gap-1, not the outer container's own gap-4 — these 5 lines are one
+          continuous address block, not 5 separate paragraphs; the large
+          inter-section gap only belongs between a heading's own block and
+          the next, not between lines that visually belong together
+          (fixed 2026-07-24, same fix applied to every block below). */}
+      <div className="flex flex-col gap-1">
+        <P>{seller.sellerName}</P>
+        <P>{seller.sellerStreet}</P>
+        <P>
+          {seller.sellerZip} {seller.sellerCity}
+        </P>
+        <P>{seller.sellerCountry}</P>
+        <P>E-Mail: {seller.sellerEmail}</P>
+      </div>
 
       <Heading>Umsatzsteuer</Heading>
-      <P>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</P>
-      <P>{seller.vatId}</P>
+      <div className="flex flex-col gap-1">
+        <P>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</P>
+        <P>{seller.vatId}</P>
+      </div>
 
       {seller.registerCourt && seller.registerNumber && (
         <>
           <Heading>Handelsregister</Heading>
-          <P>{seller.registerCourt}</P>
-          <P>{seller.registerNumber}</P>
-          {/* Optional/voluntary, not a Pflichtangabe — see
-              CompanySettings.ts's own comment on shareCapital. Only shows
-              if an admin deliberately filled it in. */}
-          {seller.shareCapital ? <P>Stammkapital: {seller.shareCapital.toLocaleString("de-DE")} €</P> : null}
+          <div className="flex flex-col gap-1">
+            <P>{seller.registerCourt}</P>
+            <P>{seller.registerNumber}</P>
+            {/* Optional/voluntary, not a Pflichtangabe — see
+                CompanySettings.ts's own comment on shareCapital. Only shows
+                if an admin deliberately filled it in. */}
+            {seller.shareCapital ? <P>Stammkapital: {seller.shareCapital.toLocaleString("de-DE")} €</P> : null}
+          </div>
         </>
       )}
 
@@ -100,12 +111,14 @@ export function AnbieterAngaben({ seller }: { seller: CompanySettings }) {
           proprietorship/e.K., already a natural person's own name). No
           OHG/KG general-partner fallback here — see this file's top
           comment on why that field doesn't exist yet. */}
-      <P>{seller.managingDirector || seller.sellerName}</P>
-      <P>{seller.sellerStreet}</P>
-      <P>
-        {seller.sellerZip} {seller.sellerCity}
-      </P>
-      <P>{seller.sellerCountry}</P>
+      <div className="flex flex-col gap-1">
+        <P>{seller.managingDirector || seller.sellerName}</P>
+        <P>{seller.sellerStreet}</P>
+        <P>
+          {seller.sellerZip} {seller.sellerCity}
+        </P>
+        <P>{seller.sellerCountry}</P>
+      </div>
     </div>
   );
 }