TFCZ · Design System

Brand Guide v2.3 · 10.07.2026

Der teilbare TFCZ Brand Guide: alle Farben, Logos, Regeln und wiederverwendbaren Bausteine — live, kopierbar und in sich geschlossen (Logos eingebettet, funktioniert offline). Klick auf eine Farbe / einen Gradient kopiert den Wert. Boxen bleiben in beiden Hintergrund-Modi dunkel & frosted.

00

Nutzung: Diese Datei ist der Brand Guide

Teilbare, in sich geschlossene Referenz — die Logos sind eingebettet, die Datei funktioniert eigenständig und offline. Wer TFCZ-Material erstellt (Mensch oder KI), hält sich an diese Datei. Quelle der Wahrheit bleibt CLAUDE.md im TFCZ-Projekt; bei Widerspruch gilt CLAUDE.md.

So nutzt du die Datei mit Claude (oder einem anderen Tool)

Datei mitgeben und schreiben: „Halte dich strikt an den TFCZ Brand Guide in dieser Datei — Farben, Logos, Typografie, Bausteine und alle Regeln." Alle Werte sind kopierbar (Klick auf Farben/Gradients), alle Bausteine sind live und ihr Code steht in dieser Datei. Jedes neue Design muss die Checkliste in Sektion 19 bestehen.

Marken-DNA · die 8 Kernregeln
Blau oben · Gold unten

