feat: Team, Villa-Bilder und bestaetigte Camp-Eckdaten

- Team-Abschnitt mit neun Personen, Eric Heitz als Head of Modelcamp, Portraets im Rundbogen mit Initialen-Platzhaltern bis Fotos vorliegen - Unterkunftsbilder der Villa La Chiesina lokal in public/images/unterkunft (vom Auftraggeber freigegeben), Hero-Leitbild, Ausstattung, Booking-Link - Migration: Termin 08.05.-15.05.2027, Ort Arcidosso (Toskana), eigenes Bett im geteilten Zimmer, 13 Plaetze; Admin-Werte bleiben erhalten - Reveal: kein Hydration-Fehler mehr bei reduzierter Bewegung - Doku zu offenen Punkten aktualisiert Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
2026-10-01 07:39:27 +02:00
1 parent 28663cda7a
commit 804bb832ea
@@ -21,7 +21,7 @@ const hanken = Hanken_Grotesk({

 const TITLE = "ARTISTA MODELCAMP 2027";
 const DESCRIPTION =
-  "Das ARTISTA Modelcamp 2027 in Italien: lernen, arbeiten und wohnen unter einem Dach. Alle Infos zu Unterkunft, Dozentinnen, Preis und Buchung.";
+  "Das ARTISTA Modelcamp 2027 in Italien: lernen, arbeiten und wohnen unter einem Dach. Alle Infos zu Unterkunft, Team, Preis und Buchung.";

 export function generateMetadata(): Metadata {
  const { APP_URL, APP_ENV } = env();
@@ -4,7 +4,7 @@ import { MobileBookingBar } from "@/components/booking/MobileBookingBar";
 import { Hero, priceLine } from "@/components/Hero";
 import { AccommodationSection, CampSection, ServicesSection } from "@/components/sections/CampSections";
 import { ClosingSection, FaqSection } from "@/components/sections/FaqSection";
-import { AboutSection, TeachersSection, VoicesSection } from "@/components/sections/PeopleSections";
+import { AboutSection, TeamSection, VoicesSection } from "@/components/sections/PeopleSections";
 import { PricingSection } from "@/components/sections/PricingSection";
 import { ReviewsSection } from "@/components/sections/ReviewsSection";
 import { SiteFooter } from "@/components/SiteFooter";
@@ -31,7 +31,7 @@ export default async function HomePage() {
        <CampSection showDrafts={showDrafts} />
        <ServicesSection showDrafts={showDrafts} />
        <AccommodationSection facts={facts} showDrafts={showDrafts} />
-        <TeachersSection showDrafts={showDrafts} />
+        <TeamSection showDrafts={showDrafts} />
        <AboutSection showDrafts={showDrafts} />
        <ReviewsSection data={reviews} showDrafts={showDrafts} />
        <VoicesSection showDrafts={showDrafts} provider={externalVideoProvider} />
@@ -31,17 +31,19 @@ export function Gallery({ images, showLabels }: { images: readonly Media[]; show
  };
  const step = (delta: number) => setCurrent((c) => (c === null ? c : (c + delta + images.length) % images.length));

-  // Grosses Bild links ueber zwei Reihen, rechts zwei Bilder, darunter ein Panorama.
-  const layout = ["md:col-span-7 md:row-span-2", "md:col-span-5", "md:col-span-5", "md:col-span-12"];
+  // Grosses Bild links ueber zwei Reihen, rechts zwei Bilder, darunter ein
+  // Panorama, danach Dreierreihen. Auf dem Smartphone zwei Spalten, damit
+  // die Galerie nicht endlos lang wird; Bild 1 und das Panorama volle Breite.
+  const layout = ["col-span-2 md:col-span-7 md:row-span-2", "md:col-span-5", "md:col-span-5", "col-span-2 md:col-span-12"];
  const aspect = (index: number) =>
-    index === 0 ? "aspect-[4/3] md:aspect-auto md:h-full" : index === 3 ? "aspect-[3/2] md:aspect-[3/1]" : "aspect-[3/2]";
+    index === 0 ? "aspect-[4/3] md:aspect-auto md:h-full" : index === 3 ? "aspect-[3/2] md:aspect-[3/1]" : "aspect-square md:aspect-[3/2]";

  return (
    <>
-      <ul className="mt-12 grid gap-3 md:grid-cols-12 md:gap-4">
+      <ul className="mt-12 grid grid-cols-2 gap-3 md:grid-cols-12 md:gap-4">
        {images.map((media, index) => (
          <li key={index} className={layout[index] ?? "md:col-span-4"}>
-            <Reveal delay={index * 0.08} className={index === 0 ? "md:h-full" : ""}>
+            <Reveal delay={Math.min(index, 4) * 0.08} className={index === 0 ? "md:h-full" : ""}>
              <button
                ref={(el) => {
                  triggers.current[index] = el;
@@ -54,7 +56,7 @@ export function Gallery({ images, showLabels }: { images: readonly Media[]; show
                <MediaFrame
                  media={media}
                  aspect={aspect(index)}
-                  sizes={index === 0 ? "(min-width: 768px) 58vw, 100vw" : index === 3 ? "100vw" : "(min-width: 768px) 40vw, 100vw"}
+                  sizes={index === 0 ? "(min-width: 768px) 58vw, 100vw" : index === 3 ? "100vw" : "(min-width: 768px) 40vw, 50vw"}
                  showLabel={showLabels}
                  className="w-full"
                />
@@ -21,6 +21,9 @@ const TONES: Record<PlaceholderTone, Plate> = {
  studio: { background: "#d2c9bd", glyph: "A", italic: true, style: { fontSize: "96cqh", right: "-16cqw", bottom: "-16cqh" } },
 };

+// Initialen auf Portraet-Platzhaltern: gross, angeschnitten am unteren Rand.
+const INITIALS_STYLE: React.CSSProperties = { fontSize: "34cqh", left: "8cqw", bottom: "-4cqh", letterSpacing: "-0.03em" };
+
 type Props = {
  media: Media;
  /** Tailwind-Klasse fuer das Seitenverhaeltnis, z. B. "aspect-[4/5]". */
@@ -29,17 +32,22 @@ type Props = {
  showLabel: boolean;
  priority?: boolean;
  className?: string;
+  /** "arch": oben rund wie ein Rundbogenfenster (Team-Portraets). */
+  shape?: "rect" | "arch";
 };

+const ARCH = "rounded-t-[50vw]";
+
 /**
 * Bild oder erkennbarer Platzhalter. Platzhalter tragen in Entwicklung und
 * Staging einen sichtbaren Hinweis, damit fehlende Freigaben nicht
 * uebersehen werden.
 */
-export function MediaFrame({ media, aspect, sizes, showLabel, priority, className = "" }: Props) {
+export function MediaFrame({ media, aspect, sizes, showLabel, priority, className = "", shape = "rect" }: Props) {
+  const shapeClass = shape === "arch" ? ARCH : "";
  if (media.kind === "image") {
    return (
-      <div className={`relative overflow-hidden bg-sand ${aspect} ${className}`}>
+      <div className={`relative overflow-hidden bg-sand ${aspect} ${shapeClass} ${className}`}>
        <Image src={media.src} alt={media.alt} fill sizes={sizes} priority={priority} className="object-cover" />
      </div>
    );
@@ -49,17 +57,17 @@ export function MediaFrame({ media, aspect, sizes, showLabel, priority, classNam
    <div
      role="img"
      aria-label={`Platzhalter: ${media.label}`}
-      className={`placeholder-plate relative isolate overflow-hidden ${aspect} ${className}`}
+      className={`placeholder-plate relative isolate overflow-hidden ${aspect} ${shapeClass} ${className}`}
      style={{ backgroundColor: tone.background, containerType: "size" }}
    >
      <span
        aria-hidden
-        className={`display pointer-events-none absolute select-none leading-none text-ink/[0.07] ${tone.italic ? "italic" : ""}`}
-        style={tone.style}
+        className={`display pointer-events-none absolute select-none leading-none ${media.glyph ? "text-ink/[0.13]" : "text-ink/[0.07]"} ${tone.italic && !media.glyph ? "italic" : ""}`}
+        style={media.glyph ? INITIALS_STYLE : tone.style}
      >
-        {tone.glyph}
+        {media.glyph ?? tone.glyph}
      </span>
-      <span aria-hidden className="pointer-events-none absolute inset-3 border border-ink/10 md:inset-4" />
+      {shape === "rect" && <span aria-hidden className="pointer-events-none absolute inset-3 border border-ink/10 md:inset-4" />}
      {showLabel && (
        <span className="absolute bottom-6 left-6 bg-paper/90 px-2.5 py-1 text-xs font-semibold text-ink md:bottom-7 md:left-7">
          Platzhalter: {media.label}
@@ -8,8 +8,10 @@ import { LazyMotion, domAnimation, m, useReducedMotion } from "motion/react";
 * Animation warten muss.
 */
 export function Reveal({ children, className = "", delay = 0 }: { children: React.ReactNode; className?: string; delay?: number }) {
+  // Immer dasselbe Element rendern: der Server kennt die Bewegungs-
+  // einstellung nicht, ein anderer Elementbaum fuehrt zu Hydration-Fehlern.
+  // Bei reduzierter Bewegung wird ohne Dauer sofort aufgedeckt.
  const reduce = useReducedMotion();
-  if (reduce) return <div className={className}>{children}</div>;
  return (
    <LazyMotion features={domAnimation}>
      <m.div
@@ -17,7 +19,7 @@ export function Reveal({ children, className = "", delay = 0 }: { children: Reac
        initial={{ clipPath: "inset(12% 0 0 0)", opacity: 0.4 }}
        whileInView={{ clipPath: "inset(0% 0 0 0)", opacity: 1 }}
        viewport={{ once: true, margin: "0px 0px -10% 0px" }}
-        transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1], delay }}
+        transition={reduce ? { duration: 0 } : { duration: 0.9, ease: [0.22, 1, 0.36, 1], delay }}
      >
        {children}
      </m.div>
@@ -100,26 +100,31 @@ export function AccommodationSection({ facts, showDrafts }: { facts: PublicCampF
  return (
    <section id="unterkunft" aria-labelledby="unterkunft-title" className="py-24 md:py-36">
      <div className="container-edge">
-        <h2 id="unterkunft-title" className="section-title">{accommodation.title}</h2>
+        <p className="text-sm font-semibold uppercase tracking-[0.18em] text-rosso">{accommodation.name} · {accommodation.place}</p>
+        <h2 id="unterkunft-title" className="section-title mt-3">{accommodation.title}</h2>
        <p className="display mt-6 max-w-2xl text-[1.5rem] leading-[1.25] text-ink/85 md:text-[1.875rem]">{accommodation.lead}</p>
        <Gallery images={accommodation.images} showLabels={showDrafts} />
        <div className="mt-12 grid gap-8 md:grid-cols-12">
          <div className="md:col-span-7">
            <h3 className="text-lg font-semibold">Zimmer und Unterbringung</h3>
-            <p className="mt-3 max-w-2xl">
-              Gebucht wird ein Platz pro Person mit geteilter Unterbringung. Einzelbelegung und Zimmer-Upgrades sind nicht buchbar.
-            </p>
            {facts.accommodationText ? (
              <p className="mt-3 max-w-2xl whitespace-pre-line">{facts.accommodationText}</p>
            ) : (
              <p className="mt-3 max-w-2xl text-stone">
-                Die genaue Zimmer- und Bettaufteilung veröffentlichen wir, sobald sie verbindlich feststeht – in jedem Fall bevor du buchst.
+                Gebucht wird ein Platz pro Person mit geteilter Unterbringung; Einzelzimmer sind nicht buchbar. Die genaue Zimmer- und Bettaufteilung veröffentlichen wir, sobald sie verbindlich feststeht – in jedem Fall bevor du buchst.
              </p>
            )}
          </div>
          <div className="md:col-span-4 md:col-start-9">
+            <h3 className="text-lg font-semibold">Ausstattung</h3>
+            <ul className="mt-3 divide-y divide-line border-y border-line">
+              {accommodation.features.map((feature) => (
+                <li key={feature} className="py-2.5">{feature}</li>
+              ))}
+            </ul>
+            <p className="mt-2 text-sm text-stone">Laut Beschreibung der Unterkunft.</p>
            {accommodation.bookingUrl ? (
-              <a href={accommodation.bookingUrl} target="_blank" rel="noopener noreferrer" className="btn btn-quiet">
+              <a href={accommodation.bookingUrl} target="_blank" rel="noopener noreferrer" className="btn btn-quiet mt-6">
                Unterkunft ansehen (externe Seite)
              </a>
            ) : (
@@ -1,36 +1,69 @@
-import { site } from "@/content/site";
+import { site, type Media } from "@/content/site";
 import { MediaFrame } from "../MediaFrame";
 import { Reveal } from "../Reveal";
 import { VideoSlot } from "../VideoSlot";

-export function TeachersSection({ showDrafts }: { showDrafts: boolean }) {
-  const { teachers } = site;
+type TeamMember = { name: string; role: string; bio: string | null; portrait: Media };
+
+function Bio({ bio, showDrafts }: { bio: string | null; showDrafts: boolean }) {
+  if (bio) return <p className="mt-3 max-w-md">{bio}</p>;
+  return showDrafts ? <p className="mt-3"><span className="draft-flag">Kurzbeschreibung folgt</span></p> : null;
+}
+
+/**
+ * Team: Eric Heitz als Head of Modelcamp gross vorangestellt, darunter alle
+ * weiteren gleichwertig im Raster. Portraets im Rundbogen – ein Motiv aus
+ * der Architektur der Villa. Die Spalten sind auf breiten Bildschirmen
+ * leicht versetzt, damit das Raster wie eine Magazinseite wirkt.
+ */
+export function TeamSection({ showDrafts }: { showDrafts: boolean }) {
+  const { team } = site;
+  const { head } = team;
  return (
-    <section id="dozentinnen" aria-labelledby="dozentinnen-title" className="bg-paper py-24 md:py-36">
+    <section id="team" aria-labelledby="team-title" className="bg-paper py-24 md:py-36">
      <div className="container-edge">
-        <h2 id="dozentinnen-title" className="section-title">{teachers.title}</h2>
-        <div className="mt-14 grid gap-16 md:grid-cols-12 md:gap-10">
-          {teachers.people.map((person, index) => (
-            <article
-              key={index}
-              aria-label={person.name ?? `Dozentin ${index + 1}`}
-              className={index === 0 ? "md:col-span-5" : "md:col-span-5 md:col-start-8 md:mt-40"}
-            >
-              <Reveal>
-                <MediaFrame media={person.portrait} aspect="aspect-[3/4]" sizes="(min-width: 768px) 40vw, 100vw" showLabel={showDrafts} />
-              </Reveal>
-              <h3 className="display mt-6 text-3xl">
-                {person.name ?? (showDrafts ? `Dozentin ${index + 1}: Name folgt` : "Wird in Kürze vorgestellt")}
-              </h3>
-              {person.role && <p className="mt-1 text-stone">{person.role}</p>}
-              {person.bio ? (
-                <p className="mt-4 max-w-md">{person.bio}</p>
-              ) : (
-                showDrafts && <p className="mt-4"><span className="draft-flag">Kurzbeschreibung folgt</span></p>
-              )}
-            </article>
-          ))}
+        <div className="grid gap-6 md:grid-cols-12 md:gap-10">
+          <h2 id="team-title" className="section-title md:col-span-5">{team.title}</h2>
+          <p className="max-w-xl text-lg text-ink/85 md:col-span-6 md:col-start-7 md:pt-3">{team.lead}</p>
        </div>
+
+        <article aria-label={head.name} className="mt-14 grid items-end gap-8 md:mt-20 md:grid-cols-12 md:gap-10">
+          <Reveal className="md:col-span-5">
+            <MediaFrame media={head.portrait} aspect="aspect-[4/5]" shape="arch" sizes="(min-width: 768px) 40vw, 100vw" showLabel={showDrafts} />
+          </Reveal>
+          <div className="md:col-span-6 md:col-start-7 md:pb-10">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-rosso">{head.title}</p>
+            <h3 className="display mt-4 text-[3rem] leading-[0.95] md:text-[5.5rem]">{head.name}</h3>
+            <p className="mt-5 border-t border-ink pt-4 text-lg">{head.role}</p>
+            <Bio bio={head.bio} showDrafts={showDrafts} />
+          </div>
+        </article>
+
+        <ul className="mt-20 grid grid-cols-2 gap-x-4 gap-y-12 md:mt-28 md:grid-cols-4 md:gap-x-8 md:gap-y-16">
+          {team.people.map((person: TeamMember, index) => (
+            <li key={person.name} className={index % 2 === 1 ? "md:mt-16" : ""}>
+              <article aria-label={person.name}>
+                <Reveal delay={(index % 4) * 0.06}>
+                  <MediaFrame
+                    media={person.portrait}
+                    aspect="aspect-[3/4]"
+                    shape="arch"
+                    sizes="(min-width: 768px) 22vw, 50vw"
+                    showLabel={false}
+                  />
+                </Reveal>
+                <h3 className="display mt-4 text-[1.375rem] leading-tight md:text-[1.75rem]">{person.name}</h3>
+                <p className="mt-1 text-sm text-stone md:text-[0.9375rem]">{person.role}</p>
+                <Bio bio={person.bio} showDrafts={showDrafts} />
+              </article>
+            </li>
+          ))}
+        </ul>
+        {showDrafts && (
+          <p className="mt-12">
+            <span className="draft-flag">Porträts folgen</span> Platzhalter mit Initialen, bis freigegebene Fotos vorliegen.
+          </p>
+        )}
      </div>
    </section>
  );
@@ -11,9 +11,11 @@
 * - Termin, Ort, Zimmer-/Bettbeschreibung, Veranstalter, Steuerhinweis und
 *   Bedingungen pflegt der Adminbereich (Datenbank), weil sie den
 *   Live-Verkauf freischalten. Hier steht alles Uebrige.
- * - Bilder: nur mit bestaetigter Nutzungsberechtigung, als lokale Datei im
- *   Medienverzeichnis (MEDIA_DIR, ausgeliefert unter /media/…). Kein
- *   Hotlinking fremder Bilder (z. B. von Booking.com).
+ * - Bilder: nur mit bestaetigter Nutzungsberechtigung und immer als lokale
+ *   Datei, nie per Hotlinking. Feste Bilder liegen in public/images/,
+ *   austauschbare Medien im Medienverzeichnis (MEDIA_DIR, /media/…).
+ *   Die Unterkunftsbilder stammen aus dem Booking.com-Eintrag der Villa
+ *   und wurden vom Auftraggeber am 01.10.2026 zur Nutzung freigegeben.
 *
 * Offene Punkte: docs/OFFENE-PUNKTE.md
 */
@@ -21,12 +23,14 @@
 export type PlaceholderTone = "cover" | "villa" | "garden" | "room" | "terrace" | "portrait" | "studio";

 export type Media =
-  | { kind: "placeholder"; label: string; tone: PlaceholderTone }
+  | { kind: "placeholder"; label: string; tone: PlaceholderTone; glyph?: string }
  | { kind: "image"; src: string; alt: string; width: number; height: number };

 export type Confirmable<T> = T & { confirmed: boolean };

-const placeholder = (label: string, tone: PlaceholderTone): Media => ({ kind: "placeholder", label, tone });
+const portrait = (name: string, initials: string): Media => ({ kind: "placeholder", label: `Porträt ${name}`, tone: "portrait", glyph: initials });
+/** Lokales Bild aus public/images/unterkunft (1280 x 853 px). */
+const villa = (file: string, alt: string): Media => ({ kind: "image", src: `/images/unterkunft/${file}.jpg`, alt, width: 1280, height: 853 });

 export const site = {
  hero: {
@@ -35,7 +39,7 @@ export const site = {
    headline: "Gemeinsam wachsen. In Italien.",
    subline:
      "Das ARTISTA Modelcamp 2027 bringt Models an einem Ort in Italien zusammen – zum Lernen, Arbeiten und Wohnen unter einem Dach.",
-    media: placeholder("Leitmotiv: Bild oder Video folgt", "cover"),
+    media: villa("villa-luftbild", "Luftaufnahme der Villa La Chiesina zwischen Zypressen und Wiesen in der Toskana"),
  },

  camp: {
@@ -89,22 +93,57 @@ export const site = {

  accommodation: {
    title: "Die Unterkunft",
-    lead: "Wohnen, arbeiten und abends zusammensitzen – alles an einem Ort.",
-    // Link zur Unterkunft (z. B. Booking.com), nachzureichen.
-    bookingUrl: null as string | null,
+    lead: "Eine Villa zwischen Zypressen, mit Blick über die Hügel am Monte Amiata. Wohnen, arbeiten und abends zusammensitzen – alles an einem Ort.",
+    name: "Villa La Chiesina",
+    place: "Arcidosso, Toskana",
+    // Ohne Tracking-Parameter; Termin und Personenzahl waehlt man dort selbst.
+    bookingUrl: "https://www.booking.com/hotel/it/villa-la-chiesina-arcidosso.de.html" as string | null,
+    // Ausstattung laut Unterkunftsbeschreibung (Booking.com, Stand 01.10.2026).
+    features: [
+      "Eigener Außenpool (saisonal)",
+      "Großer Garten mit Terrasse",
+      "Blick auf die Berge",
+      "Gemeinsames Wohnzimmer und gut ausgestattete Küche",
+      "Bettwäsche und Handtücher",
+      "WLAN",
+    ],
    images: [
-      placeholder("Unterkunft: Außenansicht", "villa"),
-      placeholder("Unterkunft: Garten oder Terrasse", "terrace"),
-      placeholder("Unterkunft: Zimmer", "room"),
-      placeholder("Unterkunft: Gemeinschaftsbereich", "garden"),
+      villa("villa-eingang", "Die Villa La Chiesina mit Steintreppe und Rasen im Frühling"),
+      villa("pool", "Pool mit Liegen im Garten der Villa"),
+      villa("wohnzimmer-kamin", "Wohnzimmer mit Holzbalkendecke, Natursteinwand und Kamin"),
+      villa("anwesen-luftbild", "Luftaufnahme des Anwesens mit Zypressenallee, Pool und Tennisplatz"),
+      villa("schlafzimmer-einzelbetten", "Schlafzimmer mit zwei Einzelbetten und Holzbalkendecke"),
+      villa("esszimmer", "Esszimmer mit großem Holztisch und Kamin"),
+      villa("terrasse", "Sitzplatz auf der Gartenterrasse"),
+      villa("pool-zypressen", "Pool zwischen hohen Zypressen, im Hintergrund die Hügel der Toskana"),
+      villa("steintreppe", "Alte Steintreppe im Garten unter Bäumen"),
+      villa("arcidosso", "Blick auf den mittelalterlichen Ort Arcidosso mit Burg"),
    ] as Media[],
  },

-  teachers: {
-    title: "Die Dozentinnen",
+  team: {
+    title: "Das Team",
+    lead: "Fotografie, Modelcoaching, Content und eine Küche, die alle zusammenbringt: Diese Menschen sind beim Modelcamp 2027 dabei.",
+    // Namen und Rollen vom Auftraggeber (01.10.2026). Porträts folgen:
+    // Datei in public/images/team/ legen und "portrait" ersetzen, z. B.
+    // { kind: "image", src: "/images/team/eric-heitz.jpg", alt: "Porträt Eric Heitz", width: 1200, height: 1500 }.
+    // Kurzbeschreibungen nur aus freigegebenen Angaben, keine erfundenen Referenzen.
+    head: {
+      name: "Eric Heitz",
+      title: "Head of Modelcamp",
+      role: "Fotograf · Content Creator · Modelcoach",
+      bio: null as string | null,
+      portrait: portrait("Eric Heitz", "EH"),
+    },
    people: [
-      { name: null as string | null, role: null as string | null, bio: null as string | null, portrait: placeholder("Porträt Dozentin", "portrait") as Media },
-      { name: null as string | null, role: null as string | null, bio: null as string | null, portrait: placeholder("Porträt Dozentin", "studio") as Media },
+      { name: "Michele Ietro", role: "Editorial- und Casual-Fotograf", bio: null as string | null, portrait: portrait("Michele Ietro", "MI") },
+      { name: "Lola Stoll", role: "Editorial Model · UGC · GNTM 2026", bio: null as string | null, portrait: portrait("Lola Stoll", "LS") },
+      { name: "Eileen Kaupp", role: "Editorial Model · Fashion · GNTM 2026", bio: null as string | null, portrait: portrait("Eileen Kaupp", "EK") },
+      { name: "Gabriela Pronkin", role: "Commercial · Casual Model · UGC", bio: null as string | null, portrait: portrait("Gabriela Pronkin", "GP") },
+      { name: "Stefan Höchtl", role: "Social Media Content Creator", bio: null as string | null, portrait: portrait("Stefan Höchtl", "SH") },
+      { name: "Saskia Sirowatka", role: "Social Media Managerin", bio: null as string | null, portrait: portrait("Saskia Sirowatka", "SS") },
+      { name: "André Hartshauser", role: "Workshop-Organisation · Assistenz Küche", bio: null as string | null, portrait: portrait("André Hartshauser", "AH") },
+      { name: "Ante Rejo", role: "Chefkoch", bio: null as string | null, portrait: portrait("Ante Rejo", "AR") },
    ],
  },

@@ -135,7 +174,7 @@ export const NAV_ITEMS = [
  { id: "camp", label: "Das Camp" },
  { id: "leistungen", label: "Leistungen" },
  { id: "unterkunft", label: "Unterkunft" },
-  { id: "dozentinnen", label: "Dozentinnen" },
+  { id: "team", label: "Team" },
  { id: "artista", label: "Über ARTISTA" },
  { id: "preis", label: "Preis" },
  { id: "fragen", label: "Fragen" },
@@ -6,7 +6,8 @@ import { dbDateToIso } from "./time";
 /**
 * Laedt die Camp-Konfiguration. Fehlt die Zeile (frische Datenbank), wird
 * sie mit sicheren Standardwerten angelegt: Live-Verkauf aus, keine
- * Freigaben, 10 Plaetze und 4 Stammmodel-Buchungen als vorlaeufige Werte.
+ * Freigaben, 13 Plaetze und 4 Stammmodel-Buchungen. Die Migration
+ * 20261001120000_camp_2027_bestaetigt legt Termin, Ort und Zimmer fest.
 */
 export async function getCamp(db: Db | Tx): Promise<Camp> {
  return db.camp.upsert({ where: { id: CAMP_ID }, create: { id: CAMP_ID }, update: {} });