Redesign im Stil von crispmtl.com: minimalistisch, Foto-Hero, weniger CTAs

- Hell mit feinen Rasterlinien, breite Versal-Headlines (Archivo Expanded),
  kleine Serifen-Labels, eckige Buttons mit Füll-/Text-Roll-Hover
- Hero: Foto aus dem Salon statt animiertem Hintergrund, eine Headline,
  ein Button; "Termin buchen" oben rechts nur noch als Textlink
- Chrom-Wortmarke, Seidenhintergrund, Laufband, Kreis-Badge, großer
  Schluss-CTA und mobile Buchungsleiste entfernt; deutlich weniger Text
- Neue interaktive Elemente: Menü-Overlay mit Bildwechsel pro Link,
  Team als Namensliste mit Porträt-Wisch-Übergang, Preise als Akkordeon
  mit Team-Thumbnails, Footer mit Fotoraster zwischen den Wörtern
- Bilder aus den echten Salon-Fotos (Logo-Wand), neues Favicon/OG-Bild

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF

src/components/Button.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import { BOOKING_URL } from '../data/salon'
+import { cn } from '../lib/cn'
+
+type Props = {
+  children?: ReactNode
+  href?: string
+  tone?: 'dark' | 'light'
+  className?: string
+}
+
+/** Eckiger Button: beim Hover läuft eine Fläche von unten hoch und der Text rollt nach oben. */
+export function Button({ children = 'Termin buchen', href = BOOKING_URL, tone = 'dark', className }: Props) {
+  const external = href.startsWith('http')
+  return (
+    <a
+      href={href}
+      {...(external ? { target: '_blank', rel: 'noopener' } : {})}
+      className={cn(
+        'group relative inline-flex overflow-hidden border px-4 pt-[13px] pb-[10px] text-[14px] leading-none font-extrabold uppercase [font-stretch:125%] md:text-[15px]',
+        tone === 'dark' ? 'border-ink bg-ink text-paper' : 'border-paper bg-paper text-ink',
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'absolute inset-0 translate-y-full transition-transform duration-500 ease-out-expo group-hover:translate-y-0',
+          tone === 'dark' ? 'bg-graphite' : 'bg-[#dcdad5]',
+        )}
+      />
+      <span className="relative block overflow-hidden">
+        <span className="block transition-transform duration-500 ease-out-expo group-hover:-translate-y-full">
+          {children}
+        </span>
+        <span
+          aria-hidden="true"
+          className="absolute inset-0 block translate-y-full transition-transform duration-500 ease-out-expo group-hover:translate-y-0"
+        >
+          {children}
+        </span>
+      </span>
+    </a>
+  )
+}