feat: Onepage nach Filmcamp-Gliederung umgebaut

- Figtree als einzige Schrift, Logo mittig in fester Kopfzeile
- Headerbild ueber volle Breite und Hoehe, ohne Preis, mit Terminleiste
- "Was dich erwartet" stellt die Villa mit animierter Bilderfolge vor,
  darunter Tagesablauf als Karussell (Programm folgt als PDF)
- Preis: regulaerer Preis durchgestrichen, kein Verkaufsstartdatum,
  Ueberschrift "Jetzt Platz sichern mit Early Bird"
- Team als "Mit dabei", danach drei Reels im Hochformat
- Logo, Headerbild, Portraets und Reels ueber feste Dateinamen im
  Medienverzeichnis (docs/MEDIEN.md), ohne Neustart austauschbar
- Widerrufsbelehrung im Admin pflegbar, Seite /widerruf, Live-Verkauf
  ohne Freigabe gesperrt
- Anreise: Abholung am Bahnhof Firenze Santa Maria Novella
- Booking-Link entfernt, Gedankenstriche aus Kundentexten entfernt

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

src/app/globals.css

@@ -16,8 +16,8 @@
   --color-rosso-deep: #6f2c20;
   --color-sand: #c9b79c;
 
-  --font-display: var(--font-bodoni), "Bodoni 72", "Didot", Georgia, serif;
-  --font-sans: var(--font-hanken), "Helvetica Neue", Arial, sans-serif;
+  --font-display: var(--font-figtree), "Helvetica Neue", Arial, sans-serif;
+  --font-sans: var(--font-figtree), "Helvetica Neue", Arial, sans-serif;
 
   --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
 }
@@ -101,17 +101,17 @@
 
   .display {
     font-family: var(--font-display);
-    font-weight: 400;
-    letter-spacing: -0.01em;
-    line-height: 1.02;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.08;
   }
 
   .section-title {
     font-family: var(--font-display);
-    font-weight: 400;
-    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
-    line-height: 1.02;
-    letter-spacing: -0.015em;
+    font-weight: 700;
+    font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
+    line-height: 1.05;
+    letter-spacing: -0.025em;
   }
 
   .prose-body {
@@ -229,64 +229,57 @@
   background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/><feColorMatrix values=%270 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 0.22 0%27/></filter><rect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/></svg>");
 }
 
-/* Masthead: der eine laute Moment der Seite. */
-.masthead {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: clamp(4.25rem, 21vw, 19rem);
-  line-height: 0.8;
-  letter-spacing: -0.035em;
-  font-variation-settings: "opsz" 96;
-}
-
 /*
- * Einzige orchestrierte Eroeffnung: Masthead steigt auf, das Leitbild setzt
- * sich, die Cover-Lines folgen. Reines CSS, kein JavaScript noetig; bei
- * reduzierter Bewegung greift die Regel in @layer base.
+ * Eroeffnung: Headerbild zoomt langsam heran, Titel, Text und Buttons
+ * blenden nacheinander ein. Reines CSS; bei reduzierter Bewegung greift
+ * die Regel in @layer base, das Headervideo wird dann ausgeblendet.
  */
-@keyframes hero-rise {
+@keyframes hero-zoom {
   from {
-    opacity: 0;
-    transform: translateY(0.18em);
-    clip-path: inset(0 0 100% 0);
+    transform: scale(1.12);
   }
   to {
-    opacity: 1;
-    transform: none;
-    clip-path: inset(0 0 0 0);
-  }
-}
-@keyframes hero-settle {
-  from {
-    opacity: 0;
-    transform: scale(1.035);
-  }
-  to {
-    opacity: 1;
-    transform: none;
+    transform: scale(1);
   }
 }
 @keyframes hero-fade {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(14px);
   }
   to {
     opacity: 1;
     transform: none;
   }
 }
-.hero-rise {
-  animation: hero-rise 1.1s var(--ease-editorial) both;
+@keyframes hero-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(6px);
+  }
 }
-.hero-image {
-  overflow: hidden;
-}
-.hero-image > * {
-  animation: hero-settle 1.5s var(--ease-editorial) 0.15s both;
+.hero-zoom {
+  animation: hero-zoom 9s cubic-bezier(0.2, 0.6, 0.3, 1) both;
 }
 .hero-fade {
-  animation: hero-fade 0.9s var(--ease-editorial) 0.5s both;
+  animation: hero-fade 0.9s var(--ease-editorial) 0.2s both;
+}
+.hero-fade-late {
+  animation-delay: 0.4s;
+}
+.hero-fade-later {
+  animation-delay: 0.6s;
+}
+.hero-bounce {
+  animation: hero-bounce 2.4s ease-in-out 1.5s infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-video {
+    display: none;
+  }
 }
 
 /* Mobile Buchungsleiste: Inhalt am Seitenende nie verdecken. */