SWISS tail

Brandbook.

Made of Switzerland. Flown virtually.
LX-Virtual.comVersion 1.4August 2026
00 Inhalt

Ein Rot. Ein Kreuz. Zwei Seelen.

Dieses Brandbook definiert, wie LX Virtual aussieht, klingt und auftritt. Es verbindet die edle, reduzierte Designsprache von SWISS mit dem alpinen Charme der Schweiz.

01 Marke & Haltung

Präzision mit Herz.

LX Virtual ist die virtuelle Airline für Freunde der Schweizer Luftfahrt — kostenlos, non-kommerziell, von der Community getragen. Wir bilden den Betrieb des präzisen, weltoffenen SWISS in der Flugsimulation nach.

SWISS tail
SWISS
Linienbetrieb, weltweit — Kurz- bis Langstrecke, das präzise Erbe.

Der Tail ist unser Markenzeichen — minimalistisch und einheitlich (tail_swiss.svg, PNG daneben): eine begradigte Livery auf sauberer Flossen-Silhouette, flache Farben auf den Design-Tokens, überall unbeschnitten und unbearbeitet einsetzen (Statement, Fleet, Kacheln). Das Zeichen selbst nie verändern.

Das Kreuz nie auf Rot setzen. Das Schweizer Kreuz ist eine Aussparung im roten Feld, es trägt also den Untergrund — auf rotem Grund verschwindet es. Der Tail ist außerdem bewusst gerade: die Dorsal-Wölbung der echten Flosse ist wegvereinfacht, die Vorderkante bleibt eine saubere Linie.

Markenkern

Präzision.
Schweizer Genauigkeit — echte Flugpläne, echte Flottenzahlen, saubere Prozeduren. Was SWISS fliegt, fliegen wir.

Eleganz.
Reduziert, edel, ruhig. Viel Weißraum, ein präziser Rotton, keine laute Grafik. Weniger ist mehr.

Gastfreundschaft.
Vom Gelegenheitspiloten bis zum Vielflieger — jeder hat seinen Platz. Der Berg ruft für alle.

Tonalität

Wir schreiben wie eine Premium-Airline aus der Schweiz: ruhig, präzise, warm. Kurze, klare Sätze. Understatement statt Superlative. Ein Hauch alpiner Stolz, nie Angeberei. Auf Deutsch duzen wir, auf Englisch sind wir „you".

Faustregel: Würde es an einem SWISS-Gate hängen — und würde ein Simmer beim Blick aus dem Cockpit auf die Alpen lächeln? Dann passt es.

Zwei Register. Das oben gilt für Headlines auf den Grafiken und für Texte auf der Website. Social-Captions sind wärmer und offener — Emoji ja, Ausrufezeichen ja, offene Freude über die Flotte, Grüße und Dank an die Community. Eine Spur leiser als LH, aber nie distanziert. Verbindliche Referenz sind die captionExamples in design-tokens/lx.json — echte Captions, keine erfundenen.

03 Farben

Rot führt. Anthrazit trägt. Weiß atmet.

Die Palette ist bewusst schmal und edel: ein präziser Rotton als einzige Leitfarbe, ein tiefer Alpen-Anthrazit für die dunkle Welt, viel Weiß dazwischen. Rot wird sparsam gesetzt — wie SWISS es tut.

Swiss Red#CC0000 · RGB 204 0 0Primär, Logo, Akzente, Chips
Berry Red#990000Tiefen, gedrückte Zustände
Alpine Anthracite#212121dunkle Welt, Scrims
Glacier#F4F5F7helle Sektionsflächen
Anthracite 1#323232Verlauf oben
Anthracite 3#121212Verlauf unten, Scrim
Alpine Mist#929292Sekundärtext auf Dunkel
Ink#101010Fließtext auf Weiß

Sekundär & Interaktion

1:1 aus dem echten SWISS-System übernommen (MAUI-Theme swiss.css auf swiss.com). Ohne diese Ebene wird Rot zum Lückenfüller: Alles, was auffallen soll, ohne Headline zu sein, landet sonst im Akzent.

Muted#666666 · RGB 102 102 102Sekundärtext auf Weiß — 5,7:1
Warm Grey#6F6660 · RGB 111 102 96Sekundäre Buttons — 5,6:1
Pine Grey#554E49 · RGB 85 78 73Hover der Sekundärfarbe — 8,2:1
Electric Blue#0968F6 · RGB 9 104 246Fokusring — 4,9:1; auf Dunkel Weiß
Links sind rot. Anders als bei LH Virtual, wo Links blau sind und Gelb dem Button vorbehalten bleibt, bindet SWISS die Interaktionsfarbe an den Akzent selbst (interaction-interaction = lx-red). Der Hover geht auf Berry Red.

Ecken

