Wallet-Karten brandern: Logo, Farben, Stempel-Icon — deine Marke in Apple & Google Wallet

Eine digitale Stempelkarte mit dem Default-Stempelkarte.app-Look funktioniert technisch — aber sie ist eine Marketing-Verschwendung. Jedes Mal, wenn ein Gast die Karte in Apple Wallet oder Google Wallet öffnet, könnte er deine Marke sehen: dein Logo, deine Brand-Farben, dein Hintergrund-Bild. Diese Anleitung zeigt dir, wie du in 10 Minuten eine Wallet-Karte komplett an dein Unternehmen anpasst — und welche Apple/Google-Specs du dabei kennen musst, damit dein Logo nicht von Wallet-internen Masken angeschnitten wird.

Was Apple Wallet und Google Wallet jeweils anders machen

Wichtig zu verstehen, bevor du irgendwas hochlädst: Apple und Google rendern dein Logo komplett unterschiedlich.

Apple Wallet

• Dein Logo erscheint oben links über dem Brand-Color-Hintergrund
• Format: rechteckiges Banner (max 160 × 50 pt, das ist 480 × 150 px @ 3× Retina)
• Aspect Ratio: ca. 3.2 : 1 (querformat)
• Apple zeigt das Logo as-is ohne Maske — wenn du ein quadratisches Logo gibst, sieht es klein und mickrig aus

Google Wallet

• Dein Logo erscheint oben links in einem Kreis
• Format: quadratisch (mindestens 660 × 660 px)
• Google maskiert es automatisch zum Kreis, mit 15 % Safe Area um den Rand
• Wenn du ein Querformat-Banner-Logo gibst, wird es entweder gequetscht oder oben/unten abgeschnitten

Das Dilemma: ein einziges Logo kann nicht gleichzeitig Apple-Banner UND Google-Kreis sein.

Die Lösung in Stempelkarte.app: Du lädst dein Original hoch (möglichst quadratisch oder leicht rechteckig, mindestens 660 × 660 px). Der Server normalisiert es auf 1024 × 1024 und generiert beim Save automatisch drei Plattform-Varianten:

• logo-apple.png — 480 × 150 PNG, fits-inside auf transparentem Canvas (für PassKit)
• logo-google.png — 660 × 660 PNG quadratisch mit 15 % Safe Area (für Google Wallet API)
• logo-thumb.webp — 64 × 64 WebP für UI-Display im Dashboard

Du musst dich also nicht zwischen den Welten entscheiden. Lade ein gutes Quadrat hoch, der Rest passiert automatisch.

Schritt-für-Schritt: Karte an deine Marke anpassen

1. Programm öffnen + Branding-Tab

Im Dashboard: Programme → wähle das Programm → Tab Branding (oder im Editor links auf den "Branding"-Reiter).

2. Logo hochladen

Drag-and-drop in den Logo-Slot, oder Klick + File-Picker. Während des Uploads passieren drei Dinge parallel:

1. Client-side resize auf max 1024 × 1024 (spart Storage-Bytes + Upload-Bandbreite)
2. EXIF-Daten werden gestrippt (kein versehentliches Geo-Tag-Leak)
3. Server generiert die 3 Plattform-Varianten und speichert sie als separate Storage-Files

Im Live-Wallet-Simulator rechts siehst du sofort wie das Logo in Apple Wallet aussieht (Banner top-left) und wie in Google Wallet (Kreis top-left). Falls dein Logo zu breit ist und im Google-Kreis abgeschnitten wirkt: Logo nochmal als quadratisches Layout exportieren und neu hochladen.

Logo-Tipps:

• Transparenter Hintergrund ist immer besser. Brand-Color hinter dem Logo soll durchscheinen.
• Mindest-Margin von 10 % zum Logo-Rand. Sowohl Apple als auch Google haben weichere oder härtere Maskenränder; ohne Margin werden die Außenkanten angeschnitten.
• SVG geht auch und wird bei uns server-seitig zu PNG rasterisiert (mit 3× Density).
• Dunkle Logos auf hellen Brand-Farben und umgekehrt — sicher­stellen dass der Kontrast passt. Schwarzes Logo auf dunkel-rotem Brand-Background ist nicht lesbar.

3. Brand-Farbe + Akzent-Farbe wählen

Zwei Color-Picker:

• Brand-Farbe (brandColor): Hintergrund deiner Wallet-Karte. In Apple Wallet ist das die ganze obere Hälfte. In Google Wallet ist das die ganze Karte. Default: #55182c (Stempelkarte-Wein).
• Akzent-Farbe (accentColor): die Farbe der gefüllten Stempel-Kreise, des Goal-Marker-Sterns, und (auf manchen Wallet-Versionen) der Belohnungs-Ribbon-Animation. Default: #f8b627 (Stempelkarte-Gold).

Best Practice: Brand-Farbe = deine Hauptmarke (Logo-Background), Akzent-Farbe = ein kontrastierender Komplementär. Wenn deine Marke z.B. dunkel-blau ist, nimm Gold oder warmes Orange als Akzent — nicht "gleicher Blau-Ton, etwas heller".

4. Stempel-Icon konfigurieren (optional)

Default ist ein einfacher Stern. Du hast drei Alternativen:

