feat: Logo deutlich größer und auf jedem Untergrund sichtbar

Das hochgeladene logo.png ist die helle Fassung und war auf der hellen Kopfzeile und im Fuß bis auf das goldene A unsichtbar. Die Seite misst jetzt die Helligkeit (sharp) und ordnet die Datei selbst zu; fehlt eine passende Fassung, wird per CSS abgedunkelt bzw. aufgehellt. Über dem Foto bis 176 px hoch mit weichem Schatten, nach dem Scrollen 80 px. Raster-Logos laufen über die Bildoptimierung (Original 5378 px, 313 KB).

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

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-36 text-center md:pt-44">
+      <div className="container-edge flex flex-col items-center pb-20 pt-44 text-center md:pt-60">
         <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}

src/components/Logo.tsx

@@ -1,12 +1,31 @@
+import type { LogoImage } from "@/lib/site-media";
+
 /**
- * ARTISTA-Logo aus dem Medienverzeichnis (logo.svg/png bzw. logo-hell.*).
- * Ohne Datei erscheint ein Schriftzug. Bewusst <img> statt next/image:
- * SVG-Logos laufen nicht durch die Bildoptimierung.
+ * Umfaerbung, wenn keine passende Fassung hochgeladen wurde (siehe
+ * resolveLogos in site-media.ts): ein helles Logo wird auf heller Flaeche
+ * dunkel, ein dunkles auf Foto weiss.
  */
-export function Logo({ src, className = "" }: { src: string | null; className?: string }) {
-  if (src) {
-    // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt="ARTISTA" className={`h-full w-auto ${className}`} />;
+const TONE_FILTER: Record<LogoImage["tone"], string> = {
+  "as-is": "",
+  darken: "brightness(0.28) contrast(1.2)",
+  lighten: "brightness(0) invert(1)",
+};
+/** Ueber dem Foto hebt ein weicher Schatten das Logo vom Bild ab. */
+const PHOTO_SHADOW = "drop-shadow(0 2px 14px rgb(0 0 0 / 0.55))";
+
+/**
+ * ARTISTA-Logo aus dem Medienverzeichnis (logo.* bzw. logo-hell.*). Ohne
+ * Datei erscheint ein Schriftzug. Bewusst <img> statt next/image: die URL
+ * ist bereits optimiert (Raster) bzw. ein SVG, und die Hoehe kommt vom
+ * Elternelement.
+ */
+export function Logo({ logo, onPhoto = false, className = "" }: { logo: LogoImage | null; onPhoto?: boolean; className?: string }) {
+  if (logo) {
+    const filter = [TONE_FILTER[logo.tone], onPhoto ? PHOTO_SHADOW : ""].filter(Boolean).join(" ");
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img src={logo.src} alt="ARTISTA Modelcamp 2027" style={filter ? { filter } : undefined} className={`h-full w-auto ${className}`} />
+    );
   }
   return <span className={`font-bold uppercase tracking-[0.32em] ${className}`}>Artista</span>;
 }

src/components/SiteFooter.tsx

@@ -1,14 +1,15 @@
 import type { PublicCampFacts } from "@/lib/camp";
+import type { LogoImage } from "@/lib/site-media";
 import { Logo } from "./Logo";
 
-export function SiteFooter({ facts, showDrafts, logo }: { facts: PublicCampFacts; showDrafts: boolean; logo: string | null }) {
+export function SiteFooter({ facts, showDrafts, logo }: { facts: PublicCampFacts; showDrafts: boolean; logo: LogoImage | null }) {
   const organizer = facts.organizer;
   return (
     <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-20 items-center text-2xl">
-            <Logo src={logo} />
+          <p className="flex h-32 items-center text-2xl">
+            <Logo logo={logo} />
           </p>
           <p className="mt-1 text-stone">Modelcamp 2027</p>
         </div>

src/components/SiteHeader.tsx

@@ -3,6 +3,7 @@
 import { LazyMotion, domAnimation, m } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { NAV_ITEMS } from "@/content/site";
+import type { LogoImage } from "@/lib/site-media";
 import { Logo } from "./Logo";
 
 const LEFT = NAV_ITEMS.slice(0, 3);
@@ -15,7 +16,7 @@ type NavItem = (typeof NAV_ITEMS)[number];
  * rechts. Ueber dem Headerbild transparent mit heller Schrift, nach dem
  * Scrollen auf hellem Grund.
  */
-export function SiteHeader({ logoLight, logoDark }: { logoLight: string | null; logoDark: string | null }) {
+export function SiteHeader({ logoLight, logoDark }: { logoLight: LogoImage | null; logoDark: LogoImage | null }) {
   const [active, setActive] = useState<string | null>(null);
   const [scrolled, setScrolled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -83,7 +84,7 @@ export function SiteHeader({ logoLight, logoDark }: { logoLight: string | null;
       </a>
       <LazyMotion features={domAnimation}>
         <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"}`}
+          className={`container-edge grid grid-cols-[1fr_auto_1fr] items-center gap-4 transition-[height] duration-300 ${solid ? "h-24" : "h-32 md:h-48"}`}
         >
           <div className="flex items-center">
             <button
@@ -105,9 +106,9 @@ export function SiteHeader({ logoLight, logoDark }: { logoLight: string | null;
           <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"}`}
+            className={`flex items-center text-xl transition-[height] duration-300 md:text-2xl ${solid ? "h-20" : "h-28 md:h-44"}`}
           >
-            <Logo src={solid ? logoDark : logoLight} />
+            <Logo logo={solid ? logoDark : logoLight} onPhoto={!solid} />
           </a>
 
           <div className="flex items-center justify-end gap-7">