Organigramm

Das ZVV-Organigramm als generiertes Artefakt: Daten → SVG statt Grafik-Tool. Jede Abteilung trägt einen eigenen Farbton auf der Luminanz des ZVV-Blaus — Direktion und erste Abteilung kommen aus --color-zvv-primary, gesetzt in ZVV Brown Narrow. Hier live editieren, als SVG exportieren oder als HTML-Widget für CMS-Seiten kopieren.

Atlas Spec

Das sind die echten, offiziell publizierten Org-Daten — kanonische Quelle: assets/organigramm/organigramm.data.json. Änderungen hier bleiben im Browser und werden nirgends hochgeladen; verbindlich wird eine Mutation erst als Commit im Atlas-Repo.

Daten (JSON, live)

{
  "title": "Organisation und Mitarbeitende im ZVV",
  "asOf": "Juli 2026",
  "legend": "* Geschäftsleitung",
  "direction": {
    "name": "Direktion",
    "head": "Dominik Brühwiler *"
  },
  "departments": [
    {
      "name": "Finanzen",
      "head": "Daniel Reinhart *",
      "desc": [
        "Finanzierung der Verkehrsunternehmen,",
        "Refinanzierung des Verkehrsverbundes,",
        "Rechnungswesen, Leistungs-Controlling"
      ],
      "members": [
        "Peter Frischknecht (Stv.)",
        "Flavia Gfeller",
        "Adrian Gut",
        "Lars Koster",
        "Karin Rehm",
        "Stefan Schmid"
      ],
      "sub": [
        {
          "name": "David Rast",
          "lead": true
        },
        {
          "name": "Fabienne Beyeler",
          "lead": false
        }
      ]
    },
    {
      "name": "HR",
      "head": "Sandra Palancon",
      "desc": [],
      "members": [],
      "sub": null
    },
    {
      "name": "ICT",
      "head": "Frank Hofmann *",
      "desc": [
        "Betrieb/Entwicklung interne",
        "Fachapplikationen, Projekte,",
        "Betrieb/Entwicklung B2C Fachplattformen,",
        "Fahrgastinformation"
      ],
      "members": [
        "Irene Ackermann",
        "Dominik Grögler",
        "Marco Ludwig",
        "Christian Ober-Kassebaum",
        "Marcel Rapold (Stv.)",
        "Jannik Reichel"
      ],
      "sub": null
    },
    {
      "name": "Kommunikation",
      "head": "Thomas Kellenberger * (Stv. D)",
      "desc": [
        "Kommunikation, Information,",
        "Medienarbeit, Public Affairs,",
        "zvv.ch, soziale Medien"
      ],
      "members": [
        "Lucia Frei",
        "Cristina Maurer Frank (Stv.)",
        "Natasha Varisco",
        "Jasmin Vogel"
      ],
      "sub": null
    },
    {
      "name": "Marketing",
      "head": "Pascal Rechsteiner (a.i.) *",
      "desc": [
        "Strategische Gestaltung, Positionierung",
        "und Vermarktung verbundweiter",
        "Mobilitätsangebote"
      ],
      "members": [
        "Brigitte Andenmatten",
        "Raphael Eberhard",
        "Matthias Gautschi",
        "Claudio Genovese",
        "Kathrin ter Hofte",
        "Clemens Levy",
        "Peter Schilde",
        "Eva Wälti"
      ],
      "sub": null
    },
    {
      "name": "Stab",
      "head": "Nadja Gerig *",
      "desc": [
        "Recht, Parlamentarische Geschäfte,",
        "Verkehrsratsgeschäfte, Administration"
      ],
      "members": [
        "Armanda Ammann (Stv.)",
        "Linda Dubach",
        "Beatrice Höpli",
        "Sandi Hubicka",
        "Andrea Roos",
        "Erika Wyss"
      ],
      "sub": null
    },
    {
      "name": "Verkehrsplanung",
      "head": "Christian Vogt *",
      "desc": [
        "Strategische Angebotsplanung,",
        "Fahrplanverfahren,",
        "Infrastrukturprojekte, Umwelt"
      ],
      "members": [
        "Philip Dijkstra Brüngger (Stv.)",
        "Kerstin Kantke Leuppi",
        "Lars Keller",
        "Thomas Kreyenbühl",
        "Andreas Meili",
        "Daniela von Moos",
        "Pascal Zanoni"
      ],
      "sub": null
    }
  ]
}

Export

ZVV Brown Narrow einbetten (+~90 kB, rendert überall korrekt)

AEM-Image-Markup — nutzt die zvv.ch-Lightbox (Klick = Vollbild, Font zwingend)

<!-- <Titel> · Stand: … -->
<figure class="zvv-organigramm"
        style="margin:0;max-width:1392px">
  <svg viewBox="0 0 1392 …" …>
    <title>…</title><desc>…</desc>…
  </svg>
  <script type="application/ld+json">
    {"@type":"Organization", …}
  </script>
</figure>

Das Snippet ist self-contained und kann als Widget in CMS-Seiten eingesetzt werden. Es enthält bewusst keinen Titel — die Überschrift liefert die Zielseite (AEM) als eigenes Element. SEO-Semantik via <title>/<desc> im SVG plus schema.org-JSON-LD (Organisation, Abteilungen, Personen — im Public-Scope ohne Personen).

AEM-Image-Markup: verpackt das SVG als cmp-image--lightbox — die bestehende zvv.ch-Lightbox (lightGallery) übernimmt Klick-zum-Vergrössern ohne zusätzliches JavaScript (Recipe: patterns/lightbox.md §7). Das SVG wird dabei zum data-URI-<img>; SEO bleibt via JSON-LD + alt-Text erhalten.

Beide Scopes sind öffentlich. «Public» entspricht dem namenlosen Organigramm-PDF auf zvv.ch — für Embeds, die exakt der PDF-Publikation folgen sollen.

Zuständigkeiten Kanton · ZVV · Verkehrsunternehmen

Das zweite offizielle Diagramm der zvv.ch-Organisations-Seite: wer bestellt, wer plant, wer fährt. Gleiches Prinzip — Daten (zustaendigkeiten.data.json) → SVG, gerendert aus denselben Farb-Tokens.

Export

ZVV Brown Narrow einbetten (+~90 kB, rendert überall korrekt)

AEM-Image-Markup — nutzt die zvv.ch-Lightbox (Klick = Vollbild, Font zwingend)

<!-- <Titel> · Stand: … -->
<figure class="zvv-zustaendigkeiten"
        style="margin:0;max-width:1000px">
  <svg viewBox="0 0 1000 …" …>
    <title>…</title><desc>…</desc>…
  </svg>
</figure>

Kanonischer Workflow

Dieser Editor ist die Spielwiese — die Single Source of Truth ist die JSON-Datei im Atlas-Repo. Eine Personalmutation ist ein Datei-Edit plus Neugenerierung:

Atlas-Repobash

# Kanonische Daten im Atlas-Repo:
#   assets/organigramm/organigramm.data.json        (Organigramm)
#   assets/organigramm/zustaendigkeiten.data.json   (Zuständigkeiten)
# Editieren → generieren → Daten + SVGs committen:
npm run orgchart                                    # generiert beide Charts

# Nur ein Chart:
node assets/organigramm/generate.mjs --chart zustaendigkeiten

# Namenlose Organigramm-Variante (wie das offizielle zvv.ch-PDF):
node assets/organigramm/generate.mjs --public --out zvv-organigramm-public.svg

# Einfarbig (alle Abteilungen im Token-Blau statt in der Abteilungs-Palette):
node assets/organigramm/generate.mjs --monochrome --out zvv-organigramm-blau.svg

# Font einbetten (für PNG-Export ohne installierten Corporate-Font):
node assets/organigramm/generate.mjs --embed-font --out organigramm-embed.svg

Datenmodell

organigramm.data.jsonjsonc

{
  "title": "Organisation und Mitarbeitende im ZVV",
  "asOf": "Juli 2026",                    // Stand-Vermerk unten links, optional
  "legend": "* Geschäftsleitung",
  "direction": { "name": "Direktion", "head": "Vorname Name *" },
  "departments": [                        // alphabetisch, erste 4 in Reihe 1
    {
      "name": "Abteilung",
      "head": "Vorname Name *",           // * = Geschäftsleitung
      "desc": ["Aufgabenzeile 1,", "…"],  // manuell umbrochen
      "members": ["Vorname Name (Stv.)"],
      "color": "#be4f17",                 // optional, überschreibt die Palette
      "sub": [                            // optionale Untereinheit, sonst null
        { "name": "Vorname Name", "lead": true }
      ]
    }
  ]
}

Datenquelle & Öffentlichkeit

– Alle Daten sind öffentlich: Struktur, Aufgaben und Personen entsprechen der offiziellen Publikation auf zvv.ch.
– Scope «Public» rendert die namenlose Variante — identisch zum offiziellen Organigramm-PDF.
– Dieser Editor lädt nichts hoch: eingefügte Daten bleiben im Browser.