{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "foto-hero-wortmarke",
 "name": "Foto-Hero mit Wortmarke",
 "name_en": "Photo hero with full-width wordmark",
 "kurz": "Der Name des Hauses läuft randlos über die volle Breite und bildet mit dem Foto einen Block: als Band darüber, riesig an der Bildkante angeschnitten oder über einem Daumenkino, das die Maus blättert.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 5,
 "stimmung": [
  "editorial",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "editorial",
  "warm",
  "laut"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "canvas",
  "pointer-events",
  "container-queries"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Name und Foto bilden einen Block. Der Name des Hauses läuft als Wortmarke über die volle Breite, randlos eingepasst wie beim Schrift-Hero. Das Foto hängt direkt darunter als breites Band (gestapelt) oder die Wortmarke steht riesig und weiß an der Unterkante eines dunklen Vollbilds und wird dort angeschnitten (im Bild). In der dritten Form blättert die Zeigerbewegung durch vier bis sechs gestapelte Vollbilder hinter der Wortmarke (Daumenkino). Dazu kommen nur ein Satz, ein Weg (Buchen, Tisch reservieren) und bei der lauten Form eine Leistungszeile aus drei Wörtern mit langen Haarlinien.",
  "warum_es_wirkt": "Kleine Häuser leben von ihrem Namen. Steht er über die ganze Breite, wird er zum Logo, zur Überschrift und zum Rahmen des Fotos zugleich. Das Foto zeigt in einer Sekunde, wo man ist; die Wortmarke sagt, wie das Haus heißt, ohne Kopfzeile und Slogan. Weil Name und Bild ein Block sind, wirkt der Hero gebaut und nicht aus Vorlagen zusammengesetzt.",
  "wann_einsetzen": "Pension, Ferienhaus, Café, Salon, Weingut und Gästehaus mit kurzem, einprägsamem Namen (gestapelt). Bar, Club, Musikbühne, Fitness oder Kreativstudio mit starkem, dunklem Foto (im Bild). Das Daumenkino nur für Bar, Club, Musik oder Kreativstudio und nur am Desktop.",
  "wann_nicht": "Bei langen Namen oder Namen aus mehreren Wörtern: auf dem Telefon wird die Wortmarke zu klein. Ohne brauchbares Foto (dann schrift-hero-viewportbreit). Im Bild nur bei dunklem, ruhigem Foto, sonst eine deckende Fläche hinter die Schrift. Das Daumenkino nie als einzige Möglichkeit, Bilder zu sehen, und nie auf Seiten, auf denen Gäste schnell Zeiten oder Preise suchen.",
  "varianten": [
   "gestapelt: Satz oben links in Textgröße, Buchen oben rechts, darunter die Wortmarke über die volle Breite, direkt darunter das Foto als Band (Kereliott)",
   "im-bild: dunkles Vollbild, Wortmarke weiß an der Unterkante angeschnitten, Leistungszeile aus drei Wörtern mit langen Haarlinien in der Bildmitte, Tisch reservieren oben rechts (Maloot)",
   "daumenkino: wie im-bild, dahinter 4 bis 6 gestapelte Vollbilder; je 150 bis 250 px Zeigerweg wird das nächste aktiv, nur bei (hover: hover) and (pointer: fine) (Maloot)"
  ],
  "umsetzung": "Wortmarke als echtes <h1> (aria-label mit dem Namen, Buchstaben aria-hidden, wenn sie einzeln einlaufen). Einpassen wie bei schrift-hero-viewportbreit: Breite bei 100px messen, Seitenlinien von erstem und letztem Zeichen per Canvas measureText (actualBoundingBox) abziehen, font-size = Platz / (Breite in em − Seitenlinien); bei document.fonts.ready und per ResizeObserver neu messen, CSS-Rückfall in vw. Gestapelt: Kopfzeile mit Satz und Weg, darunter Wortmarke mit line-height 0.8 und negativem margin-bottom (Unterlänge abziehen), direkt darunter <picture> mit object-fit: cover, Band füllt den Rest des Viewports (min. 38svh), mobil Hochformat. Im Bild: Hero 100svh mit overflow: clip, Wortmarke absolut unten mit translateY um etwa 18 % ihrer Höhe nach unten (angeschnitten), Leistungszeile als Liste in einem Flex-Container mit Haarlinien (flex: 1, 1 px) zwischen den Wörtern. Daumenkino: Bilder gestapelt (position: absolute, inset: 0), nur eines mit .aktiv; pointermove summiert Math.hypot(dx, dy) und schaltet nach einer Schwelle von etwa 200 px weiter. Nur unter matchMedia('(hover: hover) and (pointer: fine)') und ohne reduzierte Bewegung, sonst steht das erste Bild. Bilder ab dem zweiten mit loading=\"lazy\" und decoding=\"async\", das erste mit fetchpriority=\"high\".",
  "mobil": "Gestapelt: Satz und Weg oben, Wortmarke randlos (bei 390 px etwa 80 bis 95 px Schriftgröße für sieben Buchstaben), Foto als Hochformat darunter. Im Bild: Wortmarke bleibt an der Unterkante, Leistungszeile bricht in drei Zeilen um, Knopf als volle Breite unten. Daumenkino: auf Touch aus, es steht das erste Bild.",
  "reduzierte_bewegung": "Kein Einlaufen der Buchstaben, Foto steht. Daumenkino aus, es steht das erste Bild.",
  "barrierefreiheit": "Ein echtes <h1> mit dem Namen, gesplittete Buchstaben aria-hidden. Weiße Schrift nur auf dunklem Foto (4,5:1 gegen die hellste Stelle der Bildzone prüfen), sonst Verlauf oder deckende Fläche unten. Alt-Text beschreibt das Foto, nicht den Namen. Das Daumenkino ist Schmuck: Bilder ab dem zweiten mit alt=\"\" und die Inhalte dazu stehen weiter unten auf der Seite; es läuft nicht von selbst und braucht deshalb keinen Pause-Knopf. Bei 200 % Zoom und 320 px darf die Wortmarke nicht abgeschnitten werden (Fit per ResizeObserver)."
 },
 "messwerte": {
  "easing": "Daumenkino: opacity 0.3s ease (Maloot, gemessen); Auftritt aus dem Rezept",
  "dauer_ms": "300 Bildwechsel (Maloot); Auftritt 1000 bis 1200",
  "stagger_ms": "60 je Buchstabe beim Einlaufen",
  "distanz": "Daumenkino: etwa 150 bis 250 px Zeigerweg je Bild (Schätzung aus der Live-Prüfung)",
  "sonstiges": "Maloot: 5 Vollbilder 1425 × 1000, Klasse active, Menü 0.45s cubic-bezier(0.23, 1, 0.32, 1). Wortmarke line-height 0.8 bis 0.9, Laufweite leicht negativ.",
  "herkunft": "beobachtet",
  "quelle": "Live-Messung 03.11.2026 auf maloothifibar.com und kereliott.com (Varianten-Recherche Hero/Slider)"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.1,
   0.25,
   1
  ],
  "css": "cubic-bezier(0.25, 0.1, 0.25, 1)",
  "name": "ease",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Kereliott",
   "url": "https://kereliott.com/de/",
   "auszeichnung": "One Page Love 14.11.2025 („Viewport Sized Typography“)",
   "beobachtung": "Live geprüft 03.11.2026 (Viewport 1440 × 1000): Satz oben links, „Booking“ oben rechts, darunter die Serif-Wortmarke über die ganze Breite und direkt darunter das Hausfoto.",
   "art": "website"
  },
  {
   "seite": "Maloot Hifi Bar",
   "url": "https://www.maloothifibar.com/",
   "auszeichnung": "Land-book 29.04.2026",
   "beobachtung": "Live geprüft und gemessen 03.11.2026: „Hifi Bar · Cocktails · Vinyls“ als Zeile, verbunden durch lange Haarlinien, MALOOT riesig unten, Knopf „Book a table“ oben rechts. Fünf .hero_img mit gleicher Größe 1425 × 1000, die Klasse active wechselt bei Zeigerbewegung, transition 0.3s ease. Menü 0.45s cubic-bezier(0.23, 1, 0.32, 1).",
   "art": "website"
  },
  {
   "seite": "Combo (Ostello)",
   "url": "https://thisiscombo.com/",
   "auszeichnung": "Land-book 14.04.2026",
   "beobachtung": "Galerie-Screenshot: Wortmarke oben, Foto darunter, farbiges Band mit Satz.",
   "art": "website"
  },
  {
   "seite": "Infinite Machine",
   "url": "https://www.infinitemachine.com/",
   "auszeichnung": "Land-book 25.05.2026",
   "beobachtung": "Galerie-Screenshot: Wortmarke und Foto als Block (gestapelt).",
   "art": "website"
  },
  {
   "seite": "Diamond Rose Sanctuary",
   "url": "https://diamondrosesanctuary.com/",
   "auszeichnung": "Land-book 22.05.2026",
   "beobachtung": "Galerie-Screenshot: senkrechte Wortmarke am rechten Bildrand, Abwandlung von im-bild.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: TextMetrics (actualBoundingBoxLeft/Right)",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics"
  },
  {
   "titel": "MDN: ResizeObserver",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver"
  },
  {
   "titel": "MDN: @media pointer",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer"
  }
 ],
 "kombinierbar_mit": [
  "foto-hero",
  "schrift-hero-viewportbreit",
  "intro-ohne-wartezeit",
  "einmal-intro-session",
  "split-mask-reveal",
  "termin-buchung-zwei-klick",
  "buchungsleiste-datumsbereich",
  "live-uhr-und-standort",
  "mobile-bottom-navigation"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Varianten-Recherche Hero/Slider 03.11.2026"
  ],
  "pruefnotizen": [
   "Varianten-Recherche Hero/Slider 03.11.2026, Teil 1, Varianten 4 (wortmarke-gestapelt), 5 (wortmarke-im-bild) und 12 (daumenkino) als eigenes Muster neben foto-hero.",
   "Kereliott und Maloot live geprüft (03.11.2026, 1440 × 1000). Combo, Infinite Machine und Diamond Rose Sanctuary nur als Galerie-Screenshot.",
   "Die Schwelle beim Maloot-Daumenkino (Zeigerweg je Bild) ist geschätzt, nicht gemessen. Gemessen sind Anzahl, Größe und Übergang.",
   "Abgrenzung: schrift-hero-viewportbreit hat kein Foto; bild-trail-cursor legt Spuren, das Daumenkino tauscht nur ein Vollbild.",
   "Ergänzt foto-hero (Varianten randlos-unten-links, split-randabfallend, inset-rahmen, passepartout, bildunterschrift): dort die Grundkompositionen, hier die Formen mit Wortmarke bzw. mit Anhängsel am Bild."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Name des Hauses läuft randlos über die volle Breite und bildet mit dem Foto einen Block: als Band darüber, riesig an der Bildkante angeschnitten oder über einem Daumenkino, das die Maus blättert.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "einpassen": "Breite bei 100px messen (Element mit width: max-content), Seitenlinien von erstem und letztem Zeichen per Canvas measureText (actualBoundingBoxLeft/Right) abziehen, Paar-Kerning je Buchstabenpaar als margin-right zurückgeben; font-size = Platz / (Breite in em − Seitenlinien); bei document.fonts.ready und per ResizeObserver neu",
   "zeilenbox": "line-height 1, margin-top und margin-bottom negativ aus fontBoundingBox und actualBoundingBox (Box sitzt auf der Tinte), Gestapelt +0,015em / −0,245em, Im Bild −0,07em / −0,14em",
   "ergebnis": "Gestapelt 29,2vw (1280 und 1440 px), 28,6vw bei 390 px; Im Bild 28,7vw (1280 px), 28,4vw (390 px)",
   "maske": "je Buchstabe clip-path: inset(-.4em -.2em 0 -.2em)",
   "gestapelt_schrift": "Newsreader 400, opsz 72, Laufweite 0",
   "gestapelt_band": "flex: 1 0 auto, min-height max(38svh, 260px), Rand clamp(18px, 3.6vw, 56px), object-position 50% 55%; Telefon aspect-ratio 4 / 5 mit Hochformat-Quelle",
   "gestapelt_auftritt": "Buchstaben translateY(105%) → 0, 1200 ms cubic-bezier(0.37, 0, 0.63, 1), Versatz 120 ms; Band clip-path inset(0 0 100% 0) → inset(0) und Bild scale 1.06 → 1, 1400 ms, 350 ms Verzögerung; Kopfzeile opacity und translateY 16px, 1200 ms, 500 ms Verzögerung",
   "im_bild_schrift": "Young Serif 400, Laufweite −0,01em, Farbe #F3EDE2",
   "anschnitt": "16 % der Tintenhöhe unter der Bildkante (translateY in px, aus der Messung)",
   "leistungszeile": "Commissioner 600, 0.8125rem, FLAR 100, Laufweite .2em, versal; Haarlinien flex: 1 1 0, 1px rgba(243, 237, 226, .55); Telefon senkrecht 1 × 22px",
   "lesbarkeit": "Verlauf über dem Foto: oben rgba(10, 8, 6, .62) → 0 bei 22 %, unten ab 45 % bis .9; dazu radial-gradient rgba(10, 8, 6, .62) hinter der Leistungszeile",
   "im_bild_auftritt": "Buchstaben translateY(70%) → 0, 1200 ms cubic-bezier(0.16, 1, 0.3, 1), Versatz 100 ms; Foto filter brightness(.15) → 1, 1200 ms; Haarlinien scaleX 0 → 1, 1000 ms, 400 ms + 100 ms je Linie",
   "daumenkino": "4 Vollbilder 1600 × 1000 gestapelt, Wechsel nach 200 px summiertem Zeigerweg (Math.hypot je pointermove, je Ereignis höchstens 200), opacity .3s ease (gemessen bei Maloot); nur (hover: hover) and (pointer: fine) und ohne reduzierte Bewegung; Zähler „02 / 04“ und Bildtitel über der Wortmarke",
   "ui_ms": "220 cubic-bezier(0.16, 1, 0.3, 1) für Knöpfe",
   "bilder": "medien/foto-hero-wortmarke-tresen, -plattenspieler, -glaeser, -lautsprecher (three.js, je 40 bis 68 KB); Gestapelt hotel-sauna.webp",
   "vorfuehrung": "Gestapelt und Im Bild: Auftritt alle 5,2 bzw. 4,6 s; Daumenkino: gedachter Zeiger auf einer Lissajous-Bahn (ca. 320 px/s), blättert alle 0,6 s"
  },
  "ausloeser": "laden",
  "touch": "Gestapelt und Im Bild verhalten sich wie am Desktop. Das Daumenkino ist auf Touch aus: es steht das erste Bild, Zähler und Hinweis „Maus bewegen“ entfallen. Im Bild bricht die Leistungszeile in drei Zeilen mit senkrechten Haarlinien um, die Navigation weicht dem Namen „Rille · Leipzig“, die Adresse rutscht in eine eigene Zeile.",
  "reduziert": "Kein Einlaufen der Buchstaben, Band und Foto stehen sofort, keine Haarlinien-Bewegung. Das Daumenkino bleibt beim ersten Bild, auch in der Vorführung (kein gedachter Zeiger).",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Zwei Welten. Gestapelt: Rezept boutique-hotel-gastgeber (Variante Ferienwohnung/Pension), erfundene Pension Kiebitz in Krakow am See, Newsreader und Mona Sans, Sand #F3EEE7, Holz #6E5A47, Foto hotel-sauna.webp. Im Bild und Daumenkino: Rezept gastro-warm-appetitlich (Bar, Schrift-Alternative young-serif laut Rezept), erfundene Hifi-Bar Rille in Leipzig-Lindenau (Karl-Heine-Straße), Young Serif und Commissioner. Vier Bar-Bilder neu mit three.js gerendert (Akkumulations-Renderer aus werkzeug/fundus/bilder, Motive in /home/claude/werk/fh-bilder/motive: Tresen, Plattenspieler, Gläser, Lautsprecher mit Röhrenverstärker), je 1600 × 1000 als WebP 40 bis 68 KB. Einpassen nach schrift-hero-viewportbreit, zusätzlich Zuschnitt der Zeilenbox auf die Tinte, damit die Wortmarke bündig auf dem Foto sitzt bzw. genau um den Anschnitt unter die Kante rutscht. Daumenkino per Playwright mit echter Maus geprüft (Zeigerweg summiert, Wechsel alle 200 px). Pult unten links, startet eingeklappt (?v=gestapelt|im-bild|daumenkino). Zugang: ohne Befund außer Text über Bild (von Hand: Leistungszeile mit Verlauf und Schatten auf dunklem Foto). Selbsturteil 4.",
  "varianten": [
   {
    "id": "gestapelt",
    "name": "Wortmarke über dem Foto",
    "wann": "Pension, Ferienhaus, Café, Salon, Weingut mit kurzem Namen: Satz oben links, Buchen oben rechts, Name randlos, darunter das Foto als Band (Kereliott).",
    "werte": {
     "rezept": "boutique-hotel-gastgeber (Ferienwohnung/Pension)",
     "schrift": "Newsreader 400, opsz 72, 29,2vw gemessen",
     "band": "direkt unter der Tinte, füllt den Rest des Viewports, min. max(38svh, 260px)",
     "bewegung": "1200 ms cubic-bezier(0.37, 0, 0.63, 1), Versatz 120 ms; Band clip-path 1400 ms"
    }
   },
   {
    "id": "im-bild",
    "name": "Wortmarke im Bild",
    "wann": "Bar, Club, Musikbühne, Fitness, Kreativstudio mit dunklem, ruhigem Foto: Name riesig an der Unterkante angeschnitten, Leistungszeile mit Haarlinien in der Mitte (Maloot).",
    "werte": {
     "rezept": "gastro-warm-appetitlich (Bar)",
     "schrift": "Young Serif 400, 28,7vw gemessen, #F3EDE2",
     "anschnitt": "16 % der Tintenhöhe",
     "zeile": "drei Wörter, Haarlinien flex: 1, 1px",
     "bewegung": "1200 ms cubic-bezier(0.16, 1, 0.3, 1), Versatz 100 ms; Foto brightness .15 → 1"
    }
   },
   {
    "id": "daumenkino",
    "name": "Daumenkino",
    "wann": "Nur Bar, Club, Musik oder Kreativstudio und nur am Desktop: die Maus blättert vier bis sechs Vollbilder hinter der Wortmarke (Maloot).",
    "werte": {
     "rezept": "gastro-warm-appetitlich (Bar)",
     "bilder": 4,
     "schwelle_px": 200,
     "wechsel": "opacity .3s ease (gemessen bei Maloot)",
     "bedingung": "(hover: hover) and (pointer: fine), nicht reduziert"
    }
   }
  ]
 }
}