fix: Logo deutlich groesser, Video im eigenen Seitenverhaeltnis

- Logo ueber dem Headerbild bis 112 px hoch, nach dem Scrollen 64 px,
  im Fussbereich 80 px; Kopfzeile waechst mit
- Videos aus dem Medienverzeichnis direkt mit Steuerleiste, quer oder
  hoch, erstes Bild als Vorschau; ein einzelnes Video breit und mittig
- Abschnitt heisst "Stimmen": Models erzaehlen, wie sie ARTISTA erleben

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

src/components/VideoSlot.tsx

@@ -1,47 +1,43 @@
-"use client";
-
-import { useState } from "react";
 import type { Media } from "@/content/site";
 import { MediaFrame } from "./MediaFrame";
 
 type Slot = { name: string | null; caption: string | null; poster: Media | null; src: string | null };
 
 /**
- * Ein Reel im Hochformat (9:16) aus dem eigenen Medienverzeichnis. Das
- * Video laedt erst nach Klick (preload="none") und startet nie von selbst
- * mit Ton. Kein externer Anbieter, keine Datenuebertragung an Dritte.
+ * Ein Video aus dem eigenen Medienverzeichnis, im eigenen Seitenverhaeltnis
+ * (quer oder hoch). Es startet nie von selbst; geladen werden vorab nur die
+ * Metadaten und das erste Bild als Vorschau (#t=0.1), falls kein
+ * Vorschaubild hinterlegt ist. Kein externer Anbieter.
  */
 export function VideoSlot({ slot, index, showDrafts }: { slot: Slot; index: number; showDrafts: boolean }) {
-  const [playing, setPlaying] = useState(false);
-  const label = slot.name ? `Reel von ${slot.name} abspielen` : `Reel ${index + 1} abspielen`;
-  const poster: Media = slot.poster ?? { kind: "placeholder", label: `Reel ${index + 1} folgt`, tone: "studio" };
+  const label = slot.name ? `Video von ${slot.name}` : `Video ${index + 1}`;
+  const poster = slot.poster?.kind === "image" ? slot.poster.src : undefined;
 
   return (
     <figure>
-      <div className="relative aspect-[9/16] overflow-hidden rounded-2xl bg-ink">
-        {playing && slot.src ? (
-          <video src={slot.src} controls autoPlay playsInline preload="none" className="h-full w-full object-cover">
-            <track kind="captions" />
-          </video>
-        ) : (
-          <>
-            <MediaFrame media={poster} aspect="h-full w-full" sizes="(min-width: 640px) 33vw, 100vw" showLabel={showDrafts} />
-            {slot.src && (
-              <button
-                type="button"
-                onClick={() => setPlaying(true)}
-                aria-label={label}
-                className="absolute inset-0 m-auto flex h-20 w-20 items-center justify-center rounded-full bg-paper/90 text-ink transition-transform hover:scale-105"
-              >
-                <svg viewBox="0 0 24 24" className="ml-1 h-8 w-8" aria-hidden>
-                  <path d="M7 4.5v15l12-7.5z" fill="currentColor" />
-                </svg>
-              </button>
-            )}
-          </>
-        )}
-      </div>
-      {(slot.name || slot.caption || showDrafts) && (
+      {slot.src ? (
+        <video
+          src={poster ? slot.src : `${slot.src}#t=0.1`}
+          poster={poster}
+          controls
+          playsInline
+          preload="metadata"
+          aria-label={label}
+          className="mx-auto block max-h-[80vh] w-full rounded-2xl bg-ink object-contain"
+        >
+          <track kind="captions" />
+        </video>
+      ) : (
+        <div className="relative aspect-[9/16] overflow-hidden rounded-2xl">
+          <MediaFrame
+            media={slot.poster ?? { kind: "placeholder", label: `Video ${index + 1} folgt`, tone: "studio" }}
+            aspect="h-full w-full"
+            sizes="(min-width: 640px) 33vw, 100vw"
+            showLabel={showDrafts}
+          />
+        </div>
+      )}
+      {(slot.name || slot.caption || (showDrafts && !slot.src)) && (
         <figcaption className="mt-4">
           {slot.name ? <span className="block font-semibold">{slot.name}</span> : showDrafts && <span className="draft-flag">Name und Freigabe folgen</span>}
           {slot.caption && <span className="mt-1 block opacity-80">{slot.caption}</span>}