From a37f12a60fa0cc69562233d1632ee4e9e1b2b0df Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Fri, 2 Oct 2026 06:30:08 +0200
Subject: [PATCH] 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) <noreply@anthropic.com>
---
 src/app/globals.css                        |  2 +-
 src/components/Hero.tsx                    |  2 +-
 src/components/SiteFooter.tsx              |  2 +-
 src/components/SiteHeader.tsx              | 11 +++-
 src/components/VideoSlot.tsx               | 62 ++++++++++------------
 src/components/sections/PeopleSections.tsx | 11 ++--
 src/content/site.ts                        |  4 +-
 7 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 891a536..4b90d04 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,7 +25,7 @@
 @layer base {
   html {
     scroll-behavior: smooth;
-    scroll-padding-top: 5rem;
+    scroll-padding-top: 5.5rem;
     -webkit-text-size-adjust: 100%;
     scrollbar-color: var(--color-stone) var(--color-plaster);
     accent-color: var(--color-rosso);
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index ca84f6b..fec912f 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -53,7 +53,7 @@ export function Hero({ pricing, media, video }: { pricing: PublicPricing; media:
         <div aria-hidden className="absolute inset-0 bg-[linear-gradient(180deg,rgb(35_33_31/0.6)_0%,rgb(35_33_31/0.45)_45%,rgb(35_33_31/0.75)_100%)]" />
       </div>
 
-      <div className="container-edge flex flex-col items-center pb-20 pt-32 text-center">
+      <div className="container-edge flex flex-col items-center pb-20 pt-36 text-center md:pt-44">
         <h1 id="hero-title" className="hero-fade max-w-4xl text-[clamp(2.75rem,8vw,6.25rem)] font-extrabold leading-[0.98] tracking-[-0.03em]">
           <span className="sr-only">ARTISTA </span>
           {hero.title}
diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index 61eeb5c..c8a4f38 100644
--- a/src/components/SiteFooter.tsx
+++ b/src/components/SiteFooter.tsx
@@ -7,7 +7,7 @@ export function SiteFooter({ facts, showDrafts, logo }: { facts: PublicCampFacts
     <footer id="site-footer" className="border-t border-line bg-plaster">
       <div className="container-edge grid gap-10 py-14 md:grid-cols-12">
         <div className="md:col-span-5">
-          <p className="flex h-10 items-center text-2xl">
+          <p className="flex h-20 items-center text-2xl">
             <Logo src={logo} />
           </p>
           <p className="mt-1 text-stone">Modelcamp 2027</p>
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
index 218297b..c734ccd 100644
--- a/src/components/SiteHeader.tsx
+++ b/src/components/SiteHeader.tsx
@@ -82,7 +82,9 @@ export function SiteHeader({ logoLight, logoDark }: { logoLight: string | null;
         Zum Inhalt springen
       </a>
       <LazyMotion features={domAnimation}>
-        <div className="container-edge grid h-[4.5rem] grid-cols-[1fr_auto_1fr] items-center gap-4">
+        <div
+          className={`container-edge grid grid-cols-[1fr_auto_1fr] items-center gap-4 transition-[height] duration-300 ${solid ? "h-20" : "h-24 md:h-32"}`}
+        >
           <div className="flex items-center">
             <button
               ref={menuButton}
@@ -99,7 +101,12 @@ export function SiteHeader({ logoLight, logoDark }: { logoLight: string | null;
             </nav>
           </div>
 
-          <a href="#top" aria-label="ARTISTA Modelcamp 2027, zum Seitenanfang" className="flex h-8 items-center text-xl md:h-10 md:text-2xl">
+          {/* Logo ueber dem Headerbild gross, nach dem Scrollen kompakter. */}
+          <a
+            href="#top"
+            aria-label="ARTISTA Modelcamp 2027, zum Seitenanfang"
+            className={`flex items-center text-xl transition-[height] duration-300 md:text-2xl ${solid ? "h-16" : "h-20 md:h-28"}`}
+          >
             <Logo src={solid ? logoDark : logoLight} />
           </a>
 
diff --git a/src/components/VideoSlot.tsx b/src/components/VideoSlot.tsx
index 6b59440..864faae 100644
--- a/src/components/VideoSlot.tsx
+++ b/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>}
diff --git a/src/components/sections/PeopleSections.tsx b/src/components/sections/PeopleSections.tsx
index 766be82..b1fc8ca 100644
--- a/src/components/sections/PeopleSections.tsx
+++ b/src/components/sections/PeopleSections.tsx
@@ -95,14 +95,17 @@ export function AboutSection({ showDrafts }: { showDrafts: boolean }) {
 }
 
 /**
- * Drei Reels im Hochformat. Leere Slots erscheinen nur in Entwicklung und
- * Staging; oeffentlich nie ein erfundenes Testimonial als Ersatz.
+ * Bis zu drei Videos (Models ueber ARTISTA). Ein einzelnes Video steht
+ * breit in der Mitte, mehrere im Raster. Leere Slots erscheinen nur in
+ * Entwicklung und Staging; oeffentlich nie ein erfundenes Testimonial.
  */
 export function ReelsSection({ showDrafts, reels }: { showDrafts: boolean; reels: Reel[] }) {
   const { reels: content } = site;
   const slots = content.slots.map((slot, index) => ({ ...slot, ...(reels[index] ?? { src: null, poster: null }) }));
-  const visible = showDrafts ? slots : slots.filter((s) => s.src);
+  const filled = slots.filter((s) => s.src);
+  const visible = showDrafts ? [...filled, ...slots.filter((s) => !s.src)] : filled;
   if (visible.length === 0) return null;
+  const single = visible.length === 1;
   return (
     <section id="reels" aria-labelledby="reels-title" className="on-dark bg-ink py-24 text-paper md:py-32">
       <div className="container-edge">
@@ -110,7 +113,7 @@ export function ReelsSection({ showDrafts, reels }: { showDrafts: boolean; reels
           <h2 id="reels-title" className="section-title">{content.title}</h2>
           <p className="max-w-md text-paper/75">{content.lead}</p>
         </div>
-        <ul className="mx-auto mt-12 grid max-w-5xl gap-6 sm:grid-cols-3 md:gap-8">
+        <ul className={`mx-auto mt-12 grid gap-6 md:gap-8 ${single ? "max-w-4xl" : "max-w-5xl sm:grid-cols-3"}`}>
           {visible.map((slot, index) => (
             <li key={index}>
               <VideoSlot slot={slot} index={index} showDrafts={showDrafts} />
diff --git a/src/content/site.ts b/src/content/site.ts
index 96fc334..0df418a 100644
--- a/src/content/site.ts
+++ b/src/content/site.ts
@@ -246,8 +246,8 @@ export const site = {
   },
 
   reels: {
-    title: "Reels",
-    lead: "Eindrücke und Stimmen in drei kurzen Clips.",
+    title: "Stimmen",
+    lead: "Models erzählen, wie sie ARTISTA erleben.",
     // Genau drei Slots. Video und Vorschaubild kommen ueber das
     // Medienverzeichnis (reels/reel-1.mp4 und reels/reel-1.jpg usw.).
     // Name und Begleittext nur mit Freigabe der gezeigten Person.