Die Brand-Line ist DAS Markenzeichen. Print/Social = harter Schnitt, keine Verläufe. Screen-UI = Rahmen-Signatur an Fenstern & sticky Bars (blau #5ca7dc oben / gold #cda857 unten, ~3px am abgerundeten Container).

Gold ist knapp

Gold = Auswahl/Aktiv im UI und die zentrale Handlung der Seite: echte Conversion („Mitglied werden") oder Lead-Anfrage („Verfügbarkeit prüfen"). Nie Grossfläche, nie für Info-/Navigations-Buttons. So bleibt Gold wertvoll.

Dunkle, frosted Boxen

Cards, Fenster & Bausteine im Screen-UI immer als DarkNavy-Gradient, leicht transparent + backdrop-blur — nie helle Boxen.

Nunito Sans

Einzige Schrift der Marke. Im UI: 400 / 500 / 700 / 900. Fallback: moderne, geometrische Sans-Serif.

Öffentlich hell · intern dunkel

Öffentliche Seiten = Hellblau-Verlauf, ohne Dark-Mode-Umschalter. Login-geschützte Tools (POS, Livestudio, Cockpit …) = Navy.

Responsive, ohne Ausnahme

Breakpoints 640 / 1024 / 1400. Nie ein horizontaler Scrollbalken. Touch: dense but tappable (iPad-first).

Sprache

Deutsch (Schweiz), CHF, Du-Form — und nie gendern. Emotion & Vibe kommen vor der Information.

Ein Logo, klare Regeln

Nur Originaldateien, richtige Variante pro Hintergrund, Schutzzone respektieren — Details in Sektion 01b.

Teil 1 · Marke

Strategie & Stimme

Das Fundament, aus dem alles Weitere folgt: wer wir sind, wofür wir stehen, wie wir klingen. Wer eine neue Seite, einen Post, eine Mail oder einen Flyer macht, startet hier — nicht bei der Farbe. Teil 2 (Design) macht es schön; dieser Teil macht es richtig und überall gleich. So läuft der Verein weiter, auch ohne Marketing-Spezialisten im Raum.

A

Positionierung

Der eine Satz, der uns einordnet und unterscheidet. Alles, was wir sagen, muss dazu passen.

Der TFCZ ist der grösste Profi-Tischfussballverein der Schweiz — der Ort in Zürich, wo Anfänger und Weltmeister am selben Tisch spielen. Seit 1990 in Wipkingen. Positionierungs-Satz · verbindlicher Nordstern für Copy & Design

Kategorie

Tischfussball-Verein in Zürich — Sportverein, Community und Erlebnisort in einem.

Für wen

Alle, die in Zürich Tischfussball erleben wollen — vom allerersten Mal an der Stange bis zur Weltspitze.

Anders als …

… eine Bar mit Töggelikasten (kein echter Sport) und anders als ein reiner Elite-Club (nicht für alle). Wir sind beides: nahbar wie ein Treffpunkt, ernsthaft wie eine Nati.

Warum glaubwürdig

100+ Mitglieder, WM-/SM-/Nati-/Bundesliga-Sieger im Verein, 10 Leonhart-Turniertische, Zürich Open mit YouTube-Stream — und seit über 30 Jahren am selben Ort.

B

Mission, Vision & Werte

Warum es uns gibt, wohin wir wollen, und die Werte, die jede Entscheidung tragen.

Mission — warum

Tischfussball in Zürich für alle zugänglich machen — und gleichzeitig Spitzensport auf Weltniveau fördern.

Vision — wohin

Zürichs lebendigste Tischfussball-Community und das sichtbare Aushängeschild des Schweizer Tischfussballs.

Werte

Alle willkommen
Offenheit ist wörtlich gemeint — jeder Level, jede Herkunft, am selben Tisch.
Gemeinschaft
Getragen von Ehrenamt und Herzblut; wir fangen jeden Neuen auf.
Spielfreude
Spass zuerst — der Rest kommt von selbst.
Exzellenz
Echter Wettkampf, Weltklasse-Können, ohne Angeberei.
Beständigkeit
Seit 1990 am selben Ort — Tradition als Vertrauensanker.
C

Markenpersönlichkeit & Archetyp

Wenn der TFCZ ein Mensch wäre — der Charakter, der in Text, Bild und Ton durchscheinen muss.

Archetyp: „Der bodenständige Champion" — nahbar für alle (Everyman) und exzellent wie ein Weltmeister (Hero) zugleich.

5 Eigenschaften

EinladendEchtSpielfreudigStolz & nahbarVerlässlich

Wenn TFCZ eine Person wäre

Der Kollege, der dich am ersten Abend abholt, dir alles zeigt und dich zum Lachen bringt — und nebenbei Schweizermeister ist, ohne es an die grosse Glocke zu hängen.

Wie es klingt / aussieht

Du-Form, kurze warme Sätze, konkret. Visuell: Blau/Gold, dunkel & edel, echte Fotos, viel Bewegung.

D

Markenversprechen & Geschichte

Was wir jedem versprechen — und das Narrativ, das wir immer wieder erzählen. Fertige Textbausteine zum Übernehmen.

„Bei uns hat alles Platz — am selben Tisch."Markenversprechen · jeder wird aufgefangen, egal welches Level
„Komm rein, sag hallo — den Rest erledigt das Spiel."Signatur-Satz für CTAs & Schluss-Absätze

Boilerplate · 1 Satz

Der Tischfussball Club Zürich ist der grösste Profi-Tischfussballverein der Schweiz — seit 1990 in Wipkingen, wo Anfänger und Weltmeister am selben Tisch spielen.

Boilerplate · 3 Sätze

Der TFCZ ist der grösste Profi-Tischfussballverein der Schweiz, seit 1990 in Wipkingen zuhause. Bei uns spielen Anfänger und Weltmeister am selben Tisch — getragen von einer Community, die jeden auffängt. Offenes Training, Turniere, Käsekick und Firmenevents: bei uns ist jeder willkommen.

Boilerplate · 5 Sätze

Der Tischfussball Club Zürich (TFCZ) ist der grösste Profi-Tischfussballverein der Schweiz. Seit 1990 sind wir in derselben Halle in Wipkingen zuhause. Auf 10 Leonhart-Turniertischen trainieren Nationalspieler neben Leuten, die zum ersten Mal an der Stange stehen. Wir tragen Turniere aus, streamen das Zürich Open auf YouTube — und feiern beim Käsekick genauso ausgelassen. Komm vorbei: der erste Abend ist gratis.

E

Zielgruppen & Ansprache

Für wen wir schreiben — mit Bedürfnis, Kanal und passendem Handlungsaufruf (CTA).

Einsteiger / Neugierige

Bedürfnis: Unverbindlich reinschnuppern, keine Hürde. Ton: warm, einladend. Kanal: Instagram, Website. CTA: „Erster Abend gratis".

Aktive Mitglieder

Bedürfnis: Termine, spontane Updates, dazugehören. Ton: kurz, direkt, menschlich. Kanal: WhatsApp. CTA: „Komm Dienstag".

Turnier- / Pro-Spieler

Bedürfnis: Ranglisten, Formate, Ernst. Ton: energetisch, sport-fokussiert. Kanal: Website, STF/Coral. CTA: „Jetzt anmelden".

Firmen / HR

Bedürfnis: Teamevent, das hängen bleibt, ohne Aufwand. Ton: professionell-herzlich, lösungsorientiert. Kanal: Website, E-Mail. CTA: „Firmenevent anfragen".

Familien / Kinder

Bedürfnis: Betreute, sichere Freizeit mit Spass. Ton: leicht, herzlich. Kanal: Website, Instagram. CTA: „Kindertraining & Ferienplausch".

F

Tone of Voice

Vier Eigenschaften bestimmen jeden Text. Immer Du-Form, sportlich-herzlich, keine Corporate-Sprache. Je Kontext etwas anders (Fun locker, Turnier energetisch, Firma professionell-herzlich) — aber immer diese vier.

1 · Einladend

So„Egal wie gut du bist — komm vorbei, jeder ist willkommen."
Nicht so„Nur für ernsthafte Spieler mit Erfahrung."

2 · Echt

So„Dienstag, 18 Uhr, Landenbergstrasse 10. Komm rein."
Nicht so„Wir freuen uns, Sie in unseren Räumlichkeiten begrüssen zu dürfen."

3 · Spielfreudig

So„Käsekick — töggele, bis der Käse schmilzt."
Nicht so„Veranstaltung mit gastronomischer Verpflegung."

4 · Stolz & nahbar

So„Bei uns trainieren Weltmeister — und zeigen dir gern den ersten Trick."
Nicht so„Die Elite des Schweizer Tischfussballs unter sich."
G

Botschaften & Messaging

Vier Kernbotschaften (Pillars). Jede Seite/jeder Post trägt eine davon klar — mit Beleg, damit es glaubwürdig bleibt.

1 · Alle willkommen

Botschaft: Anfänger bis Profi, am selben Tisch. Beleg: offenes Training, Schnuppern gratis, Community fängt auf. Wofür: Home, Mitglied-werden, Insta-Reels.

2 · Echter Spitzensport

Botschaft: Weltklasse spielt hier. Beleg: WM/SM/Nati, Zürich Open, YouTube-Stream, 10 Leonhart-Tische. Wofür: Turnier-Seiten, Stream, Presse.

3 · Community & Tradition

Botschaft: Seit 1990, getragen von Menschen. Beleg: dieselbe Halle in Wipkingen, Ehrenamt, Herzblut. Wofür: Über uns, Geschichte, Gönner/Sponsoring.

4 · Erlebnis & Spass

Botschaft: Bei uns wird gelacht. Beleg: Käsekick, Mittwochs Crazy DYP, Firmenevents. Wofür: Events, Firmenevent-Landingpage, Social.

H

Sprache & Lexikon

Verbindliche Sprachregeln und unser Wortschatz — damit alles wie aus einem Guss klingt.

Regeln

Sprache
Deutsch (Schweiz), Du-Form. ss statt ß, CHF, Apostroph bei Tausendern (1'000).
Nie gendern
Kein :in / *innen / Binnen-I, keine Doppelnennungen. Generisches Maskulinum oder neutral („alle", „Leute", „das Team").
Satzbau
Kurze Sätze, aktiv, konkret. Emotion vor Information — der Vibe muss zuerst rüberkommen.
Fakten
Nie erfinden — Zahlen/Adressen/Preise immer aus dem Steckbrief (Abschnitt I) bzw. Vault verein.md.
Sagen wirTöggele, Töggelikasten, kicken, Käsekick, Community, „alle willkommen", Stange, Schnuppern, Mitglied, Gast.
Vermeiden wirGender-Notationen, Corporate-Floskeln („Räumlichkeiten", „im Rahmen von"), Anglizismus-Overkill, „Kunden", Ausrufezeichen-Inflation.
I

Fakten & Steckbrief

Die Datenbasis für jede Seite. Hier stehen die belastbaren Fakten — nichts erfinden, im Zweifel aus dem Vault verein.md prüfen.

VereinTischfussball Club Zürich (TFCZ)
OrtLandenbergstrasse 10, 8037 Zürich (Wipkingen) — seit 1990 dieselbe Halle
GrösseGrösster Profi-Tischfussballverein der Schweiz · 100+ Mitglieder · 20+ pro Abend
TischeLeonhart-Verein: 10 Leonhart + 1 Ullrich permanent; weitere (Garlando, Bonzini, Tornado, Roberto) je Anlass
ÖffnungDi ab 18:00 (Offenes Training) · Mi ab 19:00 (Crazy DYP, Start 20:15) · Events gemäss Ausschreibung
Training mit PhilippDi 18:45–20:15, 14 Einheiten/Semester · gratis für Mitglieder, CHF 100 für Nicht-Mitglieder
MitgliedschaftSchnuppern gratis (danach CHF 5/Eintritt) · Aktiv CHF 200/Jahr · Key Player CHF 250 + Schlüssel · Gönner auf Anfrage
KanäleInstagram @tischfussballclubzuerich · YouTube @tischfussballclubzuerich · WhatsApp (intern) · tfcz.ch
Kontaktinfo@tfcz.ch
Sport-KontextWM/SM/Nati/Bundesliga-Sieger im Verein · Zürich Open (Heim-Turnier) · Pro Turniere STF Regio/STRT · Elite = ITSF

Interne GV-/Finanzzahlen (Umsatz, Zahlungsarten) sind nicht öffentlich — nur Teilnahmezahlen kommunizieren.

J

Playbook: neue Seite in 7 Schritten

Der rote Faden, der Teil 1 (Marke) und Teil 2 (Design) verbindet — damit jeder ohne Spezialist eine markenkonforme Landingpage bauen kann.

  1. Ziel & Zielgruppe wählen (Abschnitt E) — für wen ist die Seite, was soll sie auslösen?
  2. Kernbotschaft festlegen (Abschnitt G) — genau eine der vier Pillars trägt die Seite.
  3. Ton wählen (Abschnitt F) — passend zum Kontext, immer Du-Form, nie gendern.
  4. Fakten einsetzen (Abschnitt I) — Zahlen/Adresse/Preise übernehmen, nichts erfinden.
  5. Textbausteine nutzen (Abschnitt D) — Claim, Boilerplate, Signatur-CTA.
  6. Design bauen (Teil 2) — Farben, Typo, Signatur, Buttons, Nav/Burger, Karten, Hintergrund-Modul.
  7. Checkliste prüfen (Abschnitt 19) — dann ausliefern.

Immer gültig (Pflicht)

Blau oben / Gold untenGold-CTA nur für Conversion / Lead-AnfrageNie gendernKeine Emojis — Icons = LucideSchliessen = Portal-Baustein Voll responsiveKein H-ScrollbalkenHintergrund via bg-swirl.js Popup-Deselektierung (Backdrop + Esc)Ein Logo überall
Teil 2 · Design

Visuelles System

Die Bausteine, mit denen die Marke sichtbar wird — Farben, Typografie, Komponenten, Bewegung. Alles copy-fertig und markenkonform.

01

Farben & Gradients

Kanonische Palette. Primär + Neutral, Sekundär-Akzente (max. ~5 % Fläche) und die vier erlaubten 2-Farb-Gradients. Klicken kopiert.

Primär & Neutral
Sekundär-Akzente · Kategorie
Gradients (max. 2 Farben, primär für Hintergründe)
Blue · #005a94→#4489c7
Blue-Gold · #4489c7→#cda857
Dark Navy · #0d273d→#005a94
Light B-G · #5ca7dc→#e9c475
Verbindliche Werte · Print = CMYK · Digital = RGB
FarbeHEXRGBCMYKPantoneEinsatz
TFCZ Blau (Logo)#4489c768 · 137 · 19973 · 38 · 0 · 0—Primärfarbe, Logo-Blau, Icon-Ringe, Aktions-Buttons
Blau Primär (hell)#5ca7dc92 · 167 · 220——Brand-Line oben, Kategorie „Fun", helle Akzente
Blau Sekundär 2#005a940 · 90 · 148——Kategorie „Pro", dunkle Blauflächen
Navy#0d273d13 · 39 · 61——Dunkler Grund (intern), Text auf Gold/Sand
TFCZ Gold#cda857205 · 168 · 8721 · 32 · 78 · 07563 CBrand-Line unten, Auswahl/Aktiv, Conversion- und Lead-CTA, Elite-Akzent
Gold hell#e9c475233 · 196 · 117——Gold-Hover, goldene Texte auf dunklem Grund
TFCZ Neutral (Sand)#e6e3da230 · 227 · 2189 · 7 · 12 · 0—Helle Flächen NUR in Print/Social — nie als Screen-Box
Einsatzregeln
  • Blau und Gold arbeiten immer zusammen — sie sind das Farb-Duo der Marke
  • Sekundär-Akzente (Grün / Orange / Rot) nur zusammen mit den Primärfarben im selben Kontext, nie allein — und max. ~5% der Fläche
  • Schwarz & Weiss primär für Typografie; sonst Primärfarben oder Neutral
  • Gradients: max. 2 Farben, nur die vier gezeigten Kombinationen, linear oder radial, primär für Hintergründe — nie im Logo, nie in Print-/Social-Brand-Lines
  • Farbgenauigkeit vor Auslieferung gegen diese Tabelle prüfen — Abweichungen sind ein bekannter Reibungspunkt
  • Kontrast (WCAG AA): Navy-Text auf Gold und Gold-Text auf Navy sind barrierefrei (je 6,8:1), helle Schrift auf Navy erst recht (13,8:1). Kein abgedunkeltes oder transparentes Grau als Text auf Gold — das rutscht unter die 4,5:1-Marke (ein opacity auf Navy-Text ergab nur 4,28:1). Kleintext auf Gold immer voll deckendes Navy.
01b

Logos & Verwendung

Verbindliche Logo-Regeln nach TFCZ Brand Manual 2026. Nur die Originaldateien verwenden — das Logo nie nachbauen, editieren, umfärben oder verzerren. Alle Vorschauen sind in dieser Datei eingebettet.

Varianten & Hierarchie
TFCZ Primärlogo
1 · Primärlogo — Symbol (Schild) + Wortmarke. Der Standard: am häufigsten und bevorzugt einsetzen. Auf dunklem Grund die Version mit weissem Graphic Device + weisser Wortmarke (Bild); auf hellem Grund die blaue Plain-Version aus der Master-Bibliothek.
TFCZ Sekundärlogo
2 · Sekundärlogo — Schild + Kürzel „TFCZ". Nur wenn nötig (wenig Platz) und nur in Absprache mit dem TFCZ-Team einsetzen.
TFCZ Symbol
3 · Symbol solo — nur in seltenen Fällen: Favicon, App-/Mobile-Icon. Nicht als freier Logo-Ersatz auf Layouts.
Welche Version auf welchem Hintergrund (verbindlich)
Weiss / hell — die beste Umgebung fürs Logo. Blaue Plain-Version (Farbe) oder schwarze S/W-Version.
TFCZ Neutral & Grau bis 40% — Plain-Version (Farbe oder S/W), kein Graphic Device nötig.
TFCZ Blau — Version mit weissem Graphic Device. Blau ist als Logo-Hintergrund gegenüber Gold zu bevorzugen.
Navy / dunkler als 40% Grau — weisses Graphic Device + weisse Wortmarke (Farb- wie S/W-Einsatz).
TFCZ Gold — erlaubt (Graphic-Device-Version), aber Blau als Grund bevorzugen.
Schwarz-Weiss — einfarbige Reproduktion: Schwarz auf hellem Grund, auf dunklem Grund die Weiss-Device-Version. Nur die gelieferten S/W-Dateien (optisch justiert) — nie selbst umfärben, nie invertieren.
Schutzzone
Schutzzone

Freiraum-Regeln

1Horizontal: Freiraum = Höhe des Z aus der Wortmarke.
2Vertikal: Freiraum = Breite des Z.
3Symbol solo: Freiraum = Abstand zwischen Schildrand und Figur (linke Seite).

Innerhalb der Schutzzone stehen keine Texte, Bilder oder fremden Logos. Fürs Web gilt zusätzlich: Kopf-Logo-Höhe 38.8px (Mobile 35.2px), flex:none — das Logo wird nie komprimiert.

Don'ts — jede dieser Änderungen ist verboten
  • Zu wenig Kontrast zwischen Logo und Hintergrund
  • Symbol und Wortmarke gegeneinander verschieben oder einzeln skalieren
  • Verzerren — jede Skalierung nur proportional
  • Eine andere Schrift in der Wortmarke (auch ähnliche nicht)
  • Umfärben oder Verläufe im Logo
  • Drehen / anwinkeln
  • Schatten unter dem Logo oder Texturen auf dem Logo
  • Neigen / skewen einzelner Teile
  • Farben invertieren — nur die gelieferten Versionen einsetzen
  • Logo nachzeichnen oder editieren — immer die Originaldatei nehmen
Datei-Matrix · Web-Assets & Master-Bibliothek
DateiWasEinsatz
assets/img/logo-horizontal-white.pngPrimärlogo horizontal, weiss (Graphic Device)DAS Kopf-/Nav-Logo jeder Seite (einzige erlaubte Kopf-Datei) und generell dunkle Hintergründe
assets/img/logo-crest.pngSekundärlogo „TFCZ" + Schild, blauHelle Hintergründe, kompakte Flächen
assets/img/logo-shield.pngSymbol mit weissem Graphic DeviceDunkle / farbige Hintergründe, Icon-Einsatz
assets/img/emblem-blue.pngSymbol blau mit weissem DeviceBelohnungen (Easter-Egg), Icons auf dunklem Grund
assets/img/emblem-black.pngemblem-white.pngSymbol S/WEinfarbige Reproduktion (schwarz auf hell / weiss auf dunkel)
assets/img/pattern.pngSchild-PatternDekorative Flächen — Regeln unten
„TFCZ – Ordner" → Logo/Master: AI · EPS · PDF · PNG, RGB + CMYKPrint & Produktion — CMYK für Print, RGB für digital
Pattern (Schild-Muster)
Auf Hellblau — das Muster ist immer heller als der Hintergrund.
Auf Navy — subtil, verschmilzt mit dem Grund. Farbe anpassbar, aber nie dunkler als der Hintergrund. Print und digital erlaubt.

Kopf-Logo-Verhalten

Siehe Sektion 4d: Klick führt zur Home mit Press-Bounce (logoPress, Navigation ~230ms verzögert). Immer dieselbe Datei, Höhe 38.8px / Mobile 35.2px — das Logo schrumpft nie, egal wie viele Nav-Links daneben stehen.

02

Typografie

Nunito Sans — einzige Schrift der Marke (Extralight bis Black verfügbar; im UI: 400 / 500 / 700 / 900). Fallback ohne Nunito Sans: moderne, geometrische Sans-Serif. Letterspacing nur bei UPPERCASE-Labels (.12–.22em). Kicker-Signature als Section-Eyebrow.

Display · 900Tischfussball Club Zürich
Headline · 800–900Formate & Wettkampf
Subhead · 700Untertitel & Sektionsköpfe
Body · 400/500Standard-Fliesstext im Interface.
Label · 900 UPPERCASEEyebrow · Label
Kicker-SignatureTFCZ · Zürich
Sprach- & Text-Regeln (verbindlich)
  • Nie gendern — keine :in/:innen/*in-Formen, kein Binnen-I, keine Doppelnennungen. Generisches Maskulinum oder neutrale Umformulierung („Spieler", „jeder", „alle", „die Community"). Beispiel: „Werd einer von uns" statt „Werd eine:r von uns".
  • Deutsch (Schweiz): ss statt ß · Währung CHF · Du-Form, direkt und herzlich
  • Emotion zuerst: der Vibe („alle sind willkommen", „seit 1990 in Wipkingen") kommt vor der reinen Information
  • Kategorien-Wording: Kategorie heisst „Fun" (nicht „Plausch"), „Pro Turniere" (nicht „Ranglisten-Turniere"), „Elite" = alles ITSF inkl. SM — der Event-Name „Plausch-Turnier" bleibt als Titel erlaubt
03

Tokens: Radius · Spacing · Elevation

Konsistente Skalen statt Zufallswerte. Andock-Elemente runden nur die oberen Ecken (6px 6px 0 0). Elevation nur für Schwebendes (verbindlich): e-2/e-3 gehören zu Modals, Popups, sticky Bars und Hover-Lift — grosse ruhende Container (Sektionen, Inhalts-Boxen, Grids) tragen KEINE schweren Drop-Shadows (nur 1px-Border + inset-Highlight, max. e-1), sonst fluten die Schatten die Lücken und decken das animierte Punktfeld zu.

Border-Radius
xs · 4px
sm · 6px
md · 9px
lg · 12px
xl · 16px
pill · 999px
Spacing · 4px-Raster
4
8
12
16
20
24
32
48
Motion-Tokens
--ease cubic-bezier(.2,.7,.2,1) — Standard --bounce cubic-bezier(.34,1.56,.64,1) — Brand-Bounce (Burger, Drawer, Unlocks, Egg) --t-fast .15s--t-base .3s
Elevation
e-1
e-2
e-3
inset-highlight
04

CTA-System · Buttons

Sechs Typen — mehr braucht die Seite nicht. Jeder hat genau eine Bedeutung, damit jeder (auch Dritte) weiss, welcher Button wohin gehört und Gold sich nie abnutzt. Alle Buttons kommen aus einem Baustein system/buttons.css; Grösse und Radius stehen als Token in system/tokens.css. Ändert man --btn-radius dort, ändern sich ALLE Buttons auf ALLEN Seiten — der Text bleibt im HTML. (Icon-Button bleibt immer rund.)

Gold.btn-gold
Mitglied werdenVerfügbarkeit prüfenPlatz sichern

Conversion & Lead — die eine wichtigste Handlung: jemanden in den Verein holen oder eine qualifizierte Anfrage auslösen. Nie für reine Navigation („Alle Regeln", „Komm vorbei") oder Formular-Absenden.

Blau.btn-blue

Primär-Aktion — die normale „Jetzt machen"-Handlung: absenden, öffnen, erstellen, weiter. Darf mehrfach vorkommen.

Ghost.btn-ghost
Alle RegelnMehr erfahren

Navigation & Sekundär — weiterführende oder Nebenhandlungen. Steht oft neben Gold/Blau und tritt bewusst zurück.

Text.btn-text
Weitere Infos →Zum Kalender

Text-Link — die leiseste Stufe, kein Kasten. Für kleine Weiter-Hinweise im Fliesstext oder neben einem grösseren Button.

Rot.btn-danger

Gefahr & Löschen — nur unumkehrbare/verwerfende Handlungen. Selten, damit Rot ein echtes Warnsignal bleibt.

Grün.btn-success

Bestätigen & Hinzufügen — positive Bestätigung (nutzt das Brand-Grün --green).

Icon.btn-icon

Nur-Icon-Button, immer rund. Feste Farb-Semantik: Schliessen/X = Rot (.i-close), Hinzufügen/+ = Grün (.i-add). Sonst neutral (Ghost) oder Blau.

Modifier
Normal.btn-sm (klein)

.btn-sm = kompakter (Toolbars, „mehr laden"). .btn-icon = rund, nur Icon. Beide an jeden Typ anhängbar.

Social.btn-social
WhatsApp-Gruppe Instagram YouTube

Social-Buttons sind im Ruhezustand immer neutral (frosted) und nehmen ihre Netzwerk-Farbe erst beim Hover an — Fremdfarben passen nicht als Grundfläche ins Brand. Klassen .s-wa / .s-ig / .s-yt / .s-li.

Kein Button

Chips & Toggles sind keine Buttons. Filter-Chips, Sprach-/Ansicht-Umschalter und Profil-Chips behalten bewusst die Pill-Form und tragen kein .btn — sie folgen --btn-radius nicht. So bleibt der Unterschied „Handlung" (Button) vs. „Auswahl/Filter" (Chip) sichtbar.

Radius/Grösse zentral ändern: system/tokens.css → --btn-radius (Standard 12px), --btn-pad-y/x, --btn-font. Eine Zeile — gilt auf allen Seiten und hier im Brand Guide. Der Icon-Button bleibt immer rund.
4b

Menü-/Burger-Button · Standard „Scroll-Loop"

Ü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 unten weg und kommen oben smooth wieder rein. Referenz: .nav .burger in index.html.

Standard-Burger (Hover / Klick)
4d

Logo · Kopf / Menü

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:

Logo (klickbar)
05

Fenster-Signatur / Brand-Line

Blau oben (#5ca7dc) / Gold unten (#cda857) als border-top/-bottom am abgerundeten Container — läuft an den Ecken schmaler aus. Bei genau EINEM Fenster oder sticky Bars: direkt umranden. Bei MEHREREN Boxen: nur einmal als Seitenrahmen, Boxen dezent.

Einzelnes Fenster

Trägt die Signatur direkt (border-top blau / border-bottom gold, ~3px).

Seite mit mehreren Boxen
Box A — dezent (frosted + 1px-Border)
Box B — dezent

Signatur nur einmal am Seitenrahmen.

06

Cards, Tags & Datenreihen

Immer dunkler Navy-Gradient, leicht transparent + backdrop-blur — nie hell. Angedockte Eyebrow-Tags runden nur oben. Datenreihen: Sieger gold, Verlierer gedimmt.

Standard-Card

--card + 1px Border + e-2. Basis-Baustein.

Akzent-Card

Kategorie-Streifen links (Fun).

Gespielte Spiele
M. Sauter5
T. Weber3
07

Formular-Elemente

Fokus = Gold-Rahmen (nicht Browser-Blau). Dropdowns (verbindlich): JEDE Auswahl-Liste nutzt das Custom-Dropdown .csel — dunkle Navy-Liste mit Brand-Line (blau oben / gold unten), Drop-Cascade beim Öffnen, gewählte Option mit Gold-Haken, Schliessen per Klick daneben + Esc. Native Browser-Aufklapp-Menüs sind nicht brand-fähig und daher verboten. Umsetzung: tfczEnhanceSelects() (Code in dieser Datei) — der native <select> bleibt unsichtbar im DOM, Formular-Wert und Validierung funktionieren weiter. Chips, Tabs, Toggle.

Chips Tabs
7b

Eingabe-Controls

Die Standard-Controls im TFCZ-Stil (Basis-Satz nach den gängigen Libraries — Material, Bootstrap, shadcn). Semantik überall gleich: Checked/Auswahl = Gold · Aktion = Blau · Fokus = Gold-Rahmen · Hover = Brand-Rahmen (nur bei NICHT gewählten Elementen, per inset box-shadow).

Checkboxen — rund & animiert · aus = Blau, angewählt = Gold mit weissem Häkchen (Bestätigung)
Radios — checked = Gold-Ring + Gold-Punkt
Toggle · Slider · Stepper
2
Suchfeld
7c

Icons · Lucide

Keine Emojis — nirgends im Projekt (verbindlich, Vasco 14.07.2026). Jedes Icon kommt aus dieser Bibliothek. Auch Symbol-Glyphen wie Kreuz, Häkchen, Stern oder Pfeil-runter sind Emoji-Ersatz und verboten — dafür gibt es x, check, star, download. War ein Zeichen reine Dekoration, wird es ersatzlos gestrichen. SVG braucht IMMER eine Grössenregel: ersetzt du einen Text-Glyph durch ein Lucide-SVG, muss der Button eine ausdrückliche Regel bekommen — .mein-button svg{width:17px;height:17px;display:block;flex:none}. Ohne sie wird das Icon im Flex-Container auf 0 gequetscht und ist unsichtbar (so verschwand das X im Menü-Drawer). Nach jedem Icon-Tausch prüfen, ob das Icon wirklich sichtbar ist — nicht nur, ob das Markup stimmt. Alle 1746 Lucide-Icons (ISC), offline eingebettet. Klick kopiert das SVG (stroke = currentColor).

Maschinen-Index (auch für KI): assets/icons/lucide-index.json mit name, tags, use. Regel: nie Emojis, immer ein passendes Lucide-Icon.
08

Hover vs. Auswahl

Hover = Brand-Rahmen (blau oben / gold unten). Auswahl = Gold-Rahmen. Nie beide gleichzeitig am selben Element. „Heute" = goldene Zahl.

Hover mich
zeigt Brand-Rahmen
Ausgewählt
Gold-Rahmen
7
8b

Hover-Brand-Rahmen · NIE mit Layout-Sprung

Der Brand-Hover (blaue Linie oben / goldene unten) darf die Box-Grösse niemals verändern. Einzig erlaubte Umsetzung: inset box-shadow — nie eine border-Dicke im :hover. Diese Regel wurde mehrfach verletzt („nie nie nie mehr") und gilt ausnahmslos.

/* RICHTIG — nur box-shadow, Layout bleibt stabil, folgt der border-radius */
.el{ border:1px solid var(--card-brd); border-radius:8px; }
.el:hover{ border-color:transparent;
  box-shadow: inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--gold); }
/* hat das Element schon eine Elevation-Shadow, kombinieren:
   box-shadow: inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--gold), var(--e-1); */

/* VERBOTEN — border-Dicke im Hover ändert die Boxgrösse, Inhalt springt */
.el:hover{ border-top:2px solid var(--blue); border-bottom:2px solid var(--gold); }
/* ebenfalls verboten: border:0 im Grundzustand → border:2px im Hover
   (auch mit Padding-Kompensation tabu — fehleranfällig) */

Merksatz

Im :hover steht nie ein border-top/border-bottom mit px-Wert — nur box-shadow: inset … (plus optional border-color:transparent). Gilt für den Zurück-Button, Accordion-Header, Chips, Tabs, Cards — ausnahmslos. Und: Hover-Brand-Rahmen und Gold-Auswahlrahmen nie gleichzeitig am selben Element (Sektion 08). Vor dem Ausliefern jeden neuen Hover gegen Layout-Sprung testen.

09

Kategorie-Badges

Turnier-/Kalender-Farbsystem: Fun = #5ca7dc · Pro = #005a94 · Elite = Gold-Akzent · Event (extern) = Grün #3b7657. Box bleibt dunkel, Gold nie als Grossfläche.

Fun / für alle Pro Turniere Elite · ITSF Event (extern)
10

Paket-Karten

pcard mit „Beliebt"-Ribbon & Gold-Check-Bullets. Gold-Rahmen = gewählt.

Schnuppern
Gratis
  • 1 Abend testen
  • Leihmaterial
Beliebt
Aktiv
CHF 200
  • Freies Training
  • Alle Turniere
Key Player
CHF 250
  • Eigener Schlüssel
  • 24/7 Zugang
11

Fun-Barometer + Kennwert-Balken

Ein Baustein, kein Nachbau. Unten läuft system/components/baro.js — dieselbe Datei wie auf der Home. Web-Pflicht: vertikale Tube (Spass oben / Wettkampf unten) IMMER zusammen mit dem Beschreibungs-Panel + Kennwert-Balken — nie nur eins von beiden. 5 Stufen: Käsekick · Offenes Training · Plausch-Turnier · Pro Turniere · Elite. Auswahl (Hover/Klick) steuert Tube-Level, Kategorie-Akzent und Panel. Kein separates „SM-Quali" — die SM gehört zu Elite. Icons sind Lucide (party-popper / trophy), nie Emojis. Der frühere mitlaufende Marker-Stab an der Tube ist entfernt.

So baut man ihn ein

<div data-tfcz="baro"></div>
<script defer src="system/components/baro.js"></script>

Die 5 Stufen samt Texten und Kennwerten stehen nur im Baustein. Nie ein zweites Barometer bauen. Hover = Brand-Rahmen · Auswahl = Gold — nie beides am selben Element. Käsekick (voller Spass) zündet Konfetti; der Info-Knopf öffnet den ausführlichen Text.

Live — der echte Baustein

12

Stream · Spielstatistik-Widget

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 die Aktion passiert — auch für Neulinge verständlich.

Vollbild öffnen 6 Screens · rotiert alle 5 Sek. · Code: spielstatistik-widget.html · engine.js · pitch.js
Team-Kennzeichnung — nur die Zahlen
Grün · #57A639 Schwarz · #0c0f14 + heller Rand

Sonst strikt Brand: Navy-Hintergrund, Gold nur Marke/Akzent, Blau für Fenster-Signatur & Feldlinien. Schwarze Zahl immer mit hellem Rand.

Screens & Ablauf

Endstand → Aufbau (Pass 5→3) → Abschluss (Schuss) → Torwartzone → Tor aus dem Mittelfeld → Ballverluste. Eine Statistik pro Screen, Wechsel alle 5 Sek. Ein Screen erscheint nur, wenn Daten da sind.

Do

1 Statistik pro Screen · grosse Zahlen (mobil lesbar) · Tisch + Pfeile zeigen wo · immer beide Richtungen · nur Zahlen grün/schwarz · Namen voll auf dem Screen, Kurzform im Kopf.

Don't

Mehrere Stats auf einen Screen · viel Text · Gold für Teams · schwarze Zahl ohne Rand · Pfeil/Highlight in Gold statt Team-Farbe · Assets extern verlinken.

Live-Scoreboard

Scoreboard · Ecken-Overlay

Kompaktes Live-Board (Sätze · Tore · Timeouts · Set-/Match-Ball · Turnier-Runde) — im Stream unten links. Fenster-Signatur (blau oben / gold unten) auf frosted Navy, Nunito Sans. Team-Identität wie beim Stat-Widget: Grün #57A639 vs. Schwarz #0c0f14 + heller Rand — nur Name & Tore tragen Team-Farbe. Sätze bleiben neutral, Gold nur als Akzent (Turnier-Zeile), Blau für Sätze & Set-Ball. Leader = dezenter Glow, nie Gold.

Vollbild öffnen Live-Widget: sop/public/widgets/scoreboard.html · Position per ?position=bottom-left · Daten via WebSocket//state
Live-Timer

Possession-Timer · Ballbesitz

Zeigt oben rechts, wie lange ein Stab den Ball hält (3er / 5er / Torwart) — zählt live hoch, friert beim Limit ein und wird rot über dem Limit (3er/Torwart 15s, 5er 10s). Fenster-Signatur (blau oben / gold unten) auf frosted Navy, Nunito Sans, goldenes Eyebrow. Gold nur Akzent, nie für Teams.

Vollbild öffnen Live-Widget: sop/public/widgets/possession.html · Position per ?position=top-right · Trigger POSSESSION_TIMER
Kamera

Kamera-Rahmen · Einzel & Split

Transparentes Overlay für die Kamera-Einblendungen (Player L/R, Rally, Defensive) — statt Vollfarbe hinter der Kamera: Fenster-Signatur blau oben / gold unten, Navy-Rahmen, runde Ecken, Mitte durchsichtig für die Kamera. Split = zwei gerahmte Fenster mit Navy-Trenner (neue OBS-Szene). In OBS als Browser-Quelle über die Kamera legen, Grösse = Kamera-Bereich.

Einzel öffnen Split öffnen Overlay: sop/public/widgets/camera-frame.html · ?mode=single|split · Feintuning ?lw= ?r= ?m=
13

Kalender-Zellen

Woche = macOS-Dock-Lupe (gehoverter Tag am grössten, Nachbarn geschoben). Monat = Fokuszelle (Gold-Rahmen) zeigt pro Event nur den Kategorie-Badge. Monats-Default = 6 Wochen (aktueller Monat); jeder Klick auf „Mehr laden" hängt +2 Monate an. „Heute" = goldene Zahl.

Woche · Dock-Lupe (hover)
Monat · Zellen
7
8
Fun
9
10
13b

Dock-Lupe · Baustein

Ein Baustein, überall wiederverwendbar. Der macOS-Dock-Effekt (das Element unter der Maus wird am grössten, die Nachbarn skalieren stufenlos runter und werden auseinandergeschoben) steckt jetzt in system/components/dock-magnify.js — nicht mehr fest im Kalender verdrahtet. Aufruf auf jede horizontale Reihe mit gleich breiten Kindern: Wochentage, Kacheln, Foto-Streifen, Filter-Chips … läuft rein auf der GPU (transform), animiert nie margin und misst nicht pro Frame das Layout — darum glatt statt ruckelig. Respektiert prefers-reduced-motion (dann aus).

So baut man ihn ein

<div class="myrow">…gleich breite Kinder…</div>
<script defer src="system/components/dock-magnify.js"></script>
<script>
addEventListener('DOMContentLoaded', function(){
  TFCZ.dockMagnify(document.querySelector('.myrow'), {
    amp: 0.34,   // max. Vergrösserung (+34 %)
    sigma: 1.4,  // Reichweite in Zellen
    spread: true // Nachbarn schieben (Dock) statt nur skalieren
  });
});
</script>

Kind-CSS: transform-origin:center bottom; will-change:transform; transition:transform .16s ease. Optionen: fade (entfernte dimmen), scrollFocus (Touch/Strips: beim Scrollen die Mitte vergrössern). Rückgabe: .destroy() / .refresh().

Live — Wochentage (wie im Kalender)

Mo5
Di6
Mi7
Do8
Fr9
Sa10
So11

Mit der Maus über die Reihe fahren. Dieselbe Optik wie die Kalender-Woche — aber als GPU-Baustein, nicht als CSS-Hover mit margin.

Live — beliebige Kacheln (derselbe Baustein)

T
F
C
Z
1
2
3
4
5

Exakt derselbe Aufruf, andere Reihe — der Effekt ist wiederverwendbar für alles mit gleich breiten Kindern.

14

Hintergrund-Animationen & Modi

Zwei Seiten-Hintergründe: Hellblau (öffentlich) & Dunkel-Navy (login-intern). Standard-Effekt = Schwerkraft-Wirbel aus dem globalen Modul assets/js/bg-swirl.js — diese Seite nutzt seit v2.1 genau dieses Modul (der frühere Inline-Wirbel mit Dauer-Idle-Kreisen war ein Bug und ist entfernt). Idle-Verhalten (verbindlich): der Wirbel wirbelt nur bei Mausbewegung; stoppt die Maus (~140ms), kehren die Punkte langsam & smooth per Genie-Feder (0.010 / 0.91) zurück und der Loop hält an — kein Dauer-Idle-Wirbel. prefers-reduced-motion respektieren. Floating Lines (~116°) bleiben als Alternative erlaubt (Snippets: 01_Web/hintergrund-spielwiese.html). Umschalter oben im Kopf.

Modus (strikt)

Navy = NUR interne, login-geschützte Tools (POS, Bar-Display, Livestudio, Design Studio, Cockpit, Admin). Hellblau = jede öffentliche Seite — dort gibt es keinen Umschalter und keinen Dark Mode. Umsetzung immer über das globale Modul assets/js/bg-swirl.js — nie pro Seite inline duplizieren.

Einbindung (Pflicht)

Jede Seite bindet nur <script defer src="assets/js/bg-swirl.js"></script> ein — das Modul erstellt Canvas + CSS selbst. Nie inline kopieren: Inline-Kopien veralten (genau so entstand der Dauer-Idle-Bug dieser Seite, behoben 10.07.2026). Boxen bleiben immer dunkel & frosted — ohne schwere Drop-Shadows, damit das Punktfeld sichtbar bleibt.

Modal-Test & Deselektierung

Deselektierung (verbindlich): jedes Popup schliesst bei Klick ausserhalb des Inhalts — Backdrop, Menü-Balken-Bereich oder leere Fläche daneben — plus Esc. Aktiv bleiben nur Inhalt + Steuerelemente (Bild-Player: Bild, Pfeile, X, Herz). Gilt für alle Popups. Test: neben das Popup klicken schliesst.

15

Unlock- & Feedback-Animationen

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.

Level-Up

LEVEL UP
12

Sterne-Rating

15a

Bilder-System · Galerie (full/thumb) & Foto-Manager

Grundregel: Inhaltsbilder werden NIE fest im HTML/CSS verdrahtet. Jedes Bild lebt im Galerie-CMS als WebP in zwei Auflösungen — assets/fotos/galerie/full/… (grosse Darstellung, ~1600px: Hero, Sektionsbilder) und assets/fotos/galerie/thumb/… (klein: Strips, Feeds, Karussell-Kacheln). Roh-JPG/PNG gehören nicht direkt in Seiten. Ausnahme: Logos/Embleme/Muster = geteilte Assets in assets/img/.

Wie Bilder auf die Seite kommen (Slots)

<!-- src wird beim Veröffentlichen aus mapping.json ins HTML gebacken (echtes Bild, kein Platzhalter) -->
<img data-slot="index.hero" class="hc-img" src="assets/fotos/galerie/full/795.webp" alt="…">
<div data-slot="index.bg-bar"></div>   <!-- Hintergrund-Slot -->

system/tfcz-images.js setzt zur Laufzeit Bild bzw. Background aus assets/fotos/galerie/mapping.json; system/tfcz-carousel.js macht dasselbe für Karussells. mapping.json ist die Laufzeit-Quelle der Wahrheit (Slot → Bild), slots.json hält die Slot-Definitionen, galerie.json den Foto-Katalog. Beim Veröffentlichen bäckt _tools/bake-slots.mjs das gemappte Bild direkt ins src jeder Slot-<img> — so lädt sofort das richtige Bild ohne Flash und ohne Doppel-Laden; tfcz-images.js ist dann nur noch Fallback.

Bilder ändern — nur über den Foto-Manager

  1. Foto-Manager öffnen: assets/fotos/galerie/foto-manager.html.
  2. Pro Slot ein Galerie-Foto wählen — Auflösung full oder thumb.
  3. Speichern → schreibt mapping.json (oder „mapping.json exportieren“ und in assets/fotos/galerie/ ersetzen).
  4. node _tools/bake-slots.mjs laufen lassen — bäckt die Bilder ins src.
  5. Veröffentlichen, damit es live erscheint.

Neue Fotos kommen ausschliesslich über den tfcz-fotos-Skill in die Galerie: er erzeugt full+thumb-WebP, katalogisiert in galerie.json und fragt vorher nach Event/Kategorie. Nicht von Hand katalogisieren.

Nie

Inhaltsbild-Pfad fest im HTML/CSS Slot-Bild ausserhalb von galerie/ mapping.json von Hand umbiegen, wenn der Foto-Manager es kann
15b

Bild-Player & Foto-Like

Ein Baustein, kein Nachbau. Player (X · Pfeile · Thumbnail-Dock · Herz) und Like-Zähler kommen aus system/components/lightbox.js + system/likes.js — dieselbe Datei, die Home und Training benutzen. Diese Seite bindet sie ein: die Demo unten ist der ausgelieferte Baustein, keine Kopie. Nie eine Bilder-Strecke ohne Player bauen (Reuse-First).

So baut man ihn ein

<!-- 1. Bilder-Gruppe markieren -->
<section data-lightbox>
  <div class="foto">
    <img src="assets/fotos/action/action-01.jpg" alt="">
    <span class="tfcz-like-badge" data-h="action-01"></span>
  </div>
</section>

<!-- 2. Bausteine laden -->
<script src="system/likes.js"></script>
<script defer src="system/components/lightbox.js"></script>

Der Player baut sich selbst und verdrahtet jeden Klick auf ein Bild der Gruppe. Hat die Seite eine eigene Drag-Logik (Home-Marquee), setzt sie zusätzlich data-lightbox-manual und ruft TFCZ.lightbox.openFrom(imgEl).

Live — klick ein Bild

TFCZ Spielszene
TFCZ Spielszene
TFCZ Spielszene
Halle

Dieselben Bild-IDs wie auf der Website — der Zähler ist derselbe. Likest du hier, siehst du es auf der Home wieder.

Regeln

  • Herz = Lucide-Herz, nie ein Herz-Glyph (Unicode-Zeichen). Ruhe = weisse Outline, geliked = brand-blau gefüllt (tfczHeartPop) + aufsteigende Herzen (tfczHeartFly). Blau, nicht Gold — ein Like ist eine Aktion, keine Conversion.
  • Bild-ID = Dateiname (action-04). Ein Like hängt an der ID, nicht an der Seite: derselbe Zähler auf jeder Seite, und derselbe Nutzer kann ein Bild nur einmal liken (nochmal klicken = Unlike). Veröffentlichte Bilder nie umbenennen — sonst startet der Zähler bei null.
  • Zähler-Badge: jedes Element mit data-h="<bildId>" wird automatisch gefüllt (leer bei 0).
  • Schliessen per X (rund, Hover rot, Quetschen), Esc und Klick neben das Bild — Standard-Deselektierung.
  • Backend vorbereitet: sobald window.TFCZ_API (und TFCZ_USER) gesetzt ist, syncen die Likes aufs Profil — ohne Frontend-Umbau.
15c

Getränkeliste

Ein Baustein, eine Liste. Vorher stand das Sortiment zweimal im HTML (Über uns mit Emojis und „CHF –.–", Firmenevents ohne Snacks und „vor Ort") — zwei Wahrheiten, die auseinanderliefen. Jetzt: Struktur in system/drinks.js, Darstellung in system/components/drinks.js. Kategorie-Icons sind Lucide, nie Emojis.

So baut man sie ein

<!-- Platzhalter — mehr schreibt die Seite nicht -->
<div data-tfcz="drinks" data-snacks="0" data-preis="vor Ort"></div>

<script src="system/drinks.js"></script>
<script defer src="system/components/drinks.js"></script>

Optionen: data-snacks="0" (Snacks weglassen)data-preis (Text für noch offene Preise)data-spaltendata-zahlung="1" (Zahlungshinweis darunter).

Live — der echte Baustein

Regeln

  • Preise kommen aus der API — GET {TFCZ_API}/api/drinks. Sie werden nie ins HTML und nie in system/drinks.js geschrieben. Dort steht nur die Struktur; preis: null heisst „kommt vom Server", nicht „fehlt".
  • Sobald window.TFCZ_API gesetzt ist (auch nachträglich), holt der Baustein die Live-Liste und rendert neu. Antwortet der Server nicht, bleibt der Platzhalter stehen — die Seite bricht nie.
  • Sortiment ändern = eine Datei: system/drinks.js. Nie eine Liste in eine Seite kopieren.
  • Icons = Lucide (beer, cup-soda, coffee, cookie) — keine Emojis. Kategorie-Zeile in Gold, Preis in Gold, offener Preis gedämpft.
  • Später lesen Bar-Display und Kassensystem dieselbe Quelle — darum steht das Sortiment nicht in der Seite.
15d

Portal-Schliessen

Fenster öffnen und schliessen SOFORT — ohne Auf-/Zu-Animation. system/components/portal.js. Kein Zusammensinken, kein Verblassen, kein Skalieren aus dem Klickpunkt. (Vasco 26.07.2026: „kein Ein- und Ausschalten der Fenster mehr — auch nicht bei den Easter Eggs.") Das Schliessen läuft weiterhin zentral über den Baustein, damit alle Fenster gleich reagieren — nur eben ohne Effekt. Das EINZIGE, das noch federt, ist der X-Button (Hover-Quetschung).

So benutzt man ihn

<script defer src="system/components/portal.js"></script>

// Statt das Fenster selbst zu verstecken — zentral schliessen (sofort, ohne Animation):
TFCZ.portal.close(fensterEl, function () {
  overlay.classList.remove('on');   // aufräumen
});

fensterEl = die Box (nicht der Backdrop). Der Callback läuft sofort; es gibt keine Animationsdauer und keinen Zustand mehr.

Live — öffnen und schliessen

Schliessen per X, Esc oder Klick daneben — jeweils sofort, ohne Effekt.

Regeln

  • Nie ein Fenster selbst ausblenden (display:none, Klasse entfernen, wegschieben). Jede Schliess-Aktion läuft über TFCZ.portal.close().
  • Keine Auf-/Zu-Animation für Fenster — weder Zusammensinken/Verblassen noch Skalieren. Popups erscheinen und verschwinden sofort.
  • Verdrahtet: Menü-Drawer, Tages-Maske, Video-Modal, Bild-Player, Barometer-Sheet, dieses Inhaltsverzeichnis, das Demo-Popup, die Easter-Egg-Popups und das Design Studio.
  • Der X-Button bleibt der Standard-X: runder Kreis, Hover rot, Quetsch-Animation — das ist die einzige verbliebene Fenster-nahe Animation.
15e

Formulare

Ein Baustein für alle Formulare. Felder und Mail-Texte stehen in system/forms.js, das Verhalten in system/components/form.js: rendern, Pflichtfelder prüfen, Mail bauen, „Mail geöffnet?"-Fallback, Text kopieren. Acht Formulare auf vier Seiten (fünf Mitglied-Pakete, Training, Firmenevents, Medien) — vorher stand dieselbe Logik vier Mal im HTML.

Live — dasselbe Bauteil wie auf der Website

Die Felder unten stehen nicht in dieser Datei — sie kommen aus system/forms.js. Wähle ein Formular: derselbe Wechsel, den „Mitglied" bei der Paketwahl macht (data-form umsetzen + TFCZ.formUI.neu(form)).

Bitte fülle die markierten Pflichtfelder aus.

So baut man es ein

<form data-tfcz="form" data-form="training" novalidate>
  <div class="fgrid" id="fFields"></div>   <!-- Felder kommen vom Baustein -->
  <button class="btn btn-gold" type="submit">Als Mail senden</button>
  <span class="formerr" id="fErr">Bitte fülle die markierten Pflichtfelder aus.</span>
</form>

<script src="system/forms.js"></script>
<script defer src="system/components/form.js"></script>

Wechselt die Seite das Formular (Mitglied: Paketwahl), setzt sie data-form um und ruft TFCZ.formUI.neu(form) — nur die Felder werden neu gerendert, die Verdrahtung bleibt.

Regeln

  • Der Absender ist der KUNDE. Schlusssätze nie aus Vereinssicht: „Bitte meldet euch mit Verfügbarkeit und Ablauf" — nicht „Wir melden uns …". Das war ein echter Fehler im Mailtext.
  • Nichts darf still verschwinden. Ein optionales Feld, dessen Fehlen eine Aussage ist (Wunschzeit), bekommt leerText und steht dann als „Wunschzeit: noch offen" im Text.
  • Felder nur in system/forms.js — nie im HTML. Empfänger kommt aus system/content.js.
  • Backend: ist window.TFCZ_API gesetzt, geht die Anfrage zusätzlich per POST /api/forms/<id> an den Server. Der mailto-Weg läuft unabhängig weiter — das Formular funktioniert also immer. Vertrag: API.md.
  • Die Farbe des Absenden-Buttons folgt dem ZWECK, nicht dem Formular. Ist das Absenden die Conversion/Lead (Mitglied, Training, Firmenevent) → .btn .btn-gold. Ist es eine normale Anfrage (Medien) → .btn .btn-blue. Darum steht in der Live-Demo oben Blau (Medien) und im Einbau-Beispiel Gold (Training).
  • Toast ist global: TFCZ.toast('Text kopiert').
15g

Design-Tokens · eine Datei

Farben, Radien, Schatten, Zeiten und Easing stehen an EINER Stelle: system/tokens.css — 45 Tokens, geladen vor dem seiten-eigenen CSS. Vorher hatte jede Seite ihr eigenes :root: 34 Tokens waren gleich, aber 11 liefen auseinander — --r-xl in vier Varianten (16/22/24/26px), drei Schatten-Varianten, zwei Easing-Kurven. Darum sah dieselbe Karte auf zwei Seiten anders aus.

Ladereihenfolge — immer so

<head>
  <link rel="stylesheet" href="system/tokens.css">   <!-- 1. Tokens -->
  <style> /* 2. nur noch Seiten-Spezifisches */ </style>
</head>

Kein :root mehr in einer Seite. Referenz ist die Home. Ändert man einen Wert in tokens.css, ändert er sich auf allen Seiten gleichzeitig.

Regeln

  • Neue Tokens gehören in system/tokens.css — nie in eine Seite.
  • Eine bewusste Ausnahme pro Seite ist erlaubt (die Seite lädt zuletzt), muss dort aber explizit stehen — damit sie sichtbar und dokumentiert ist.
  • Vor dem Ausliefern prüfen: keine Seite bringt ein eigenes :root mit (Soll: 0).
  • Noch offen: die geteilte Klassen-Bibliothek (tfcz-base.css). Der erste Versuch hat die Seiten zerlegt — wenn, dann Klasse für Klasse mit Bildvergleich.
15h

Karte · Google Maps

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. Der Pin kommt über die Adresse als Suchbegriff (q=), die Google selbst geocodiert — nicht über eine Koordinate (die alten Registry-Koordinaten waren der generische Zürich-Default und sassen daneben). Adresse aus system/content.js (TFCZ.content.ort.label): eine Zeile, überall gültig. loading="lazy" lädt die Karte erst beim Hinscrollen (Performance). Dark Mode bewusst nicht — echtes dunkles Google Maps bräuchte die JavaScript-API + API-Key; hell & keyless ist gewollt.

So baut man sie ein

<div data-tfcz="map"></div>
<script src="system/content.js"></script>
<script defer src="system/components/map.js"></script>

Optional pro Platzhalter: data-q="Strasse 1, 8000 Ort" (Adresse überschreiben) · data-zoom="16". Zieht der Verein um, ändert man eine Zeile in system/content.js — beide Karten folgen.

Live — der echte Baustein

16

Easter-Egg · Emblem-Pop

Belohnungs-Popup der Eiersuche. Klasse .eegg: Ei fällt rein, wackelt zunehmend (Spannung), knackt dann auf — das blaue TFCZ-Emblem springt mit Bounce heraus, Käse regnet herum (thematisch zum Käsekick, wie im echten assets/js/tfcz-fx.js → startCheese()). Wiederverwendbar für jeden Egg-Fund.

Emblem-Pop

TFCZ Emblem

Fund-Logik & Belohnung

Nach dem ersten Fund erscheint der Hinweis, dass ein Login nötig ist, um den Fortschritt zu speichern — der Hinweis bleibt, bis man angemeldet ist. Ohne Login wird ein Ei beim Refresh wieder aktiv. Ab Login wird der Fortschritt im Profil gespeichert und jeder neue Fund zeigt, wie viele noch offen sind. Motivation (immer sichtbar): 10 gefundene Eier = 1 Gratis-Raclette an einem KäseKick der Wahl.

Käse-Feier & Performance

Die Feier lässt Käse-Emoji (thematisch zum Käsekick) über den Bildschirm regnen. Physik: die Käse fallen und bleiben liegen — kein Aufspringen, kein Eigendreh; Anklicken/Wischen schleudert sie hoch (zum Wegspicken/Lesen). Quelle: assets/js/tfcz-fx.js → startCheese().

Performance-Knöpfe (Pflicht bei geräteschwachen Nutzern): Partikel gedeckelt (Mobile ≤600px 120, sonst 200) hält die O(n²)-Kollision günstig · Fallflächen-Canvas dpr 1.5 statt 2 (~1.8× weniger Füllrate) · prefers-reduced-motion überspringt die Feier komplett · Selbst-Stopp: Canvas werden beim Schliessen entfernt (kein Leck, Heap ~1–2 MB). Gemessen 22.07.2026 (Chromium/CDP): Mobile 4× CPU 28→34 fps, 6× 23→30 fps.

16b

Interaktive Standard-Bausteine

Verbindliche UI-Bausteine in Brand-Farben. Social-Buttons und Formular-Felder werden nur noch so verwendet.

Social-Buttons — Standard (Hover = Plattform-Farbe)

Für Instagram, YouTube, WhatsApp, LinkedIn & Co. Immer dieses Muster: weisser Kreis, Tooltip, Hover färbt sich in die Plattform-Farbe.

Formular-Feld — Standard (Floating Label)

Alle Eingabefelder in Formularen sind so: Label wandert beim Fokus hoch, Unterlinie wird zum Blau→Gold-Verlauf, Label wird gold.

Toggle-Switch

Für An/Aus-Optionen (z. B. „angemeldet bleiben"). Aktiv = Blau→Gold.

Segmented / Glass-Radio

Glas-Umschalter mit gleitendem Marker — für 2–3 Optionen (Tabs, Ansichten, Stufen).

Tabs / Reiter (Ansichten)

Für den Wechsel ganzer Ansichten/Inhalte. Aktiver Reiter = Frost + 3px blaue Oberkante, sitzt auf der goldenen Grundlinie (Blau oben / Gold unten). Für 2–3 inline-Optionen stattdessen den Segmented-Baustein oben.

Profil-Avatar · Emblem-Form

Profilbilder tragen die TFCZ-Wappenform (Foto im Schild) statt eines Kreises. Rahmen blau oben / gold unten.

→ Voller Guide & Code

Live-Einsatz aller vier in Brand-Farben: login.html (Login/Registrieren/Passwort-vergessen).

17

Seitengerüst & Navigation

Jede Seite — Home UND jede Unterseite/Landingpage — nutzt dasselbe Gerüst. Abweichende Breiten oder „nur auf der Home"-Verhalten sind verboten. Das sticky Menü ganz oben in dieser Datei ist die Referenz.

Verbindliche Masse & Aufbau
ElementRegel
Inhaltsbreite.wrap{max-width:1160px; padding:0 22px} — überall identisch, auch der Footer (.fwrap). Nie 1000/1080px o. ä.
Sticky-MenüFluchtet mit .wrap via padding:12px max(22px, calc((100% - 1160px)/2 + 22px))unten abgerundete Ecken 0 0 16px 16pxBrand-Line ~3px (der goldene Streifen läuft über die Rundung schmaler aus). Sticky Bars tragen die Signatur IMMER — unabhängig von der Boxen-Anzahl.
Anordnung1 · Logo ganz links (flex:none, Link zur Home) · 2 · Nav-Links direkt daneben, links eingerückt (margin-left:18px — nicht über die Breite verteilt) · 3 · ganz rechts IMMER „← Zur Website" (margin-left:auto, Ghost-Stil — nie Gold an dieser Position).
Nav-LinksDie EIGENE In-Page-Navigation der Unterseite (Anker auf Sektionen DIESER Seite — nicht auf Home-Sektionen). Hover = Gold-Unterstrich. ≤860px: Links ausblenden, Zurück-Button bleibt.
LogoImmer dieselbe Datei assets/img/logo-horizontal-white.png, Höhe 38.8px (Mobile 35.2px), nie komprimiert. Klick = Press-Bounce, Navigation ~230ms verzögert.
GlobalLogo-Press, Burger „Scroll-Loop", Drop-Cascade-Menü und Brand-Signatur existieren auf JEDER Seite identisch — beim Bauen einer neuen Seite den Nav-Baustein 1:1 aus index.html übernehmen.
Hintergrund<script defer src="assets/js/bg-swirl.js"></script> einbinden — das globale Modul ist die einzige Quelle (Feder 0.010 · Dämpfung 0.91), nie pro Seite inline duplizieren.
Section-Kopf: Kicker → Headline → Lead (+ Reveal beim Scrollen)
Mitspielen
Werd einer von uns

Sektionen starten mit Eyebrow-Kicker (Goldstrich), Headline 900 und Lead-Text. Beim Scrollen: Reveal — opacity 0→1, translateY(28px)→0, gestaffelt (+0.1s je Stufe). prefers-reduced-motion respektieren.

Responsive- & Interaktions-Pflichten
  • Voll responsive — Referenz-Breakpoints 640 / 1024 / 1400px · POS/Touch: dense but tappable (Listen/Grids statt grosser Cards, iPad-first)
  • Nie ein horizontaler Scrollbalken: Flex-Textkinder bekommen min-width:0, vertikale Scroll-Container explizit overflow-x:hidden
  • Jedes Popup schliesst per Backdrop-Klick, Klick neben dem Inhalt UND Esc — Standard-Deselektierung für jedes neue Popup
  • Öffentliche Seiten = Hellblau-Hintergrund ohne Umschalter · Login-Bereiche = Navy · Boxen bleiben in beiden Fällen dunkel & frosted
18

Print, Social & Icons

Ausserhalb des Screen-UI gilt die harte Brand-Line: Blau oben, Gold unten — als Schnitt, nie als Verlauf, kein Mischen. Sand #e6e3da ist die helle Print-/Social-Fläche (nie als Screen-Box).

Flyer / Story / PostHeller Inhalt auf Sand oder Weiss — die Brand-Line als harter Schnitt oben & unten.

Regeln

Blau #5ca7dc oben, Gold #cda857 unten — keine Verläufe in Print/Social (der dekorative Blau→Gold-Verlauf ist nur im Screen-UI von POS & Bar-Display erlaubt).
Gold = Premium-Sekundärfarbe, breit einsetzbar — auf Flyern als Prestige/CTA erlaubt, nie als Grossfläche.
Kategorie-Farben wie im Web: Fun #5ca7dcPro #005a94Elite = Gold-Akzent.
Produktion: CMYK · digital: RGB.

Runde Icons — die Verlaufs-Ausnahme
Insta-Highlights, Profil- & WhatsApp-Bilder: Ring = vertikaler Verlauf #4489c7 → #cda857 (Logo-Blau, nicht #5ca7dc!), flach ohne Glanz/3D. Aussenkante 538px · Ringbreite 32px. Scheibe: Radial #005a94 → #0d273d. Icons weiss, ohne Text, auf gleiche Höhe normalisiert. Nur der Hauptchat trägt das Logo statt eines Icons.
Formate & Werkzeuge
KanalFormatWerkzeug
Instagram Post / Flyer1080×1080 (1:1)Design Studio (Flyer-Generator, Vorlagen KäseKick & PRO)
Instagram Story / Panorama1080×1920 (9:16) — Panorama = mehrere Slides, die wie EIN Bild wirkenSkill tfcz-insta-stories
Highlight- / Profil- / WhatsApp-Iconsrund, Ring-Specs obenSkill tfcz-icon-builder
YouTube-Thumbnail1280×720 (16:9), Export PNG + HTMLDesign Studio · YouTube-Tab
Stream-Overlay1920×1080 (OBS-Browser-Quelle)Livestudio — Bausteine siehe Sektion 12
19

Checkliste vor dem Ausliefern

Jedes neue TFCZ-Design — Seite, Flyer, Overlay, Tool — muss alle Punkte bestehen. Nicht bestanden = nicht ausliefern.

  1. Farben exakt kanonisch — nur Werte aus Sektion 01, gegen die Tabelle geprüft.
  2. Brand-Line korrekt — blau oben / gold unten. Print/Social: harter Schnitt. Screen-UI: Signatur an Fenstern & sticky Bars.
  3. Hover ohne Layout-Sprung — Brand-Hover nur als inset box-shadow (Sektion 8b), nie border-Dicke im Hover.
  4. Icon sichtbar? Jedes SVG in einem Button braucht eine svg-Grössenregel — sonst quetscht der Flex-Container es auf 0 (unsichtbares Icon). Nach jedem Glyph→Lucide-Tausch im Browser nachschauen.
  5. Fenster schliessen nur über den Portal-Baustein (Sektion 15d) — nie selbst ausblenden.
  6. Keine Emojis — nirgends. Icons sind immer Lucide (Sektion 7c). Das gilt auch für Symbol-Glyphen, die als Icon missbraucht werden (Kreuz, Häkchen, Stern, Pfeil-runter, Herz) und für Text-Schmuck in Captions, Persona-Daten und Doku. War es Dekoration: ersatzlos streichen. Vor dem Ausliefern gegen Emoji-Unicode-Ranges scannen — Soll: 0.
  7. Gold-Disziplin — Gold-CTA nur für Beitritt/Conversion („Mitglied werden") oder Lead-Anfrage („Verfügbarkeit prüfen"); reine Navigation nie gold. Sonst Gold nur als Auswahl-/Elite-Akzent, nie Grossfläche.
  8. Hover ≠ Auswahl — Brand-Rahmen (Hover) und Gold-Rahmen (selektiert) nie gleichzeitig; „Heute" = goldene Zahl.
  9. Kein X-Overflow — nirgends ein horizontaler Scrollbalken (min-width:0 / overflow-x:hidden geprüft).
  10. Responsive — 640 / 1024 / 1400 getestet; Touch: dense but tappable.
  11. Boxen dunkel & frosted — DarkNavy-Gradient + blur, nie helle Boxen; öffentlich = Hellblau ohne Dark Mode, intern = Navy.
  12. Popup-Standard — Backdrop-Klick + Klick neben Inhalt + Esc schliessen; X-Button 36px mit Rot-Hover & Quetsch-Animation, innerhalb des Containers.
  13. Nav-Baustein komplett — 1160px-Raster, korrekte Logo-Datei & -Grösse, eigene In-Page-Links, Zurück-Button rechts, Burger/Drawer/Logo-Press vorhanden.
  14. Logo-Regeln — richtige Variante pro Hintergrund, Schutzzone frei, keine Don'ts aus Sektion 01b verletzt.
  15. Motion — prefers-reduced-motion respektiert; Hintergrund über bg-swirl.js, Wirbel nur bei Mausbewegung.
  16. Sprache — Deutsch, CHF, nie gendern; Emotion/Vibe transportiert.
  17. Hintergrund bleibt sichtbar — ruhende Container ohne e-2/e-3-Drop-Shadows (nur Border + inset); schwere Schatten nur für Modals, Popups, sticky Bars, Hover-Lift.
  18. Konsistenz — gegen diese Datei geprüft; jede Abweichung braucht eine explizite Freigabe von Vasco.
21

Feedback & Status

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 Laden.

Alerts / Banner
i
InfoDas Training am Dienstag beginnt um 19:00.
ErfolgAnmeldung gespeichert — bis Dienstag!
!
WarnungNur noch 3 Plätze frei.
Fehler / ungespeichertÄnderungen konnten nicht gespeichert werden — bitte erneut versuchen.
Toast · Progress · Spinner · Zähler-Badge · Tooltip
3
Brand-Line auch hier: blau oben · gold unten
Skeleton (Ladeplatzhalter) · Empty State
Noch keine AnmeldungenSobald sich jemand anmeldet, erscheint er hier.
22

Daten & Listen

Tabellen, Avatare und Akkordeons. Akkordeon-Hover = Brand-Rahmen per inset box-shadow (Referenz: .acc-head auf tfcz-regeln.html — die alte border-Umsetzung war genau der verbotene Layout-Sprung).

Standard-Tabelle
SpielerSiegeTurnierKategorie
O. Grieder5Zürich OpenPro
M. Sauter4KäsekickFun
S. Schöb7SchweizermeisterschaftElite
Avatare (Initialen — Gold = Key Player / besondere Rolle)
VO
MS
VO
MS
TW
+5
Akkordeon

Schnuppern gratis, Aktivmitglied CHF 200, Key Player CHF 250 (mit eigenem Schlüssel, 24/7).

Nein — alle sind willkommen, vom Anfänger bis zum Weltmeister.

Landenbergstrasse 10, Zürich Wipkingen — seit 1990 am selben Ort.

23

Starter-Template für neue Seiten

Kopierfertiges Grundgerüst: korrekter Nav-Baustein (Logo links · Links eingerückt · Zurück rechts), 1160px-Raster, Brand-Tokens, Kicker-Sektion, Footer mit Brand-Line und bg-swirl-Einbindung. Damit startet jede neue Seite regelkonform.


  







  
24
Version & Änderungslog

  
Kursierende Kopien lassen sich an der Versionsnummer im Kopf erkennen. Massgeblich ist immer die neueste Version aus dem TFCZ-Projekt (website-v2/brandguide.html).

  

    

    

      
VersionDatumÄnderungen

      
v2.310.07.2026Custom-Dropdown .csel als verbindlicher Standard für ALLE Auswahl-Listen (Navy-Liste, Brand-Line, Drop-Cascade, Gold-Haken) inkl. Enhancer tfczEnhanceSelects() — native Browser-Listen verboten. Auf mitglied.html übernommen.

      
v2.210.07.2026Select-Feld brand-konform: appearance:none + eigener Chevron statt nativer Browser-Pfeile (Fokus = goldener Chevron), dunkle Options — auch auf mitglied.html nachgezogen. Fix: fehlende --bounce-Variable definiert (Level-Up, Sterne-Rating und Emblem-Pop blieben unsichtbar/abgeschnitten, weil ihre Animationen auf var(--bounce) zeigten).

      
v2.110.07.2026Wirbel-Bug behoben (globales Modul bg-swirl.js statt Inline-Altstand mit Dauer-Idle) · neue Regel „Elevation nur für Schwebendes" (Schatten decken das Punktfeld nie zu) · Element-Galerien: Eingabe-Controls, Navigations-Elemente, Feedback & Status, Daten & Listen · Starter-Template · „HTML kopieren" je Sektion · Tokens-Copy · Versionierung.

      
v2.010.07.2026Ausbau zum teilbaren Brand Guide: Logo-Sektion nach Brand Manual 2026 (Varianten, Hintergrund-Matrix, Schutzzonen, Don'ts, Datei-Matrix, Pattern), Farbwerte (RGB/CMYK/Pantone), Sprachregeln, strikte Gold-CTA-Regel, Hover-ohne-Layout-Sprung, Seitengerüst & Navigation, Print/Social/Icons, Checkliste — Logos als Base64 eingebettet.

      
v1.xbis 09.07.2026Component Library: Farben, Typo, Tokens, Buttons, Burger, Drop-Cascade, Logo-Press, Signatur, Cards, Formulare, Auswahl, Badges, Pakete, Barometer, Overlay, Kalender, Hintergrund, Unlocks, Easter-Egg.

    

    

  





















Kopiert