{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "veranstaltung-detailseite",
 "name": "Veranstaltung: Detailseite mit Zuständen",
 "name_en": "Event detail page with seats, booking, .ics and Event JSON-LD states",
 "kurz": "Event-Seite mit Faktenleiste, Platzbox (Restplätze, Stepper je Preiskategorie, Summe, Reservierung ohne Online-Zahlung), .ics-Download, Event-JSON-LD und sechs Zuständen von frei bis abgesagt.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "editorial",
  "präzise"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "form",
  "intl-datetimeformat",
  "json-ld",
  "blob",
  "position-sticky",
  "dialog"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Seite für einen einzelnen Termin. Oben Sparte, Datum, Titel und eine Faktenleiste: Tag, Einlass, Beginn, Ende, Ort, Preis, Dauer, Alter. Daneben die Platzbox mit Restplätzen, Preiskategorien mit Stepper, Summe und „Verbindlich reservieren“ (oder bei freiem Eintritt eine Anmeldung). „In den Kalender“ lädt eine .ics-Datei. Darunter Beschreibung, Mitwirkende, Anfahrt, Barrierefreiheit und weitere Termine. Die Seite kennt sechs Zustände: Plätze frei, wenige Plätze, ausgebucht mit Warteliste, abgesagt, verschoben und vergangen. Jeder Zustand ändert Platzbox, Hinweiszeile und Event-JSON-LD (eventStatus, availability), Datum und Ort bleiben stehen.",
  "warum_es_wirkt": "Eine Event-Seite beantwortet fünf Fragen: wann, wo, was kostet es, gibt es noch Plätze, wie komme ich hin. Stehen sie in einer Leiste über dem Text, entscheidet man in Sekunden. Ehrliche Zustände sparen Anrufe: Ausgebucht bietet die Warteliste, Abgesagt erklärt die Erstattung, Verschoben zeigt alten und neuen Termin. Die .ics-Datei holt den Termin in den eigenen Kalender, ohne Konto bei einem Dienst.",
  "wann_einsetzen": "Kultur, Musik, Verein, Eventlocation, Freizeit, Buchhandlung mit Lesungen, Volkshochschule und Kursanbieter mit Einzelterminen. Immer dort, wo programm-kalender oder tourdaten-liste auf eine eigene Seite je Termin verlinken.",
  "wann_nicht": "Nicht für Serien mit festen Wochenterminen (dafür wochen-kursplan). Nicht, wenn der Ticketverkauf vollständig bei einem fremden Anbieter liegt und die Seite nur weiterleitet; dann reicht eine Zeile in der Liste mit externem Link. Keine Restplatz-Zahl erfinden oder künstlich verknappen: nur zeigen, was das Buchungssystem meldet.",
  "varianten": [
   "Ticket: Preiskategorien mit Stepper, Summe, Reservierung mit Bezahlung an der Abendkasse, Restplätze als Balken",
   "Anmeldung: Eintritt frei, Personenzahl bis 2, Feld für Unterstützungsbedarf, Bestätigung per E-Mail",
   "Zustände: frei, wenige Plätze, ausgebucht (Warteliste), abgesagt (Erstattung), verschoben (alter und neuer Termin), vergangen"
  ],
  "umsetzung": "Ein Datensatz je Termin (Titel, Sparte, Start, Einlass, Ende, Ort mit Adresse, Preise, Kapazität, Status) erzeugt Faktenleiste, Platzbox, .ics und JSON-LD. Datum mit Intl.DateTimeFormat('de-DE', {weekday: 'long', day: 'numeric', month: 'long'}) und Uhrzeit „20:00 Uhr“; im datetime-Attribut ISO 8601 mit +01:00. Platzbox als <form>: Preiskategorien mit Stepper (Knöpfe − und + mit aria-label, <output> für die Zahl), Höchstzahl aus den Restplätzen, Summe mit Intl.NumberFormat EUR. Restplätze als Text („Noch 23 von 140 Plätzen“) plus Balken aria-hidden. „In den Kalender“: VCALENDAR mit VEVENT (UID, DTSTAMP, DTSTART;TZID=Europe/Berlin, DTEND, SUMMARY, LOCATION, URL, STATUS) als Blob mit type text/calendar und download=\"….ics\", Zeilenende CRLF. Zustände über data-zustand am <article>: ausgebucht ersetzt das Formular durch die Warteliste, abgesagt durch Erstattungshinweis und Kontakt, verschoben zeigt den alten Termin durchgestrichen mit <del>, vergangen zeigt Nachbericht und nächste Termine. Das JSON-LD (Event, eventStatus, offers.availability, location als Place mit PostalAddress, organizer) wird bei jedem Zustandswechsel neu geschrieben. Bezahlung an der Abendkasse; Online-Zahlung, Stornobedingungen und Erstattung legt der Veranstalter fest und lässt sie vom Kunden prüfen.",
  "mobil": "Faktenleiste als zweispaltige Liste direkt unter dem Titel, Platzbox folgt nach der Beschreibung. Eine feste Leiste unten zeigt Preis ab und „Plätze reservieren“ bzw. den Zustand und springt zur Platzbox. Stepper-Knöpfe 44 px.",
  "reduzierte_bewegung": "Zustandswechsel und Balken ohne Übergang, Sprung zur Platzbox ohne weiches Scrollen.",
  "barrierefreiheit": "Zustand als Text in der Hinweiszeile, nicht nur als Farbe. Stepper mit benannten Knöpfen und Ansage der Menge. Summe in aria-live=\"polite\". Absage und Verschiebung stehen vor dem Formular und in der h1-Nähe. Datum und Uhrzeit als time. Anfahrt als Text mit Haltestelle und Fußweg, Karte nur zusätzlich. Barrierefreiheit des Orts als eigener Abschnitt."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt (token-swiss-knackig laut Rezept kultur-programm-haltung)",
  "dauer_ms": "150 Knöpfe und Stepper, 250 Zustandswechsel der Platzbox, 350 Restplatz-Balken, Austritt 150",
  "stagger_ms": "",
  "distanz": "Platzbox-Inhalt translateY 8 px → 0",
  "sonstiges": "Wenige Plätze ab 10 % Restkapazität; höchstens 6 Plätze je Reservierung",
  "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": 150
 },
 "gesehen_bei": [
  {
   "seite": "Konzerthaus Dortmund: Öffentliche Hausführung",
   "url": "https://www.konzerthaus-dortmund.de/en/programm/12-05-2026-oeffentliche-hausfuehrung",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Datum und Uhrzeit im Kopf, Preis unter dem Titel, Kalender-Export als „ICal/Outlook“ und „Google Kalender“, Hinweis „Diese Veranstaltung liegt in der Vergangenheit!“, Warteliste mit Platzzahl und Preiskategorie, Barrierefreiheit des Hauses und der Führung getrennt, vier Empfehlungen am Ende.",
   "art": "website"
  },
  {
   "seite": "Veranstaltungskalender Karlsruhe: Symphoniacs",
   "url": "https://kalender.karlsruhe.de/db/termine/musik/symphoniacs",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Datum deutsch ausgeschrieben („23. bis 24. März 2026“), getrennte Zeilen für Einlass, Einlass Saal und Beginn, Ort mit Adresse und ÖPNV-Haltestellen, Veranstalter mit Kontakt. Kein Preis, kein Kalender-Export, keine Barrierefreiheit: Lücken, die das Gerüst schließt.",
   "art": "website"
  },
  {
   "seite": "Google Search Central: Event structured data",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/event",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Pflicht sind name, startDate und location mit address. eventStatus EventScheduled, EventRescheduled, EventPostponed, EventCancelled; bei Absage startDate und Ort stehen lassen; previousStartDate nur bei EventRescheduled; offers.availability InStock, SoldOut, PreOrder.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Google Search Central: Event structured data",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/event"
  },
  {
   "titel": "RFC 5545: iCalendar",
   "url": "https://www.rfc-editor.org/rfc/rfc5545"
  },
  {
   "titel": "MDN: URL.createObjectURL()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static"
  }
 ],
 "kombinierbar_mit": [
  "programm-kalender",
  "tourdaten-liste",
  "karte-zwei-klick",
  "formular-fehlerzusammenfassung",
  "validierung-nach-interaktion",
  "dialog-modal-nativ",
  "raumkapazitaeten-bestuhlung",
  "toast-stapel",
  "firmendaten-strukturiert"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: programm-kalender und tourdaten-liste sind Listen, Event-JSON-LD in keinem demo.html [intern].",
   "Zwei Event-Seiten (Konzerthaus Dortmund, Veranstaltungskalender Karlsruhe) und die Google-Dokumentation am 04.11.2026 geöffnet. Kein Award-Beleg.",
   "Schwelle „wenige Plätze“ ab 10 % und höchstens 6 Plätze je Reservierung sind eigene Festlegung.",
   "Stornierung, Erstattung und Warteliste sind Regeln des Veranstalters: vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Event-Seite mit Faktenleiste, Platzbox (Restplätze, Stepper je Preiskategorie, Summe, Reservierung ohne Online-Zahlung), .ics-Download, Event-JSON-LD und sechs Zuständen von frei bis abgesagt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) Eintritt, cubic-bezier(0.5, 0, 0.75, 0) Austritt (token-swiss-knackig, Rezept kultur-programm-haltung)",
   "dauer_ms": {
    "ui": 150,
    "box_wechsel": 250,
    "restplatz_balken": 350,
    "toast_ein": 250,
    "toast_aus": 150
   },
   "distanz": "Platzbox-Inhalt translateY 8 px → 0",
   "zustaende": "offen, knapp (ab 10 % Rest), ausgebucht (Warteliste, SoldOut), abgesagt (EventCancelled, Datum bleibt, Bild grau), verschoben (EventRescheduled, previousStartDate, alter Termin als del), vergangen (Hinweis, nächste Termine)",
   "reservierung": "höchstens 6 Plätze, Stepper 40 px Knöpfe, output aria-live, Summe Intl EUR, Bezahlung an der Abendkasse bis 19:45 Uhr",
   "ics": "VCALENDAR/VEVENT mit UID, DTSTAMP, DTSTART;TZID=Europe/Berlin, DTEND, SUMMARY, LOCATION, URL, STATUS; CRLF; Blob text/calendar, download",
   "raster": "12 Spalten, Inhalt 8, Platzbox 4 sticky top 20 px; unter 1100 px Box nach den Fakten, unter 760 px feste Leiste unten",
   "typo": "Titel Schibsted Grotesk 900 clamp(2.75rem, 1.4rem + 6vw, 7rem)/.96, -0.03em; Datum IBM Plex Mono versal; Text Atkinson Hyperlegible Next 1.125rem/1.6",
   "farben": "#EFEDE9 Grund, #0B0B0B Text und Linien, Sparte Musik #C4421A, Gespräch #3D5F9A, Warnton #8A2C0D",
   "kalender_knopf": "Kontur mit Eckklammern 8 px, Hover schiebt die Klammern 3 px nach außen",
   "vorfuehrung": "+ Normal zweimal, + Ermäßigt, In den Kalender, dann Zustände knapp, ausgebucht, abgesagt, verschoben je 1900 ms, Schleife"
  },
  "ausloeser": "klick",
  "touch": "Faktenleiste zweispaltig unter dem Bild, Platzbox nach den Fakten. Feste Leiste unten mit Preis ab und Restplätzen bzw. Zustand und „Plätze reservieren“, springt zur Box und setzt den Fokus. Stepper bleiben 40 px hoch. Menü-Knopf im Kopf.",
  "reduziert": "Zustandswechsel, Balken und Toast ohne Übergang, Sprung zur Platzbox ohne weiches Scrollen.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Kulturhaus Sägewerk in Rottweil, Konzert „Raum aus Rauschen“ des erfundenen Ensembles Spulwerk am 27.11.2026 in der Maschinenhalle. Variante ?v=anmeldung: Werkstattgespräch „Wie klingt ein Raum?“, Eintritt frei, Personen bis 2, Feld für Unterstützungsbedarf, JSON-LD isAccessibleForFree. Zustand per Pult oder ?zustand=… . Pult startet eingeklappt (data-fundus-pult=zu), weil es sonst das Bild verdeckt. Bild foto-hero-wortmarke-lautsprecher aus medien. Barrierefreiheit des Orts als eigener Abschnitt mit Prüfdatum. Referenzen: Konzerthaus Dortmund (Kalender-Export, Warteliste, Vergangenheit), Veranstaltungskalender Karlsruhe (Einlass, Beginn, ÖPNV). Selbsturteil 4.",
  "varianten": [
   {
    "id": "ticket",
    "name": "Ticket",
    "wann": "Konzert, Theater, Lesung oder Führung mit Eintritt und begrenzten Plätzen, bezahlt an der Abendkasse oder im eigenen Shop.",
    "werte": {
     "preise": "Normal 18,00 €, Ermäßigt 12,00 €, Unter 18 frei",
     "kapazitaet": "140, Rest 23 bzw. 9",
     "json_ld": "MusicEvent mit performer und offers je Kategorie"
    }
   },
   {
    "id": "anmeldung",
    "name": "Anmeldung",
    "wann": "Kostenlose Termine mit Platzgrenze: Werkstattgespräch, Vereinsabend, Infoabend, Volkshochschule.",
    "werte": {
     "personen": "1 bis 2 je Anmeldung",
     "kapazitaet": "30, Rest 12 bzw. 3",
     "sparte": "#3D5F9A",
     "json_ld": "Event mit isAccessibleForFree, price 0.00"
    }
   }
  ]
 }
}