SWISS ist scharfkantig: --maui-radii-default-radius: 0, und im gerenderten DOM stehen 228 von 247 gemessenen Elementen auf border-radius: 0. LX Virtual mildert das auf 2 px ab — SWISS' zweithäufigster Wert. Nie die 14 px aus dem LH-System: Die Rundung ist Lufthansa, nicht Schweiz.

Der Anthrazit-Verlauf

Signatur der dunklen Welt: linear-gradient(172°, #323232 → #212121 → #121212) — kühles Alpengranit, von oben nach unten dunkler.

Einsatzverhältnis

60% Weiß/Glacier
30% Anthrazit
7%
3%

Rot bleibt unter ~10 % jeder Fläche — das ist die Schweizer Eleganz. Auf Rot steht immer Weiß (Kontrast 5,9:1), nie Anthrazit.

04 Typografie

Zwei Familien, klare Rollen.

Wie die gesamte Lufthansa Group nutzt LX Virtual die Lufthansa-Schriften: Head für alles Laute, Text für alles Lesbare. Der elegante Ton entsteht durch großzügigen Light-Einsatz. Fallback: Segoe UI / Arial.

Lufthansa Head Light — große Headlines, Understatement (Signatur von LX)
Made of Switzerland. Flown virtually.
Lufthansa Head Bold — Betonung, Buttons, Zahlen, Chips
Grüezi, Captain.
Lufthansa Text Regular/Bold — Fließtext, UI, Captions

LX Virtual bildet den SWISS-Betrieb nach — mit echten Flugplänen, akkuraten SimBrief-Profilen und einer Community, die die Alpen liebt. Bold nur zur Betonung einzelner Begriffe.

Eyebrow — Sektionsmarker, immer mit roter Linie
LX News

Hierarchie-Regeln

EbeneSchnittGröße (Web)Besonderheit
H1 / HeroHead Light44–92 pxLetter-spacing −3 %, ein Wort in Bold erlaubt
H2 / SektionHead Bold30–44 pxLetter-spacing −2 %
EyebrowHead Bold13 px, +30 % LSVersalien, rote 34-px-Linie davor
BodyText Regular16–18 pxZeilenhöhe 1,7, max. ~74 Zeichen
Caption/MetaText Regular12–14 pxMuted-Farben
05 Grafikelemente

Wenige Bausteine, präzise gesetzt.

Fünf wiedererkennbare Elemente — konsequent eingesetzt statt jedes Mal neu erfunden.

1 — Red Underline

Die rote Linie unterstreicht das wichtigste Wort oder markiert Kategorien. Stärke ~8 % der Versalhöhe, nie breiter als das Wort.

LX NEWS

2 — Category Tag & Swiss-Cross

Rotes Label mit weißen Versalien für Inhaltstypen; das Schweizer Kreuz als kompaktes Absender-Zeichen (z. B. Avatar, Wasserzeichen-Ecke).

NewsEventFocus Airport Outline

3 — Tail-Wasserzeichen

Das Swiss-Tail groß angeschnitten am Bildrand, 6–8 % Deckkraft — verleiht dunklen Flächen Tiefe. Nie über Flugzeug-Bemalungen oder Gesichtern.

4 — Alpine Scrim

Verlauf von rgba(18,18,18,0) zu rgba(18,18,18,.95) über dem unteren Bilddrittel — macht jeden Screenshot text-tauglich, ohne die Alpen zu verdecken.

5 — Alpen-Polygone

Zwei überlagerte Berg-Silhouetten als Polygonzüge, Weiß mit 4–5 % Deckkraft — die stille Signatur der Marke auf dunklen Flächen (Brandbook-Cover, Overlay-Unterkante, Monats-Cover, Website-Footer). Immer am unteren Rand, Höhe 35–45 % der Fläche, unter den Texten, über Foto/Scrim. Spezifikation: Ebene 1 fill rgba(255,255,255,.05), Ebene 2 rgba(255,255,255,.04), Zackenhöhe unregelmäßig (keine Wiederholung), preserveAspectRatio="none" und width:100% — ein SVG ist ein ersetztes Element, left/right allein dehnen es nicht auf die volle Breite.

06 Bildsprache

Screenshots wie aus dem Anflug auf Zürich.

Unsere Bilder kommen aus dem Simulator — aber sie sollen aussehen wie von der Zuschauerterrasse in Kloten oder beim Sinkflug über die Alpen fotografiert.

So ja

  • Alpen, Seen, Schnee — die Schweizer Kulisse als Bühne
  • Golden Hour & Blaue Stunde über Bergpanoramen
  • Ein Flugzeug, ein Motiv, ein Fokus — ruhig komponiert
  • SWISS-Bemalungen, realistische Spotter-Perspektiven
  • Dezentes Grading, kühl-klare Luft, viel Himmel

So nicht

  • Sichtbare Sim-UI, Menüs, Framerate-Counter
  • Überschärfte HDR-Optik, Regenbogen-Presets
  • Unmögliche Kamerapositionen (mitten auf der Piste)
  • Fremd-Liveries als Hauptmotiv (nur SWISS-Group)
Format-Reserve: Wichtige Bildinhalte in die mittleren 60 % legen — dann funktioniert derselbe Screenshot als Post (4:5), Story (9:16) und Header (16:9), ohne dass der Jet oder der Berggipfel den Kopf verliert.
07 Social Media System

Ein Overlay. Jede Plattform.

Das einheitliche Lower-Third-System für Screenshots auf Instagram, Facebook und in Reels: Scrim, rote Linie, Kategorie, Headline, Tail-Zeichen. Es skaliert über alle Formate und bleibt in den Safe Zones.

LX News
Grüezi über
den Alpen
LX Virtual
Feed Post · 1080×1350 (4:5)
Event
Zürich
Tuesday
LX Virtual
Square · 1080×1080 (1:1)
Focus Airport
Sion LSGS
LX Virtual
Story/Reel · 1080×1920 (9:16)

Aufbau des Lower Third (von unten nach oben)

ElementSpezifikationZweck
Alpine-Scrim0→95 % #121212, unteres Bilddrittel bis -hälfteLesbarkeit auf jedem Screenshot
Red BarReferenz 1080er-Breite: 200×22 px, #CC0000Markensignal, Blickanker
KategorieHead Bold, Versalien, +26 % LS, RotContent-Typ: LX News, Event …
HeadlineHead Bold/Light, Weiß, max. 2 Zeilen; hält das Tail-Eck (unten rechts) freiDie eine Botschaft
LX-Tail (Marke)rechts unten, Höhe 40 px — die komplette FlosseAbsender — auf Overlays immer die LX-Marke (LX_Tail_solid.svg)
Alpen-Polygoneunterste 40 %, 2 Ebenen, Weiß 5 %/4 % — auf jedem Format, Story eingeschlossenstille Marken-Signatur über dem Scrim

Safe Zones (Stand 2026)

FormatObenUntenWarum
Story / Reel 1080×1920250 px420 pxProfil/Kamera oben; CTA & Reel-UI unten — Lower Third sitzt oberhalb der 420-px-Zone
Feed Post 4:5~110 pxGrid croppt 1:1: Kernmotiv + Headline in die mittleren 1080×1080
Facebook 1200×630rechts 80 pxPlay-/Info-Overlays
Ein Absender: Auf Social-Overlays und Serien-Templates spricht immer die Marke — das offizielle LX-Tail mit weißem Kreuz. Die SWR/EDW-Tails gehören auf die Website (Dual-Statement, Fleet), nicht auf Overlays.
08 Profilbild & Social-Media-Assets

Ein Zeichen. Jede Plattform.

Die Wortmarke zerfällt als Profilbild — bei 32 px ist „LX Virtual" ein unlesbarer Schmierstreifen. Es trägt stattdessen die Flosse: weiße Silhouette, negatives Kreuz, Swiss Red. Ein Bild für alle Kanäle: Discord, Instagram, Facebook, TikTok, YouTube, X.

Profilbild — „one fits all"

LX Virtual Profilbild
150 px · 80 px · 44 px · und eckig. Die Flosse bleibt bis zur Icon-Größe erkennbar.
Warum nicht die Wortmarke: LXV_Square_Red.svg / .png zeigt die weiße SWISS-Flosse mit negativem Kreuz auf Swiss-Red — lesbar bis 28 px, wo die Wortmarke bereits zerfiel. Der Vektor ist die Quelle, das PNG der Upload.
PlattformAnzeige (⌀)FormUpload
Discord (Server-Icon & Profil)48–100 pxKreis1000×1000 PNG
Instagram320 px (Feed 32 px)Kreis1000×1000 PNG
Facebook (Seite)170 pxKreis1000×1000 PNG
TikTok200 pxKreis1000×1000 PNG
YouTube800 pxKreis1000×1000 PNG
X / Twitter400 px (Timeline 48 px)Kreis1000×1000 PNG
Regeln: Überall dasselbe Bild — Wiedererkennung entsteht durch Konstanz. Das Zeichen sitzt mit Rand im Quadrat, weil Discord, Instagram und X kreisförmig beschneiden. Nie das Kreuz umfärben, nie die Flosse auf ein Foto setzen.

Banner & Header

Ein durchgehendes Bühnenbild — Anthrazit-Verlauf mit Flosse und Alpen-Polygonen — mit weißer Wortmarke, roter Akzentlinie und Tagline mittig. Ein Layout, in jedem Kanalformat ausgespielt.

LX YouTube-Banner
YouTube Channel Art · 2560×1440 (sichere Zone 1546×423 mittig)
LX Discord-Banner
Discord Server-Banner · 960×540
LX X-Header
X / Header · 1500×500
FormatPixelSichere ZoneEinsatz
YouTube Channel Art2560×14401546×423 mittigKanal-Header — TV, Desktop und Mobil zeigen je mehr Rand, darum liegen Logo und Tagline in der Zone
Discord Server-Banner960×540vollflächigBoost-Banner, Einladungs-Header
X / Header1500×500Ränder ~60 px, unten links Profilbild-ÜberlappungProfil-Header
Aufbau (von hinten nach vorne): Anthrazit-Verlauf → Alpen-Polygone am unteren Rand → angeschnittene Flosse → weiße Wortmarke zentriert → rote 4-px-Akzentlinie → Tagline in Versalien. Dateien: social-templates/banners/lx_banner_*.png.
09 Focus Airports

Ein Flughafen. Ein Monat. Ein Bild.

Focus-Airport-Grafiken erzeugt der Event-Generator automatisch. Design „Horizon": Foto als Held, Alpine-Scrim, ICAO auf rotem Chip, Stadtname gefüllt Weiß, Tail-Wasserzeichen statt Logo.

Platzhalter

VariableBeispielRegel
{CITY}SIONVersalien, gefüllt Weiß. Auto-Fit: Breite ≤ Canvas − 2×Rand
{ICAO}LSGS4 Zeichen, Versalien, zentriert auf dem Chip
{MONTH} {YEAR}JULY 2026englisch, Versalien; auf dem Cover als Chip-Text
{PHOTO}min. 2400 px, Motiv-Fokus mittig (übersteht 3:2- und 4:5-Crop)

Export: PNG, sRGB. Canvas: Event-Banner 1800×1200 (3:2) und Instagram 1080×1350 (4:5). Foto Cover-Fit, Fokus zentriert.

Das Design: „Horizon"

Focus Airport
LSGSJuly 2026
Sion
LX Virtual
Event-Banner 1800×1200
Focus Airport
LSGSJuly 2026
Sion
LX Virtual
Instagram 1080×1350
Ebene4:5 (1080×1350)3:2 (1800×1200)Spezifikation
Scrimvolle Flächelinear 180°: transparent bis 42 %, rgba(18,18,18,.55) @ 72 %, rgba(18,18,18,.95) @ 100 %
LX-Tail-Wasserzeichenunten rechts, angeschnittenLX_Tail_solid.svg, Höhe 68 % der Bildhöhe, 7 % Deckkraft, je ~45 % aus dem Bild. Über Scrim, unter Texten.
Rote Barx72 y72, 180×18x84 y84, 200×20#CC0000
Eyebrow „FOCUS AIRPORT"x72 y112x84 y128Head Bold 40/44 px, Versalien, LS +26 %, Weiß
{ICAO}-Chipx72, Unterkante y1128x84, Unterkante y1000Head Bold 48 px Weiß auf #CC0000, Padding 10×22, Radius 6, Text zentriert
{MONTH} {YEAR}rechts neben Chip, +24 pxditoHead Bold 30 px, Weiß 75 %, LS +20 %
{CITY}x64, Baseline y1268x76, Baseline y1116Head Bold max 170/200 px, gefüllt Weiß, Versalien, Auto-Fit

Monats-Cover (Deckblatt)

LX Virtual
FOCUS
AIRPORTS
JUL26 LX Virtual
Instagram 1080×1350
LX Virtual
FOCUS
AIRPORTS
JUL26 LX Virtual
Square 1080×1080
EbenePosition (1080×1350)Spezifikation
Hintergrundvolle Flächefestes Markenmotiv cover-bg.jpg — das Weltkarten-Motiv der Gruppe als Swiss-Red-Duotone (aus dem LH-Cover abgeleitet)
Alpen-Polygoneunterste 40 %2 Ebenen, Weiß 5 %/4 % — über dem Hintergrund, unter den Texten
Balken + Eyebrow „LX VIRTUAL"x72 y72 / y112rote Bar 180×18, Head Bold 40 px Versalien Weiß
„FOCUS"x62, Oberkante y190, Versalhöhe 131 pxHead Bold, gefüllt Weiß — sitzt unter dem Eyebrow, keine Überlappung
„AIRPORTS"Spalte x401–469, y372–1058Head Light, Weiß, aufrecht vertikal gestapelt, ≈ 86 px pro Buchstabe — beginnt immer unter „FOCUS", in jedem Format inklusive 1:1
{MON}{YY}-Chiprechte Kante x1053, Unterkante y1161Head Bold ~100 px Weiß auf #CC0000, Innenabstand 32 px, Radius 12
LX-Tail (Marke)x72, Unterkante y1278LX_Tail_solid.svg, Höhe 56 px — Absender unten links
Kurzfassung für den Generator: Horizon = {PHOTO} + Scrim + Tail-Wasserzeichen + Eyebrow + ICAO-Chip + {CITY}. Cover = Anthrazit-Hintergrund + FOCUS/AIRPORTS-Wortbild + Monats-Chip + Tail. Alle Chips gleiche Bauart (Rot, weißer Text, zentriert). Absender ist immer die LX-Marke.

Focus-Generator — Referenzcode

FOCUS_AIRPORT = {
  "brand": "lxv", "design": "horizon",
  "colors": { "accent": "#CC0000", "scrim_base": [14, 17, 22], "text": "#FFFFFF" },
  "fonts":  { "head": "LufthansaHead-Bold", "light": "LufthansaHead-Light" },
  "canvas": { "feed": [1080, 1350], "banner": [1800, 1200] },
  "layers": [
    { "id": "photo",   "fit": "cover", "min_width": 2400, "focus": "center" },
    { "id": "scrim",   "gradient": [[0.42, 0], [0.72, 0.55], [1.0, 0.95]] },   # transparent -> rgba(scrim_base, a)
    { "id": "peaks",   "layers": [0.05, 0.04], "height_pct": 0.42, "anchor": "bottom", "full_width": true },
    { "id": "wm_tail", "asset": "LX_Tail_solid.svg", "height_pct": 0.68, "alpha": 0.07,
      "x": "W - 0.55*w", "y": "H - 0.55*h" },   # komplette Flosse, Seitenverhaeltnis 1.056
    { "id": "bar",     "feed": [72, 72, 180, 18], "banner": [84, 84, 200, 20], "fill": "accent" },
    { "id": "eyebrow", "text": "FOCUS AIRPORT", "feed": [72, 112], "banner": [84, 128],
      "size": [40, 44], "tracking": 0.26, "fill": "#FFFFFF" },
    { "id": "chip",    "text": "{ICAO}", "feed_bottom": [72, 1128], "banner_bottom": [84, 1000],
      "size": 48, "pad": [10, 22], "radius": 6, "fill": "accent", "color": "#FFFFFF" },
    { "id": "month",   "text": "{MONTH} {YEAR}", "pos": "right_of_chip+24", "size": 30,
      "fill": "rgba(255,255,255,.75)", "tracking": 0.20 },
    { "id": "city",    "text": "{CITY}", "feed_baseline": [64, 1268], "banner_baseline": [76, 1116],
      "max_size": [170, 200], "fill": "#FFFFFF", "autofit": "width <= W - 2*margin" }
  ],
  "export": { "format": "png", "colorspace": "sRGB" }
}

Discord — ein Bild, ein Text

Discord ist nicht Instagram. Anhänge werden in der Timeline auf rund 550 px skaliert, und Hochformat wird im Raster beschnitten — vom 4:5-Cover blieb nur „AIRPORT" senkrecht stehen, und zehn Briefmarken tippt niemand einzeln an. Der Channel bekommt deshalb ein eigenes Format: eine Übersichtsgrafik im Querformat, 1600 × 1000.

WoDer Discord-Channel der VA, gepostet vom VA-Bot — der Ziel-Channel steht einmalig in den Einstellungen des Event Studios.
WannAutomatisch am Vorabend des Monats um 20:00, dazu der Knopf „③ Push → Discord" für den sofortigen, beliebig wiederholbaren Push (Test oder nach einer Änderung).
AufbauKopfzeile mit Monat und den Landesflaggen in der Reihenfolge der Airports (feste 48 × 32-Box, alle gleich groß), Stadtfotos als Kacheln mit dem Category Tag, Radius 2 px für den ICAO, Alpen-Grat auf der Grundlinie als Absender-Zeichen, Website unten links.
Variantenmosaic (Fotokacheln, Standard) · board (reine Liste) · split (Markenfläche plus Liste). Je Deployment umstellbar.

Der Text ist für den Channel geschrieben, nicht aus Instagram kopiert: Überschrift, je Airport eine Zeile mit ICAO, Stadt und den Focus-Punkten sowie einer Begründung aus vier bis acht Wörtern. Diese Begründungen schreibt Mistral in einem Aufruf für den ganzen Monat — so unterscheiden sie sich voneinander, statt neunmal derselbe Satzbau zu sein; ICAO, Stadt, Punkte und Struktur bleiben in der Vorlage, das Modell kann also keine Fakten verbiegen. Ohne API-Key oder bei unbrauchbarer Antwort bleibt die schlichte Liste — der Beitrag geht immer raus. Keine Hashtags (im Channel wirkungslos), und der Link steht in spitzen Klammern, damit Discord keine zweite Vorschaukarte unter das Bild hängt.

## ✈️  Focus Airports · September 2026

**6 destinations**, bonus points on every flight — the whole month.

**EDDH** Hamburg · 100 P — river approach right past the Elbe bridges
**LPPT** Lisbon · 100 P — city rooftops and the Tejo on final
**KORD** Chicago · 250 P — dense parallel operations and brisk ATC

Fly to or from any of them and collect. Where are you heading first? 🛫
<https://lx-virtual.com>
10 vAMSYS

Ein fremdes Haus, dieselbe Handschrift.

vAMSYS ist die Plattform, auf der unser Betrieb läuft — Buchung, Dispatch, PIREPs, Ränge. Sie gehört uns nicht, wir richten sie nur ein. Dieses Kapitel hält fest, was sich dort einrichten lässt, mit welchen Mitteln, und wo die Plattform die Marke stoppt. Es ist das Gegenstück zu den Gestaltungskapiteln: dieselben Regeln, fremdes Markup.

Was gebrandet werden kann

Zwei Formulare in Orwell steuern alles: Settings → Design → Logo Settings (vier Logo-Slots plus Login-Hintergründe) und Style Settings (zwölf Farb-Paare plus ein eigenes Stylesheet). Ihre Reichweite ist begrenzt.

OberflächeFarb-PaareEigenes CSSLogos
Phoenix (Piloten)jajaja
Orwell (Staff/HQ)neinneinja
Select-VA-Seiteteilweiseneinja
Pegasus ACARSneinneinja
Ausgehende E-Mailsneinneinja
Orwell bleibt blau — das ist eine Plattformgrenze, kein Umsetzungsfehler. Nachweis: --LXRed ist dort nicht definiert und --primary-600 steht auf 37, 99, 235, dem vAMSYS-Blau. Jede Regel, die nur auf Orwell-Selektoren zielt (z. B. .fi-main), ist toter Code — deshalb lag die Bergsilhouette bis v1.5.0 unsichtbar auf einem Anker, den Phoenix gar nicht kennt.

Drei Hebel, in dieser Reihenfolge

HebelWoReichweite und Haltbarkeit
1 · Die zwölf Farb-PaareStyle Settings, FormularfelderMenü, Topbar, Body, Karten, Tabellenzeilen. Stabil — übersteht Plattform-Updates.
2 · Die Variablen-Rampeneigenes CSS, :rootButtons, Badges, Links, Checkboxen, Ringe, Tabs, Panels, Icons — auf allen Seiten gleichzeitig. Ersetzt dutzende Einzel-Overrides.
3 · Einzelne Selektoreneigenes CSSDer Rest: .dispatch-*, .map-loader-*, hart kodierte Farben in eigenen Bundles. Fragil — nach jedem Update nachprüfen.

Von stabil nach fragil. Wer bei 3 anfängt, schreibt dutzende !important-Regeln für etwas, das eine Zeile in 2 erledigt hätte.

Die Rampen — der eigentliche Hebel

vAMSYS baut auf Filament auf, und Filament färbt alles über sechs CSS-Variablen-Rampen mit je elf Stufen, geschrieben als RGB-Tripel ohne rgb()-Wrapper — nur so funktionieren Tints wie rgba(var(--LXRed), .08). Filaments Konvention: 600 ist die Vollton-Fläche und die Textfarbe im Hellmodus, 700 der Hover, 400 Text und Ring im Dunkelmodus, 50/950 die Tint-Hintergründe.

RampeStandardLX VirtualBegründung
--primary-*Indigo #3E60D5400 = #FF5C5C · 500 = #E60000 · 600 = #CC0000 · 700 = #990000Swiss Red führt. Weil Filament im Dunkelmodus von sich aus zur Stufe 400 greift, löst die korrekt gebaute Rampe das Kontrastproblem gleich mit.
--info-*Cyan #16A7E9Graphit-Neutral, 400 = Mist #929292An --info hängen die großen Sekundär-CTAs (Booking Actions, SimBrief Actions). „Anthrazit trägt" — so werden sie ruhig, ohne Selektorenjagd.
--gray-*blaustichig (900 = 29,31,45)desaturiert bei nahezu gleicher Helligkeit, 700–950 auf Line dunkel / Anthrazit 1–3Der Blaustich war die Ursache des navy-blauen Schleiers auf Dispatch-Seiten, Tabellen und Inputs.
--success-* --warning-* --danger-*Grün / Amber / RotunangetastetSie tragen Bedeutung quer durch Badges, PIREP-Status und Alerts. Markenreinheit darf Semantik nie überschreiben.
Weil unsere Markenfarbe rot ist und Rot zugleich „Gefahr" bedeutet, muss Fehlerkommunikation bei LX immer zusätzlich über Icon und Text laufen. Farbe allein genügt hier nicht — das ist eine Folge der Palette, kein Mangel der Plattform.

Rot auf Dunkel — der Dark-Tint

Swiss Red #CC0000 auf Alpine Anthracite #212121 ergibt 2,74:1. WCAG AA verlangt 4,5:1. Betroffen waren die KPI-Zahlen auf Dashboard und Profil, Pilotenname und -ID, Textlinks und die aktiven Ladeschritte der Karte. Die Regel aus Kapitel 03 gilt in vAMSYS deshalb wortgleich: Auf dunklem Grund wird Rot als Text oder Icon im hellen Tint #FF5C5C gesetzt (5,2:1). Flächen bleiben Swiss Red — darauf steht weißer Text.

Tint auf Tint vermeiden. Farbiger Text auf einem Tint derselben Farbe trägt fast nie: Rot auf 12 % Rot ergab auf den Airport-Buttons der Buchungskarte 3,18:1.

Die zwei Regeln, an denen alles hängt

Regel 1 — Fläche ODER Icon in der Markenfarbe, niemals beides.
Trägt der Hintergrund die Markenfarbe, ist das Icon weiß. Trägt das Icon sie, ist der Hintergrund transparent. Wer beides färbt, erzeugt einen einfarbigen Klotz: In v1.5.2 war das Drei-Punkte-Menü der Dispatch-Tabelle ein volles rotes Quadrat — die Punkte waren da, nur rot auf rot.

Regel 2 — custom nie hart färben.
In Filament ist custom kein Synonym für „primary", sondern der generische Platzhalter für jede Farbvariante; die echte Farbe kommt als Inline-Variable (--c-50 … --c-950) am Element an. Immer rgb(var(--c-600, var(--LXRed))) schreiben. Wer hart färbt, macht grüne „Accepted"-Badges rot — der Altfehler aus v1.1.0, behoben erst in v1.5.4.

Spezifität schlägt Reihenfolge. Unser Stylesheet wird als Inline-<style>-Block ausgeliefert, nicht als <link> — seine Position gegenüber Filament ist nicht garantiert. .fi-dropdown-trigger .fi-icon-btn (0,2,0) hat den Zweikampf verloren, erst button.fi-icon-btn.fi-ac-icon-btn-group (0,2,1) hat gewonnen. Nie auf die Reihenfolge verlassen — über Spezifität gewinnen.

Selektoren-Glossar

KlasseBedeutungFärben?
.fi-btnechter Button mit Fläche (Label, optional Icon)ja — Fläche plus weißer Inhalt
.fi-icon-btnreiner Icon-Button ohne Fläche, 36 × 36 pxnur color, nie background
.fi-color-primaryFarbvariante „primary"nur zusammen mit :not(.fi-icon-btn)
.fi-color-customgenerischer Farbträger, echte Farbe steht in --c-*nein — Variable lesen
.fi-ac-icon-btn-actionprimäre Zeilenaktion in einer Tabelle (der Papierflieger)ja — Markenfarbe, auf Dunkel der Dark-Tint
.fi-ac-icon-btn-groupDrei-Punkte-/Kebab-Trigger einer Aktionsgruppeneutral (Anthrazit / Mist), Marke nur als 8-%-Hover-Tint
.dispatch-* · .map-loader-* · .stepeigene Bundles der Buchungsstrecke (Svelte, Dispatch-Bundle)ja — aber einzeln; die Rampen greifen hier nicht

Logo-Slots

Vier Slots, 1800 × 400 px PNG mit Transparenz (SVG wird abgelehnt). Slot 0/1 und 2/3 sind getrennte Uploads — wer nur Phoenix ändert, hat in E-Mails und Orwell weiterhin das alte Logo. Das ist hier der häufigste Fehler.

SlotErscheint inVariante
0Phoenix (hell)rote Wortmarke, Kreuz weiß gefüllt
1Phoenix (dunkel)weiße Wortmarke
2Select-VA-Seite, Pegasus (hell), E-Mails, Orwellrote Wortmarke, Kreuz weiß gefüllt
3Select-VA-Seite, Pegasus (dunkel), Orwell (dunkel)weiße Wortmarke
BGLogin-/Register-Hintergrund1706 × 1600 px, WebP; mehrere möglich, zufällige Auswahl
Das weiße Kreuz ist keine Variante, sondern eine Reparatur. Im SVG ist das Kreuz eine Aussparung; im Brandbook liegt Weiß dahinter, in der Phoenix-Topbar nicht. Ohne Füllung „fällt das Kreuz zu". In den Bright-Slots wird die Aussparung deshalb im PNG aktiv weiß gefüllt — nur die Aussparung, nie das ganze Bild, und nie durch Invertieren des Logos. Kontrolle: Weiß darf nur bei x 132–274, y 129–270 liegen.

Typografie — der Stack, nie die Dateien

Die Lufthansa-Familien bleiben im Font-Stack, die Fontdateien bleiben aus vAMSYS heraus. Das Rechtskapitel verbietet die Weitergabe, und ein Upload auf ein CDN ist eine Weitergabe. Wer die Schriften lokal hat, sieht sie; alle anderen den Fallback — genau dafür ist der Stack da. Kein @font-face im vAMSYS-Stylesheet.

:root {
  --lx-font-head: "LHV Head", "Lufthansa Head", "Segoe UI", Arial, sans-serif;
  --lx-font-text: "LHV Text", "Lufthansa Text", "Segoe UI", Arial, sans-serif;
}

Die Berge, drei Anker

Die Bergsilhouette aus Kapitel 05 gibt es auch in vAMSYS — als zwei geschichtete Polygonzüge in einer inline-SVG-Data-URL in einem ::after, ganz ohne Bild-Upload. Genau drei Stellen, alle in Phoenix verifiziert.

AnkerWoHöheDeckkraft
.map-loader-modal::afterKarten-Ladekarte („Getting the Map Ready")92 pxdunkel 5,5 / 3,5 % · hell 7 / 6 %
.fi-ta-empty-state::afterleere Tabellen-Zustände60 %wie oben
.page-content:has(.swiper)::afterPhoenix-Startseite22vh, position: fixeddunkel 5,5 / 3,5 % · hell 4,5 / 3,5 %

Drei Details, die Zeit gekostet haben: Die Startseite hat keine eigene Body-Klasse:has(.swiper) trifft sie über das Event-Karussell, das nur dort vorkommt. z-index: -1, nicht 0, sonst legt sich das Motiv über die Tabellen; innerhalb einer Karte z-index: 0 plus .anker > * { position: relative; z-index: 1 }. Und im Hellmodus ist der Berg entsättigt — ein roter Berg wirkt dort als rosa Schleier. pointer-events: none ist Pflicht.

Maximal diese drei Stellen. Ein Detail, das man überall sieht, ist kein Detail mehr. Dasselbe gilt für die Scrollbar: Sie leuchtete bis v1.5.1 durchgehend rot — allein das sprengte die 10-Prozent-Regel. Jetzt ist sie neutral und wird erst im Hover rot.

Nicht wieder einführen

button.fi-color-primary ohne :not(.fi-icon-btn) — Ursache des roten Klotzes. · .text-custom-* / .ring-custom-* / .bg-custom-* global auf Rot — zerstört die Statussemantik. · --success-*, --warning-*, --danger-* umfärben. · Ein roter Fokusring — Electric Blue #0968F6 bleibt, sonst ist der Fokus auf roten Buttons unsichtbar. · Den prefers-reduced-motion-Block entfernen. · Fontdateien. · Das Logo invertieren. · Nicht-ASCII in neuen CSS-Kommentaren — die Upload-Kette hat historisch Mojibake erzeugt (fünf mehrfach kodierte Gedankenstriche in v1.5.4 sind der Beleg).

Bekannte Grenzen

Wartung

Ein CSS-File je VA; ein neuer Upload ersetzt das alte. Die Datei liegt unter https://cdn.vamsys.xyz/stylesheets/<ULID>.css, und der ULID wechselt bei jedem Speichern. Die alte Datei bleibt erreichbar — das, und nur das, ist der Weg zurück. Einen Undo-Knopf gibt es nicht: Ein Revert ist immer ein erneuter Upload.

  1. Das Live-CSS vom CDN holen — diese Datei ist die einzige Wahrheit, nie blind eine lokale.
  2. Patchen, den Versionsmarker im Kopfkommentar hochzählen, neue Kommentare ASCII-only halten.
  3. Style Settings öffnen und prüfen, dass im Kopf „LX VIRTUAL" steht — das Formular sieht für jede VA gleich aus.
  4. Das FilePond-Feld hydrieren (Maus darüber bewegen und warten). Ohne Hydration erscheint der native „Datei auswählen"-Fallback — in diesem Zustand nicht speichern.
  5. Speichern, den neuen ULID notieren, eine lokale Kopie als lx-virtual-vX.Y.Z.css ablegen.
  6. In Hell und Dunkel prüfen: Dashboard, Buchungskarte, Dispatch-Seite, Buchungsdetail, PIREPs, Leaderboard, Profil. Dropdowns wirklich öffnen, und Paginierung, Filter-Chips und Spalten-Umschalter kontrollieren — dort sitzen die unauffälligen Icon-Buttons.
Prüfen heißt ansehen. getComputedStyle liefert für Properties, die unser Stylesheet überschreibt, teils den Vendor-Wert zurück — selbst bei inline !important: Die ACARS-Download-Buttons rendern anthrazit, das Skript meldete Blau. Und direkt nach dem Injizieren eines <style> ist der Wert einen Frame veraltet. Screenshots sind die Wahrheit. Skript-Audits taugen dazu, zu finden, welche Fremdfarben und Klassennamen existieren — nicht dazu, zu bestätigen, dass etwas richtig aussieht.

Stand

LX Virtual, vAMSYS-Identifier SWR2594. Stylesheet v1.5.4, ULID 01KYMNN5CYMAFCJJZGDQ2CK78D (live seit 28.07.2026). Lokale Kopien und die vollständige technische Aufzeichnung — Befunde, Ursachen, Fixes, der wiederverwendbare markenunabhängige Leitfaden — liegen neben dem Stylesheet im LX-Arbeitsordner.

11 Rechtliches

Respektvoller Abstand zum Original.

LX Virtual ist ein non-kommerzielles Fan- und Community-Projekt und steht in keiner Verbindung zu realen Fluggesellschaften oder Airline-Gruppen; es wird von diesen weder unterstützt noch autorisiert.

© 2026 LX-Virtual.com · Brandbook v1.4 · Fragen an das PR-Team im Discord.