# GEFA9 · Branding-Übergabe an die Entwicklung

Stand: 2. Oktober 2026. Dieses Dokument beschreibt Icon, Animation und Farbwelten der Lagersoftware, damit sie im Programm umgesetzt werden können.

## 1. Entscheidungen des Auftraggebers

- Der Look der Software gefällt und bleibt (Navy-Seitenleiste, Karten, Figtree-artige Schrift).
- Das jetzige App-Icon (blaue und rote Hälfte) ist zu wenig und wird ersetzt.
- Als Themefarben gefallen: **Petrol, Orange, Graphit**. Blau (der heutige Ton) bleibt als Standard verfügbar. Grün und Violett waren nur Vorschläge.
- Der **Farbverlauf** auf der Icon-Kachel gefällt und wird übernommen.
- Die **Lade-Animation** (Stapler, Scanner, LKW, Schiff, Container, Flugzeug, dann die Gefahrgut-Raute) wird im Programm gebraucht.
- Die Softwarefarbe soll später umschaltbar sein (je nach Wunsch oder Mandant). Das Icon und die Animation folgen der gewählten Farbe.

## 2. Offen (bitte beim Auftraggeber klären)

- **Welche Farbe ist Standard?** Petrol, Orange oder Graphit, oder weiter Blau.
- **Welche Icon-Richtung?** Gezeigt wurden A (Raute auf Verlauf), B (dunkle Kachel, Raute als Linie), C (blau/rote Raute). Die gelieferten Dateien nutzen **A**, weil sie auch klein gut erkennbar ist. B und C sind nur im Designboard.
- **Soll nur die Seitenleiste die Farbe wechseln, oder auch Buttons, Chips und Banner?** Im Designboard wechseln alle gleichzeitig.

## 3. Das Zeichen

Die Marke ist die **Gefahrgut-Raute Klasse 9** (ADR) mit schwarzen Streifen, einer 9 und Unterstrich auf cremeweißem Grund (`#F2F1EC` / `#0B0D10`). Sie ändert sich nie. Nur die Kachel dahinter wechselt mit der Themefarbe.

- Kachel: Verlauf von `icon-gradient-top` nach `icon-gradient-bottom`, Richtung leicht schräg (CSS `linear-gradient(160deg, top, bottom)`), Eckenradius 22,5 % der Kantenlänge.
- Ab 48 px und kleiner wird die **vereinfachte Raute** genutzt (3 dicke Streifen, große 9). Das ist schon in den Favicon-Dateien so umgesetzt.
- Schriftzug: eigenes Wortbild GEFA9 (siehe `GEFA9-Logo-Paket/svg/wortbild-*.svg`). Es besteht aus Strichen, nicht aus einer Schrift.
- In der Seitenleiste: Icon 40–42 px, daneben Wortbild (14 px hoch) und darunter „Lagersoftware · Grüningen" in klein.

## 4. Farbwelten (Design-Tokens)

Aus der Akzentfarbe werden alle anderen Töne berechnet. Mischformel: `mix(a, b, t) = a·(1−t) + b·t` pro Farbkanal.

| Token | Formel |
|---|---|
| sidebar-top | `mix(accent, #04101E, 0.82)` |
| sidebar-bottom | `mix(accent, #04101E, 0.74)` |
| banner-end (dunkel / hell) | `mix(accent, #04101E, 0.66 / 0.70)` |
| accent (dunkler Modus) | `mix(accent, #FFFFFF, 0.18)` |
| accent-strong | `mix(accent, #000000, 0.25)` |
| chip-bg (heller Modus) | `mix(accent, #FFFFFF, 0.86)` |
| icon-gradient-top / bottom | `mix(accent, #FFFFFF, 0.14)` / `mix(accent, #000000, 0.20)` |

Fertige Werte (auch in `theme-tokens.json`):

| Theme | accent | accent dunkler Modus | sidebar-top | sidebar-bottom | Icon oben | Icon unten |
|---|---|---|---|---|---|---|
| Petrol | `#0B7C8E` | `#3794A2` | `#052332` | `#062C3B` | `#2D8E9E` | `#096372` |
| Orange | `#C85F0E` | `#D27C39` | `#271E1B` | `#37251A` | `#D07530` | `#A04C0B` |
| Graphit | `#51627A` | `#707E92` | `#121F2F` | `#182536` | `#69788D` | `#414E62` |
| Blau (heute) | `#2178C9` | `#4990D3` | `#09233D` | `#0C2B4A` | `#408BD1` | `#1A60A1` |

