{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "foto-hero", "name": "Foto-Hero: echtes Foto, ein Satz, ein Weg", "name_en": "Photo hero (composition variants)", "kurz": "Fünf Bildregien für den Foto-Hero der KMU-Seiten: Vollbild mit Satz unten links, Split mit Foto bis an den Rand, Foto im Rahmen auf der Markenfarbe, kleiner Abzug mit Chip und Bildunterschrift als Gestaltung, je mit kurzem Auftritt beim ersten Laden.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 9, "stimmung": [ "ruhig", "editorial", "warm" ], "stimmung_roh": [ "ruhig", "warm", "editorial" ], "technik": [ "css", "picture", "container-queries", "vanilla-js" ], "technik_gruppen": [ "css", "js", "andere" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Der Hero der meisten KMU-Seiten: ein echtes Foto vom Haus, vom Raum, von der Lage oder von der Arbeit, dazu ein einziger Satz mit Leistung und Ort und ein bis zwei Wege (Anfrage, Termin, Telefon). Das Muster liefert kein einzelnes Layout, sondern belegte Kompositionen: wo das Bild steht, wie groß es ist, wo der Text liegt und was am Bild hängt (Rahmen, Chip, Bildunterschrift). Bewegung ist Nebensache: höchstens ein Auftritt nach intro-ohne-wartezeit beim ersten Laden.", "warum_es_wirkt": "Ein echtes Foto zeigt in einer Sekunde, wer hier arbeitet und wo. Gleichförmig wird der Foto-Hero erst durch die immer gleiche Komposition: Bild randlos, Text mittig, zwei Knöpfe, dunkler Verlauf über alles. Eine eigene Bildregie je Branche macht den Unterschied: das Haus im Rahmen auf der Markenfarbe, die Lage als kleiner Abzug auf Löss, das Projekt mit Bildunterschrift wie in einer Monografie.", "wann_einsetzen": "In allen Rezepten, deren hero_beschreibung einen Foto-Hero oder ein echtes Foto nennt (16 von 28). Die Variante folgt dem hero_aufbau des Rezepts und dem vorhandenen Material: großes Querformat mit ruhiger Zone, Werkstatt- oder Teamfoto, ein starkes Hausfoto, nur kleine Handyfotos, Projektfotografie.", "wann_nicht": "Ohne eigenes, brauchbares Foto: dann ein Schrift-Hero (schrift-hero-viewportbreit) oder die Variante passepartout mit dem einen guten Bild. Keine Stockfotos von lächelnden Menschen, kein Text quer über Gesichtern. Nicht zentriert mit zwei Knöpfen und dunklem Verlauf über dem ganzen Bild: Das ist der Template-Standard, gegen den das Muster gebaut ist. Nicht als Magazin-Titel (dafür editorial-magazin-layout, Variante cover).", "varianten": [ "randlos-unten-links: Vollbild 100svh, Satz klein unten links auf ruhiger Bildzone, nur weiche Abdunklung unten (30 bis 40 % der Höhe)", "split-randabfallend: Text über Spalte 1 bis 5, Foto bis an den rechten Bildschirmrand, asymmetrisch 60/40 oder 55/45, nie 50/50", "inset-rahmen: Foto mit 24 bis 40 px Rand rundum auf der Markenfarbe, Kopf mit Wortmarke darüber", "passepartout: kleines Hochformat-Foto (25 bis 35 % der Breite) wie ein Abzug auf Farb- oder Materialfläche, Bildunterschrift als Chip", "bildunterschrift: „Fig. 1 · Ort · Jahr“ als figcaption neben dem Bild ist das Gestaltungselement" ], "umsetzung": "Ein mit Art Direction: Quer- bzw. 3:2-Format am Desktop, 4:5 auf dem Telefon. Das LCP-Bild bekommt fetchpriority=\"high\", nie loading=\"lazy\", und eine feste aspect-ratio oder width und height. Das Raster kommt aus tokens.css (--raster-*), die Spalten der Variante aus dem hero_aufbau des Rezepts. Text nie auf unruhiger Bildzone: entweder ein Bildausschnitt mit ruhiger Fläche (object-position), eine weiche Abdunklung nur unter dem Text oder der Text neben dem Bild. H1 = Leistung und Ort; ein bis zwei Wege als Primär- und Sekundär-Gestalt aus muster.button, Telefon als tel:-Link mit sichtbarer Nummer. Der Auftritt folgt intro-ohne-wartezeit: Zeilen steigen aus Masken (translateY 110 % → 0), das Bild öffnet per clip-path ab 2 % sichtbarer Fläche, damit der LCP im ersten Frame zählt; nur beim ersten Aufruf der Sitzung (einmal-intro-session), danach steht alles. Anhängsel der Variante (Rahmen, Chip, Bildunterschrift) sind eigene Elemente im Fluss und fallen auf dem Telefon unter das Bild.", "mobil": "Jede Variante hat einen Telefonzustand: Foto oben im Format 4:5, Satz darunter, Wege in voller Breite. Rahmen, Chip und Bildunterschrift fallen in den Fluss unter das Bild. Nichts liegt auf dem Telefon über dem Foto.", "reduzierte_bewegung": "Alles steht ab dem ersten Frame: keine Masken, kein clip-path, kein Zoom. Höchstens ein kurzes Einblenden unter 200 ms.", "barrierefreiheit": "Text-Kontrast 4,5:1 gegen die tatsächliche Bildzone, im ungünstigsten Ausschnitt geprüft; sonst Abdunklung unter dem Text oder Text neben dem Bild. Das alt beschreibt das Foto, nicht den Slogan. Bei 320 px und 200 % Zoom wird kein Text über dem Bild abgeschnitten. Fokus auf allen Wegen sichtbar, Trefferflächen mindestens 44 px." }, "messwerte": { "easing": "Token des Rezepts (--ease aus tokens.css)", "dauer_ms": "Auftritt 900 bis 1200 gesamt nach intro-ohne-wartezeit", "stagger_ms": "60 bis 90 je Zeile", "distanz": "Rand inset-rahmen 24 bis 40 px (Terreno 40 px gemessen)", "sonstiges": "Terreno: Bild 1345 × 870 px, Rand 40 px auf rgb(236, 255, 179), Radius 0, Hero-Swiper speed 500 ohne Autoplay. Maloot: Bildwechsel 0.3s ease, Menü 0.45s cubic-bezier(0.23, 1, 0.32, 1).", "herkunft": "beobachtet", "quelle": "Live-Messung 03.11.2026 auf terrenohotel.com und maloothifibar.com (getComputedStyle, swiper.params, Elementmaße)" }, "kurve": { "bezier": [ 0.16, 1.0, 0.3, 1.0 ], "css": "cubic-bezier(0.16, 1, 0.3, 1)", "name": "expo.out", "dauer_ms": 900 }, "gesehen_bei": [ { "seite": "Maison Les Grands Chênes", "url": "https://www.maisonlesgrandschenes.com/", "auszeichnung": "Siteinspire 29.09.2026", "beobachtung": "Live geöffnet 03.11.2026: Ein langer Einleitungssatz in Serif liegt unten links auf dem gedämpften Foto (randlos-unten-links). Die Bildunterschrift „FIG.1 ÉCORCE DE CHÊNE“ ist eine figcaption, dazu Wortmarke in Versal oben zentriert und ein Mono-Label links (bildunterschrift).", "art": "website" }, { "seite": "Montamont", "url": "https://montamont.com/", "auszeichnung": "Land-book 10.06.2026", "beobachtung": "Galerie-Screenshot: große Headline unten links auf einem Alpenfoto (randlos-unten-links).", "art": "website" }, { "seite": "Terreno Barrio Hotel", "url": "https://www.terrenohotel.com/en/", "auszeichnung": "CSS Design Awards, nominiert 06.10.2026", "beobachtung": "Live gemessen 03.11.2026: Bild 1345 × 870 px bei 40 px Rand auf Lindgrün rgb(236, 255, 179), Radius 0. Die Schreibschrift-Wortmarke sitzt im Kopf über dem Bild, Versal-Headline mittig, Buchungsleiste im unteren Bilddrittel. Hero-Swiper speed 500, ohne Autoplay (inset-rahmen).", "art": "website" }, { "seite": "The Salad Project", "url": "https://www.saladproject.co.uk/", "auszeichnung": "Land-book 18.09.2026", "beobachtung": "Galerie-Screenshot: Foto im Rahmen mit Text darin (inset-rahmen).", "art": "website" }, { "seite": "Le Petit Bleu", "url": "https://www.lepetitbleucafe.com/", "auszeichnung": "One Page Love 15.11.2024", "beobachtung": "Live geöffnet 03.11.2026: links eine umrandete Textkarte mit Logo, Serif-Satz und zwei Service-Blöcken mit je einem Knopf (Abholung, Catering), rechts eine feste Bildspalte als Webflow-Slider (split-randabfallend).", "art": "website" }, { "seite": "Sonderdays", "url": "https://sonderdays.com/", "auszeichnung": "Land-book 20.10.2026", "beobachtung": "Live geöffnet 03.11.2026: links Satz und Kartenreihe, rechte Hälfte eine braune Materialfläche mit kleinem Hochformat-Foto in der Mitte und dem Chip „Hotels and Restaurants in Vienna“ (split-randabfallend, passepartout).", "art": "website" }, { "seite": "Surella", "url": "https://www.surella.fr/", "auszeichnung": "Land-book 20.04.2026", "beobachtung": "Galerie-Screenshot: rosa Fläche, Plakat-Versal, kleines Foto daneben; ein Bistrot mit Weinkeller in Barsac (passepartout).", "art": "website" }, { "seite": "Eight80", "url": "https://eight80bk.com", "auszeichnung": "One Page Love 13.03.2025", "beobachtung": "Galerie-Eintrag „Centrally Divided Layout“, nur als Text geprüft (split-randabfallend).", "art": "website" }, { "seite": "Deiterhaus, Essen", "url": "https://deiterhaus.de", "auszeichnung": "One Page Love 28.05.2026", "beobachtung": "Nur als Text geprüft: Bildunterschrift „Glockenspiel am Deiterhaus“ über der H1, dazu „Informationen anfordern“ und Telefon (bildunterschrift).", "art": "website" }, { "seite": "Pravin Kumar: Asymmetric two-column hero", "url": "https://www.pravinkumar.co/blog/asymmetric-two-column-hero-b2b-webflow-2026", "auszeichnung": "", "beobachtung": "Artikel vom 07.06.2026: Regel 55/45 bzw. 60/40 statt 50/50 für den zweispaltigen Hero.", "art": "artikel" } ], "tutorials": [ { "titel": "web.dev: Optimize Largest Contentful Paint", "url": "https://web.dev/articles/optimize-lcp" } ], "kombinierbar_mit": [ "intro-ohne-wartezeit", "einmal-intro-session", "buchungsleiste-datumsbereich", "oeffnungszeiten-status", "termin-verfuegbarkeit-anfrage", "schrift-hero-viewportbreit", "split-mask-reveal", "clip-path-bild-reveal", "sektionskante-shape" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/", "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json", "demo": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo" }, "herkunft": { "quelldateien": [ "Varianten-Recherche Hero/Slider 03.11.2026" ], "pruefnotizen": [ "Galerie-Belege aus Land-book zeigen den Zustand zum Zeitpunkt der Aufnahme. Bewegung wurde nur auf den live geöffneten Seiten geprüft.", "Die Recherche nennt zwölf Kompositionen. Hier gebaut sind fünf (randlos-unten-links, split-randabfallend, inset-rahmen, passepartout, bildunterschrift). Die übrigen liegen in eigenen Mustern derselben Runde: foto-hero-wortmarke (gestapelt, im-bild, daumenkino) und foto-hero-mit-leiste (leiste, karte, weiche). bildwechsel ist offen; die Bewegung dafür liefern slideshow-innere-gegenparallaxe und css-native-karussell.", "Abgrenzung: schrift-hero-viewportbreit hat kein Foto, editorial-magazin-layout (cover) ist ein Magazin-Titel mit Titelkopf." ] }, "bau": { "status": "fertig", "kurz": "Fünf Bildregien für den Foto-Hero der KMU-Seiten: Vollbild mit Satz unten links, Split mit Foto bis an den Rand, Foto im Rahmen auf der Markenfarbe, kleiner Abzug mit Chip und Bildunterschrift als Gestaltung, je mit kurzem Auftritt beim ersten Laden.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "je Variante die Kurve des Rezepts (tokens.css --ease): Immobilien cubic-bezier(0.16, 1, 0.3, 1), Handwerk cubic-bezier(0, 0, 0.38, 0.9), Hotel und Weingut cubic-bezier(0.37, 0, 0.63, 1), Architektur cubic-bezier(0.25, 1, 0.5, 1); Hover 150 bis 400 ms aus dem Rezept", "auftritt": "nach intro-ohne-wartezeit, reines CSS ab dem ersten Paint: Zeilen translateY(110%) → 0 in Masken (overflow hidden, padding-bottom .12em), Nebenelemente opacity 0 → 1 plus translateY, Bild clip-path ab 2 % sichtbar → inset(0 0 0 0), Bild darin scale → 1", "nur_erster_aufruf": "Kopf-Skript vor dem ersten Paint: sessionStorage 'foto-hero:' gesetzt → data-intro=aus, alles steht; sonst data-intro=an", "lcp": "Hero-Bild ohne loading=lazy, mit fetchpriority=high, width und height; mit 4:5-Quelle unter 760 px", "telefon": "unter 760 px: Foto 4:5 oben, Text darunter, Wege in voller Breite (flex-direction: column), nichts liegt auf dem Foto", "kontrast": "je Text gegen die tatsächliche Bildzone gemessen (Screenshot ohne Text, 2. Perzentil) bei 1280, 960 und 390 px: alle ≥ 4,5:1, große Schrift ≥ 3:1", "raster": "12 Spalten, Rand und Spalt aus tokens.css des jeweiligen Rezepts", "wege": "ein bis zwei Wege nach Leitfaden C9, Trefferfläche mindestens 48 px hoch" }, "ausloeser": "laden", "touch": "Kein Hover nötig: Der Auftritt läuft beim Laden. Unter 760 px hat jede Variante ihren Telefonzustand: Foto 4:5 oben, Text darunter, Wege in voller Breite; die Navigation entfällt bis auf Telefonnummer oder Sprache. Wege reagieren auf Druck mit scale .98.", "reduziert": "Keine Animation: Zeilen, Bild und Nebenelemente stehen ab dem ersten Frame (animation: none), Hover-Übergänge aus.", "korrekturen": {}, "geprueft": "03.11.2026", "notiz": "Neu 03.11.2026 (Runde 3). Fünf Varianten in fünf Rezept-Welten mit erfundenen Marken: randlos-unten-links in immobilien-diskret-hochwertig (Haldenwang Immobilien, Überlingen), split-randabfallend in handwerk-werkstatt-klartext (Stellmacher Haustechnik, Höxter), inset-rahmen in boutique-hotel-gastgeber (Haus Löffelente, Krakow am See), passepartout in weingut-hofladen-herkunft (Weingut Ottenbreit, Brauneberg an der Mosel), bildunterschrift in architektur-ruhiges-raster (Vehrs Boie Architekten, Itzehoe). Je Variante Kurve und Dauern des Rezepts. Bilder: neu mit three.js im Akkumulations-Renderer aus werkzeug/fundus/bilder gerendert (medien/foto-hero-villa.webp und -villa-hoch.webp mit Grauverlauf im Himmel, foto-hero-weinberg-hoch.webp), dazu handwerk-waermepumpe, hotel-haus-am-see(-hoch) und beton-treppe(-hoch). Kontrast je Text gegen die Bildzone gemessen: alles ≥ 4,5:1. Hotel: Der Text liegt auf einer Creme-Karte über der Rahmenkante, weil die Uferzone des Fotos zu unruhig für Text ist. Fünf Bühnen in einer Datei: Nur das Bild der gewählten Variante lädt sofort (eager, fetchpriority high), die übrigen beim Umschalten; auf einer echten Seite steht das Bild ohne lazy im Markup. Die übrigen Kompositionen der Recherche stehen in foto-hero-wortmarke (gestapelt, im-bild, daumenkino) und foto-hero-mit-leiste (leiste, karte, weiche); bildwechsel ist offen. Selbsturteil 4.", "varianten": [ { "id": "randlos-unten-links", "name": "Vollbild, Satz unten links", "wann": "Starkes Querformat mit ruhiger, dunkler Zone unten links: immobilien-diskret-hochwertig, verein-nonprofit-wirkung, mode-beauty-kollektion; dazu fitness-studio-rhythmus und eventlocation-hochzeit, solange keine Leiste am Bild hängt.", "werte": { "hoehe": "100svh, höchstens 100vh, mindestens 560px", "text": "Spalte 1 bis 6, unten, padding-bottom clamp(36px, 7vh, 72px)", "h1": "Libre Caslon Display 400, clamp(2.25rem, 1.5rem + 2vw, 3.4rem), Zeilenhöhe 1.08", "abdunklung": "nur unten, 36 % der Höhe: linear-gradient(to top, rgb(9 11 20 / .62), rgb(9 11 20 / .28) 55%, transparent)", "bild": "object-position 62% 50%; Himmel im Foto mit Grauverlauf abgedunkelt, damit die Navigation 4,5:1 erreicht", "wege": "Pille Creme #FCFAF5 mit Marke #02385C und Pfeilkreis; Signal #ED7F1A mit Schrift #1b1712", "auftritt": "Bild clip-path inset(98% 0 0 0) → 0 und scale 1.1 → 1, 1100 ms; Zeilen 900 ms, Versatz 80 ms, Start 200 ms; Nebenelemente 600 ms, 12 px", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)" } }, { "id": "split-randabfallend", "name": "Split, Foto bis an den Rand", "wann": "Werkstatt-, Team- oder Projektfoto bei Dienstleistern: handwerk-werkstatt-klartext, praxis-gesundheit-ruhig, pflege-dienst-naehe, kfz-werkstatt-autohaus, bestattung-wuerdig, luxus-manufaktur-stille, gastro-warm-appetitlich; mit Hochformat-Foto auch friseur-salon-handschrift.", "werte": { "raster": "Randspalten minmax(max(0px, Rand − Spalt), 1fr), dazu 12 × (1280px − 2 × Rand − 11 × Spalt) / 12; Text Spalte 1 bis 5, Foto ab Spalte 6 bis an den Bildschirmrand (etwa 40/60)", "foto": "Höhe 100svh, mindestens 560px, object-position 58% 62%; Bildunterschrift als Fläche unten links", "h1": "Special Gothic 700, min(clamp(2.25rem, 1.5rem + 3vw, 3.5rem), 14.5cqi), Zeilenhöhe 1.05", "wege": "„Anfrage stellen“ #FB6100 mit Schrift #1A1A1A, Radius 4px; „Anrufen“ als tel:-Link mit sichtbarer Nummer, Kontur mit Eckklammern 10 × 2 px", "auftritt": "Bild clip-path inset(0 0 0 98%) → 0, 700 ms, ohne Zoom; Zeilen 400 ms, Versatz 60 ms, Start 80 ms; Nebenelemente 240 ms, 8 px", "kurve": "cubic-bezier(0, 0, 0.38, 0.9)" } }, { "id": "inset-rahmen", "name": "Foto im Rahmen auf der Markenfarbe", "wann": "Ein starkes Hausfoto und eine Markenfarbe, die als Fläche trägt: boutique-hotel-gastgeber, eventlocation-hochzeit, gastro-warm-appetitlich, friseur-salon-handschrift. Ist die Bildzone unten unruhig, steht der Text auf einer Karte über der Rahmenkante.", "werte": { "rand": "clamp(24px, 2.8vw, 40px) rundum (Terreno 40 px gemessen), Radius 0", "markengrund": "#4D5443 (Schilf), Schrift #F3EEE7, 6,8:1", "kopf": "Navigation links, Wortmarke Newsreader Italic 300 2.1rem mittig, Telefon und Sprache rechts, mindestens 84px hoch", "karte": "Creme #FEF2E3, Breite min(32rem, 52%), überlappt die untere Rahmenkante um den halben Rand", "preis": "in der unteren Rahmenkante rechts, 0.75rem, Creme", "auftritt": "Bild clip-path inset(0 49% 0 49%) → 0 (Vorhang) und scale 1.08 → 1, 1200 ms; Karte 600 ms, 16 px ab 120 ms; Zeilen 1000 ms, Versatz 90 ms, Start 300 ms", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)" } }, { "id": "passepartout", "name": "Kleiner Abzug auf Fläche", "wann": "Nur kleine oder mittelmäßige Fotos, etwa vom Handy: weingut-hofladen-herkunft, Manufaktur, Hofladen, kleines Hotel oder Café. Der Grund kommt aus Material, Boden oder Markenfarbe.", "werte": { "abzug": "Spalte 8 bis 11 (etwa 30 % der Breite), höchstens 25rem, Format 4:5, Papierrand Kalk #F1ECE2 clamp(8px, .9vw, 14px)", "grund": "Schiefer #2F3236, Schrift Kalk #F1ECE2, 10,9:1", "chip": "DM Mono 500, .75rem, versal, +0.1em, Löss #E6DCCB, Pille, zur Hälfte über der Unterkante", "h1": "EB Garamond 400, clamp(2.75rem, 1.6rem + 4.2vw, 5.6rem), Zeilenhöhe 1, Lage kursiv", "kopf": "Hofladen-Status aus festen Zeiten (Intl.DateTimeFormat, Europe/Berlin)", "auftritt": "Bild clip-path inset(98% 0 0 0) → 0, 1200 ms; scale 1.08 → 1, 1600 ms; Zeilen 1000 ms, Versatz 90 ms, Start 260 ms; Chip ab 900 ms", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)" } }, { "id": "bildunterschrift", "name": "Bildunterschrift als Gestaltung", "wann": "Wo Ort und Herkunft zählen und das Foto unbeschnitten bleiben soll: architektur-ruhiges-raster, Gästehaus, Kultur, Immobilien mit Projektfotografie, weingut-hofladen-herkunft (dann in DM Mono). Mono nur bei Rezepten mit Mono-Akzent (Leitfaden A4).", "werte": { "bild": "3:2 unbeschnitten, Spalte 5 bis 12, Breite min(100%, (100svh − 290px) × 1.5)", "bildunterschrift": "figcaption in Spalte 1 bis 4 an der Bildunterkante: „Fig. 1 · Ort · Jahr“ Hanken Grotesk 500 .75rem versal +0.08em mit Haarlinie bis zum Bild, Titel clamp(1.125rem, .9rem + .5vw, 1.375rem)", "h1": "Hanken Grotesk 470, clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), Zeilenhöhe 1.08, unter dem Bild", "wege": "„Projekte“ als Textlink mit Pfeil, „Kontakt“ im Kopf", "auftritt": "Bild clip-path inset(0 0 98% 0) → 0, 1000 ms, ohne Zoom; Haarlinie scaleX 0 → 1, 700 ms ab 700 ms; Zeilen 700 ms, Versatz 60 ms, Start 350 ms", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)" } } ] } }