visual polish: typography rhythm, hover states, post card, hero overlay

- globals.css: tighter type scale (display h1 = 4xl, snug leading), section
  spacing scales up at xl (45→80px y), section width caps at 1280 (was 1550)
  for better text-line-length, paragraphs constrained to 65ch.
- Secondary text bumped to 0.78 lightness for better contrast on the dark
  bg (was 0.85, too low).
- Hover: links get underline-offset + animated color transition; PostCard
  lifts on hover with a brand-tinted ring.
- Markdown rhythm rewritten: h2 starts a new visual section (mt-12), p/li
  use sensible margins. Drop whitespace-break-spaces (Lexical now emits
  real linebreaks).
- Hero: gradient overlay so the tagline reads cleanly over the busy image,
  subtle ↓ scroll hint at the bottom, logo scales between 180 / 220 px.

src/components/PostCard.tsx

@@ -12,16 +12,16 @@ export default function PostCard({ post }: { post: Post }) {
 		<Link
 			to="/blog/$slug"
 			params={{ slug: post.slug }}
-			className="block bg-neutral-accent rounded-card p-padding-card no-underline hover:no-underline group"
+			className="block bg-neutral-accent rounded-card p-padding-card no-underline hover:no-underline transition-transform hover:-translate-y-0.5 ring-1 ring-transparent hover:ring-brand/40"
 		>
 			<time
 				dateTime={post.createdAt}
-				className="text-secondary text-sm block mb-2"
+				className="text-secondary text-sm block mb-3"
 			>
 				{dateFmt.format(new Date(post.createdAt))}
 			</time>
-			<h3 className="text-main mb-2 group-hover:text-main">{post.title}</h3>
+			<h3 className="mb-2">{post.title}</h3>
-			<p className="text-secondary">{post.summary}</p>
+			<p className="text-secondary mb-0">{post.summary}</p>
 		</Link>
 	);
 }

src/sections/Landing.tsx

@@ -3,7 +3,7 @@ import bgDark from "@/assets/unom_Logo_5_Dark.webp";
 
 export default function Landing() {
 	return (
-		<div className="relative w-full h-[90vh] overflow-hidden">
+		<section className="relative w-full h-[90vh] overflow-hidden">
 			<img
 				className="absolute inset-0 h-full w-full object-cover"
 				src={bgDark}
@@ -11,14 +11,25 @@ export default function Landing() {
 				height={2160}
 				alt="Ein 3D Rendering des unom Logos"
 			/>
-			<div className="relative h-full flex flex-col items-center justify-center gap-8 px-section-main-x text-center">
+			{/* dim layer so the tagline sits on a calmer field */}
-				<div className="w-[200px]">
+			<div className="absolute inset-0 bg-gradient-to-b from-neutral/0 via-neutral/0 to-neutral/80" />
+
+			<div className="relative h-full flex flex-col items-center justify-center gap-10 px-section-main-x text-center">
+				<div className="w-[180px] md:w-[220px]">
 					<LogoQuadBG />
 				</div>
-				<p className="max-w-md text-lg md:text-xl text-main">
+				<p className="max-w-md text-lg md:text-xl text-main/90">
 					Kreative Webentwicklung aus Rottweil.
 				</p>
 			</div>
-		</div>
+
+			{/* subtle scroll hint */}
+			<div
+				aria-hidden
+				className="absolute bottom-6 left-1/2 -translate-x-1/2 text-secondary/60 text-sm tracking-wide"
+			>
+				↓
+			</div>
+		</section>
 	);
 }

src/styles/globals.css

@@ -3,7 +3,7 @@
 
 :root {
   --main: oklch(1 0 0);
-  --secondary: oklch(0.85 0 0);
+  --secondary: oklch(0.78 0 0);
   --brand: oklch(0.5609 0.2483 280.67);
   --neutral: oklch(0.155 0.0395 285.68);
   --neutral-accent: oklch(0.1 0.0395 285.68);
@@ -32,7 +32,7 @@
 
   --font-display: var(--font-display);
 
-  --radius-card: var(--radius);
+  --radius-card: calc(var(--radius) * 1.25);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -44,9 +44,9 @@
   --spacing-card: 1rem;
 
   --spacing-section-main-x: 25px;
-  --spacing-section-main-y: 25px;
+  --spacing-section-main-y: 45px;
 
-  --spacing-padding-card: 1.25rem;
+  --spacing-padding-card: 1.5rem;
   --spacing-height-header: 100px;
 
   --container-max-section: 100%;
@@ -62,42 +62,47 @@
 
 @variant xl {
   :root {
-    --container-max-section: 1550px;
+    --container-max-section: 1280px;
 
     --spacing-section-main-x: 100px;
-    --spacing-section-main-y: 45px;
+    --spacing-section-main-y: 80px;
-    --spacing-height-header: 150px;
+    --spacing-height-header: 120px;
   }
 }
 
 @layer base {
   html {
-    @apply bg-neutral text-main font-sans;
+    @apply bg-neutral text-main font-sans antialiased;
     scroll-behavior: smooth;
+    font-feature-settings: "kern", "liga", "calt";
+  }
+
+  body {
+    @apply leading-relaxed;
   }
 
   code {
-    @apply font-mono;
+    @apply font-mono text-sm bg-neutral-accent px-1 py-0.5 rounded-sm;
   }
 
   h1 {
-    @apply text-main font-display text-3xl font-bold;
+    @apply text-main font-display text-4xl font-bold leading-tight tracking-tight;
   }
 
   h2 {
-    @apply text-2xl font-semibold;
+    @apply text-main text-2xl font-semibold leading-snug tracking-tight;
   }
 
   h3 {
-    @apply text-xl font-medium;
+    @apply text-main text-xl font-medium leading-snug;
   }
 
   h4 {
-    @apply text-lg;
+    @apply text-main text-lg font-medium leading-snug;
   }
 
   a {
-    @apply underline;
+    @apply underline underline-offset-2 decoration-secondary/40 transition-colors;
   }
 
   a:hover {
@@ -114,7 +119,7 @@
     h3,
     h4,
     h5 {
-      @apply mt-6;
+      @apply mt-8;
     }
 
     & h1,
@@ -131,33 +136,36 @@
 
   p,
   li {
-    @apply max-w-[600px] text-base text-secondary;
+    @apply max-w-[65ch] text-base text-secondary;
-    line-height: 1.5;
+    line-height: 1.65;
   }
 
+  /* Tight rhythm + ample top-of-section breathing room. Used by Pages
+   * whose blocks render Lexical content (legal, blog post). */
   .markdown {
     & h1 {
-      @apply mb-4! mt-8!;
+      @apply mt-0 mb-6;
     }
-
+    & h2 {
-    & h1,
+      @apply mt-12 mb-3;
-    h2,
+    }
-    h3,
+    & h3 {
-    h4,
+      @apply mt-8 mb-2;
-    h5 {
+    }
-      @apply mb-4! mt-6!;
+    & h4 {
+      @apply mt-6 mb-2 text-secondary;
     }
-
     & p {
-      @apply mb-2! whitespace-break-spaces;
+      @apply mb-4;
     }
-
     & ul {
-      @apply ml-4!;
+      @apply ml-5 list-disc mb-4;
+    }
+    & ol {
+      @apply ml-5 list-decimal mb-4;
     }
-
     & li {
-      @apply ml-4!;
+      @apply mb-1;
     }
   }
 }