{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "teilen-und-kalender",
 "name": "Teilen und In den Kalender",
 "name_en": "Share (Web Share API) and add to calendar (.ics, Google, Outlook)",
 "kurz": "Teilen über das System-Menü (Web Share) mit Rückfall „Link kopieren“ und E-Mail, „In den Kalender“ als .ics mit Zeitzone sowie Links zu Google Kalender, Outlook.com und Microsoft 365, ohne fremde Skripte; dazu Termin mit Erinnerung und Zitat-Link per Text-Fragment.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "klar",
  "funktional",
  "freundlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "popover-api",
  "clipboard-api",
  "blob",
  "intl-datetimeformat"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Zwei kleine Knöpfe für Termine und Artikel. „Teilen“ öffnet auf dem Telefon das Teilen-Menü des Systems (Web Share API); wo es fehlt, klappt ein kleines Menü mit „Link kopieren“ und „Per E-Mail“ auf. „In den Kalender“ bietet eine .ics-Datei für Apple, Outlook und andere sowie direkte Links zu Google Kalender und Outlook.com, ohne fremde Skripte und ohne Tracking-Parameter. Beim Termin kommt eine Erinnerung dazu, beim Artikel ein Knopf „Zitat teilen“, der einen Link direkt auf die Textstelle baut.",
  "warum_es_wirkt": "Wer einen Termin gut findet, will ihn sich merken oder weitergeben, am liebsten mit einem Tipp. Native Teilen-Menüs kennen die eigenen Kontakte; die Seite muss nichts von Facebook oder WhatsApp laden. Eine korrekte .ics mit Zeitzone erspart Tippfehler bei Datum und Ort. Im Bestand bauen sieben Demos .ics und zwei das Teilen je selbst; dieses Muster ist der gemeinsame Baustein.",
  "wann_einsetzen": "Veranstaltungen, Kurse, Führungen, Tag der offenen Tür, Termine nach einer Buchung, Vereins- und Kulturprogramme, News und Artikel, Stellenanzeigen (Teilen).",
  "wann_nicht": "Keine Teilen-Leiste mit sechs Netzwerk-Logos und Zählern; die laden oft Dritt-Skripte. Keine Teilen-Knöpfe an privaten Inhalten (Buchungsbestätigung mit Namen). Kalender nur, wenn Datum und Uhrzeit feststehen; bei „Termin folgt“ lieber Benachrichtigung.",
  "varianten": [
   "Veranstaltung: Teilen und In den Kalender nebeneinander, .ics mit TZID Europe/Berlin, Google- und Outlook-Link",
   "Termin: nach einer Buchung, Kalender mit wählbarer Erinnerung (VALARM), kein Teilen",
   "Artikel: Teilen, Link kopieren, E-Mail und Zitat teilen per Text-Fragment-Link"
  ],
  "umsetzung": "Teilen: Knopf ruft navigator.share({title, text, url}) nur nach einem Klick (Nutzergeste nötig) und nur, wenn navigator.canShare die Daten annimmt; AbortError (Abbruch) bleibt still. Ohne Web Share öffnet derselbe Knopf ein Popover (popover-Attribut, Anker darunter) mit „Link kopieren“ (navigator.clipboard.writeText, Rückmeldung „Kopiert“ am Knopf und in role=status) und „Per E-Mail“ (mailto: mit subject und body). Kalender: Popover mit vier Wegen. .ics als Blob (text/calendar;charset=utf-8) mit CRLF, Zeilen nach 75 Oktetten gefaltet, Kommas, Semikolons und Zeilenumbrüche maskiert, UID, DTSTAMP in UTC, DTSTART und DTEND mit TZID=Europe/Berlin und VTIMEZONE, LOCATION, URL, DESCRIPTION. Google: calendar.google.com/calendar/render?action=TEMPLATE&text=…&dates=…/…&ctz=Europe/Berlin&details=…&location=…. Outlook.com und Microsoft 365: …/calendar/0/deeplink/compose?path=/calendar/action/compose&rru=addevent&subject=…&startdt=…&enddt=…. Links mit rel=noopener und Hinweis, dass sie zu Google bzw. Microsoft führen. Termin: VALARM mit TRIGGER:-P1D oder -PT2H. Artikel: Zitat teilen baut #:~:text=Anfang,Ende (Text-Fragment). Datenschutz-Hinweis vom Kunden prüfen lassen.",
  "mobil": "Auf Telefonen mit Web Share öffnet „Teilen“ direkt das System-Menü. Das Kalender-Menü öffnet unter dem Knopf in voller Breite; .ics öffnet auf iOS und Android die Kalender-App. Knöpfe 44 px hoch, nebeneinander mit Umbruch.",
  "reduzierte_bewegung": "Menüs erscheinen ohne Versatz, das Häkchen steht sofort.",
  "barrierefreiheit": "Echte Knöpfe mit sichtbarem Text, keine reinen Symbole. Popover mit popovertarget (aria-expanded setzt der Browser), Escape schließt, Fokus kehrt zum Knopf zurück. Links, die die Seite verlassen, sagen es im Text („öffnet Google Kalender“). Rückmeldung „Link kopiert“ in einer role=status-Zeile. Datum im Knopf-Umfeld ausgeschrieben, nicht nur als Symbol."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) öffnen, cubic-bezier(0.5, 0, 0.75, 0) schließen",
  "dauer_ms": "200 Menü öffnen, 150 schließen, 250 Häkchen, 1600 Rückmeldung stehen lassen",
  "stagger_ms": "30 Menüpunkte",
  "distanz": "Menü translateY -6 px → 0, Häkchen stroke-dashoffset",
  "sonstiges": "Kurven aus token-swiss-knackig (Rezept kultur-programm-haltung), UI 150 bis 250 ms",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kultur-programm-haltung"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Add Event to Calendar Docs: Google Calendar",
   "url": "https://interactiondesignfoundation.github.io/add-event-to-calendar-docs/services/google.html",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026: Link calendar.google.com/calendar/render mit action=TEMPLATE, text, dates (YYYYMMDDTHHmmSS/…, mit Z als UTC), optional ctz, details und location, alles URL-kodiert.",
   "art": "tutorial"
  },
  {
   "seite": "GitHub Gist: Outlook-Kalenderlink",
   "url": "https://gist.github.com/DrizzlyOwl/94256211f93e1d67a52f2179a000480c",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026: outlook.live.com/calendar/0/deeplink/compose (Office 365: outlook.office.com) mit path=/calendar/action/compose, rru=addevent, subject, startdt, enddt (ISO mit Zeitzone), body, location.",
   "art": "tutorial"
  }
 ],
 "tutorials": [
  {
   "titel": "W3C: Web Share API",
   "url": "https://www.w3.org/TR/web-share/"
  },
  {
   "titel": "RFC 5545: iCalendar",
   "url": "https://www.rfc-editor.org/rfc/rfc5545"
  },
  {
   "titel": "MDN: Text fragments",
   "url": "https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Text_fragments"
  }
 ],
 "kombinierbar_mit": [
  "veranstaltung-detailseite",
  "programm-kalender",
  "tourdaten-liste",
  "artikel-seite",
  "danke-seite-naechste-schritte",
  "kopieren-feedback",
  "native-popover-dropdowns",
  "termin-buchung-zwei-klick"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/teilen-und-kalender/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/teilen-und-kalender/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/teilen-und-kalender/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: navigator.share nur in 2 Demos (tourdaten-liste, produktfinder-quiz), .ics in 7 Demos je eigen gebaut. Kein Award-Beleg.",
   "Google- und Outlook-Link sind nicht offiziell dokumentierte Schnittstellen; Parameter aus Entwickler-Dokus (05.11.2026). Vor dem Einsatz testen.",
   "Datenschutz: Links zu Google und Microsoft übertragen erst beim Klick Daten. Hinweistext vom Kunden prüfen lassen, keine Rechtsberatung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Teilen über das System-Menü (Web Share) mit Rückfall „Link kopieren“ und E-Mail, „In den Kalender“ als .ics mit Zeitzone sowie Links zu Google Kalender, Outlook.com und Microsoft 365, ohne fremde Skripte; dazu Termin mit Erinnerung und Zitat-Link per Text-Fragment.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) öffnen, cubic-bezier(0.5, 0, 0.75, 0) schließen (token-swiss-knackig, Rezept kultur-programm-haltung)",
   "dauer_ms": {
    "menue_auf": 200,
    "menue_zu": 150,
    "haken": 250,
    "rueckmeldung": 1600,
    "hover": 150,
    "plakat_linie": 500
   },
   "stagger_ms": 30,
   "distanz": "Menü translateY −6 px → 0 mit @starting-style, Einträge −4 px; Haken stroke-dashoffset 20 → 0",
   "menue": "popover-Attribut, fest unter dem Knopf positioniert, klappt nach oben, wenn unten kein Platz ist; Fokus auf den ersten Eintrag, beim Schließen zurück zum Knopf",
   "ics": "CRLF, Faltung nach 75 Oktetten (UTF-8), Escape für \\ ; , und Zeilenumbruch, UID, DTSTAMP UTC, DTSTART/DTEND mit TZID=Europe/Berlin und VTIMEZONE, LOCATION, URL, DESCRIPTION; Termin mit VALARM TRIGGER -P1D oder -PT2H",
   "google": "calendar.google.com/calendar/render?action=TEMPLATE&text&dates=YYYYMMDDTHHmmSS/…&ctz=Europe/Berlin&details&location",
   "outlook": "outlook.live.com bzw. outlook.office.com /calendar/0/deeplink/compose?path=/calendar/action/compose&rru=addevent&subject&startdt&enddt (ISO mit Versatz aus Intl longOffset)&body&location",
   "zitat": "#:~:text=<erste 4 Wörter>,<letzte 3 Wörter>",
   "typo": "H1 Schibsted Grotesk 850 clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem)/.96 −0.035em; Text Atkinson Hyperlegible Next 1.125rem; Daten IBM Plex Mono .8125rem",
   "farben": "#efede9 Grund, #0b0b0b Text und Knöpfe, Sparte Musik #c4421a, Theater #3d5f9a, Kunst #2f7d4a",
   "vorfuehrung": "Teilen-Menü, Link kopieren mit Haken, Kalender-Menü, .ics, Google-Link als Vorschau; Termin mit Erinnerung; Artikel mit Zitat-Link; Schleife"
  },
  "ausloeser": "klick",
  "touch": "Auf Telefonen mit Web Share öffnet „Teilen“ direkt das System-Menü, sonst das Menü mit Link kopieren und E-Mail. Knöpfe 48 px, umbrechend und auf die volle Breite gestreckt; das Plakat steht oben im 16:9-Format. .ics öffnet die Kalender-App.",
  "reduziert": "Menüs erscheinen ohne Versatz und ohne Staffelung, der Haken steht sofort, die Linien des Plakats zeichnen sich nicht.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Kulturhaus Alte Seilerei in Lörrach (Domain alte-seilerei.example), Konzert „Zwölf Stränge“ des erfundenen Ensembles Garnwerk am 21.11.2026. Variante ?v=termin: gebuchte Führung mit Erinnerung, ohne Teilen (persönliche Buchung). Variante ?v=artikel: Magazin-Text mit Zitat-Link und Teilen-Leiste. In der Demo öffnen Google- und Outlook-Links nicht, sondern zeigen die erzeugte Adresse; auf der echten Seite target=_blank rel=noopener. Abgrenzung: veranstaltung-detailseite, tourdaten-liste, programm-kalender, danke-seite-naechste-schritte bauen .ics je selbst; dieses Muster ist der gemeinsame Baustein. Datenschutz-Hinweis vom Kunden prüfen lassen. Gebaut am 05.11.2026 (Runde 4). Selbsturteil 4.",
  "varianten": [
   {
    "id": "veranstaltung",
    "name": "Veranstaltung",
    "wann": "Kultur, Verein, Eventlocation, Freizeit, Weingut: öffentlicher Termin zum Weitergeben und Merken.",
    "werte": {
     "knoepfe": "Karten, Teilen, In den Kalender",
     "kalender": ".ics, Google, Outlook.com, Microsoft 365"
    }
   },
   {
    "id": "termin",
    "name": "Termin nach Buchung",
    "wann": "Praxis, Kurs, Führung, Werkstatt-Termin: persönliche Bestätigung, nur Kalender mit Erinnerung.",
    "werte": {
     "erinnerung": "keine, 1 Tag (-P1D), 2 Stunden (-PT2H) als Radiogruppe",
     "teilen": "keins"
    }
   },
   {
    "id": "artikel",
    "name": "Artikel",
    "wann": "News, Magazin, Ratgeber, Stellenanzeige: Text weitergeben oder eine Stelle zitieren.",
    "werte": {
     "knoepfe": "Teilen, Link kopieren, Per E-Mail",
     "zitat": "Text-Fragment-Link"
    }
   }
  ]
 }
}