feat(ui): Startseite mutiger gestaltet

- Hero: deutlich groessere Headline, langsam atmendes Bild, Wabenraster,
  Honigtropfen als Scroll-Hinweis, Hauptaktion in Honig
- "Sechs Schritte" als Weg: eine Honiglinie fuellt sich beim Scrollen und
  laesst die Waben der Schritte nacheinander aufleuchten (waagerecht ab lg,
  senkrecht auf dem Handy; reduzierte Bewegung: sofort gefuellt)
- Philosophie mit Waben statt Nummern, Verantwortung als geteiltes Layout
  mit mitlaufender Ueberschrift
- Bilder mit versetztem Honigrahmen, Wabenraster auf dunklen Flaechen,
  grosse Anfuehrungszeichen bei den Kundenstimmen
- Knopf-Varianten "inverted"/"accent" fuer dunkle Flaechen ersetzen
  !-Overrides, die den Fuell-Effekt ausgehebelt haetten
- Fix: Ueberschrift der Kundenstimmen war Waldgruen auf Waldgruen

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

src/components/ui.tsx

@@ -18,7 +18,7 @@ export function Container({
   );
 }
 
-type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "inverted" | "accent";
 
 // Signatur-Hover: der Knopf fuellt sich von unten wie ein Glas — beim
 // Primaerknopf mit Honig, beim Sekundaerknopf mit Waldgruen. Umgesetzt als
@@ -31,6 +31,11 @@ const buttonStyles: Record<ButtonVariant, string> = {
   primary: `${fillBase} bg-forest bg-[linear-gradient(var(--color-honey-dark),var(--color-honey-dark))] text-cream border border-forest hover:border-honey-dark`,
   secondary: `${fillBase} bg-transparent bg-[linear-gradient(var(--color-forest),var(--color-forest))] text-forest border border-forest hover:text-cream focus-visible:text-cream`,
   ghost: "bg-transparent text-ink border border-ink/20 hover:border-ink hover:bg-ink/[0.03]",
+  // Fuer dunkle Flaechen (Hero, Waldgruen-Abschnitte, Menue): Creme-Rahmen,
+  // fuellt sich mit Creme, Text wechselt auf Waldgruen.
+  inverted: `${fillBase} bg-transparent bg-[linear-gradient(var(--color-cream),var(--color-cream))] text-cream border border-cream hover:text-forest focus-visible:text-forest`,
+  // Hauptaktion auf dunklen Flaechen, wo Waldgruen im Grund verschwinden wuerde.
+  accent: `${fillBase} bg-honey-dark bg-[linear-gradient(var(--color-cream),var(--color-cream))] text-cream border border-honey-dark hover:text-forest hover:border-cream focus-visible:text-forest`,
 };
 
 const buttonBase =
@@ -129,3 +134,33 @@ export function SectionHeading({
     </div>
   );
 }
+
+/**
+ * Bild mit versetztem Honigrahmen dahinter — gibt den Bildspalten der
+ * Startseite Tiefe, statt sie flach neben den Text zu legen. Der Rahmen
+ * weicht beim Hover etwas zurueck, das Bild bleibt ruhig.
+ */
+export function FramedMedia({
+  children,
+  side = "right",
+  className = "",
+}: {
+  children: ReactNode;
+  /** Richtung, in die der Rahmen versetzt ist. */
+  side?: "left" | "right";
+  className?: string;
+}) {
+  return (
+    <div className={`group/frame relative isolate ${className}`}>
+      <span
+        aria-hidden="true"
+        className={`absolute inset-0 -z-10 border border-honey/60 transition-transform duration-700 ease-[var(--ease-arrive)] ${
+          side === "right"
+            ? "translate-x-4 translate-y-4 group-hover/frame:translate-x-6 group-hover/frame:translate-y-6"
+            : "-translate-x-4 translate-y-4 group-hover/frame:-translate-x-6 group-hover/frame:translate-y-6"
+        }`}
+      />
+      {children}
+    </div>
+  );
+}