Die Akzentfarben sind so gewählt, dass weißer Text darauf lesbar bleibt. Das Blau ist aus den Screenshots geschätzt. Wenn es im Code einen exakten Wert gibt, diesen verwenden.

Neutrale Flächen (unverändert aus dem Programm):

- Dunkler Modus: Seite `#0D1420`, Karte `#111B2B`, Linie `#1D2A3E`, Text `#E8EEF7`, gedämpft `#8C9AB0`
- Heller Modus: Seite `#EEF2F6`, Karte `#FFFFFF`, Linie `#DCE4EE`, Text `#0E1B2E`, gedämpft `#56657B`

Umsetzung als CSS-Variablen, eine Klasse pro Theme:

```css
:root[data-theme="petrol"]  { --accent:#0B7C8E; --sb-top:#052332; --sb-bottom:#062C3B; --icon-top:#2D8E9E; --icon-bottom:#096372; }
:root[data-theme="orange"]  { --accent:#C85F0E; --sb-top:#271E1B; --sb-bottom:#37251A; --icon-top:#D07530; --icon-bottom:#A04C0B; }
:root[data-theme="graphit"] { --accent:#51627A; --sb-top:#121F2F; --sb-bottom:#182536; --icon-top:#69788D; --icon-bottom:#414E62; }
.sidebar { background: linear-gradient(180deg, var(--sb-top), var(--sb-bottom)); }
.nav-active { background: var(--accent); color:#fff; }
.app-icon { background: linear-gradient(160deg, var(--icon-top), var(--icon-bottom)); }
```

Wenn die Farbe frei wählbar sein soll, die Werte mit der Formel oben zur Laufzeit berechnen:

```js
const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const mix = (a, b, t) => { const A = hex(a), B = hex(b);
  return '#' + A.map((x, i) => Math.round(x * (1 - t) + B[i] * t).toString(16).padStart(2, '0')).join(''); };
function applyTheme(accent) {
  const r = document.documentElement.style;
  r.setProperty('--accent', accent);
  r.setProperty('--sb-top', mix(accent, '#04101E', 0.82));
  r.setProperty('--sb-bottom', mix(accent, '#04101E', 0.74));
  r.setProperty('--icon-top', mix(accent, '#FFFFFF', 0.14));
  r.setProperty('--icon-bottom', mix(accent, '#000000', 0.20));
}
```

## 5. Dateien und Einbau

**Pro Theme** (`GEFA9-Themes/petrol|orange|graphit|blau/`):

- `svg/app-icon.svg`, `svg/favicon.svg`
- `png/app-icon-1024|512|256|192|128.png` (gerundet, transparent)
- `png/ios-app-store-1024.png`, `png/apple-touch-icon-180.png` (vollflächig, iOS rundet selbst)
- `png/android-maskable-512|192.png`
- `png/favicon/favicon-16|32|48|64.png` und `favicon.ico`

```html
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
```

Wechselt das Theme zur Laufzeit, kann das Favicon als SVG im Browser per `href`-Austausch (Data-URL) angepasst werden. Für die Seitenleiste das Icon besser als `div` mit CSS-Verlauf und der Raute als SVG darüber bauen. Dann folgt es automatisch der Variable.

**Weitere Marken-Dateien** (`GEFA9-Logo-Paket/`): Marke transparent, einfarbige Marke (schwarz/weiß für Stempel und Druck), Lockup hell/dunkel, Wortbild. Diese Dateien sind in Kobalt/Tinte/Gelb gehalten, die Marke selbst ist themeunabhängig.

## 6. Lade-Animation (ohne Hintergrund)

Ablauf: Stapler → Scanner → LKW → Schiff → Container → Flugzeug → Raute, danach wieder von vorn. Pro Symbol 2,4 s, ein Durchlauf 16,8 s. Gedacht für Ladeanzeigen, Wartebildschirme, Login, leere Zustände.

**Entscheidung des Auftraggebers:** Die Animation hat **keine Kachel und keinen Hintergrund**, damit sie auf jede Programmfarbe passt. Es gibt sie in zwei Fassungen, je nach Fläche:

