{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "karte-zwei-klick",
 "name": "Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)",
 "name_en": "Two-click map embed",
 "kurz": "Kartenbild mit Einwilligungsleiste: Die Anfahrt steht sofort da, die interaktive Karte lädt erst nach Klick und nennt vorher den Anbieter.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "unbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "sachlich",
  "vertrauenswürdig"
 ],
 "technik": [
  "html",
  "css",
  "js"
 ],
 "technik_gruppen": [
  "css",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Statt eines Karten-iframes steht ein selbst gehostetes Kartenbild oder eine gezeichnete Lageskizze. Daneben stehen Adresse, Sprech- oder Öffnungszeiten und ein Link „Route planen“, der die Karten-App öffnet. Erst ein Klick auf „Karte laden“ setzt das iframe ein. Der Hinweis daneben nennt vorher den Anbieter. Die Adresse steht zusätzlich als Text und als strukturierte Daten (schema.org LocalBusiness).",
  "warum_es_wirkt": "Lokale Betriebe brauchen die Anfahrt. Eingebettete Karten übertragen aber schon vor jeder Einwilligung Daten an den Anbieter und laden viel JavaScript. Ein statisches Bild mit Routen-Link reicht den meisten Besuchern und kostet fast nichts. Wer mehr braucht, holt sich die interaktive Karte mit einem Klick.",
  "wann_einsetzen": "Überall mit Ortsbezug: Praxen, Restaurants, Handwerk, Kanzleien, Boutiquen, Hotels, Vereine mit Treffpunkten. Die Variante Social Feed passt zu Gastronomie, Mode, Fotografie, Friseur und Fitness, wenn das Profil gepflegt wird und auf die Seite soll.",
  "wann_nicht": "Bei rein digitalen Angeboten. Nie als einzige Ortsangabe: Die Adresse gehört immer auch als Text auf die Seite.",
  "varianten": [
   "Statisches Kartenbild mit Hinweis und Button „Karte laden“",
   "Lageskizze als SVG im Markenstil mit Routen-Link",
   "Mehrere Standorte als Liste mit je eigenem Routen-Link",
   "Social Feed: selbst gehostete Auswahl von Beiträgen mit Link zum Profil, der Live-Feed des Anbieters lädt erst per 2-Klick"
  ],
  "umsetzung": "Kartenbild als AVIF oder WebP mit gesetztem width und height, damit nichts springt. Routen-Link als Karten-URL mit Zielparameter (destination) oder als geo:-Link. Der Button ersetzt den Platzhalter durch das iframe mit loading=\"lazy\" und title. Bei OpenStreetMap-Kacheln steht „© OpenStreetMap-Mitwirkende“ am Bild. Die Einwilligung mit dem Consent-Banner abgleichen. Gegen Sprünge beim Nachladen hilft neben der festen Höhe die Scroll-Verankerung (overflow-anchor, seit Safari 27 Baseline): Wächst ein Platzhalter oder ein spät geladener Block über dem sichtbaren Bereich, hält der Browser die Leseposition; overflow-anchor: none nur dort setzen, wo ein Element bewusst nicht als Anker dienen soll. Social Feeds genauso bauen: eine Auswahl von Beiträgen (Bild, Datum, Text) liegt auf dem eigenen Server, jeder Beitrag verlinkt auf das Profil, das Script oder iframe des Anbieters kommt erst nach Klick.",
  "mobil": "Der Routen-Link ist mobil wichtiger als die eingebettete Karte. Er gehört groß unter die Adresse. Der Button muss groß genug für Touch sein.",
  "reduzierte_bewegung": "Kein Effekt nötig. Wechsel zwischen Platzhalter und Karte geschehen sofort.",
  "barrierefreiheit": "Adresse immer als Text. Das Kartenbild bekommt einen sinnvollen alt-Text, der die Lage beschreibt. Das iframe bekommt einen title."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Kartenbild mit festen Maßen (kein Layout-Sprung); iframe erst nach Klick",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [],
 "tutorials": [],
 "kombinierbar_mit": [
  "consent-banner-gestaltet",
  "studio-visitenkarte-footer",
  "live-uhr-und-standort",
  "termin-buchung-zwei-klick"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo"
 },
 "herkunft": {
  "quelldateien": [
   "r3-ad-korrekturen"
  ],
  "pruefnotizen": [
   "Runde 3 (31.10.2026): neu angelegt nach der Art-Director-Prüfung der 18 Rezepte – Anfahrt und Standorte standen in 7 Rezepten ohne passendes Muster (meist als studio-visitenkarte-footer). Noch ohne Website-Beleg; Messwerte typisch."
  ],
  "prioritaet_hinweis": "Grundbaustein für KMU-Templates (Lücke aus der Art-Director-Prüfung der Rezepte, Runde 3), kein Trendmuster; Website-Belege fehlen noch."
 },
 "bau": {
  "status": "fertig",
  "kurz": "Kartenbild mit Einwilligungsleiste: Die Anfahrt steht sofort da, die interaktive Karte lädt erst nach Klick und nennt vorher den Anbieter.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing_ui": "cubic-bezier(0.2, 0, 0.38, 0.9)",
   "dauer_ui_ms": 200,
   "dauer_schalter_ms": 150,
   "easing_ueberblendung": "cubic-bezier(0.37, 0, 0.63, 1)",
   "dauer_ueberblendung_ms": 700,
   "ueberblendung": "Platzhalter → iframe und Variantenwechsel per opacity",
   "lade_simulation_ms": 520,
   "route_zeichnen": "800 ms, Verzögerung 350 ms, cubic-bezier(0.37, 0, 0.63, 1), Maske stroke-dashoffset 1 → 0 (pathLength 1)",
   "route_strich": "5 px, stroke-dasharray .1 13, runde Enden (Punktlinie)",
   "textwechsel": "400 ms, 8 px nach oben, cubic-bezier(0.2, 0, 0.38, 0.9)",
   "zoom": "Faktor 1.35, Bereich 1 bis 2.4, 250 ms cubic-bezier(0.2, 0, 0.38, 0.9)",
   "buehne": "aspect-ratio 6/5 (Desktop), 4/3 (bis 900 px), 1/1 (bis 640 px), Radius 18 px",
   "kartenbild": "1200 × 900 (feste Maße, kein Layout-Sprung)",
   "einwilligung": "Leiste unten in der Bühne, Abstand 10–16 px, Radius 14 px, Button-Spalte 196 px",
   "hinweis_route_ms": 2600,
   "vorfuehrung_schleife_ms": 16200,
   "farben": "Grund #f5f7f7, Marke #005450, Text #363b3b, Sekundär #596666, Akzent #ffc776",
   "schrift": "Hedvig Letters Serif (opsz 24) für Überschriften, Google Sans Flex 17 px / 1.6 für Text, Geist Mono 11 px / 0.14em für Labels"
  },
  "ausloeser": "klick",
  "touch": "Bühne quadratisch, Einwilligungsleiste ohne Merk-Option, großer Button „Route planen“ und untere Leiste (Anrufen, Termin, Route). Die geladene Karte lässt die Seite weiter scrollen und wird erst nach Antippen verschiebbar.",
  "reduziert": "Keine Überblendung, keine sich zeichnende Route, kein drehender Ladekreisel. Platzhalter, Karte und Varianten wechseln sofort. Die Vorführung springt ohne gleitenden Zeiger von Schritt zu Schritt.",
  "korrekturen": {
   "beschreibung": "Statt eines Karten-iframes steht ein selbst gehostetes Kartenbild oder eine gezeichnete Lageskizze. Daneben stehen Adresse, Sprech- oder Öffnungszeiten und ein Link „Route planen“, der die Karten-App öffnet. Erst ein Klick auf „Karte laden“ setzt das iframe ein. Der Hinweis daneben nennt vorher den Anbieter. Die Adresse steht zusätzlich als Text und als strukturierte Daten (schema.org LocalBusiness).",
   "warum_es_wirkt": "Lokale Betriebe brauchen die Anfahrt. Eingebettete Karten übertragen aber schon vor jeder Einwilligung Daten an den Anbieter und laden viel JavaScript. Ein statisches Bild mit Routen-Link reicht den meisten Besuchern und kostet fast nichts. Wer mehr braucht, holt sich die interaktive Karte mit einem Klick.",
   "wann_einsetzen": "Überall mit Ortsbezug: Praxen, Restaurants, Handwerk, Kanzleien, Boutiquen, Hotels, Vereine mit Treffpunkten. Die Variante Social Feed passt zu Gastronomie, Mode, Fotografie, Friseur und Fitness, wenn das Profil gepflegt wird und auf die Seite soll.",
   "wann_nicht": "Bei rein digitalen Angeboten. Nie als einzige Ortsangabe: Die Adresse gehört immer auch als Text auf die Seite.",
   "varianten": [
    "Statisches Kartenbild mit Hinweis und Button „Karte laden“",
    "Lageskizze als SVG im Markenstil mit Routen-Link",
    "Mehrere Standorte als Liste mit je eigenem Routen-Link",
    "Social Feed: selbst gehostete Auswahl von Beiträgen mit Link zum Profil, der Live-Feed des Anbieters lädt erst per 2-Klick"
   ],
   "umsetzung": "Kartenbild als AVIF oder WebP mit gesetztem width und height, damit nichts springt. Routen-Link als Karten-URL mit Zielparameter (destination) oder als geo:-Link. Der Button ersetzt den Platzhalter durch das iframe mit loading=\"lazy\" und title. Bei OpenStreetMap-Kacheln steht „© OpenStreetMap-Mitwirkende“ am Bild. Die Einwilligung mit dem Consent-Banner abgleichen. Gegen Sprünge beim Nachladen hilft neben der festen Höhe die Scroll-Verankerung (overflow-anchor, seit Safari 27 Baseline): Wächst ein Platzhalter oder ein spät geladener Block über dem sichtbaren Bereich, hält der Browser die Leseposition; overflow-anchor: none nur dort setzen, wo ein Element bewusst nicht als Anker dienen soll. Social Feeds genauso bauen: eine Auswahl von Beiträgen (Bild, Datum, Text) liegt auf dem eigenen Server, jeder Beitrag verlinkt auf das Profil, das Script oder iframe des Anbieters kommt erst nach Klick.",
   "mobil": "Der Routen-Link ist mobil wichtiger als die eingebettete Karte. Er gehört groß unter die Adresse. Der Button muss groß genug für Touch sein.",
   "reduzierte_bewegung": "Kein Effekt nötig. Wechsel zwischen Platzhalter und Karte geschehen sofort.",
   "barrierefreiheit": "Adresse immer als Text. Das Kartenbild bekommt einen sinnvollen alt-Text, der die Lage beschreibt. Das iframe bekommt einen title."
  },
  "geprueft": "02.11.2026",
  "notiz": "Physiotherapie „Lendwerk“ in Graz-Lend (Rezept praxis-gesundheit-ruhig, Hedvig Letters Serif und Google Sans Flex). Alle Karten sind eigene SVG-Zeichnungen. Das „iframe“ ist nachgebildet (verschieben, zoomen, „Karte entfernen“); im Einsatz steht dort das echte iframe des Anbieters. Ein Status-Chip zeigt, ob Daten an Dritte gehen. Routen-Links sind geo:-Links, die Demo zeigt statt des Sprungs einen Hinweis. schema.org Physiotherapy als JSON-LD im Kopf. Mobil: Karte direkt unter der Überschrift, untere Leiste Anrufen/Termin/Route, iframe-Karte erst nach Antippen bedienbar. Google Sans Flex nur mit wght-Achse: ROND aus dem Rezept bräuchte die latin-full-Datei (1,4 MB), daher bewusst weggelassen. Vorführung: Karte laden, verschieben, zoomen, Lageskizze, Route planen, Standortwechsel (Schleife 16,2 s). AD-Review 01.11.2026: Note 4. Korrektur 02.11.2026: Variante Social Feed (?v=social) mit acht selbst gehosteten Beiträgen (zwei Bilder aus medien, sonst eigene CSS/SVG-Karten), nachgebildeter Live-Einbettung erst per Klick und Status-Chip; Umschalter schreibt ?v= in die URL. Satz zu overflow-anchor in umsetzung. Knöpfe im Kontrastmodus mit Rahmen.",
  "varianten": [
   {
    "id": "bild",
    "name": "Kartenbild mit 2-Klick",
    "knopf": "Kartenbild",
    "wann": "Ein Standort mit Ortsbezug (Praxis, Restaurant, Handwerk): Kartenbild sofort, interaktive Karte erst nach Klick.",
    "werte": {
     "buehne": "aspect-ratio 6/5, 4/3 bis 900 px, 1/1 bis 640 px",
     "ueberblendung": "700 ms cubic-bezier(0.37, 0, 0.63, 1)",
     "lade_simulation_ms": 520
    }
   },
   {
    "id": "skizze",
    "name": "Lageskizze",
    "knopf": "Lageskizze",
    "wann": "Wenn der Weg wichtiger ist als die Karte (Hinterhof, Haltestelle, Eingang): eigene SVG-Skizze ohne Dritte.",
    "werte": {
     "route_zeichnen": "800 ms, Verzögerung 350 ms, cubic-bezier(0.37, 0, 0.63, 1)",
     "dritte": "keine"
    }
   },
   {
    "id": "standorte",
    "name": "Mehrere Standorte",
    "knopf": "Standorte",
    "wann": "Filialen oder Praxen an mehreren Orten: Liste mit je eigenem Routen-Link und Übersichtsskizze.",
    "werte": {
     "standorte": 3,
     "textwechsel": "400 ms, 8 px nach oben, cubic-bezier(0.2, 0, 0.38, 0.9)"
    }
   },
   {
    "id": "social",
    "name": "Social Feed",
    "knopf": "Social Feed",
    "wann": "Gastronomie, Mode, Fotografie, Friseur oder Fitness mit gepflegtem Instagram-Profil: Auswahl selbst gehostet mit Link zum Profil, Live-Feed erst nach Klick.",
    "werte": {
     "auswahl": "8 Beiträge (Desktop 4 × 2, bis 640 px 3 × 2), Bild und Text auf dem eigenen Server, jeder Beitrag verlinkt das Profil",
     "raster_gap_px": 8,
     "kachel_radius_px": 10,
     "bildtext": "Hover und Fokus: opacity und translate 6 px → 0, 200 ms cubic-bezier(0.2, 0, 0.38, 0.9); Touch ohne Bildtext",
     "bild_hover": "scale 1.04, 700 ms cubic-bezier(0.37, 0, 0.63, 1)",
     "live_feed": "erst nach Klick, Lade-Simulation 520 ms, Überblendung 700 ms; Status-Chip „Verbunden mit instagram.com“; Knopf „Feed entfernen“",
     "buehne_mobil": "aspect-ratio 4/5 bis 640 px",
     "vorfuehrung": "Bildtexte zeigen, Live-Feed laden, entfernen, Profil-Link (Schleife 12 s)"
    }
   }
  ]
 }
}