1. Eigenes Stempel-Icon hochladen (Upload, Pfad analog zum Logo). PNG/JPG/SVG, max 10 MB. Wird auf 256×256 normalisiert.
2. Emoji als Stempel — ein einzelnes Emoji eingeben (z.B. ☕ für Café, 🥐 für Bäckerei, ✂️ für Friseur). Renderer nutzt Pango + Noto Color Emoji.
3. Default-Stern lassen, wenn du kein Konzept hast.

Tipp: Custom-Icons mit hohem Kontrast funktionieren besser. Ein zarter Strich­zeichnung-Stempel verschwindet auf dem kleinen Karten-Display; ein massives Solid-Shape liest sich gut.

5. Stempel-Display-Modus wählen

Zwei Optionen:

• circle-number (Default): Stempel-Kreis mit Icon im Inneren, leerer Kreis als nicht-eingelöst. Klassisch.
• image-only: Volles Icon als gefüllter Stempel, Graustufen-Variante als leer. Modern, brand-affin, nur sinnvoll wenn dein Icon visuell stark ist.

Live-Simulator zeigt beide Modi sofort.

6. Hintergrund-Bild (optional)

Du kannst ein Hintergrund­bild für den Strip-Bereich (wo die Stempel sitzen) hochladen — z.B. ein subtiles Pattern oder ein verschwommenes Foto deines Cafés. Format: JPG / PNG / WebP, lange Kante max 1280 px.

Overlay-Modus + Overlay-Stärke (0-80 %) regelt, wie stark dein Brand-Color über dem Bild liegt:

• none: Bild komplett sichtbar (gut für sehr subtile Patterns)
• darken: Bild abgedunkelt durch Brand-Color (gut für helle Fotos)
• lighten: Bild aufgehellt (gut für dunkle Fotos)
• brand-tint (Default): Bild bekommt eine Brand-Color-Tönung

7. Reward-State anpassen (Business-Tier+)

Was passiert visuell, wenn die Karte voll ist und der Gast seine Belohnung holen kann?

• Eigenes Reward-Hintergrund­bild (z.B. ein Konfetti-Foto oder ein Foto deines Belohnungs-Produkts wie "gratis Cappuccino")
• Reward-Background-Color (statt Bild eine Solid-Color, schlägt das Default-Brand-Gradient)
• Custom Eyebrow-Text — statt Default "BELOHNUNG VERFÜGBAR" → eigener Slogan wie "DEIN KAFFEE WARTET"
• Custom Reward-Headline — statt programm­spezifischer Belohnung → eigener Marketing-Text
• Sunburst + Konfetti-Animation an/aus
• Eyebrow-Color, Headline-Größe, Position — pro Achse separat einstellbar

Das macht den Unterschied zwischen "die Karte ist voll" und "die Karte feiert mit dem Gast".

8. Watermark abschalten (Business-Tier+)

Im Default zeigt deine Karte einen kleinen "stempelkarte.app"-Watermark unten rechts. Mit dem Watermark-Toggle (hideWatermark) blendest du ihn aus — White-Label-Karte ohne unsere Marke. Verfügbar ab Business-Tarif.

Vorschau und Live-Test

Im Editor:

• Live-Simulator zeigt Apple und Google Frame nebeneinander (oder via Toggle)
• Stempel-Scrubber von 0 bis Max → siehst, wie die Karte sich beim Stempeln entwickelt
• Reward-State-Toggle → siehst, wie die Karte bei voll aussieht

Auf einem echten Smartphone:

1. Programm speichern
2. Eine Test-Karte erstellen (im Karten-Tab → "Neue Karte")
3. QR-Code scannen mit deinem iPhone (oder Android)
4. "Zu Wallet hinzufügen" tippen
5. Karte in der Wallet-App öffnen → das ist exakt was deine Gäste sehen

Falls etwas anders aussieht als im Simulator: Bug an support@stempelkarte.app — wir prüfen sofort, weil unser Versprechen ist "Pixel-identisch zwischen Vorschau und Pass".

Häufige Branding-Fehler

• Logo zu klein hochgeladen (200 × 200 px). Server muss hochskalieren → unscharfes Logo. Mindestens 660 × 660 px.
• Quadrat-Logo gewählt, aber Apple-Banner sieht winzig aus. Kein Bug — Apple-Banner ist 3.2:1, ein Quadrat füllt es vertikal aus, lässt aber 75 % horizontale Fläche leer. Wenn du Apple priorisierst, mach ein wider Logo.
• Brand-Color gleich Akzent-Color. Stempel sind dann nicht sichtbar. Akzent muss kontrastieren.
• Hintergrund-Bild zu busy. Stempel werden überlagert, Karte wirkt überladen. Pattern oder Bild + 50 % Overlay.

Wann du KEIN Custom Branding brauchst

Wenn du:

• Den Service grade ausprobierst (Default ist ohnehin schick)
• Zeit­druck bei Launch hast und Branding nachholen willst
• Keine etablierte Brand-Identity hast (dann tut Default-Branding niemandem weh)

Branding ist iterativ verbesser­bar — in 5 Minuten kannst du Logo + 2 Farben einbinden, und es sieht sofort 80 % so gut aus wie ein voll-konfiguriertes Programm.