{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "foto-hero-mit-leiste", "name": "Foto-Hero mit Leiste, Karte oder Weiche", "name_en": "Photo hero with booking bar, info card or location switch", "kurz": "Am Foto hängt schon die erste Handlung: eine Buchungsleiste im Bild, eine Karte mit dem echten Öffnungsstatus oder zwei bis drei gleichwertige Wege zu den Filialen.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 7, "stimmung": [ "ruhig", "präzise", "warm" ], "stimmung_roh": [ "warm", "ruhig", "präzise" ], "technik": [ "css", "vanilla-js", "dialog", "form", "form-validation", "intl-datetimeformat", "container-queries" ], "technik_gruppen": [ "css", "js" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Ein Foto-Hero, an dem die erste Handlung schon hängt. Leiste: Buchungs- oder Anfrageleiste im unteren Bilddrittel über 10 bis 12 Spalten, das Foto mit sichtbarem Rand auf Markengrund (Terreno). Karte: eine deckende Karte unten links im Bild mit dem echten Öffnungsstatus, „Jetzt geöffnet, Küche bis 22 Uhr“ (Le Petit Bleu). Weiche: zwei bis drei gleichwertige Wege zu Filialen oder Häusern mit Ortsname und Status, ohne Rangfolge und ohne Karussell (Union Boulangerie). Leiste und Karte fallen auf dem Telefon in den Fluss unter dem Bild; die Leiste öffnet sich dort als Dialog.", "warum_es_wirkt": "Gäste kommen mit einer Frage: Ist ein Zimmer frei? Hat das Lokal jetzt offen? Welche Filiale ist meine? Hängt die Antwort am Foto, ist sie im ersten Bildschirm, ohne dass das Bild an Wirkung verliert. Der Rand um das Foto, die deckende Karte und die gleich großen Wege halten Bild und Bedienung auseinander, darum bleibt beides lesbar.", "wann_einsetzen": "Leiste: Hotel, Pension, Ferienwohnung (Anreise, Abreise, Gäste) und Eventlocation (Wunschdatum, Anlass, Gäste). Karte: Restaurant, Café, Bar (Öffnungsstatus), Handwerk (aktuelles Projekt), Kultur (laufende Ausstellung), Praxis (Urlaub, Vertretung). Weiche: Bäckerei oder Café mit Filialen, Gastro mit zwei Häusern, Hotelgruppe, Praxis mit zwei Standorten.", "wann_nicht": "Leiste nicht für Tische (Datum, Uhrzeit, Personen gehören in termin-buchung-zwei-klick) und nicht ohne Buchungssystem oder gepflegte Belegung. Karte nie dekorativ: ohne echte Zeiten oder Daten keine Karte. Weiche nicht ab fünf Standorten (dann standortfinder-liste) und nie als Karussell oder mit hervorgehobenem Haupthaus. Auf dem Telefon keine zweite feste Leiste über einer unteren Navigation.", "varianten": [ "leiste: Foto mit 40 px Rand auf Markengrund, Buchungs- oder Anfrageleiste im unteren Bilddrittel über 10 bis 12 Spalten; unter 40rem ein Knopf, der die Leiste im nativen dialog öffnet (Terreno)", "karte: deckende Karte unten links im Bild, höchstens 22rem, mit echtem Öffnungsstatus nach oeffnungszeiten-status (Europe/Berlin); mobil unter dem Bild (Le Petit Bleu, Goodman Gallery)", "weiche: zwei bis drei gleichwertige Wege mit Ortsname, Adresse und Status als Band am Bildrand, keine Rangfolge, kein Karussell (Union Boulangerie, The Devonshire)" ], "umsetzung": "Ein Foto-Hero (, LCP-Bild mit fetchpriority=\"high\", feste aspect-ratio), daran ein eigenes Element. Leiste:
mit Anreise, Abreise (type=date mit min), Gästen (Erwachsene, Kinder) und Aktionscode; absolut im unteren Bilddrittel über 10 bis 12 Rasterspalten, das Foto mit 24 bis 40 px Rand auf dem Markengrund. Prüfen nach dem Absenden: Abreise nach Anreise, Mindestaufenthalt, Code; Fehler am Feld (aria-invalid, aria-describedby) und gesammelt in einer role=\"alert\"-Zeile. Erst „Verfügbarkeit prüfen“ zeigt Nächte und Richtpreis, erst der zweite Klick übergibt per URL an das Buchungssystem. Den vollen Kalender mit Belegung liefert buchungsleiste-datumsbereich. Unter 40rem steht statt der Leiste ein Knopf mit der Zusammenfassung; er hängt dasselbe Formular in einen (showModal) und beim Schließen zurück, die Eingaben bleiben erhalten. Karte: