{
 "zweck": "Verzeichnis des TFCZ Brand Guide für KI. Zuerst hier suchen, ob es ein Element schon gibt, dann nur die nötigen Sektionen lesen.",
 "guide": "https://design.tfcz.ch/brandguide",
 "vorgehen": [
  "Für jedes Element des Auftrags hier suchen (Titel, Kapitel, kurz).",
  "Gibt es das Element, genau diesen Baustein übernehmen: HTML aus system/komponenten.json (Feld «baustein» = name dort, bei mehreren eine Liste), CSS/JS aus system/ (ui.css, ui.js, charts.js, effects.js). Nichts nachbauen, nichts verändern.",
  "Gibt es das Element nicht, zuerst nachfragen und den nächstliegenden Baustein nennen.",
  "Werte (Farben, Radien, Schatten, Zeiten) nur aus system/tokens.css, Fakten nur aus dem Steckbrief, Logos nur aus der Logo-Sektion."
 ],
 "regeln": "Auswahl = Gold · Aktion = Blau · Bestätigung = Grün · Schliessen/Gefahr = Rot · Hover-Rahmen nur bei nicht gewählten Elementen · Overlays schliessen sofort per X, Esc und Klick daneben · keine Emojis",
 "dateien": {
  "tokens": "system/tokens.css",
  "buttons": "system/buttons.css",
  "ui": "system/ui.css",
  "komponenten": "system/komponenten.json",
  "js": [
   "system/components/ui.js",
   "system/components/charts.js",
   "system/components/effects.js"
  ]
 },
 "sektionen": [
  {
   "nr": "00",
   "id": "nutzung",
   "titel": "Nutzung: Diese Datei ist der Brand Guide",
   "teil": "Start",
   "link": "https://design.tfcz.ch/brandguide#nutzung",
   "kurz": "Die Referenz für alles, was nach TFCZ aussehen und klingen soll. Daran halten sich alle, die TFCZ-Material erstellen, Menschen wie KI. Bei Werten gilt system/tokens.css: Farben, Radien, Schatten und Zeiten stehen dort, und der Guide …"
  },
  {
   "nr": "01",
   "id": "positionierung",
   "titel": "Positionierung",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#positionierung",
   "kurz": "Der eine Satz, der uns einordnet und unterscheidet. Alles, was wir sagen, muss dazu passen."
  },
  {
   "nr": "02",
   "id": "werte",
   "titel": "Mission, Vision & Werte",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#werte",
   "kurz": "Warum es uns gibt, wohin wir wollen, und die Werte, die jede Entscheidung tragen."
  },
  {
   "nr": "03",
   "id": "persoenlichkeit",
   "titel": "Markenpersönlichkeit & Archetyp",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#persoenlichkeit",
   "kurz": "So wäre der TFCZ, wenn er ein Mensch wäre. Dieser Charakter muss in Text, Bild und Ton durchscheinen."
  },
  {
   "nr": "04",
   "id": "versprechen",
   "titel": "Markenversprechen & Geschichte",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#versprechen",
   "kurz": "Unser Versprechen an alle und die Geschichte, die wir immer wieder erzählen. Dazu fertige Textbausteine zum Übernehmen."
  },
  {
   "nr": "05",
   "id": "zielgruppen",
   "titel": "Zielgruppen & Ansprache",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#zielgruppen",
   "kurz": "Für wen wir schreiben. Je Zielgruppe stehen hier Bedürfnis, Kanal und der passende Handlungsaufruf (CTA)."
  },
  {
   "nr": "06",
   "id": "tone",
   "titel": "Tone of Voice",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#tone",
   "kurz": "Vier Eigenschaften bestimmen jeden Text, in jedem Kontext. Sportlich-herzlich, keine Corporate-Sprache. Die Tonlage passt sich an (Fun locker, Turnier energetisch, Firma professionell-herzlich)."
  },
  {
   "nr": "07",
   "id": "botschaften",
   "titel": "Botschaften & Messaging",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#botschaften",
   "kurz": "Vier Kernbotschaften (Pillars). Jede Seite und jeder Post trägt klar eine davon. Ein Beleg sorgt dafür, dass es glaubwürdig bleibt."
  },
  {
   "nr": "08",
   "id": "sprache",
   "titel": "Sprache & Lexikon",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#sprache",
   "kurz": "Sprachregeln und Wortschatz, damit alles wie aus einem Guss klingt."
  },
  {
   "nr": "09",
   "id": "kischreiben",
   "titel": "Schreiben ohne KI-Handschrift",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#kischreiben",
   "kurz": "Gilt für alles Geschriebene: Seitentexte, Knopfbeschriftungen, Instagram, WhatsApp, Mails an Mitglieder, Flyer. Ein Sprachmodell sagt das wahrscheinlichste nächste Wort voraus und steuert damit in die Mitte aller Trainingstexte. Die …"
  },
  {
   "nr": "10",
   "id": "fakten",
   "titel": "Fakten & Steckbrief",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#fakten",
   "kurz": "Die belastbaren Fakten für jede Seite. Was hier nicht steht, klärst du mit dem Marketingverantwortlichen."
  },
  {
   "nr": "11",
   "id": "playbook",
   "titel": "Playbook: neue Seite in 7 Schritten",
   "teil": "Teil 1 · Marke",
   "link": "https://design.tfcz.ch/brandguide#playbook",
   "kurz": "Der rote Faden, der Teil 1 (Marke) und Teil 2 (Design) verbindet. Damit baut jeder ohne Spezialist eine markenkonforme Landingpage."
  },
  {
   "nr": "12",
   "id": "farben",
   "titel": "Farben & Gradients",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#farben",
   "kurz": "Kanonische Palette mit Primär- und Neutralfarben, Sekundär-Akzenten und den vier erlaubten 2-Farb-Gradients. Klicken kopiert."
  },
  {
   "nr": "13",
   "id": "logos",
   "titel": "Logos & Verwendung",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#logos",
   "kurz": "Logo-Regeln nach TFCZ Brand Manual 2026. Nur die Originaldateien verwenden. Jede Variante lässt sich direkt hier herunterladen."
  },
  {
   "nr": "14",
   "id": "typo",
   "titel": "Typografie",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#typo",
   "kurz": "Überschriften, Fliesstext, Zitat und Liste in Nunito Sans. Kicker immer als Goldstrich plus Grossbuchstaben in Gold.",
   "baustein": "Typography"
  },
  {
   "nr": "15",
   "id": "tokens",
   "titel": "Tokens: Radius · Spacing · Elevation",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#tokens",
   "kurz": "Konsistente Skalen statt Zufallswerte. Andock-Elemente runden nur die oberen Ecken (6px 6px 0 0). Elevation nur für Schwebendes: e-2/e-3 gehören zu Modals, Popups, sticky Bars und Hover-Lift. Grosse ruhende Container (Sektionen, …"
  },
  {
   "nr": "16",
   "id": "groessen",
   "titel": "Grössen & Touch",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#groessen",
   "kurz": "Wie hoch ein Knopf ist, wie gross die Schrift, wie viel Platz dazwischen: je nach Gerät. Sichtbare Höhe und Tippfläche sind zwei Dinge. Ein Knopf darf kleiner aussehen, als er sich antippen lässt. Die Werte stehen als Tokens in …"
  },
  {
   "nr": "17",
   "id": "signatur",
   "titel": "Fenster-Signatur / Brand-Line",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#signatur",
   "kurz": "Blau oben (#5ca7dc) / Gold unten (#cda857) als border-top/-bottom am abgerundeten Container. An den Ecken läuft die Linie schmaler aus. Bei genau einem Fenster oder sticky Bars: direkt umranden. Bei mehreren Boxen: nur einmal als …"
  },
  {
   "nr": "18",
   "id": "auswahl",
   "titel": "Hover vs. Auswahl",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#auswahl",
   "kurz": "Hover = Brand-Rahmen (blau oben / gold unten). Auswahl = Gold-Rahmen. Nie beide gleichzeitig am selben Element. „Heute\" = goldene Zahl."
  },
  {
   "nr": "19",
   "id": "hoverregel",
   "titel": "Hover-Brand-Rahmen · nie mit Layout-Sprung",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#hoverregel",
   "kurz": "Der Brand-Hover (blaue Linie oben / goldene unten) darf die Box-Grösse niemals verändern. Umgesetzt wird er deshalb mit inset box-shadow."
  },
  {
   "nr": "20",
   "id": "iconlib",
   "titel": "Icons · Lucide",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#iconlib"
  },
  {
   "nr": "21",
   "id": "hintergrund",
   "titel": "Hintergrund-Animationen & Modi",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#hintergrund",
   "kurz": "Zwei Seiten-Hintergründe: Hellblau (öffentlich) & Dunkel-Navy (login-intern). Standard-Effekt ist der Schwerkraft-Wirbel aus dem globalen Modul assets/js/bg-swirl.js. Idle-Verhalten: der Wirbel wirbelt nur bei Mausbewegung. Stoppt die …"
  },
  {
   "nr": "22",
   "id": "print",
   "titel": "Print, Social & Icons",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#print",
   "kurz": "Flyer, Stories, Posts und Schilder haben ihren eigenen Look. Er kommt aus den echten Vorlagen des Clubs: dem KäseKick-Flyer und den Schildern im Clublokal."
  },
  {
   "nr": "23",
   "id": "fotos",
   "titel": "Fotos & Galerie",
   "teil": "Teil 2 · Design",
   "link": "https://design.tfcz.ch/brandguide#fotos",
   "kurz": "Alle Vereinsfotos liegen in der Galerie unter design.tfcz.ch/galerie. Dort filterst du nach Kategorie, Turnier, Ort und Trikot und lädst jedes Bild direkt herunter."
  },
  {
   "nr": "24",
   "id": "buttons",
   "titel": "CTA-System · Buttons",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "link": "https://design.tfcz.ch/brandguide#buttons",
   "kurz": "Blau ist die normale Aktion. Gold bleibt der echten Conversion vorbehalten, Ghost der Navigation.",
   "baustein": "Button"
  },
  {
   "nr": "25",
   "id": "k-button-group",
   "titel": "Button Group",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-button-group",
   "kurz": "Zusammengehörige Aktionen in einer Leiste. Die Buttons teilen sich den Rahmen.",
   "baustein": "Button Group"
  },
  {
   "nr": "26",
   "id": "k-toggle",
   "titel": "Toggle",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-toggle",
   "kurz": "Ein Knopf, der an oder aus ist. Aktiv trägt er den goldenen Rahmen wie jede Auswahl.",
   "baustein": "Toggle"
  },
  {
   "nr": "27",
   "id": "k-kbd",
   "titel": "Kbd",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-kbd",
   "kurz": "Tastenkürzel im Text, als kleine Tasten gesetzt.",
   "baustein": "Kbd"
  },
  {
   "nr": "28",
   "id": "k-rolling-text",
   "titel": "Rolling Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-rolling-text",
   "kurz": "Beim Überfahren oder Fokussieren rollt die Beschriftung nach oben weg, eine Kopie rollt von unten nach. Für die wichtigste Aktion einer Seite.",
   "baustein": "Rolling Text"
  },
  {
   "nr": "29",
   "id": "k-staggered-rolling-text",
   "titel": "Staggered Rolling Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-staggered-rolling-text",
   "kurz": "Wie Rolling Text, aber Buchstabe für Buchstabe mit kleiner Verzögerung. Gold, weil es hier um die Mitgliedschaft geht.",
   "baustein": "Staggered Rolling Text"
  },
  {
   "nr": "30",
   "id": "k-add-to-basket",
   "titel": "Add to Basket",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-add-to-basket",
   "kurz": "Nach dem Klick fliegt ein Ball im Bogen zum Zähler, der Zähler federt, der Knopf bestätigt in Grün.",
   "baustein": "Add to Basket"
  },
  {
   "nr": "31",
   "id": "k-hold-to-confirm",
   "titel": "Hold to Confirm",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-hold-to-confirm",
   "kurz": "Für Handlungen, die sich nicht rückgängig machen lassen: gedrückt halten, bis der Balken voll ist. Loslassen bricht ab. Geht auch mit Leertaste oder Enter.",
   "baustein": "Hold to Confirm"
  },
  {
   "nr": "32",
   "id": "k-anziehungs-button",
   "titel": "Anziehungs-Button",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-anziehungs-button",
   "kurz": "Beim Überfahren ziehen sich kleine Punkte in die Mitte des Knopfs, beim Verlassen treiben sie wieder weg.",
   "baustein": "Anziehungs-Button"
  },
  {
   "nr": "33",
   "id": "k-partikel-button",
   "titel": "Partikel-Button",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-partikel-button",
   "kurz": "Ein Klick lässt Punkte in Blau und Gold aus dem Knopf springen, der Zähler steigt.",
   "baustein": "Partikel-Button"
  },
  {
   "nr": "34",
   "id": "k-tastenk-rzel-button",
   "titel": "Tastenkürzel-Button",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-tastenk-rzel-button",
   "kurz": "Knopf mit Tastenkürzel und Glanz beim Überfahren. Cmd K oder Ctrl K löst ihn auch aus.",
   "baustein": "Tastenkürzel-Button"
  },
  {
   "nr": "35",
   "id": "k-teilen-button",
   "titel": "Teilen-Button",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Aktionen & Buttons",
   "gruppe": "Animierte Buttons",
   "link": "https://design.tfcz.ch/brandguide#k-teilen-button",
   "kurz": "Beim Überfahren klappen die Kanäle nacheinander aus dem Knopf. Auf dem Handy per Antippen.",
   "baustein": "Teilen-Button"
  },
  {
   "nr": "36",
   "id": "burger-standard",
   "titel": "Menü: Burger & Aufklappen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "link": "https://design.tfcz.ch/brandguide#burger-standard",
   "kurz": "Überall derselbe Menü-/Listen-Trigger: drei eng gestapelte Zeilen in Blau · Weiss · Gold. Wechselt nie zu einem X (öffnet eine Liste/ein Menü). Animation = Scroll-Loop mit Bounce (Hover & Klick): die Zeilen scrollen gestaffelt nach …"
  },
  {
   "nr": "37",
   "id": "logo-standard",
   "titel": "Logo · Kopf / Menü",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "link": "https://design.tfcz.ch/brandguide#logo-standard",
   "kurz": "Immer dasselbe Logo (assets/img/logo-horizontal-white.png) im Kopf/Menü jeder Seite. Klick führt zur Home. Klick-Feedback = kurze Press-Bounce-Animation (scale runter → kleiner Bounce → zurück). Klick zum Ansehen:"
  },
  {
   "nr": "38",
   "id": "navelemente",
   "titel": "Navigations-Elemente",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "link": "https://design.tfcz.ch/brandguide#navelemente",
   "kurz": "Zurück-Führung, Orientierung und Blättern. Aktive Seite/Position = Gold (Auswahl), Hover = Brand-Rahmen (Sektion 18).",
   "baustein": [
    "Breadcrumb",
    "Pagination",
    "Dropdown Menu"
   ]
  },
  {
   "nr": "39",
   "id": "geruest",
   "titel": "Seitengerüst & Navigation",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "link": "https://design.tfcz.ch/brandguide#geruest",
   "kurz": "Jede Seite nutzt dasselbe Gerüst, die Home genauso wie jede Unterseite/Landingpage. Abweichende Breiten oder „nur auf der Home\"-Verhalten sind verboten. Das sticky Menü ganz oben in dieser Datei ist die Referenz."
  },
  {
   "nr": "40",
   "id": "footer",
   "titel": "Footer",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "link": "https://design.tfcz.ch/brandguide#footer",
   "kurz": "Ein Footer für alle Seiten, gebaut als Baustein system/components/footer.js. Die Home hat denselben wie jede Unterseite. Unten siehst du den echten Baustein, nicht eine Nachbildung."
  },
  {
   "nr": "41",
   "id": "k-navigation-menu",
   "titel": "Navigation Menu",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-navigation-menu",
   "kurz": "Hauptnavigation mit aufklappendem Bereich. Jeder Eintrag erklärt in einer Zeile, wohin er führt.",
   "baustein": "Navigation Menu"
  },
  {
   "nr": "42",
   "id": "k-menubar",
   "titel": "Menubar",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-menubar",
   "kurz": "Menüleiste wie in einem Programm, jedes Menü klappt beim Klick auf.",
   "baustein": "Menubar"
  },
  {
   "nr": "43",
   "id": "k-context-menu",
   "titel": "Context Menu",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-context-menu",
   "kurz": "Menü per Rechtsklick auf eine Fläche, auf dem Handy per langem Druck.",
   "baustein": "Context Menu"
  },
  {
   "nr": "44",
   "id": "k-command",
   "titel": "Command",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-command",
   "kurz": "Befehlspalette: tippen, filtern, mit Enter ausführen. Gruppen trennen Seiten und Aktionen.",
   "baustein": "Command"
  },
  {
   "nr": "45",
   "id": "k-sidebar",
   "titel": "Sidebar",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-sidebar",
   "kurz": "Seitenleiste einer App. Sie lässt sich auf eine Icon-Leiste zusammenklappen.",
   "baustein": "Sidebar"
  },
  {
   "nr": "46",
   "id": "k-profil-men",
   "titel": "Profil-Menü",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-profil-men",
   "kurz": "Menü hinter dem eigenen Avatar: Name, Mitgliedschaft und die wichtigsten Links, Abmelden zuletzt in Rot.",
   "baustein": "Profil-Menü"
  },
  {
   "nr": "47",
   "id": "k-werkzeugleiste",
   "titel": "Werkzeugleiste",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-werkzeugleiste",
   "kurz": "Leiste aus Icons. Das gewählte Werkzeug klappt federnd auf und zeigt seinen Namen.",
   "baustein": "Werkzeugleiste"
  },
  {
   "nr": "48",
   "id": "k-direction",
   "titel": "Direction",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Navigation & Seitengerüst",
   "gruppe": "Weitere Navigation",
   "link": "https://design.tfcz.ch/brandguide#k-direction",
   "kurz": "Legt die Schreibrichtung fest. Links nach rechts ist Standard, rechts nach links spiegelt das Layout. Namen und Sätze stehen in <bdi>, damit der Punkt hinter «Luca J.» bleibt.",
   "baustein": "Direction"
  },
  {
   "nr": "49",
   "id": "formulare",
   "titel": "Formular-Elemente",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "link": "https://design.tfcz.ch/brandguide#formulare",
   "kurz": "Fokus = Gold-Rahmen (nicht Browser-Blau). Dropdowns: jede Auswahl-Liste nutzt das Custom-Dropdown .csel, eine dunkle Navy-Liste mit Brand-Line (blau oben / gold unten), Drop-Cascade beim Öffnen und Gold-Haken an der gewählten Option; …",
   "baustein": [
    "Label",
    "Input",
    "Textarea",
    "Native Select",
    "Select"
   ]
  },
  {
   "nr": "50",
   "id": "controls",
   "titel": "Eingabe-Controls",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "link": "https://design.tfcz.ch/brandguide#controls",
   "kurz": "Die Standard-Controls im TFCZ-Stil (Basis-Satz nach Material, Bootstrap und shadcn). Semantik überall gleich: Häkchen/Bestätigung = Grün · Auswahl = Gold · Aktion = Blau · Fokus = Gold-Rahmen · Hover = Brand-Rahmen nur bei nicht …",
   "baustein": [
    "Checkbox",
    "Radio Group",
    "Switch",
    "Slider",
    "Toggle Group",
    "Tabs"
   ]
  },
  {
   "nr": "51",
   "id": "k-field",
   "titel": "Field",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-field",
   "kurz": "Label, Feld und Hilfetext als Einheit. Der Hilfetext steht unter dem Feld.",
   "baustein": "Field"
  },
  {
   "nr": "52",
   "id": "k-input-group",
   "titel": "Input Group",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-input-group",
   "kurz": "Feld mit Icon davor und Knopf dahinter, als ein Block.",
   "baustein": "Input Group"
  },
  {
   "nr": "53",
   "id": "k-input-otp",
   "titel": "Input OTP",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-input-otp",
   "kurz": "Code aus sechs Ziffern, je ein Feld. Der Fokus springt beim Tippen weiter.",
   "baustein": "Input OTP"
  },
  {
   "nr": "54",
   "id": "k-combobox",
   "titel": "Combobox",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-combobox",
   "kurz": "Auswahl mit Suche: tippen filtert die Liste, ein Klick übernimmt den Namen.",
   "baustein": "Combobox"
  },
  {
   "nr": "55",
   "id": "k-date-picker",
   "titel": "Date Picker",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-date-picker",
   "kurz": "Datum über einen kleinen Kalender wählen. Das gewählte Datum steht danach im Knopf.",
   "baustein": "Date Picker"
  },
  {
   "nr": "56",
   "id": "k-questionnaire",
   "titel": "Questionnaire",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-questionnaire",
   "kurz": "Fragen Schritt für Schritt: eine Wahl, mehrere Wahlen und Freitext, der sich überspringen lässt.",
   "baustein": "Questionnaire"
  },
  {
   "nr": "57",
   "id": "k-avatar-wahl",
   "titel": "Avatar-Wahl",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-avatar-wahl",
   "kurz": "Profilbild in Emblem-Form aus Farben wählen, die Initialen folgen dem eingetippten Namen.",
   "baustein": "Avatar-Wahl"
  },
  {
   "nr": "58",
   "id": "k-datei-upload",
   "titel": "Datei-Upload",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-datei-upload",
   "kurz": "Dateien hineinziehen oder anklicken. PDF, JPG und PNG bis 5 MB laden mit Fortschritt hoch, alles andere wird mit Grund abgewiesen.",
   "baustein": "Datei-Upload"
  },
  {
   "nr": "59",
   "id": "k-team-auswahl",
   "titel": "Team-Auswahl",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-team-auswahl",
   "kurz": "Anzahl Personen mit Plus und Minus, die Avatare stapeln sich überlappend und springen federnd dazu.",
   "baustein": "Team-Auswahl"
  },
  {
   "nr": "60",
   "id": "k-collapsible",
   "titel": "Collapsible",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Formulare & Eingaben",
   "gruppe": "Weitere Eingaben",
   "link": "https://design.tfcz.ch/brandguide#k-collapsible",
   "kurz": "Ein Bereich, der sich auf- und zuklappt, hier für weitere Termine.",
   "baustein": "Collapsible"
  },
  {
   "nr": "61",
   "id": "feedback",
   "titel": "Feedback & Status",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "link": "https://design.tfcz.ch/brandguide#feedback",
   "kurz": "Alerts nutzen die Sekundär-Akzente (sparsam, max. ~5% Fläche): Blau = Info · Grün = Erfolg · Orange = Warnung · Rot = Fehler/ungespeichert. Der Spinner trägt die Brand-Line (blau oben / gold unten). Skeletons statt leerer Flächen beim …",
   "baustein": [
    "Skeleton",
    "Spinner",
    "Tooltip",
    "Toast",
    "Empty",
    "Alert",
    "Progress"
   ]
  },
  {
   "nr": "62",
   "id": "portal",
   "titel": "Portal-Schliessen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "link": "https://design.tfcz.ch/brandguide#portal",
   "kurz": "Fenster über der Seite, mit Brand-Line. Schliesst per X, Esc und Klick daneben, ohne Animation.",
   "baustein": "Dialog"
  },
  {
   "nr": "63",
   "id": "k-alert-dialog",
   "titel": "Alert Dialog",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Weitere Fenster",
   "link": "https://design.tfcz.ch/brandguide#k-alert-dialog",
   "kurz": "Rückfrage vor einer Handlung, die sich nicht rückgängig machen lässt. Der gefährliche Knopf ist rot.",
   "baustein": "Alert Dialog"
  },
  {
   "nr": "64",
   "id": "k-sheet",
   "titel": "Sheet",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Weitere Fenster",
   "link": "https://design.tfcz.ch/brandguide#k-sheet",
   "kurz": "Panel, das von rechts hereinkommt, für Filter oder Details neben dem Inhalt.",
   "baustein": "Sheet"
  },
  {
   "nr": "65",
   "id": "k-drawer",
   "titel": "Drawer",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Weitere Fenster",
   "link": "https://design.tfcz.ch/brandguide#k-drawer",
   "kurz": "Schublade von unten, vor allem auf dem Handy. Der Griff oben zeigt, dass sie sich wegziehen lässt.",
   "baustein": "Drawer"
  },
  {
   "nr": "66",
   "id": "k-popover",
   "titel": "Popover",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Weitere Fenster",
   "link": "https://design.tfcz.ch/brandguide#k-popover",
   "kurz": "Kleiner Kasten am Knopf, für eine kurze Eingabe. Schliesst beim Klick daneben.",
   "baustein": "Popover"
  },
  {
   "nr": "67",
   "id": "k-hover-card",
   "titel": "Hover Card",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Weitere Fenster",
   "link": "https://design.tfcz.ch/brandguide#k-hover-card",
   "kurz": "Vorschau beim Überfahren eines Namens, mit Emblem-Avatar und Kurzinfo.",
   "baustein": "Hover Card"
  },
  {
   "nr": "68",
   "id": "unlocks",
   "titel": "Unlock- & Feedback-Animationen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Belohnungen",
   "link": "https://design.tfcz.ch/brandguide#unlocks",
   "kurz": "Wiederverwendbare Game-Style-Animationen. Level-Up (z. B. Achievement / Fortschritt) und Sterne-Rating (z. B. Feedback-Bewertung). Keine Emojis, alles SVG/CSS. Klick „Abspielen\" zum erneuten Triggern."
  },
  {
   "nr": "69",
   "id": "easteregg",
   "titel": "Easter-Egg · Emblem-Pop",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Fenster & Rückmeldungen",
   "gruppe": "Belohnungen",
   "link": "https://design.tfcz.ch/brandguide#easteregg",
   "kurz": "Belohnungs-Popup der Eiersuche. Klasse .eegg: Ei fällt rein, wackelt zunehmend (Spannung) und knackt dann auf. Das blaue TFCZ-Emblem springt mit Bounce heraus, und Käse regnet herum. Wiederverwendbar für jeden Egg-Fund."
  },
  {
   "nr": "70",
   "id": "cards",
   "titel": "Cards, Tags & Datenreihen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "link": "https://design.tfcz.ch/brandguide#cards",
   "kurz": "Immer dunkler Navy-Gradient, leicht transparent + backdrop-blur, nie hell. Angedockte Eyebrow-Tags runden nur oben. Datenreihen: Sieger gold, Verlierer gedimmt.",
   "baustein": [
    "Card",
    "Avatar"
   ]
  },
  {
   "nr": "71",
   "id": "badges",
   "titel": "Kategorie-Badges",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "link": "https://design.tfcz.ch/brandguide#badges",
   "kurz": "Kategorie als Pille mit Punkt. Die Farbe kommt aus den Kategorie-Tokens.",
   "baustein": "Badge"
  },
  {
   "nr": "72",
   "id": "pakete",
   "titel": "Paket-Karten",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "link": "https://design.tfcz.ch/brandguide#pakete",
   "kurz": "pcard mit „Beliebt\"-Ribbon & Gold-Check-Bullets. Gold-Rahmen = gewählt."
  },
  {
   "nr": "73",
   "id": "k-item",
   "titel": "Item",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Weitere Bausteine",
   "link": "https://design.tfcz.ch/brandguide#k-item",
   "kurz": "Zeile mit Icon, Titel, Beschreibung und einer Aktion rechts.",
   "baustein": "Item"
  },
  {
   "nr": "74",
   "id": "k-separator",
   "titel": "Separator",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Weitere Bausteine",
   "link": "https://design.tfcz.ch/brandguide#k-separator",
   "kurz": "Trennlinie zwischen Gruppen, waagrecht oder senkrecht. Neutral, nie in Gold.",
   "baustein": "Separator"
  },
  {
   "nr": "75",
   "id": "k-aspect-ratio",
   "titel": "Aspect Ratio",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Weitere Bausteine",
   "link": "https://design.tfcz.ch/brandguide#k-aspect-ratio",
   "kurz": "Rahmen mit festem Seitenverhältnis, hier 16:9. Das Bild füllt ihn, ohne sich zu verzerren.",
   "baustein": "Aspect Ratio"
  },
  {
   "nr": "76",
   "id": "k-attachment",
   "titel": "Attachment",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Weitere Bausteine",
   "link": "https://design.tfcz.ch/brandguide#k-attachment",
   "kurz": "Datei im Anhang: Typ, Name, Grösse und Upload-Stand, dazu Herunterladen und Entfernen.",
   "baustein": "Attachment"
  },
  {
   "nr": "77",
   "id": "k-scroll-area",
   "titel": "Scroll Area",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Weitere Bausteine",
   "link": "https://design.tfcz.ch/brandguide#k-scroll-area",
   "kurz": "Kasten mit eigener schmaler Bildlaufleiste, wenn der Inhalt höher ist als der Platz.",
   "baustein": "Scroll Area"
  },
  {
   "nr": "78",
   "id": "k-resizable",
   "titel": "Resizable",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Weitere Bausteine",
   "link": "https://design.tfcz.ch/brandguide#k-resizable",
   "kurz": "Zwei Bereiche, deren Grenze sich ziehen lässt, auch mit den Pfeiltasten.",
   "baustein": "Resizable"
  },
  {
   "nr": "79",
   "id": "k-bento-raster",
   "titel": "Bento-Raster",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-bento-raster",
   "kurz": "Raster aus Kacheln unterschiedlicher Grösse. Beim Sichtbarwerden zählen die Zahlen hoch und die Balken wachsen.",
   "baustein": "Bento-Raster"
  },
  {
   "nr": "80",
   "id": "k-wende-karte",
   "titel": "Wende-Karte",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-wende-karte",
   "kurz": "Dreht sich beim Überfahren oder Antippen um und zeigt auf der Rückseite, was dazugehört.",
   "baustein": "Wende-Karte"
  },
  {
   "nr": "81",
   "id": "k-karten-stapel",
   "titel": "Karten-Stapel",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-karten-stapel",
   "kurz": "Drei Karten liegen gestapelt. Ein Klick fächert sie untereinander auf, ein zweiter legt sie wieder zusammen.",
   "baustein": "Karten-Stapel"
  },
  {
   "nr": "82",
   "id": "k-karten-karussell",
   "titel": "Karten-Karussell",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-karten-karussell",
   "kurz": "Waagrecht scrollbare Karten mit Bild, Kategorie und Bewertung. Die Pfeile springen je eine Karte weiter.",
   "baustein": "Karten-Karussell"
  },
  {
   "nr": "82b",
   "id": "k-ring-karussell",
   "titel": "Ring-Karussell",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-ring-karussell",
   "kurz": "Karten auf einem drehbaren 3D-Ring für eine kleine Auswahl gleichwertiger Dinge, etwa die Turnierformate. Blick gerade oder von oben.",
   "baustein": "Ring-Karussell"
  },
  {
   "nr": "83",
   "id": "k-auszahlung",
   "titel": "Auszahlung",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-auszahlung",
   "kurz": "Mehrstufiger Ablauf mit Fortschritt: jeder Schritt dreht, bis er grün abgehakt ist, am Ende zeichnet sich ein Häkchen.",
   "baustein": "Auszahlung"
  },
  {
   "nr": "84",
   "id": "k-glas-karte",
   "titel": "Glas-Karte",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-glas-karte",
   "kurz": "Glasfläche über einem Foto: der Hintergrund bricht sich leicht wie hinter echtem Glas. Die Brechung zeigen nur Chromium-Browser, alle anderen zeigen mattes Glas.",
   "baustein": "Glas-Karte"
  },
  {
   "nr": "85",
   "id": "k-punkte-karte",
   "titel": "Punkte-Karte",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-punkte-karte",
   "kurz": "Ein Punkteraster weicht dem Mauszeiger aus und leuchtet in seiner Nähe auf.",
   "baustein": "Punkte-Karte"
  },
  {
   "nr": "86",
   "id": "k-spotlight-karten",
   "titel": "Spotlight-Karten",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-spotlight-karten",
   "kurz": "Ein Lichtkegel folgt dem Zeiger, die Karte kippt leicht mit, die anderen treten zurück.",
   "baustein": "Spotlight-Karten"
  },
  {
   "nr": "87",
   "id": "k-beitrag-karte",
   "titel": "Beitrag-Karte",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Karten & Inhalte",
   "gruppe": "Karten-Effekte",
   "link": "https://design.tfcz.ch/brandguide#k-beitrag-karte",
   "kurz": "Ein Beitrag mit Absender, Text, Foto und Antwort. Das Herz zählt mit und wird rot.",
   "baustein": "Beitrag-Karte"
  },
  {
   "nr": "88",
   "id": "daten",
   "titel": "Daten & Listen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "link": "https://design.tfcz.ch/brandguide#daten",
   "kurz": "Tabellen, Avatare und Akkordeons. Akkordeon-Hover: Brand-Rahmen per inset box-shadow (.acc-head), ohne Layout-Sprung (Sektion 19).",
   "baustein": [
    "Accordion",
    "Table"
   ]
  },
  {
   "nr": "89",
   "id": "kalender",
   "titel": "Kalender & Dock-Lupe",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "link": "https://design.tfcz.ch/brandguide#kalender",
   "kurz": "Monatsansicht. Heute ist eine goldene Zahl, der gewählte Tag trägt den goldenen Rahmen, Punkte zeigen Termine.",
   "baustein": "Calendar"
  },
  {
   "nr": "90",
   "id": "barometer",
   "titel": "Fun-Barometer + Kennwert-Balken",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "link": "https://design.tfcz.ch/brandguide#barometer",
   "kurz": "Unten läuft system/components/baro.js, dieselbe Datei wie auf der Home. Web-Pflicht: die vertikale Tube (Spass oben / Wettkampf unten) steht immer zusammen mit dem Beschreibungs-Panel und den Kennwert-Balken. 5 Stufen: Käsekick · …"
  },
  {
   "nr": "91",
   "id": "k-data-table",
   "titel": "Data Table",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "link": "https://design.tfcz.ch/brandguide#k-data-table",
   "kurz": "Tabelle zum Sortieren und Auswählen. Klick auf eine Spalte sortiert, die sortierte Spalte ist gold.",
   "baustein": "Data Table"
  },
  {
   "nr": "92",
   "id": "k-area-chart",
   "titel": "Area Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-area-chart",
   "kurz": "Fläche unter der Linie mit Verlauf nach unten. Beim Überfahren zeigt eine Hilfslinie alle Werte des Tages. Beim ersten Sichtbarwerden wischt sich der Chart von links ein.",
   "baustein": "Area Chart"
  },
  {
   "nr": "93",
   "id": "k-bar-chart",
   "titel": "Bar Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-bar-chart",
   "kurz": "Balken wachsen gestaffelt von unten. Der höchste Wert ist gold, alle anderen blau.",
   "baustein": "Bar Chart"
  },
  {
   "nr": "94",
   "id": "k-candlestick-chart",
   "titel": "Candlestick Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-candlestick-chart",
   "kurz": "Start, Hoch, Tief und Ende je Zeitraum. Grün ist gestiegen, Rot gesunken; die Kerzen wachsen aus der Mitte.",
   "baustein": "Candlestick Chart"
  },
  {
   "nr": "95",
   "id": "k-choropleth-chart",
   "titel": "Choropleth Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-choropleth-chart",
   "kurz": "Fläche nach Wert eingefärbt. Die Kantone stehen als Kacheln in ungefährer Lage, je dunkler, desto mehr.",
   "baustein": "Choropleth Chart"
  },
  {
   "nr": "96",
   "id": "k-composed-chart",
   "titel": "Composed Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-composed-chart",
   "kurz": "Balken und Linie auf einer Zeitachse, mit eigener Skala links und rechts.",
   "baustein": "Composed Chart"
  },
  {
   "nr": "97",
   "id": "k-funnel-chart",
   "titel": "Funnel Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-funnel-chart",
   "kurz": "Stufen, die schmaler werden. Der Tooltip nennt den Anteil der Stufe davor.",
   "baustein": "Funnel Chart"
  },
  {
   "nr": "98",
   "id": "k-gauge",
   "titel": "Gauge",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-gauge",
   "kurz": "Ein Wert auf einer Skala, mit Zeiger. Der Bogen läuft von Blau nach Gold.",
   "baustein": "Gauge"
  },
  {
   "nr": "99",
   "id": "k-heatmap-chart",
   "titel": "Heatmap Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-heatmap-chart",
   "kurz": "Raster aus Wochentag und Uhrzeit, je dunkler, desto mehr los. Die Felder erscheinen diagonal.",
   "baustein": "Heatmap Chart"
  },
  {
   "nr": "100",
   "id": "k-line-chart",
   "titel": "Line Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-line-chart",
   "kurz": "Mehrere Verläufe ohne Fläche. Die Hilfslinie zeigt beide Werte am selben Punkt.",
   "baustein": "Line Chart"
  },
  {
   "nr": "101",
   "id": "k-live-line-chart",
   "titel": "Live Line Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-live-line-chart",
   "kurz": "Neue Werte laufen jede Sekunde von rechts ein. Der Chart pausiert, sobald er nicht mehr zu sehen ist.",
   "baustein": "Live Line Chart"
  },
  {
   "nr": "102",
   "id": "k-pie-chart",
   "titel": "Pie Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-pie-chart",
   "kurz": "Anteile als Ring mit der Summe in der Mitte. Die Stücke laufen im Uhrzeigersinn ein.",
   "baustein": "Pie Chart"
  },
  {
   "nr": "103",
   "id": "k-profit-loss-line",
   "titel": "Profit/Loss Line",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-profit-loss-line",
   "kurz": "Eine Linie um die Nulllinie: darüber grün, darunter rot, jeweils mit Fläche.",
   "baustein": "Profit/Loss Line"
  },
  {
   "nr": "104",
   "id": "k-radar-chart",
   "titel": "Radar Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-radar-chart",
   "kurz": "Stärken auf mehreren Achsen, zwei Profile übereinander.",
   "baustein": "Radar Chart"
  },
  {
   "nr": "105",
   "id": "k-ring-chart",
   "titel": "Ring Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-ring-chart",
   "kurz": "Mehrere Fortschritte als Ringe ineinander. Die Zahl in der Mitte gehört zum äussersten Ring.",
   "baustein": "Ring Chart"
  },
  {
   "nr": "106",
   "id": "k-sankey-chart",
   "titel": "Sankey Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-sankey-chart",
   "kurz": "Ströme zwischen Stufen, die Breite zeigt die Menge. Wischt sich von links ein.",
   "baustein": "Sankey Chart"
  },
  {
   "nr": "107",
   "id": "k-scatter-chart",
   "titel": "Scatter Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-scatter-chart",
   "kurz": "Punkte in zwei Dimensionen. Sie erscheinen nacheinander, der Tooltip nennt Name und Werte.",
   "baustein": "Scatter Chart"
  },
  {
   "nr": "108",
   "id": "k-sunburst-chart",
   "titel": "Sunburst Chart",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Daten & Charts",
   "gruppe": "Charts",
   "link": "https://design.tfcz.ch/brandguide#k-sunburst-chart",
   "kurz": "Hierarchie als Ringe: innen die Gruppe, aussen ihre Teile.",
   "baustein": "Sunburst Chart"
  },
  {
   "nr": "109",
   "id": "bildplayer",
   "titel": "Bild-Player",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "link": "https://design.tfcz.ch/brandguide#bildplayer",
   "kurz": "Bilder zum Durchblättern, mit Pfeilen und Punkten. Auf dem Handy auch per Wischen.",
   "baustein": "Carousel"
  },
  {
   "nr": "110",
   "id": "getraenke",
   "titel": "Getränkeliste",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "link": "https://design.tfcz.ch/brandguide#getraenke",
   "kurz": "Ein Baustein, eine Liste. Die Struktur steht in system/drinks.js, die Darstellung in system/components/drinks.js. So gibt es vom Sortiment nur eine Fassung."
  },
  {
   "nr": "111",
   "id": "overlay",
   "titel": "Stream · Spielstatistik-Widget",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "link": "https://design.tfcz.ch/brandguide#overlay",
   "kurz": "Vollbild-Grafik (1920×1080), die im Livestream zwischen den Spielen erscheint: eine Statistik pro Screen, Auto-Wechsel alle 5 Sek. Nur die Zahlen tragen Team-Farbe (Grün vs. Schwarz). Die Tisch-Grafik mit Pfeilen zeigt, wo auf dem Tisch …"
  },
  {
   "nr": "112",
   "id": "kartebaustein",
   "titel": "Karte · Google Maps",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "link": "https://design.tfcz.ch/brandguide#kartebaustein",
   "kurz": "Ein Baustein, beide Seiten. Home und Firmenevents zeigen dieselbe Karte über system/components/map.js. Es ist Google Maps, keyless (klassischer output=embed, kein API-Key, keine Kosten), hell, mit Pin direkt an der Vereinsadresse. Den …"
  },
  {
   "nr": "113",
   "id": "k-now-playing",
   "titel": "Now playing",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Layout-Animationen",
   "link": "https://design.tfcz.ch/brandguide#k-now-playing",
   "kurz": "Ein Mini-Player öffnet sich zum grossen Player. Bild, Titel und Untertitel wandern dabei an ihre neue Stelle, der Rest blendet ein. Für laufende Inhalte wie den Livestream.",
   "baustein": "Now playing"
  },
  {
   "nr": "114",
   "id": "k-karte-ffnet-sich",
   "titel": "Karte öffnet sich",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Layout-Animationen",
   "link": "https://design.tfcz.ch/brandguide#k-karte-ffnet-sich",
   "kurz": "Eine Karte wächst aus dem Raster zur Detailansicht und beim Schliessen wieder zurück an ihren Platz. Nur für Inhalte, die sich aus einer Kachel öffnen; Dialoge und Popups schliessen weiterhin sofort.",
   "baustein": "Karte öffnet sich"
  },
  {
   "nr": "115",
   "id": "k-foto-ffnet-sich",
   "titel": "Foto öffnet sich",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Layout-Animationen",
   "link": "https://design.tfcz.ch/brandguide#k-foto-ffnet-sich",
   "kurz": "Eine Kachel wird zum grossen Bild, über die View-Transition-API des Browsers. Wo der Browser sie nicht kennt, öffnet sich das Bild ohne Übergang.",
   "baustein": "Foto öffnet sich"
  },
  {
   "nr": "116",
   "id": "k-message",
   "titel": "Message",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Chat",
   "link": "https://design.tfcz.ch/brandguide#k-message",
   "kurz": "Eine Nachricht mit Emblem-Avatar, Name, Zeit und Text.",
   "baustein": "Message"
  },
  {
   "nr": "117",
   "id": "k-bubble",
   "titel": "Bubble",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Chat",
   "link": "https://design.tfcz.ch/brandguide#k-bubble",
   "kurz": "Nachricht als Sprechblase. Eigene rechts in Blau, andere links in Frost, Reaktionen darunter.",
   "baustein": "Bubble"
  },
  {
   "nr": "118",
   "id": "k-marker",
   "titel": "Marker",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Chat",
   "link": "https://design.tfcz.ch/brandguide#k-marker",
   "kurz": "Hinweis mitten im Gespräch: Tagestrenner oder Systemnotiz, ruhig und zentriert.",
   "baustein": "Marker"
  },
  {
   "nr": "119",
   "id": "k-message-scroller",
   "titel": "Message Scroller",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "Chat",
   "link": "https://design.tfcz.ch/brandguide#k-message-scroller",
   "kurz": "Chatverlauf zum Scrollen. Wer nach oben scrollt, bekommt einen Knopf zurück zur neuesten Nachricht.",
   "baustein": "Message Scroller"
  },
  {
   "nr": "120",
   "id": "k-ki-eingabe",
   "titel": "KI-Eingabe",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "KI-Assistent",
   "link": "https://design.tfcz.ch/brandguide#k-ki-eingabe",
   "kurz": "Eingabe für den TFCZ-Assistenten: wächst mit dem Text, das Thema lässt sich umschalten, Enter sendet. Der Senden-Knopf ist erst aktiv, wenn etwas dasteht.",
   "baustein": "KI-Eingabe"
  },
  {
   "nr": "121",
   "id": "k-ki-suche",
   "titel": "KI-Suche",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "KI-Assistent",
   "link": "https://design.tfcz.ch/brandguide#k-ki-suche",
   "kurz": "Wie die KI-Eingabe, dazu ein Schalter, der die Suche auf das Regelwerk ausdehnt. Eingeschaltet trägt er den goldenen Rahmen.",
   "baustein": "KI-Suche"
  },
  {
   "nr": "122",
   "id": "k-ki-arbeitet",
   "titel": "KI arbeitet",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "KI-Assistent",
   "link": "https://design.tfcz.ch/brandguide#k-ki-arbeitet",
   "kurz": "Der Assistent zeigt Schritt für Schritt, was er gerade tut, mit dem TFCZ-Spinner. Erledigtes bekommt ein grünes Häkchen.",
   "baustein": "KI arbeitet"
  },
  {
   "nr": "123",
   "id": "k-ki-denkt-nach",
   "titel": "KI denkt nach",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "KI-Assistent",
   "link": "https://design.tfcz.ch/brandguide#k-ki-denkt-nach",
   "kurz": "Kurzer Hinweis, solange eine Antwort entsteht. Der Text wechselt und glänzt dabei leicht.",
   "baustein": "KI denkt nach"
  },
  {
   "nr": "124",
   "id": "k-spracheingabe",
   "titel": "Spracheingabe",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Medien, Chat & KI",
   "gruppe": "KI-Assistent",
   "link": "https://design.tfcz.ch/brandguide#k-spracheingabe",
   "kurz": "Tippen startet die Aufnahme: der Knopf wird rot und pulsiert, die Balken zeigen den Pegel, die Zeit läuft mit. Nochmals tippen beendet.",
   "baustein": "Spracheingabe"
  },
  {
   "nr": "125",
   "id": "k-schwerkraft-wirbel",
   "titel": "Schwerkraft-Wirbel",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Hintergrund",
   "link": "https://design.tfcz.ch/brandguide#k-schwerkraft-wirbel",
   "kurz": "Der Standard-Hintergrund aller TFCZ-Seiten: ein Punkteraster, das um den Mauszeiger wirbelt und danach sanft zurückkehrt. Einschalten und mit der Maus über die ganze Seite fahren. Er kommt aus dem Baustein assets/js/bg-swirl.js, der …",
   "baustein": "Schwerkraft-Wirbel"
  },
  {
   "nr": "126",
   "id": "k-linien-hintergrund",
   "titel": "Linien-Hintergrund",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Hintergrund",
   "link": "https://design.tfcz.ch/brandguide#k-linien-hintergrund",
   "kurz": "Fliessende Linien in Blau und Gold, die sich langsam weiterzeichnen. Nur innerhalb einer Fläche wie einer Hero-Kachel; der Seitenhintergrund bleibt der Schwerkraft-Wirbel.",
   "baustein": "Linien-Hintergrund"
  },
  {
   "nr": "127",
   "id": "k-lichtstrahlen",
   "titel": "Lichtstrahlen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Hintergrund",
   "link": "https://design.tfcz.ch/brandguide#k-lichtstrahlen",
   "kurz": "Schräge Lichtstrahlen, die langsam durch die Fläche ziehen. Leise dosiert, damit der Text lesbar bleibt.",
   "baustein": "Lichtstrahlen"
  },
  {
   "nr": "128",
   "id": "k-str-mungsfeld",
   "titel": "Strömungsfeld",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Hintergrund",
   "link": "https://design.tfcz.ch/brandguide#k-str-mungsfeld",
   "kurz": "Punkte folgen einem Strömungsfeld und hinterlassen Spuren, wie Bälle, die über den Tisch laufen.",
   "baustein": "Strömungsfeld"
  },
  {
   "nr": "129",
   "id": "k-formen-hero",
   "titel": "Formen-Hero",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Hintergrund",
   "link": "https://design.tfcz.ch/brandguide#k-formen-hero",
   "kurz": "Durchscheinende Formen fallen beim Sichtbarwerden ein und schweben danach leicht, dann erscheint der Text.",
   "baustein": "Formen-Hero"
  },
  {
   "nr": "130",
   "id": "k-wechselnder-gruss",
   "titel": "Wechselnder Gruss",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-wechselnder-gruss",
   "kurz": "Ein Wort wechselt alle zwei Sekunden, hier der Gruss in den Landessprachen.",
   "baustein": "Wechselnder Gruss"
  },
  {
   "nr": "131",
   "id": "k-glitch-text",
   "titel": "Glitch-Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-glitch-text",
   "kurz": "Kurze Störung in Blau und Gold, alle paar Sekunden. Sparsam einsetzen, etwa für ein Event mit Technik-Thema.",
   "baustein": "Glitch-Text"
  },
  {
   "nr": "132",
   "id": "k-matrix-text",
   "titel": "Matrix-Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-matrix-text",
   "kurz": "Buchstaben laufen als Nullen und Einsen durch, bis sie stehen. Ein Klick spielt es erneut.",
   "baustein": "Matrix-Text"
  },
  {
   "nr": "133",
   "id": "k-scroll-w-rter",
   "titel": "Scroll-Wörter",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-scroll-w-rter",
   "kurz": "Beim Scrollen durch die Liste leuchtet das Wort in der Mitte gold auf.",
   "baustein": "Scroll-Wörter"
  },
  {
   "nr": "134",
   "id": "k-glanz-text",
   "titel": "Glanz-Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-glanz-text",
   "kurz": "Ein goldener Glanz läuft in Schleife über den Text. Für eine einzelne Überschrift, nie für Fliesstext.",
   "baustein": "Glanz-Text"
  },
  {
   "nr": "135",
   "id": "k-geteilter-text",
   "titel": "Geteilter Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-geteilter-text",
   "kurz": "Der Text liegt in zwei versetzten Hälften und fügt sich beim Überfahren zusammen.",
   "baustein": "Geteilter Text"
  },
  {
   "nr": "136",
   "id": "k-schatten-text",
   "titel": "Schatten-Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-schatten-text",
   "kurz": "Mehrere farbige Schatten in Blau und Gold, die beim Überfahren flach zusammenschnappen.",
   "baustein": "Schatten-Text"
  },
  {
   "nr": "137",
   "id": "k-schreibmaschine",
   "titel": "Schreibmaschine",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-schreibmaschine",
   "kurz": "Schreibt Wörter nacheinander, löscht sie wieder und beginnt von vorn, mit blinkendem Cursor.",
   "baustein": "Schreibmaschine"
  },
  {
   "nr": "137b",
   "id": "k-invertierender-text",
   "titel": "Invertierender Text",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Text",
   "link": "https://design.tfcz.ch/brandguide#k-invertierender-text",
   "kurz": "Weisse Schrift, die sich per mix-blend-mode: difference aus dem Hintergrund rechnet. Nur über Fotos oder klar hellen und dunklen Flächen.",
   "baustein": "Invertierender Text"
  },
  {
   "nr": "138",
   "id": "k-scroll-zeitstrahl",
   "titel": "Scroll-Zeitstrahl",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-scroll-zeitstrahl",
   "kurz": "Die Linie füllt sich im Takt des Scrollens, erreichte Punkte werden gold. Für Abläufe und Geschichte. Scrollen bleibt frei, die Seite reagiert nur darauf.",
   "baustein": "Scroll-Zeitstrahl"
  },
  {
   "nr": "139",
   "id": "k-angeheftete-szene",
   "titel": "Angeheftete Szene",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-angeheftete-szene",
   "kurz": "Die Bühne bleibt stehen, während man scrollt, und wechselt Schritt für Schritt. Hier im Kasten; auf einer Seite läuft es über die ganze Höhe.",
   "baustein": "Angeheftete Szene"
  },
  {
   "nr": "140",
   "id": "k-linie-zeichnet-sich",
   "titel": "Linie zeichnet sich",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-linie-zeichnet-sich",
   "kurz": "Eine Linie zeichnet sich beim Sichtbarwerden, am Ziel springt die Markierung auf. Für Wege, Verbindungen und Abläufe.",
   "baustein": "Linie zeichnet sich"
  },
  {
   "nr": "141",
   "id": "k-ball-auf-der-bahn",
   "titel": "Ball auf der Bahn",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-ball-auf-der-bahn",
   "kurz": "Ein Element folgt einer vorgezeichneten Kurve: der Ball läuft vom Mittelfeld über die Stürmer ins Tor.",
   "baustein": "Ball auf der Bahn"
  },
  {
   "nr": "142",
   "id": "k-sortierbare-liste",
   "titel": "Sortierbare Liste",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-sortierbare-liste",
   "kurz": "Einträge am Griff ziehen, die anderen gleiten an ihren Platz. Mit der Tastatur: Griff fokussieren und Pfeil hoch oder runter.",
   "baustein": "Sortierbare Liste"
  },
  {
   "nr": "143",
   "id": "k-wort-reveal",
   "titel": "Wort-Reveal",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-wort-reveal",
   "kurz": "Die Überschrift steigt Wort für Wort aus einer unsichtbaren Linie auf, sobald sie ins Bild kommt. Für eine Hauptüberschrift je Seite.",
   "baustein": "Wort-Reveal"
  },
  {
   "nr": "143b",
   "id": "k-einblenden",
   "titel": "Einblenden beim Scrollen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-einblenden",
   "kurz": "Klasse fx-rise: das Element steigt beim Hineinscrollen auf, reines CSS über animation-timeline: view(). Sparsam einsetzen.",
   "baustein": "Einblenden beim Scrollen"
  },
  {
   "nr": "143c",
   "id": "k-gestaffelt",
   "titel": "Gestaffelt erscheinen",
   "teil": "Teil 3 · Komponenten",
   "kapitel": "Effekte",
   "gruppe": "Scroll & Bewegung",
   "link": "https://design.tfcz.ch/brandguide#k-gestaffelt",
   "kurz": "Die Elemente einer kurzen Liste erscheinen nacheinander, gerechnet mit sibling-index(). data-fx=\"stagger\".",
   "baustein": "Gestaffelt erscheinen"
  },
  {
   "nr": "144",
   "id": "ko-regler",
   "titel": "Zuerst die Richtung",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-regler",
   "kurz": "Bevor die erste Zeile entsteht, steht fest, wie ruhig oder wie mutig die Seite wird. Die Stufe folgt aus dem Zweck der Seite. Farben, Schrift und Bausteine bleiben auf jeder Stufe dieselben, es ändern sich Aufbau, Bildanteil und Bewegung."
  },
  {
   "nr": "145",
   "id": "ko-hero",
   "titel": "Der Einstieg: Text links, Foto rechts",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-hero",
   "kurz": "Der erste Bildschirm teilt sich in einen Textblock und ein echtes Foto aus dem Club. Links steht, worum es geht und was man tun kann, rechts sieht man, wie es sich anfühlt. Auf dem Handy steht der Text zuerst."
  },
  {
   "nr": "146",
   "id": "ko-karten",
   "titel": "Keine drei gleichen Karten",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-karten",
   "kurz": "Drei gleich grosse Kästchen mit Icon, Titel und Satz sagen dem Auge, dass alles gleich wichtig ist. Meistens stimmt das nicht. Das Wichtigste bekommt mehr Fläche und ein Foto, der Rest ordnet sich darunter."
  },
  {
   "nr": "147",
   "id": "ko-rhythmus",
   "titel": "Jeder Abschnitt hat seine eigene Form",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-rhythmus",
   "kurz": "Eine Seite liest sich wie ein Gespräch, wenn die Abschnitte wechseln: Einstieg, eine Reihe mit Zahlen, Text neben Foto in der anderen Richtung, ein Zitat, zum Schluss die Aktion. Wiederholt sich dieselbe Form, blättert man durch, ohne …"
  },
  {
   "nr": "148",
   "id": "ko-weissraum",
   "titel": "Abstand zeigt, was zusammengehört",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-weissraum",
   "kurz": "Innerhalb einer Gruppe liegen die Dinge nah beieinander, zwischen zwei Gruppen ist deutlich mehr Luft. So braucht es weniger Linien und Kästen, weil der Abstand die Ordnung schon zeigt. Die Werte kommen aus den Spacing-Tokens des Brand …"
  },
  {
   "nr": "149",
   "id": "ko-aktion",
   "titel": "Eine Seite, eine Hauptaktion",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-aktion",
   "kurz": "Jede Seite hat genau eine Sache, die sie auslösen soll. Sie steht im Einstieg und am Schluss noch einmal. Alles andere ist Blau oder Ghost. Gold bleibt der Mitgliedschaft vorbehalten, wie im Abschnitt zu den Buttons beschrieben."
  },
  {
   "nr": "150",
   "id": "ko-bewegung",
   "titel": "Bewegung braucht einen Grund",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-bewegung",
   "kurz": "Eine Animation ist erlaubt, wenn sie etwas sagt: dass ein Klick angekommen ist, dass sich ein Zustand ändert, was zuerst wichtig ist, oder wie eine Geschichte weitergeht. «Sieht lebendig aus» reicht nicht. Der Schwerkraft-Wirbel im …"
  },
  {
   "nr": "151",
   "id": "ko-effekte",
   "titel": "Kein Glühen, keine fremden Farben",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-effekte",
   "kurz": "Tiefe entsteht über die Frost-Fläche, den feinen Innenrand und die Brand-Line. Neon-Schein, Glas auf allem und Lila-Türkis-Verläufe gehören zu anderen Marken. Erlaubt sind die vier Verläufe aus dem Abschnitt Farben."
  },
  {
   "nr": "152",
   "id": "ko-handy",
   "titel": "Auf dem Handy zuerst der Satz",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-handy",
   "kurz": "Ein zweispaltiger Einstieg stapelt sich auf dem Handy. Oben stehen Titel, Satz und Knopf, darunter das Foto. So ist die Aktion sichtbar, ohne dass jemand scrollen muss."
  },
  {
   "nr": "153",
   "id": "ko-fragen",
   "titel": "Vier Fragen vor der ersten Zeile",
   "teil": "Teil 4 · Komposition",
   "link": "https://design.tfcz.ch/brandguide#ko-fragen",
   "kurz": "Wer eine neue Seite baut, beantwortet diese vier Fragen zuerst. Zusammen mit dem Playbook im Brand Guide ergibt das den Plan für die Seite."
  },
  {
   "nr": "154",
   "id": "ka-geraet",
   "titel": "Ein Gerät, ein Finger, kein Zeiger",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-geraet",
   "kurz": "Die Kasse läuft auf EINEM Tablet quer (11 Zoll, 1194 × 834) und wird mit dem Finger bedient, im Stehen, oft mit der anderen Hand am Glas. Alles, was eine Maus voraussetzt, gibt es hier nicht."
  },
  {
   "nr": "155",
   "id": "ka-ruhe",
   "titel": "Nichts springt",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-ruhe",
   "kurz": "Wer an der Kasse steht, tippt auf eine Stelle, die er eine Sekunde vorher gesehen hat. Eine Fläche, die ihre Grösse ändert, verschiebt den nächsten Tipp — und der bucht dann etwas anderes."
  },
  {
   "nr": "156",
   "id": "ka-farben",
   "titel": "Vier Farben, vier Bedeutungen",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-farben",
   "kurz": "Die Kasse läuft im Navy-Modus. Jede Farbe sagt genau eine Sache, und sie sagt sie überall gleich."
  },
  {
   "nr": "157",
   "id": "ka-kontrast",
   "titel": "Kontrast wird gemessen, nicht geschätzt",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-kontrast",
   "kurz": "Das Tablet steht unter Deckenlicht, oft schräg. Jede Farbentscheidung nennt ihren gemessenen Wert im Kommentar daneben — wer sie später anfasst, sieht, woran er sie messen muss."
  },
  {
   "nr": "158",
   "id": "ka-glas",
   "titel": "Karten und Kacheln sind Glas",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-glas",
   "kurz": "Jede Fläche, die etwas trägt — eine Namenskarte, eine Artikelkachel — ist dieselbe Glasfläche: ein Lichtpunkt oben links, ein Verlauf nach unten rechts, ein feiner Rahmen. Kein Schatten, keine zweite Sorte Karte."
  },
  {
   "nr": "159",
   "id": "ka-kachel",
   "titel": "Die Artikelkachel und ihre Zustände",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-kachel",
   "kurz": "Eine Kachel ist immer gleich gebaut: Bild oben, Name, Zusatz, unten Preis und Menge. Ihre Zustände kommen dazu, sie ersetzen nichts."
  },
  {
   "nr": "160",
   "id": "ka-favoriten",
   "titel": "Favoriten: der Stern überall, das Gold nur in der Sektion",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-favoriten",
   "kurz": "Favoriten sind persönlich und stehen in einer eigenen Sektion zuoberst oder zuunterst. Unter seiner Gruppe bleibt derselbe Artikel unauffällig — sonst stünde jede zweite Kachel in Gold und die Ordnung der Gruppen ginge unter."
  },
  {
   "nr": "161",
   "id": "ka-zeile",
   "titel": "Jede Korbzeile ist gleich gebaut",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-zeile",
   "kurz": "Name links, Bedienung in der Mitte, Betrag rechts — in allen Zeilen an derselben Stelle, auch wenn eine Zeile weniger kann als die andere."
  },
  {
   "nr": "162",
   "id": "ka-meldungen",
   "titel": "Meldungen stehen IM Korb, nicht darüber",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-meldungen",
   "kurz": "Was den Korb betrifft, erscheint an der Stelle, an der es passiert ist — so breit wie die Zeilen, in der Farbe der Sache, und es verschwindet von selbst."
  },
  {
   "nr": "163",
   "id": "ka-fenster",
   "titel": "Ein Mass für jedes Fenster",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-fenster",
   "kurz": "Alle Fenster der Kasse sind gleich breit: so breit, wie es das breiteste braucht. Unterschiedlich breite Fenster lasen sich wie ein Versehen."
  },
  {
   "nr": "164",
   "id": "ka-auswahl",
   "titel": "Wählen im Fenster",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-auswahl",
   "kurz": "Eine Auswahl aus wenigen Möglichkeiten ist eine Liste, keine Wolke aus Pillen — eine Zeile trifft man mit dem Finger sicherer, und untereinander liest sie sich schneller."
  },
  {
   "nr": "165",
   "id": "ka-icons",
   "titel": "Ein Zeichen, eine Bedeutung",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-icons",
   "kurz": "Jedes Icon der Kasse ist genau einer Sache zugeordnet. Das Verzeichnis ist KASSE-ICONS.md im okapi-Repo — nicht der Code: wer ein Zeichen neu vergibt, trägt es dort ein, wer eines braucht, das schon vergeben ist, nimmt ein anderes. …"
  },
  {
   "nr": "166",
   "id": "ka-bewegung",
   "titel": "Bewegung hat einen Grund",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-bewegung",
   "kurz": "Die Kasse bewegt sich nur dort, wo Bewegung etwas bestätigt. Alles andere steht still."
  },
  {
   "nr": "167",
   "id": "ka-sprache",
   "titel": "Wie die Kasse spricht",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-sprache",
   "kurz": "Kurz, konkret, in der Sprache des Clublokals. Die Kasse redet nicht über sich selbst."
  },
  {
   "nr": "168",
   "id": "ka-arbeitsweise",
   "titel": "Bevor etwas an die Kasse kommt",
   "teil": "Teil 5 · Kasse",
   "link": "https://design.tfcz.ch/brandguide#ka-arbeitsweise",
   "kurz": "Die Kasse ist die einzige Oberfläche, bei der ein Fehler Geld kostet und niemand Zeit hat, ihn zu suchen. Darum gelten für sie zwei zusätzliche Regeln der Arbeitsweise."
  }
 ]
}