- `dunkel`: für dunkle Flächen (dunkler Modus, Seitenleiste). Helle Grundtöne.
- `hell`: für helle Flächen (heller Modus). Dunkle Grundtöne.

Die Signalfarbe (Container, Streifen, Flugzeugflosse, Schiffsrumpf-Linie) ist die **Themefarbe**: Petrol, Orange, Graphit oder Blau.

**Dateien** (`GEFA9-Animation/`), je Theme × Modus, z. B. `petrol-dunkel`, `orange-hell`:

- `svg/gefa9-animation-<theme>-<modus>.svg`: läuft ohne JavaScript, einbindbar mit `<img>`. Farbe ist fest.
- `inline/gefa9-animation-<theme>-<modus>.inline.html`: dasselbe als Inline-SVG zum Einkopieren. Alle Klassen heißen `g9-…`, keine Konflikte mit dem Programm-CSS. **Nur so ändert sich die Farbe zur Laufzeit.**
- `lottie/gefa9-animation-<theme>-<modus>.json`: für Lottie-Player (Web, iOS, Android). 30 fps, 512×512, 504 Bilder, transparent. Mit eigenem Mini-Player gegen das SVG geprüft, **nicht mit lottie-web**. Vor dem Einbau auf lottiefiles.com ansehen.
- `einbetten.html`: Beispiel mit Umschalter für Theme und Modus.

Ältere Fassungen mit Kachel (Kobalt, Tinte, Gelb, Petrol, Orange, Graphit) sowie MP4 und GIF liegen weiter bei, z. B. für Mails oder Präsentationen. MP4 und GIF können nicht transparent sein.

**Farben per CSS-Variablen** (am `svg.g9`-Element, ändert Theme und Modus zur Laufzeit):

| Variable | Bedeutung | dunkle Fläche | helle Fläche |
|---|---|---|---|
| `--body` | Hauptfarbe der Fahrzeuge | `#F2F1EC` | `#1B2A41` |
| `--shade` | Schatten, mittlere Töne | `#9FB1C8` | `#6B7F9C` |
| `--dark` | dunkle Details | `#22344F` | `#0B1626` |
| `--tile` | Fensterflächen | `#142238` | `#DCE4EE` |
| `--accent` | Themefarbe | siehe unten | siehe unten |
| `--slot` | Zeit pro Symbol | `2.4s` | `2.4s` |

`--accent` dunkle Fläche: Petrol `#3794A2`, Orange `#D27C39`, Graphit `#7F8EA3`, Blau `#4990D3`. Helle Fläche: Petrol `#0B7C8E`, Orange `#C85F0E`, Graphit `#51627A`, Blau `#2178C9`.

Die Raute am Ende bleibt immer cremeweiß mit schwarzer Linie. Auf sehr hellem Grund ist ihr Rand dadurch schwach, die schwarze Linie trägt die Form.

**Bewegung reduzieren:** Wenn das Betriebssystem „Bewegung reduzieren" meldet, nur die Raute oder das Icon statisch zeigen, keine Dauerschleife.

## 7. Wo die Entwürfe sind

- Designboard „GEFA9 Logo im Programm": das Programm mit neuem Icon, drei Icon-Richtungen und die Farbwelten. Dort lassen sich Farbe, Hell/Dunkel und Icon-Variante in den Tweaks umstellen.
- Animations-Seite „GEFA9 Ladeanimation" mit den Looks Kobalt, Tinte und Gelb. Die neuen Looks Petrol, Orange und Graphit liegen als Dateien im Paket.
- Konzept-Canvas mit den früheren Logoentwürfen (nur Archiv).

## 8. Aufgaben für die Entwicklung (Vorschlag)

1. Theme-Variablen einführen (`data-theme`), Seitenleiste, aktiver Menüpunkt, Buttons und Banner darauf umstellen.
2. Icon in der Seitenleiste ersetzen, Favicon und PWA-/Apple-Icons austauschen.
3. Animation als Ladezustand einbauen (inline-SVG ohne Hintergrund, Variablen an Theme und Modus koppeln).
4. Theme-Auswahl in den Einstellungen (oder pro Mandant) ergänzen, Auswahl speichern.
5. Kontraste im hellen und dunklen Modus pro Theme prüfen, besonders Orange und Graphit.