Eine Marke, die alles im Blick behält.

Verteilungsregel 70 / 22 / 8

Rund 70 % Bone-Grund, 22 % Graphit, 8 % Amber. Wer mehr Amber braucht, hat meistens zu viele Hauptaktionen.

• 70 % Bone (--paper)
• 22 % Graphit (--ink)
• 8 % Hochspannungs-Amber (--volt)

• Aa

  Graphit

  --ink

  #15171C

  Primärtext, Buttons, Footer

  auf Bone

  16,3:1 AAA

• Aa

  Graphit hell

  --ink-2

  #23262F

  Tiefenflächen, Karten auf Dunkel

  auf Bone

  13,7:1 AAA

  auf Graphit

  1,1:1 unter AA

• Aa

  Graphit-Linie

  --ink-3

  #3A3F4B

  Lead-Text, Linien auf Dunkel

  auf Bone

  9,5:1 AAA

  auf Graphit

  1,7:1 unter AA

• Aa

  Bone

  --paper

  #F6F4EF

  Seitengrund

  auf Graphit

  16,3:1 AAA

• Aa

  Bone hell

  --paper-2

  #FFFEFB

  Karten, Eingabefelder

  auf Bone

  1,0:1 unter AA

  auf Graphit

  17,7:1 AAA

• Aa

  Hairline

  --line

  #E4DFD5

  Trennlinien, dekorativ

  auf Bone

  1,2:1 unter AA

  auf Graphit

  13,5:1 AAA

  Dekorativ: keine freigegebene Text- oder UI-Paarung.

• Aa

  Hairline kräftig

  --line-2

  #D6D0C4

  Konturen von Eingaben und Buttons

  auf Bone

  1,3:1 unter AA

  auf Graphit

  11,6:1 AAA

  Dekorativ: keine freigegebene Text- oder UI-Paarung.

• Aa

  Hochspannungs-Amber

  --volt

  #F2A516

  Primärakzent: die eine Hauptaktion, Status, Output

  auf Bone

  1,8:1 unter AA

  auf Graphit

  8,6:1 AAA

• Aa

  Amber dunkel

  --volt-d

  #8A5708

  Amber für Kleintext, WCAG AA

  auf Bone

  5,5:1 AA

  auf Graphit

  2,9:1 unter AA

• Aa

  Amber tief

  --volt-deep

  #7A4D05

  Hover und Tiefe

  auf Bone

  6,6:1 AA

  auf Graphit

  2,4:1 unter AA

• Aa

  Kupfer

  --copper

  #C2410C

  Warme Sekundärnote, abgelaufen

  auf Bone

  4,7:1 AA

  auf Graphit

  3,4:1 AA groß

• Aa

  Amber-Glow

  --glow

  rgba(242,165,22,.30)

  Transparenter Schein hinter der Hauptaktion und am Fokusring

  Transparent: kein Kontrastanspruch.

• Aa

  Warmgrau

  --muted

  #6B6358

  Gedämpfter Text, Hilfetexte

  auf Bone

  5,3:1 AA

  auf Graphit

  3,0:1 AA groß

• Aa

  Erfolg

  --ok

  #3F7D4E

  Erfolg, Compliance OK

  auf Bone

  4,4:1 AA groß

  auf Graphit

  3,6:1 AA groß

Kontrastregeln in Kürze

• Amber (--volt) ist Fläche oder Zeichen, als Text nur auf Graphit. Auf Bone ist es für Text zu hell.
• Kleintext in Amber-Ton auf Bone nutzt --volt-d oder --volt-deep.
• Erfolgsgrün (--ok) erreicht auf Bone knapp nicht 4,5:1: als Text auf Bone hell (--paper-2), auf Bone nur groß oder als Zeichen.
• Hairlines (--line, --line-2) sind dekorativ und tragen keine Information.

Freigegebene Kontrastpaare

Nur Paarungen, die rechnerisch bestehen. Fließtext braucht mindestens 4,5:1 (AA), große Schrift und Bedienelemente mindestens 3:1. Das Verhältnis wird auf eine Stelle abgeschnitten, nie aufgerundet.

Schriftfamilien

Skala und Rollen

Die Tabelle nennt die echten Werte aus ci.css; die Proben daneben sind auf 60 px begrenzt.

Radien

Karten und Panels nutzen --radius-md (14 px, wie bisher --radius), Pillen --radius-pill. Eingabefelder behalten ihre 11 px; die Schaltflächen der bisherigen Werbeseite sind eckig, die Werbeseite D ist gerundet (Formsprache D, unten).

• --radius

  14px

  Karten-Radius (bisher, = radius-md)

  border-radius: var(--radius);

• --radius-pill

  999px

  Pillen, Chips, Badges

  border-radius: var(--radius-pill);

• --radius-sm

  8px

  Kleine Elemente: Tags, Code-Chips

  border-radius: var(--radius-sm);

• --radius-md

  14px

  Karten, Panels, Tabellen

  border-radius: var(--radius-md);

• --radius-lg

  22px

  Große Flächen: Hero-Karten, Dialoge

  border-radius: var(--radius-lg);

Schatten

Graphit-getönt, weit gestreut und nach innen aufgespreizt: Schatten heben an, sie dramatisieren nicht. Der Glow gehört nur zur Hauptaktion.

• --shadow-sm

  0 4px 14px -8px rgba(21,23,28,.35)

  Dezente Anhebung: Chips, Tabellenzeilen

  box-shadow: var(--shadow-sm);

• --shadow-md

  0 12px 28px -12px rgba(21,23,28,.55)

  Karten im Hover, Auswahllisten

  box-shadow: var(--shadow-md);

• --shadow-lg

  0 24px 48px -20px rgba(21,23,28,.6)

  Dialoge und Overlays

  box-shadow: var(--shadow-lg);

• --shadow-glow

  0 8px 24px -8px var(--glow)

  Amber-Schein hinter der Hauptaktion

  box-shadow: var(--shadow-glow);

Verläufe

Verläufe entstehen ausschließlich aus bestehenden Farb-Tokens. Der Signal-Verlauf (Amber zu Kupfer) nur sparsam, nie hinter Fließtext.

• --grad-signal

  linear-gradient(135deg,var(--volt),var(--copper))

  Signal: Amber zu Kupfer, sparsam für Hero-Akzente

  background: var(--grad-signal);

• --grad-dunkel

  linear-gradient(160deg,var(--ink-2),var(--ink))

  Dunkle Flächen: Graphit-Verlauf

  background: var(--grad-dunkel);

Abstände

Ein 4-px-Raster mit acht Stufen. Innenabstände und Lücken kommen aus dieser Reihe, keine Zwischenwerte.

• --space-1

  4px

  Eng: Icon zu Text

  padding: var(--space-1);

• --space-2

  8px

  Kompakt: Chips, Zeilen

  padding: var(--space-2);

• --space-3

  12px

  Innenabstand kleiner Elemente

  padding: var(--space-3);

• --space-4

  16px

  Standard: kleiner Karten-Innenabstand

  padding: var(--space-4);

• --space-5

  24px

  Gruppen und Formularfelder

  padding: var(--space-5);

• --space-6

  32px

  Karten-Innenabstand, Blockabstand

  padding: var(--space-6);

• --space-7

  48px

  Abschnittsabstand klein

  padding: var(--space-7);

• --space-8

  64px

  Abschnittsabstand groß

  padding: var(--space-8);

Formsprache D

Die Werbeseite D ist gerundet (Plan 3.5): Die eckigen Flächen der bisherigen Werbeseite entfallen. Die Hauptrollen nutzen die Radius-Tokens unten. Feste Werte stehen noch an kleinen Bedienelementen (Symbol-, Menü- und kleine Knöpfe, Sprunglink: 12 px), an Reitern (22 und 26 px), am Handy-Geräterahmen (40 und 28 px) und an Kennungen (8 px); --radius-sm nutzt die Werbeseite D noch nicht. Die Ebenen E0 bis E3 zeigt der Abschnitt System D.

Hauptlogo

Vier Varianten: quer und hoch, jeweils für hellen und für dunklen Grund. Auf hellem Grund stehen Zeichen und Wortmarke in Graphit, auf dunklem in Bone und Papier; das Auge ist immer Amber. Die Dateien sind auf die Grafik zugeschnitten, der Schutzraum kommt beim Platzieren dazu.

Bildzeichen und Wortmarke einzeln

Das Bildzeichen allein für Avatar, Ladeanzeige oder Wasserzeichen, die Wortmarke allein in Fließtext-Nähe oder bei sehr breiten Formaten. Für Stempel, Fax, Gravur und Folie gibt es alle Formen einfarbig in Schwarz und Weiß (im Brand-Kit).

Konstruktion und Schutzraum

Der Schutzraum leitet sich von H ab, der Höhe des Bildzeichens (beim Querlogo die Logohöhe). Rund um das Logo bleibt mindestens 0,5 × H frei: kein Text, keine Kante, kein anderes Logo.

• Schutzraum: ringsum mindestens 0,5 × H.
• Logo quer: Versalhöhe der Wortmarke 0,4 × Modul, Abstand Zeichen–Wortmarke 0,26 × Modul; die Wortmarke sitzt auf der optischen Mitte des Zeichens.
• Wortmarke: Archivo 84 % Breite, „Eagle“ kräftig (800), „Desk“ leichter (500), Laufweite +0,01 em, in Pfaden – nie neu setzen.
• Logo hoch: Zeichen 1,3-fach, Versalhöhe 0,29 × Modul × 1,3, Abstand 0,18 × Modul × 1,3, zentriert.

Mindestgrößen

Darunter verliert das Logo seine Form. Wird der Platz kleiner, steht nur das Bildzeichen, nie eine geschrumpfte Wortmarke; unter 24 px die Kleinfassung (Favicon, ab 16 px). Der Mail-Kopf ist mindestens 20 px hoch. Die Beispiele sind in echter Größe gezeigt.

• 

  Logo quer
  Breite 100 px · Druck 25 mm

• 

  Logo hoch
  Breite 64 px · Druck 18 mm

• 

  Bildzeichen
  Kantenlänge 24 px · Druck 6 mm

• 

  Wortmarke
  Breite 80 px · Druck 20 mm

Niemals

Sechs typische Fehlanwendungen, mit den echten Logodateien nachgestellt. Jede ist als Fehler beschriftet und gehört nicht in den Einsatz. Außerdem: Leitungen nicht ergänzen oder umordnen, die Lampe nicht verschieben oder blinken lassen, den Namen nie mit Leerzeichen oder in Versalien im Fließtext schreiben.

Filament-Sidebar

Oben links in der Seitenleiste steht das Querlogo in der Variante des Farbmodus: hell mit „Logo quer, hell“, dunkel mit „Logo quer, dunkel“.

• Dashboard
• Personal
• Einsätze
• Stunden
• Rechnungen

• Dashboard
• Personal
• Einsätze
• Stunden
• Rechnungen

Favicon im Browser-Tab

Im Tab steht nur das Zeichen in der Kleinfassung, nie die Wortmarke. Es bleibt bei 16 px erkennbar: Das SVG passt sich hellem und dunklem Tab an, ICO und PNG stehen in der Graphit-Kachel.

EagleDesk Neuer Tab

Social-Avatar

Das App-Icon zeigt die Kleinfassung des Zeichens hell auf der Graphit-Kachel mit Amber-Auge: Es bleibt in jedem Zuschnitt lesbar, ob rund, abgerundet oder quadratisch.

EagleDeskSoftware für Arbeitskräfteüberlassung

PDF-Briefkopf des Betreibers

Links oben das Querlogo, darunter die Absenderzeile, unten die Pflichtangaben. Alle Texte sind Platzhalter, es steht keine Firma und keine Nummer darauf. Beim Mandanten erscheint stattdessen das Mandantenlogo.

[Firmenname] · [Straße Nr.] · [PLZ Ort]

[Empfänger] / [Anschrift]

[Firmenbuch] · [UID] · [Bank]

Betreiber

[Mandantenlogo]

[Firmenname] · [Straße Nr.] · [PLZ Ort]

[Empfänger] / [Anschrift]

[Firmenbuch] · [UID] · [Bank]

powered by EagleDesk

Mandant

Portal-Header

Der Kopf gehört dem Mandanten: Mandantenlogo oder App-Name. Das EagleDesk-Logo steht dort nicht, höchstens ein dezentes „powered by“ am Seitenende. Modell in 375 px Breite.

Plattform-Mail-Kopf

Plattform-Mails, zum Beispiel zur Testphase, tragen oben den Mail-Kopf der Marke auf Graphit. Mails des Mandanten zeigen dessen Logo, das EagleDesk-Logo nur dezent als „powered by“.

[Betreff der Mail]

Plattform-Mail

[Mandantenlogo]

[Betreff der Mail]

powered by EagleDesk

Mandanten-Mail

Bildzeichen

Downloads: Bildzeichen

Vorschau	Motiv und Verwendung	SVG	PNG
	Bildzeichen, hell Bildzeichen für hellen Grund: Leitungen Graphit, Auge Amber. Avatar, Ladeanzeige, Wasserzeichen.	SVG Vektor · 823 B URL kopieren	PNG 512 × 512 px · 11,2 KB URL kopieren
	Bildzeichen, dunkel Bildzeichen für dunklen Grund: Leitungen Bone, Auge Amber.	SVG Vektor · 832 B URL kopieren	PNG 512 × 512 px · 11,1 KB URL kopieren
	Bildzeichen, schwarz Einfarbig Schwarz: Stempel, Fax, Gravur, Folie.	SVG Vektor · 841 B URL kopieren	PNG 512 × 512 px · 8,3 KB URL kopieren
	Bildzeichen, weiß Einfarbig Weiß: auf dunklen und farbigen Flächen mit ausreichendem Kontrast.	SVG Vektor · 831 B URL kopieren	PNG 512 × 512 px · 9,1 KB URL kopieren

Wortmarke

Downloads: Wortmarke

Vorschau	Motiv und Verwendung	SVG	PNG
	Wortmarke, hell Nur der Schriftzug für hellen Grund, in Graphit.	SVG Vektor · 5,5 KB URL kopieren	PNG 931 × 192 px · 23,2 KB URL kopieren
	Wortmarke, dunkel Nur der Schriftzug für dunklen Grund, in Papier.	SVG Vektor · 5,5 KB URL kopieren	PNG 931 × 192 px · 20,1 KB URL kopieren
	Wortmarke, schwarz Schriftzug einfarbig Schwarz: Stempel, Fax, Gravur.	SVG Vektor · 5,5 KB URL kopieren	PNG 931 × 192 px · 15,6 KB URL kopieren
	Wortmarke, weiß Schriftzug einfarbig Weiß: auf dunklen und farbigen Flächen.	SVG Vektor · 5,5 KB URL kopieren	PNG 931 × 192 px · 17,6 KB URL kopieren

Logo quer und hoch

Downloads: Logo quer und hoch

Vorschau	Motiv und Verwendung	SVG	PNG
	Logo quer, hell Standard für hellen Grund: Kopfzeilen, Werbeseite, Briefkopf, Präsentationen.	SVG Vektor · 6,1 KB URL kopieren	PNG 1349 × 256 px · 31,8 KB URL kopieren
	Logo quer, dunkel Standard für dunklen Grund: Footer, dunkle Folien, Videos.	SVG Vektor · 6,1 KB URL kopieren	PNG 1349 × 256 px · 28,5 KB URL kopieren
	Logo quer, schwarz Quer einfarbig Schwarz: Stempel, Fax, Gravur, Folie.	SVG Vektor · 6,1 KB URL kopieren	PNG 1349 × 256 px · 21,5 KB URL kopieren
	Logo quer, weiß Quer einfarbig Weiß: auf dunklen und farbigen Flächen.	SVG Vektor · 6,1 KB URL kopieren	PNG 1349 × 256 px · 24,3 KB URL kopieren
	Logo hoch, hell Hoch für hellen Grund: quadratische oder hohe Flächen, Titelseiten, Messewand.	SVG Vektor · 6,1 KB URL kopieren	PNG 960 × 640 px · 36,0 KB URL kopieren
	Logo hoch, dunkel Hoch für dunklen Grund: Titelfolien, Aufsteller.	SVG Vektor · 6,1 KB URL kopieren	PNG 960 × 640 px · 32,6 KB URL kopieren
	Logo hoch, schwarz Hoch einfarbig Schwarz: Stempel, Fax, Gravur, Folie.	SVG Vektor · 6,1 KB URL kopieren	PNG 960 × 640 px · 25,3 KB URL kopieren
	Logo hoch, weiß Hoch einfarbig Weiß: auf dunklen und farbigen Flächen.	SVG Vektor · 6,1 KB URL kopieren	PNG 960 × 640 px · 28,0 KB URL kopieren

Favicon und App-Icon

Downloads: Favicon und App-Icon

Vorschau	Motiv und Verwendung	SVG	PNG
	Favicon Browser-Tab und Lesezeichen: die Kleinfassung des Zeichens in der Graphit-Kachel (16 bis 48 px). Auf der Website passt sich das SVG-Favicon hellem und dunklem Tab an.	SVG Vektor · 888 B URL kopieren	PNG 48 × 48 px · 1,4 KB URL kopieren
	App-Icon App-Icon und Profilbild: die Kleinfassung auf der Graphit-Kachel mit Amber-Auge, die Ecken rundet das System selbst.	SVG Vektor · 1,4 KB URL kopieren	PNG 1024 × 1024 px · 77,9 KB URL kopieren

Vorschaubild

Downloads: Vorschaubild

Vorschau	Motiv und Verwendung	SVG	PNG
	Vorschaubild, dunkel Link-Vorschau (Open Graph, LinkedIn, X, Messenger), Standard für dunklen Grund, Seitenverhältnis 1,91:1.	SVG Vektor · 7,8 KB URL kopieren	PNG 1200 × 630 px · 93,5 KB URL kopieren
	Vorschaubild, hell Link-Vorschau für helle Umgebungen, Seitenverhältnis 1,91:1.	SVG Vektor · 7,7 KB URL kopieren	PNG 1200 × 630 px · 104,8 KB URL kopieren

Mail-Kopf

Downloads: Mail-Kopf

Vorschau	Motiv und Verwendung	SVG	PNG
	Mail-Kopf, hell Kleines Querlogo für Mail-Kopf und Signatur auf hellem Grund, ab 20 px Höhe (Mail-Programme zeigen kein SVG: PNG verwenden).	SVG Vektor · 5,9 KB URL kopieren	PNG 256 × 56 px · 5,9 KB URL kopieren
	Mail-Kopf, dunkel Kleines Querlogo für Mail-Kopf auf dunklem Grund, ab 20 px Höhe; so steht es in den Plattform-Mails.	SVG Vektor · 5,9 KB URL kopieren	PNG 256 × 56 px · 5,1 KB URL kopieren

Meta-Snippet

Zum Einfügen in den Kopfbereich einer Seite, die das Vorschaubild zeigen soll. Die URLs sind absolut und tragen den Versionsparameter, Titel und Beschreibung setzt die jeweilige Seite selbst.

<meta property="og:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Logo von EagleDesk: Adlerkopf-Zeichen und Schriftzug.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta name="twitter:image:alt" content="Logo von EagleDesk: Adlerkopf-Zeichen und Schriftzug.">

<meta property="og:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The EagleDesk logo: eagle-head mark and wordmark.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://eagledesk.at/brand/og/og-dunkel.png?v=1792121061">
<meta name="twitter:image:alt" content="The EagleDesk logo: eagle-head mark and wordmark.">

Buttons

Die Schaltflächen der Werbeseite: 52 px hoch (M 46 px, S 40 px), eckig, Archivo in Versalien. Amber (.btn-volt) gehört nur der einen Hauptaktion. Alle anderen Aktionen stehen ruhiger daneben: Position und Beschriftung ordnen sie, nicht die Farbe.

<div class="ci-reihe">
    <button type="button" class="btn btn-volt">Einsatz anlegen</button>
    <button type="button" class="btn btn-primary">Anmelden</button>
    <button type="button" class="btn btn-ghost">Mehr erfahren</button>
</div>

<div class="ci-reihe">
    <button type="button" class="btn btn-danger">Endgültig löschen</button>
</div>

<div class="ci-reihe">
    <button type="button" class="btn btn-volt" disabled>Speichern</button>
    <button type="button" class="btn btn-ghost" aria-disabled="true" aria-describedby="btn-grund">Freigeben</button>
</div>
<p class="feld-hilfe" id="btn-grund">Freigeben ist erst möglich, wenn alle Stunden bestätigt sind.</p>

<div class="ci-reihe">
    <button type="button" class="btn btn-volt"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>Einsatz anlegen</button>
    <button type="button" class="btn btn-ghost">Mehr erfahren<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg></button>
    <button type="button" class="btn btn-ghost btn-icon" aria-label="Löschen"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg></button>
</div>

<div class="ci-reihe">
    <button type="button" class="btn btn-volt btn-s">Klein</button>
    <button type="button" class="btn btn-volt btn-m">Mittel</button>
    <button type="button" class="btn btn-volt">Standard</button>
</div>

Pillen

Pillen nennen einen Zustand in einer Zeile: Testphase, Lesemodus, Projektstatus. Rund (--radius-pill), AK Mono, mit einem Zeichen vor dem Text: Ring = Test, Quadrat = Lesemodus, schraffiert = in Entwicklung, halb gefüllt = Beta, Raute = Neu. Die Form trägt die Bedeutung, die Farbe unterstützt nur.

<div class="ci-reihe">
    <span class="pille pille-test">Test · 14 Tage</span>
    <span class="pille pille-lesen">Lesemodus</span>
    <span class="pille pille-dev">In Entwicklung · Betaphase geplant Q4 2026</span>
    <span class="pille pille-beta">Beta</span>
    <span class="pille pille-neu">Neu</span>
</div>

• Eine Pille nennt genau einen Zustand und steht neben dem, was sie beschreibt.
• Immer Text, nie nur ein farbiger Punkt: Das Zeichen vor dem Text ist Zusatz.
• Der Projektstatus nennt den Zeitplan ehrlich („Betaphase geplant Q4 2026“) und verspricht keine einzelnen Funktionen.
• Die Amber-Füllung (Neu) höchstens einmal je Ansicht.

Status-Badges

Badges sind die kompakte Form für Listen und Tabellen: Punkt plus Text. Grau ist neutral. Die Kennungen sind die Werte im Produkt: der Lizenzstatus eines Mandanten und die Stufe einer Ankündigung.

<div class="ci-reihe">
        <span class="badge b-volt">Test</span>
        <span class="badge b-ok">Aktiv</span>
        <span class="badge b-grau">Gekündigt</span>
        <span class="badge b-ink">Lesemodus</span>
</div>

<div class="ci-reihe">
        <span class="badge b-grau">Info</span>
        <span class="badge b-volt">Neu</span>
        <span class="badge b-ink">Wartung</span>
        <span class="badge b-copper">Dringend</span>
</div>

Banner

Dieselben Klassen und Werte wie im Panel (akw-lizenz-banner, akw-ankuendigung): Testphase = Amber hell, Lesemodus und Wartung = Graphit, Kündigung und Dringend = Rot hell. Jeder Banner nennt den Zustand in Text und, wo es einen gibt, den nächsten Schritt.

<div class="ci-banner-stapel">
    <div class="akw-lizenz-banner akw-lizenz-banner--test" role="status" aria-live="polite">
        <span class="akw-lizenz-banner-text">Testphase Premium All In: noch 14 Tage (bis TT.MM.)</span>
    </div>
    <div class="akw-lizenz-banner akw-lizenz-banner--nur_lesen" role="status" aria-live="polite">
        <span class="akw-lizenz-banner-text">Lesemodus seit 09.10.2026 – Ihre Daten bleiben erhalten</span>
        <span class="akw-lizenz-banner-links">
            <a class="akw-lizenz-banner-link" href="#">Paket wählen</a>
            <a class="akw-lizenz-banner-link" href="#">Daten exportieren</a>
        </span>
    </div>
    <div class="akw-lizenz-banner akw-lizenz-banner--gekuendigt" role="status" aria-live="polite">
        <span class="akw-lizenz-banner-text">Vertrag gekündigt zum 31.12.2026 – danach Lesemodus, Ihre Daten bleiben erhalten</span>
    </div>
</div>

<div class="akw-ankuendigungen">
    <div class="akw-ankuendigung akw-ankuendigung--neu" role="status">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Neu: Fristen-Dashboard</strong>
            <div class="akw-ankuendigung-text"><p>Alle Fristen eines Mandanten in einer Ansicht, mit Ampel.</p></div>
        </div>
        <button type="button" class="akw-ankuendigung-schliessen" aria-label="Ausblenden">&times;</button>
    </div>
    <div class="akw-ankuendigung akw-ankuendigung--wartung" role="status">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Wartung am Sonntag</strong>
            <div class="akw-ankuendigung-text"><p>Von 02:00 bis 03:00 Uhr ist das System kurz nicht erreichbar.</p></div>
        </div>
        <button type="button" class="akw-ankuendigung-schliessen" aria-label="Ausblenden">&times;</button>
    </div>
    <div class="akw-ankuendigung akw-ankuendigung--dringend" role="alert">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Störung</strong>
            <div class="akw-ankuendigung-text"><p>Der Zeiterfassungs-Import ist gestört. Wir arbeiten an der Behebung.</p></div>
        </div>
    </div>
    <div class="akw-ankuendigung" role="status">
        <div class="akw-ankuendigung-inhalt">
            <strong class="akw-ankuendigung-titel">Hinweis</strong>
            <div class="akw-ankuendigung-text"><p>Das Handbuch enthält jetzt das Kapitel Monatsabschluss.</p></div>
        </div>
    </div>
</div>

Karten, Tabellen, Leerzustände, Toasts

Karten gruppieren, Tabellen vergleichen, Leerzustände führen zur nächsten Aktion, Toasts melden das Ergebnis. Die Beispieldaten sind Platzhalter.

<div class="ccard">
    <div class="ic"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg></div>
    <h5>Fristen-Engine</h5>
    <p>Sieben Quellen, eine Ampel. Erinnerung, Warnung, Abgelaufen: automatisch, mandantengetrennt.</p>
</div>

<div class="leer">
    <div class="ic"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/></svg></div>
    <h5>Noch keine Einsätze</h5>
    <p>Legen Sie den ersten Einsatz an. Er erscheint danach in der Disposition und in der Stundenerfassung.</p>
    <button type="button" class="btn btn-volt btn-m"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>Einsatz anlegen</button>
</div>

<div class="tabelle-wrap" role="region" tabindex="0" aria-label="Beispieltabelle, horizontal scrollbar">
    <table class="tabelle">
        <caption>Einsätze mit Stunden und Status</caption>
        <thead>
            <tr>
                <th scope="col">Nr.</th>
                <th scope="col">Kunde</th>
                <th scope="col" class="num">Stunden</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">E-0001</th>
                <td>Musterbau GmbH</td>
                <td class="num">38,5</td>
                <td><span class="badge b-ok">freigegeben</span></td>
            </tr>
            <tr>
                <th scope="row">E-0002</th>
                <td>Beispiel Logistik AG</td>
                <td class="num">40,0</td>
                <td><span class="badge b-volt">läuft bald ab</span></td>
            </tr>
            <tr>
                <th scope="row">E-0003</th>
                <td>Demo Metall e. U.</td>
                <td class="num">12,0</td>
                <td><span class="badge b-copper">abgelaufen</span></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="ci-toast-stapel">
    <div class="toast toast-ok" role="status">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>                <span>Einsatz gespeichert</span>
    </div>
    <div class="toast" role="status">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>                <span>Der Export wird vorbereitet. Sie erhalten eine Nachricht.</span>
    </div>
    <div class="toast toast-fehler" role="alert">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>                <span>Speichern nicht möglich: Das Enddatum liegt vor dem Beginn.</span>
    </div>
</div>

Muster der Werbeseite

Aus site-2026.css: Statusleiste, Status- und Paket-Badges und Raster der bisherigen Werbeseite (Design-Schalter „alt“). Die Muster der Werbeseite D stehen im Block darunter.

<div class="statusbar">
    <div class="sb-in">
        <span class="sb-led" aria-hidden="true"></span>
        <p class="sb-text"><strong>In Entwicklung</strong><span class="sb-sep"> · </span>Betaphase geplant Q4 2026</p>
        <span class="sb-link"><span class="sb-long">Zur Roadmap</span><span class="sb-short">Roadmap</span><span aria-hidden="true">→</span></span>
    </div>
</div>

<div class="ci-reihe">
    <span class="st-badge b-live">Bereits verfügbar</span>
    <span class="st-badge b-dev">In Entwicklung</span>
    <span class="tier tier-premium">Premium</span>
    <span class="tier tier-premium_plus">PremiumPlus</span>
    <span class="tier tier-all_in">Premium All In</span>
</div>

<div class="gridmini grid-bg" aria-hidden="true"></div>

Muster der Werbeseite D

Bausteine der Werbeseite D „Lichtwerk“ (Ansichten public/v2027/*): Präfix .w-* für Start und Gemeinsames, .u-* für die Unterseiten; gezeichnet nur über Rollen-Tokens --d-*. Sichtbar für alle ab Design-Schalter „neu“ (heute: „neu“).

Felder, Hilfetext und Fehlermeldung

Jedes Feld hat ein sichtbares Label (for und id), einen Hilfetext per aria-describedby und, wenn nötig, eine Fehlermeldung in Text. Die Kontur der Eingabe ist --muted (1,5 px, deutlich über 3:1 zum Grund), nicht die Hairline --line-2.

<div class="feld">
    <label class="feld-label" for="bsp-feld-email">E-Mail-Adresse<span class="pflicht" aria-hidden="true">*</span></label>
    <input class="inp" type="email" id="bsp-feld-email" name="email" autocomplete="email" required aria-describedby="bsp-feld-email-hilfe">
    <p class="feld-hilfe" id="bsp-feld-email-hilfe">An diese Adresse senden wir den Bestätigungslink.</p>
</div>

<div class="feld">
    <label class="feld-label" for="bsp-fehler-email">E-Mail-Adresse<span class="pflicht" aria-hidden="true">*</span></label>
    <input class="inp" type="email" id="bsp-fehler-email" name="email" value="name@" autocomplete="email" required aria-invalid="true" aria-describedby="bsp-fehler-email-hilfe bsp-fehler-email-meldung">
    <p class="feld-hilfe" id="bsp-fehler-email-hilfe">An diese Adresse senden wir den Bestätigungslink.</p>
    <p class="feld-fehler" id="bsp-fehler-email-meldung"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>Bitte eine gültige E-Mail-Adresse angeben.</p>
</div>

* Pflichtfeld

• Das Label ist sichtbar und steht über dem Feld, nie nur als Platzhalter.
• Pflicht: Sternchen im Label (für Screenreader ausgeblendet) und das Attribut required. Die Legende „Pflichtfeld“ steht einmal je Formular.
• Fehler als Text mit Icon, nie nur als rote Kontur. Dynamisch eingeblendete Meldungen bekommen role=alert oder liegen in einer aria-live-Region.
• Die Meldung sagt, was zu tun ist („Bitte eine gültige E-Mail-Adresse angeben.“), nicht nur, was falsch war.
• Schrift im Feld mindestens 16 px (kein Hineinzoomen auf Mobilgeräten), Feldhöhe mindestens 44 px.

Fokusring

Der Fokus ist immer sichtbar: 2 px Kontur in --ci-fokus (hell Graphit, dunkel Bone) mit Abstand, dazu der Amber-Glow als Zusatz. Der Glow allein genügt nie, die Kontur wird nie abgeschaltet.

.inp:focus-visible {
    outline: 2px solid var(--ci-fokus);
    outline-offset: 2px;
    border-color: var(--volt);
    box-shadow: 0 0 0 4px var(--glow);
}

Einwilligung

Zustimmungen sind eigene Checkboxen: nie vorausgewählt, nie gebündelt, mit klarem Text. Pflicht (Testbedingungen) und freiwillig (Einrichtungstipps) stehen getrennt.

<label class="chk" for="bsp-einw-bedingungen">
    <input type="checkbox" id="bsp-einw-bedingungen" name="bedingungen" value="1" required>
    <span>Ich akzeptiere die Testbedingungen und habe die Datenschutzhinweise gelesen. (<a href="#">Datenschutzhinweise</a>)<span class="pflicht" aria-hidden="true">*</span></span>
</label>
<label class="chk" for="bsp-einw-tipps">
    <input type="checkbox" id="bsp-einw-tipps" name="tipps" value="1">
    <span>Ja, ich möchte während des Tests Einrichtungstipps per E-Mail erhalten (freiwillig, jederzeit widerrufbar).</span>
</label>

• Nie vorausgewählt: Das Attribut checked ist bei Einwilligungen tabu, die Zustimmung ist eine aktive Handlung.
• Freiwillige Einwilligungen stehen getrennt von Pflicht-Zustimmungen und sind als freiwillig und widerrufbar beschriftet.
• Die ganze Zeile ist klickbar (das Label umschließt das Feld), Mindesthöhe 44 px; das Kästchen selbst ist 24 px groß.
• Links in der Zeile sind unterstrichen und nennen ihr Ziel („Datenschutzhinweise“).

Honeypot

Ein verstecktes Feld fängt einfache Bots ab, ohne CAPTCHA. Menschen sehen es nicht, assistive Technologien überspringt es; wer es ausfüllt, wird still abgewiesen.

<div class="hp" aria-hidden="true">
    <label for="website">Website (bitte freilassen)</label>
    <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
</div>

• Visuell versteckt über die Klasse hp (außerhalb des Bildschirms), nicht mit display:none: Einfache Bots überspringen ausgeblendete Felder.
• aria-hidden="true" am Rahmen, tabindex="-1" und autocomplete="off" am Feld: Tastatur und Screenreader erreichen es nicht, Browser-Autofill meist auch nicht.
• Das Label bleibt verständlich („bitte freilassen“), falls das Feld doch einmal erreicht wird.
• Eine ausgefüllte Falle wird serverseitig verworfen, die Antwort ist dieselbe neutrale Seite wie bei Erfolg.

Beispiel: Testregistrierung

Das Zielmuster nach dem Registrierungsformular der Werbeseite, statisch und mit allen Bausteinen: Honeypot, Pflichtfelder, getrennte Einwilligungen und genau eine Hauptaktion.

<form class="ci-formular" method="post" action="#" novalidate aria-labelledby="bsp-reg-titel">
    <h5 class="ci-formular-titel" id="bsp-reg-titel">14 Tage kostenlos testen</h5>
    <!-- CSRF-Token und Formular-Zeitstempel (_ts) einfügen -->
    <div class="hp" aria-hidden="true">
        <label for="bsp-reg-website">Website (bitte freilassen)</label>
        <input type="text" id="bsp-reg-website" name="website" tabindex="-1" autocomplete="off">
    </div>
    <div class="feld">
        <label class="feld-label" for="bsp-reg-firma">Firma<span class="pflicht" aria-hidden="true">*</span></label>
        <input class="inp" type="text" id="bsp-reg-firma" name="firma" maxlength="150" autocomplete="organization" required>
    </div>
    <div class="ci-feld-reihe">
        <div class="feld">
            <label class="feld-label" for="bsp-reg-vorname">Vorname<span class="pflicht" aria-hidden="true">*</span></label>
            <input class="inp" type="text" id="bsp-reg-vorname" name="vorname" maxlength="80" autocomplete="given-name" required>
        </div>
        <div class="feld">
            <label class="feld-label" for="bsp-reg-nachname">Nachname<span class="pflicht" aria-hidden="true">*</span></label>
            <input class="inp" type="text" id="bsp-reg-nachname" name="nachname" maxlength="80" autocomplete="family-name" required>
        </div>
    </div>
    <div class="feld">
        <label class="feld-label" for="bsp-reg-email">Geschäftliche E-Mail<span class="pflicht" aria-hidden="true">*</span></label>
        <input class="inp" type="email" id="bsp-reg-email" name="email" maxlength="190" autocomplete="email" required>
    </div>
    <div class="feld">
        <label class="feld-label" for="bsp-reg-uid">UID-Nummer (optional)</label>
        <input class="inp" type="text" id="bsp-reg-uid" name="uid" maxlength="20" autocomplete="off" aria-describedby="bsp-reg-uid-hilfe">
        <p class="feld-hilfe" id="bsp-reg-uid-hilfe">ATU und acht Ziffern oder eine andere EU-UID</p>
    </div>
    <label class="chk" for="bsp-reg-bedingungen">
        <input type="checkbox" id="bsp-reg-bedingungen" name="bedingungen" value="1" required>
        <span>Ich akzeptiere die Testbedingungen und habe die Datenschutzhinweise gelesen. (<a href="#">Datenschutzhinweise</a>)<span class="pflicht" aria-hidden="true">*</span></span>
    </label>
    <label class="chk" for="bsp-reg-tipps">
        <input type="checkbox" id="bsp-reg-tipps" name="tipps" value="1">
        <span>Ja, ich möchte während des Tests Einrichtungstipps per E-Mail erhalten (freiwillig, jederzeit widerrufbar).</span>
    </label>
    <p class="feld-hilfe"><span aria-hidden="true">*</span> Pflichtfeld</p>
    <button type="submit" class="btn btn-volt">Testzugang anfordern</button>
    <p class="feld-hilfe">Sie erhalten eine E-Mail mit einem Bestätigungslink. Erst danach legen Sie Ihr Passwort fest.</p>
</form>

Regeln für Formulare

Der Icon-Satz

Heroicons, Variante Outline: dieselben Symbole wie im Backoffice (Filament). Ein Icon zeigt eine Handlung oder einen Zustand und ersetzt nie den Text. Jedes SVG ist kopierbar.

• bolt Strom, Aktion
• exclamation-triangle Warnung, Fehler
• information-circle Information
• shield-check Sicherheit, Compliance
• arrow-path Aktualisieren, wiederholen
• calendar-days Termin, Einsatz
• arrow-down-tray Herunterladen, Export
• clock Zeit, Frist
• check-circle Erfolg, erledigt
• x-circle Abbruch, abgelehnt
• trash Löschen
• lock-closed Gesperrt, geschützt
• pencil-square Bearbeiten
• user-group Personen, Team
• plus Hinzufügen
• document-text Dokument
• magnifying-glass Suchen
• building-office Firma, Kunde
• arrow-right Weiter, Verweis

Heroicons (Tailwind Labs) stehen unter der MIT-Lizenz. Die Pfade sind in die Seite eingebettet, es wird nichts nachgeladen.

Größen und Strichstärke

Die Icons sind auf einem 24-Raster mit Strichstärke 1,5 gezeichnet. Die Größe auf dem Bildschirm setzt eine Klasse, die Strichstärke skaliert mit.

<div class="ci-reihe ci-icon-groessen">
<svg class="ico ico-16" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>            <svg class="ico ico-24" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>        </div>

Zustände

Im Ruhezustand gedämpft grau, im Hover in Textfarbe, Amber nur im aktiven Zustand und dort nie als einziger Hinweis: dazu kommen Balken, fetter Text und aria-current. Amber-Icons auf hellem Grund nutzen --volt-d (über --ci-akzent-text), auf Graphit --volt.

<nav class="ci-nav-demo" aria-label="Beispiel-Navigation">
    <a class="navpunkt" href="#"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/></svg>Einsätze</a>
    <a class="navpunkt" href="#" aria-current="page"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>Personal</a>
    <a class="navpunkt" href="#"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>Dokumente</a>
</nav>

• Dekorative Icons tragen aria-hidden="true". Eine Schaltfläche nur mit Icon braucht einen aria-label.
• Eine Bedeutung, ein Icon: Dasselbe Symbol steht überall für dieselbe Handlung.
• Keine Emojis als Icons und keine eigenen Strichstärken.

Bildsprache

Echte Arbeitsumgebungen statt Stock-Klischees: Baustelle, Lager, Halle. Bilder zeigen Arbeit, nicht Posen, und nur Menschen, die zugestimmt haben.

• Bau

  Zeigen

  Gerüst, Schalung, Werkzeug im Einsatz; Licht, wie es auf der Baustelle ist; Schutzausrüstung korrekt getragen.

  Meiden

  Gestellte Handschläge vor Neubauten, saubere Helme auf weißem Grund, Bildmontagen.

• Logistik

  Zeigen

  Lagerhalle, Rampe, Kommissionierung, Stapler im Betrieb; Warnweste, Ordnung, Wege.

  Meiden

  Menschen vor Regalen mit Headset-Lächeln, leere Paletten als Kulisse, übertriebene Weitwinkel.

• Produktion

  Zeigen

  Maschine, Werkstück, Handgriff; Ausschnitte, die Können zeigen; ruhiges Licht ohne Filter.

  Meiden

  Roboterarme aus der Bilddatenbank, Funken als Effekt, Amber-Filter über Fotos.

Bildformate und Sicherheitsrand

Drei Seitenverhältnisse. Das gestrichelte Feld ist der Sicherheitsrand (10 %): Motiv und Text bleiben innerhalb.

Regeln

• Echte Arbeitsumgebungen aus dem Alltag der Kundschaft, keine Stock-Klischees (Handschlag, Laptop-Lächeln, Helm-Pose).
• Einwilligung: Jede abgebildete Person hat schriftlich zugestimmt (Recht am eigenen Bild und DSGVO). Die Einwilligung ist widerruflich und liegt dokumentiert vor.
• Keine erkennbaren Arbeitskräfte ohne Freigabe: im Zweifel Rücken, Hände, Details oder Unschärfe; keine Namensschilder, keine lesbaren Kennzeichen.
• Sicherheit sichtbar richtig: Schutzausrüstung wird so gezeigt, wie sie vorgeschrieben ist.
• Ruhige Farbführung: keine Amber-Filter, kein Schwarzweiß als Effekt; Bilder bleiben natürlich.
• Jedes Bild hat einen Alternativtext, der zeigt, was zu sehen ist, nicht „Foto von …“.

Vor der Veröffentlichung prüfen

1. Liegt die Einwilligung jeder erkennbaren Person vor?
2. Ist die Umgebung echt und für die Zielgruppe nachvollziehbar?
3. Passt der Ausschnitt in alle drei Formate?
4. Ist der Alternativtext geschrieben?
5. Sind Dateiname und Metadaten frei von Namen und Orten?

Token-Zuordnung hell zu dunkel

Komponenten schreiben ihre Farben über Rollen (--ci-*). Im Scope .ci-dunkel zeigen die Rollen auf dunkle Werte, identisch mit dem dunklen Modus der Werbeseite. Es entsteht keine neue Farbe. Jeder Wert ist kopierbar.

Die Rollen stehen in /css/ci.css: hell im :root, dunkel in .ci-dunkel, bei data-theme dunkel und bei dunkler Systemeinstellung. Die Werte sind mit denen der Werbeseite abgeglichen. Das Panel im Backoffice läuft bewusst nur hell.

Kontrastpaare im dunklen Modus

Jedes Paar ist gerechnet: halbtransparente Texte werden zuerst über den Grund gemischt und dann nach WCAG 2.x verglichen. Fließtext erreicht überall mindestens 4,5:1. Kupfer und Erfolgsgrün liegen auf Graphit nur knapp über 3:1 und sind darum Zeichen oder Kontur, nie Text.

Regeln für den dunklen Modus

• Kein reines Schwarz: Der dunkelste Grund ist Graphit (#15171c), die Fläche darüber #1c1f26. Auch kein reines Weiß: Text ist Bone (#f6f4ef).
• Tiefe entsteht durch hellere Flächen und Linien in Bone-Transparenz, nicht durch schwarze Schatten.
• Der Amber-Anteil bleibt klein (Orientierung 8 %): Amber ist Aktion, Akzent und Kleintext, dort als --volt statt --volt-d.
• Text auf Amber bleibt Graphit, in beiden Modi.
• Kupfer und Erfolgsgrün tragen im dunklen Modus keinen Text: Der Text bleibt Bone, die Farbe zeigt Kontur, Punkt oder Icon.
• Der Modus folgt der Systemeinstellung bzw. dem Schalter der Werbeseite; das Panel im Backoffice bleibt hell.

Live-Demo

Die Vorschau ist ein Container mit der Klasse ci-dunkel. Alle Komponenten darin nutzen dieselben Klassen wie im hellen Modus.

<div class="ci-dunkel ci-dunkel-demo">
    <div class="ci-reihe">
        <button type="button" class="btn btn-volt">Einsatz anlegen</button>
        <button type="button" class="btn btn-ghost">Mehr erfahren</button>
        <button type="button" class="btn btn-danger">Endgültig löschen</button>
    </div>
    <div class="ci-reihe">
        <span class="pille pille-test">Test · 14 Tage</span>
        <span class="pille pille-lesen">Lesemodus</span>
        <span class="pille pille-beta">Beta</span>
        <span class="pille pille-neu">Neu</span>
    </div>
    <div class="ci-reihe">
        <span class="badge b-volt">läuft bald ab</span>
        <span class="badge b-ok">freigegeben</span>
        <span class="badge b-copper">abgelaufen</span>
        <span class="badge b-ink">§12 AÜG</span>
        <span class="badge b-grau">Info</span>
    </div>
    <div class="ci-feld-reihe">
        <div class="ccard">
            <div class="ic"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg></div>
            <h5>Fristen-Engine</h5>
            <p>Sieben Quellen, eine Ampel. Erinnerung, Warnung, Abgelaufen: automatisch, mandantengetrennt.</p>
        </div>
        <div class="feld">
            <label class="feld-label" for="dm-email">E-Mail-Adresse<span class="pflicht" aria-hidden="true">*</span></label>
            <input class="inp" type="email" id="dm-email" name="email" value="name@" autocomplete="email" required aria-invalid="true" aria-describedby="dm-email-meldung">
            <p class="feld-fehler" id="dm-email-meldung"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>Bitte eine gültige E-Mail-Adresse angeben.</p>
        </div>
    </div>
    <div class="toast toast-ok" role="status">
        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>                <span>Einsatz gespeichert</span>
    </div>
</div>

Dauer und Kurve

Drei Dauern und eine Kurve: 150 ms für Hover und Farbwechsel, 260 ms für Overlays, 700 ms für das Einblenden beim Laden, alle mit --ease. Im CSS stehen nur Tokens, nie Zahlen.

Weitere Dauern und Kurven (System D)

Ergänzung für das Bewegungssystem D: Druck, Farbmodus, Einblenden beim Scrollen, Zählen, Linien und Staffelung. Die Werte stehen im :root von ci.css; im Einsatz sind sie auf der Werbeseite D (akw-bewegung.css/.js, site-2027-Stylesheets), Backoffice und Portale folgen mit ihren Etappen. Endlosschleifen gibt es nur mit Laufsperre (sichtbar, nicht pausiert, keine reduzierte Bewegung), siehe Bewegung D.

Erlaubte Bewegungen

• Einblenden

  Beim Laden steigt Inhalt 16 px auf und blendet ein (700 ms), gestaffelt in 150-ms-Schritten. Ein orchestrierter Aufbau je Seite, keine verstreuten Mikro-Animationen.

• Hover-Anhebung

  Karten heben sich im Hover um 2 px und bekommen einen Schatten (150 ms). Schaltflächen der Werbeseite bewegen sich nicht; dort wechseln nur Schatten und Farbe.

• Farb- und Schattenwechsel

  Schaltflächen, Felder und Links wechseln Hintergrund, Kontur und Farbe in 150 ms. Dabei bewegt sich nichts.

• Overlays und Toasts

  Menüs, Dialoge und Toasts blenden in 260 ms ein (opacity, transform). Das Schließen darf sofort geschehen.

Nicht erlaubt

• Endlosschleifen und Blinken: Nichts bewegt sich länger als 5 Sekunden ohne Stopp, nichts blitzt öfter als dreimal pro Sekunde.
• Parallax, Bounce und Überschwingen: Kurven kommen aus --ease, Bewegung endet weich.
• Bewegung als einziger Hinweis: Jede Änderung ist zusätzlich als Text oder Zustand sichtbar.
• Bewegter Text beim Lesen (Laufschrift, Karussell ohne Stopp).
• Eigene Zahlen im CSS: Dauer und Kurve nur über Tokens.

Die Werbeseite D ist ausgespielt: Jede Schleife hat Laufsperre, Pause-Knopf und Leerlauf-Pause (WCAG 2.2.2). Die frühere Abweichung der bisherigen Werbeseite entfällt.

Bewegung D (Werbeseite D)

So bewegt sich die Werbeseite D „Lichtwerk“: einmal erzählen, dann ruhen. Schleifen gibt es nur dort, nur sichtbar und nur mit Pause; der Inhalt hängt nie an Bewegung. Die Bausteine liegen in akw-bewegung.css/.js, die Seitenregeln in site-2027.css und site-2027-start.css.

Leistungsstufen (automatisch)

• Voll

  Desktop: Glas mit Unschärfe in Kopf und Menü, Energiekern mit allen Fachbereichen, Aura und Raster in Bewegung.

• Sparsam

  Bis 900 px, bei „Transparenz reduzieren“ oder Datensparen: keine Unschärfe, Aura steht, kein Bodenraster, sechs statt 9 Karten im Umlauf.

• Ruhig

  Bei „Bewegung reduzieren“ oder Pause: alles im Endzustand, keine Schleife.

Pflichtregeln

• Laufsperre: Eine Schleife läuft nur, solange ihr Element und der Tab sichtbar sind, keine Pause gilt und keine reduzierte Bewegung eingestellt ist (Attribut data-laeuft, gesetzt vom Skript). Ein Test verbietet „infinite“ ohne diese Sperre.
• Der Knopf „Animationen anhalten“ steht in Kopf, Menü und Fußzeile (WCAG 2.2.2); der Browser merkt sich die Wahl (localStorage, mit Fehlerfang).
• Nach zwei Minuten ohne Eingabe hält alles von selbst an; jede Eingabe weckt die Seite wieder.
• Bewegt werden nur transform, opacity und filter: kein Layoutsprung, kein Blinken, kein Parallax. Zwei bewusste Ausnahmen der Startseite: Der Glanz über das Glut-Wort verschiebt einmal den Verlauf (background-position, 2,8 s), und der Puls der Kugel ändert in seiner Schleife die Helligkeit über filter (nur unter der Laufsperre).
• Der Endzustand steht im HTML: Ohne Skript, bei Pause und bei reduzierter Bewegung ist alles sofort vollständig; bei Pause entfällt auch das Überblenden beim Seitenwechsel.

Bewegung reduzieren ist Pflicht

Wer im Betriebssystem „Bewegung reduzieren“ einstellt, bekommt keine Animation und keinen Übergang: Alles steht sofort im Endzustand. Die Regel steht in /css/ci.css und gilt für jede Seite, die sie lädt. Neue Bewegung braucht keine eigene Ausnahme.

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .ccard:hover{transform:none}
}

Live-Demo mit Schalter

Drei Karten blenden gestaffelt ein und heben sich im Hover. Der Schalter simuliert „Bewegung reduzieren“ auf der Bühne; die echte Systemeinstellung wirkt auf die ganze Seite.

<div class="ccard einblenden">…</div>
<div class="ccard einblenden einblenden-2">…</div>
<div class="ccard einblenden einblenden-3">…</div>

Regeln für Bewegung

Prüfliste nach WCAG 2.2 AA

Die CI baut auf WCAG 2.2, Stufe AA. Jede Zeile nennt das Erfolgskriterium und die Regel, die daraus für Gestaltung und Bau folgt. Bewegung geht bewusst über AA hinaus.

Gerechnete Beispiele

Aus derselben Kontrastklasse wie die Farben: Verhältnis im hellen und im dunklen Modus, nicht geschätzt.

Zielgrößen

Mindestens 24 × 24 px, für Touch 44 × 44 px. Die Kästchen sind in echter Größe gezeichnet.

• 24 × 24 px Minimum (WCAG 2.2, 2.5.8)
• 44 × 44 px Touch-Ziel (Regel der CI)

Tastaturbedienung

Jedes Element der Seite ist ohne Maus bedienbar, auch die Kopierknöpfe dieses Handbuchs und die scrollbaren Tabellen.

Sprache auszeichnen

Das html-Element trägt die Sprache der Seite (de-AT bzw. en-GB). Fremdsprachige Wörter und Sätze bekommen ein eigenes lang-Attribut, damit Screenreader sie richtig aussprechen.

<p>Die Gestaltungsrichtung heißt <span lang="en">industrial-electric</span> und gilt für jede Oberfläche.</p>

Regeln für Barrierefreiheit

Eine Ausgabe, eine Quelle

Jede Ausgabe trägt entweder das Branding des Mandanten oder das des Betreibers, grundsätzlich keine Mischung. Der Mandant erscheint mit seinem Namen und, soweit angeschlossen, mit Logo und Primärfarbe; die Tabelle unten zeigt, wo. Der Betreiber tritt dort auf, wo EagleDesk selbst spricht: Werbeseite, Handbuch, Plattform-Mails und Plattform.

Bausteine des Mandanten-Brandings

Logo (hell und dunkel), App-Name und drei Farben aus dem Mandantenprofil bilden das Branding. Die Spalte „Wirkt heute in“ nennt die wichtigsten Ausgaben, die den Wert lesen.

Welche Ausgabe trägt welches Branding

Genau eine Quelle je Zeile. Die Angaben sind am Code geprüft und werden bei Änderungen nachgezogen.

Regeln für das Branding

• Ziel: Alles Mandantenbezogene kommt zentral aus dem Mandantenprofil. Neue Ausgaben lesen Firmenfelder nicht direkt; wenige ältere Stellen tun es noch.
• Die Mandantenfarbe ist Akzent: Linie im Briefkopf, Kopfzeile und Hauptknopf im Portal, Name in der Signatur. Flächen und Fließtext bleiben neutral, damit die Lesbarkeit nicht von der Farbwahl des Mandanten abhängt.
• Auf der Mandantenfarbe steht Weiß oder Graphit, je nachdem, was den höheren Kontrast ergibt (Abschnitt „Portale“).
• Das EagleDesk-Logo erscheint in Ausgaben des Mandanten nicht (Ausnahmen: Rückfall-Logo im Backoffice ohne Mandantenlogo, Favicon und App-Icon).
• Ausgaben des Betreibers nutzen nie Farbe oder Logo eines Mandanten, auch wenn ein Mandant im Zusammenhang steht.
• Mandanten-Mails gehen nie über den Zugang der Plattform; Plattform-Mails nie über den Zugang eines Mandanten.
• Im Backoffice bleibt Amber die Akzentfarbe; App-Name und Logo sind die des Mandanten.

Bekannte Grenzen

• Sekundär- und Akzentfarbe lassen sich im Mandantenprofil pflegen, wirken aber noch in keiner fest angeschlossenen Ausgabe.
• Das Mandantenlogo erscheint im Briefkopf der PDFs, im Backoffice und auf der Karriereseite, nicht in den Portalen und nicht in Mails.
• Eine zweite Logo-Variante für dunkle Flächen lässt sich im Mandantenprofil hinterlegen, wird aber noch von keiner fest angeschlossenen Ausgabe gelesen.

Aufbau des Briefkopfs

Die Zonen eines Belegs von oben nach unten. Falz- und Lochmarken stehen links am Rand.

Schrift im PDF

Zielbild: IBM Plex Sans in zwei Schnitten (400 und 600). Die Proben stehen in echter Größe (1 pt = 1,33 px) und zeigen die kleinste erlaubte Schrift.

Die kleinste Schrift im PDF ist 9 pt. Darunter ist selbst eine Fußzeile auf dem Papier schwer zu lesen.

Tabellenstil im PDF

Ruhig und druckfreundlich: keine Füllflächen, die Bedeutung trägt nie allein die Farbe.

• Kopfzeile in AK Sans 600 mit einer Linie in Graphit darunter, ohne Füllfläche (spart Toner und bleibt in Schwarz-Weiß lesbar).
• Zeilen mit einer feinen Linie in --line-2, ohne Zebra.
• Text linksbündig, Zahlen und Beträge rechtsbündig mit gleicher Anzahl Nachkommastellen.
• Summenzeile mit Linie darüber und fetter Schrift.

Vier Beispiele

A4-Modelle der fiktiven Musterfirma Personal GmbH mit Demo-Branding. Gezeigt werden Kopf und die ersten Abschnitte; der Rest ist mit „…“ abgekürzt.

Regeln für beide Portale

Die Modelle unten zeigen den Aufbau bei 375 px Breite. Flächen und Schrift sind das Zielbild in CI-Tokens; die Mandantenfarbe kommt aus dem Mandantenprofil.

• Antippbare Ziele sind mindestens 44 px hoch. Im Produkt ist ein Hauptknopf mindestens 44 px hoch (14 px Polster oben und unten plus 16 px Schrift); die Knöpfe in der Kopfzeile (Hilfe, Abmelden) sind nur 32 px hoch und liegen damit unter der Regel.
• Die Mandantenfarbe ist nur Akzent: Kopfzeile, Hauptknopf, Randlinien, aktive Reiter und Fortschritt. Karten, Text und Eingabefelder bleiben neutral.
• Auf der Mandantenfarbe steht Weiß oder Graphit, je nachdem, welche Farbe den höheren Kontrast ergibt (siehe unten).
• Die Standardfelder (Text, Passwort, Datum, Zahl, Auswahl, Textfeld) haben 16 px Schrift, damit Smartphones beim Antippen nicht zoomen.
• Der Inhalt passt in 375 px Breite ohne horizontales Scrollen; Kacheln brechen bei Platzmangel auf eine Spalte um.
• Die Kopfzeile zeigt den App-Namen des Mandanten. Ein Mandantenlogo in der Kopfzeile ist Zielbild (Abschnitt „Im Einsatz“); im Produkt steht dort heute nur der Name.

Mitarbeiter-WebApp

Startseite, Einsatzplan und Stunden erfassen. Alle Angaben sind Platzhalter.

Kundenportal

Die Stundenfreigabe: eine Karte je Einsatz mit einer Hauptaktion „Freigeben“; Ablehnen ist die zweite Wahl.

Schrift auf der Mandantenfarbe

Das Portal wählt für die Schrift auf der Mandantenfarbe Weiß oder Graphit, je nachdem, welche Farbe den höheren Kontrast ergibt. Bei zu hellem Amber ist das Graphit. Die Werte sind nach WCAG 2.x gerechnet.

Regeln für Seiten im Backoffice

• Filament-Komponenten vor eigenen Blades: Abschnitte, Tabellen, Badges, Knöpfe und Formulare kommen aus Filament. Eine eigene View ist die Ausnahme.
• Keine Tailwind-Utilities in eigenen Views: Filament liefert sie dort nicht mit, sie bleiben wirkungslos. Eigene Views nutzen nur die akw-Klassen des Panel-Stylesheets (oder den Wrapper akw-tw, der einzelne Utilities nachbildet).
• Farben, Schriften und Abstände kommen aus den CI-Tokens; das Backoffice ist hell, Akzent ist Amber, Graphit und Bone bilden den Grund.
• Alle Texte stehen in den Sprachdateien (Deutsch und Englisch), nicht im Blade; im Backoffice heißt es durchgehend „Mitarbeiter:in“.
• Eine neue Klasse gehört in das Panel-Stylesheet, nicht in die View. Sie erscheint dann automatisch im Katalog unten.

Sidebar und Tabelle

Zwei Modelle aus HTML und CSS mit den Werten des Panel-Stylesheets: Gruppenüberschrift in AK Mono, aktiver Punkt mit Amber-Tönung, Karten mit 14 px Radius. Das Logo sitzt am Desktop in der Kopfleiste und erscheint in der Seitenleiste nur auf dem Smartphone.

Live-Beispiele

Bausteine aus dem Panel-Stylesheet, hier ohne Filament gerendert. Jede akw-Klasse in diesen Beispielen steht im Katalog und kommt ohne Filament-Selektor aus. Banner und Ankündigungen stehen im Abschnitt „Komponenten“.

Im Panel stehen an diesen Stellen Filament-Komponenten (Abschnitt, Knopf, Badge); das Snippet zeigt nur die akw-Klassen.

<div class="akw-ablauf-rahmen">
    <div class="akw-ablauf-next">
        <span class="akw-ablauf-next-body">
            <span class="akw-ablauf-next-label">Nächster Schritt</span>
            <span class="akw-ablauf-next-titel">Stunden prüfen</span>
            <span class="akw-ablauf-next-text">Für mehrere Einsätze liegen Stundenlisten zur Freigabe bereit.</span>
        </span>
    </div>
    <ol class="akw-ablauf-leiste" aria-label="Kernablauf">
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Schritt 1</span>
                    <span class="akw-ablauf-titel">Anfrage</span>
                    <span class="akw-ablauf-zahl">2</span>
                    <span class="akw-ablauf-text">offen</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Schritt 2</span>
                    <span class="akw-ablauf-titel">Einsatz</span>
                    <span class="akw-ablauf-zahl">1</span>
                    <span class="akw-ablauf-text">offen</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Schritt 3</span>
                    <span class="akw-ablauf-titel">Stunden</span>
                    <span class="akw-ablauf-zahl">5</span>
                    <span class="akw-ablauf-text">offen</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Schritt 4</span>
                    <span class="akw-ablauf-titel">Freigabe</span>
                    <span class="akw-ablauf-zahl">3</span>
                    <span class="akw-ablauf-text">offen</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Schritt 5</span>
                    <span class="akw-ablauf-titel">Rechnung</span>
                    <span class="akw-ablauf-zahl">1</span>
                    <span class="akw-ablauf-text">offen</span>
                </a>
            </li>
                                                <li class="akw-ablauf-li">
                <a class="akw-ablauf-schritt is-offen" href="#">
                    <span class="akw-ablauf-nr">Schritt 6</span>
                    <span class="akw-ablauf-titel">Zahlung</span>
                    <span class="akw-ablauf-zahl">4</span>
                    <span class="akw-ablauf-text">offen</span>
                </a>
            </li>
                    </ol>
</div>

<div class="ci-reihe">
    <span class="akw-kalk-ampel akw-kalk-ampel--gruen">Im Rahmen</span>
    <span class="akw-kalk-ampel akw-kalk-ampel--gelb">Knapp</span>
    <span class="akw-kalk-ampel akw-kalk-ampel--rot">Überschritten</span>
    <span class="akw-kalk-ampel akw-kalk-ampel--grau">Keine Angabe</span>
</div>

<div class="akw-db">
    <div class="akw-db-kennzahlen">
                            <div class="akw-db-kz">
                <span class="akw-db-kz-label">Umsatz</span>
                <span class="akw-db-kz-wert">[Betrag]</span>
            </div>
                            <div class="akw-db-kz">
                <span class="akw-db-kz-label">Kosten</span>
                <span class="akw-db-kz-wert">[Betrag]</span>
            </div>
                            <div class="akw-db-kz">
                <span class="akw-db-kz-label">Deckungsbeitrag</span>
                <span class="akw-db-kz-wert akw-db-neg">[−Betrag]</span>
            </div>
                    </div>
</div>

<div class="akw-einrichtung-kopf">
    <span class="akw-einrichtung-zaehler">1 von 3 Schritten erledigt</span>
    <span class="akw-einrichtung-balken"><span class="akw-einrichtung-balken-wert" style="width:33%"></span></span>
</div>
<ul class="akw-einrichtung-liste" role="list">
                                    <li class="akw-einrichtung-schritt is-erledigt">
            <span class="akw-einrichtung-ic" aria-hidden="true">✓</span>
            <span class="akw-einrichtung-body">
                <span class="akw-einrichtung-titel">Firmendaten<span class="sr-only"> (erledigt)</span></span>
                <span class="akw-einrichtung-text">Name, Anschrift und UID im Mandantenprofil.</span>
            </span>
                            </li>
                                    <li class="akw-einrichtung-schritt">
            <span class="akw-einrichtung-ic" aria-hidden="true">2</span>
            <span class="akw-einrichtung-body">
                <span class="akw-einrichtung-titel">Logo und Farbe</span>
                <span class="akw-einrichtung-text">Logo hochladen und Primärfarbe wählen.</span>
            </span>
                                    <span class="akw-einrichtung-aktion"><a class="btn btn-ghost" href="#">Öffnen</a></span>
                            </li>
                                    <li class="akw-einrichtung-schritt">
            <span class="akw-einrichtung-ic" aria-hidden="true">3</span>
            <span class="akw-einrichtung-body">
                <span class="akw-einrichtung-titel">Mail-Zugang</span>
                <span class="akw-einrichtung-text">Eigenen SMTP-Zugang einrichten.</span>
            </span>
                                    <span class="akw-einrichtung-aktion"><a class="btn btn-ghost" href="#">Öffnen</a></span>
                            </li>
            </ul>

<div class="akw-kanban" role="region" tabindex="0" aria-label="Board mit zwei Spalten">
            <div class="akw-kanban-col">
    <div class="akw-kanban-colhead">
        <span class="akw-kanban-coltitle">Neu</span>
        <span class="akw-kanban-count">2</span>
    </div>
    <div class="akw-kanban-cards">
                                                                    <div class="akw-kanban-card">
                    <div class="akw-kanban-card-title">[Name]</div>
                    <div class="akw-kanban-card-sub">[Stelle]</div>
                                                    </div>
                                            <div class="akw-kanban-card">
                    <div class="akw-kanban-card-title">[Name]</div>
                    <div class="akw-kanban-card-sub">[Stelle]</div>
                                                            <div class="akw-kanban-card-ok">Unterlagen vollständig</div>
                                                    </div>
                                                        </div>
</div>
            <div class="akw-kanban-col">
    <div class="akw-kanban-colhead">
        <span class="akw-kanban-coltitle">In Prüfung</span>
        <span class="akw-kanban-count">0</span>
    </div>
    <div class="akw-kanban-cards">
                                    <div class="akw-kanban-empty">Keine Karten</div>
                            </div>
</div>
    </div>

Klassenkatalog

Dieser Katalog entsteht beim Aufruf aus dem Stylesheet des Panels: Eine neue Klasse erscheint hier von selbst, eine gestrichene verschwindet. „Eigenständig“ heißt: Es gibt eine Regel für die Klasse, die weder Filament (Klassen und Variablen) noch den Dunkelmodus voraussetzt; nur solche Klassen lassen sich ohne Panel als Live-Beispiel zeigen.

769 Klassen in 51 Familien, davon 765 eigenständig.

Plattform-Mail und Mandanten-Mail

So sind die beiden Mail-Typen heute gebaut. Alle Mandanten-Mails sind schlicht. Alle Texte in den Modellen sind Platzhalter.

[Kopfzeile]

[Anrede]

[Überschrift]

[Firma des Betreibers] · [Anschrift] [Firmenbuch-Nr.] · UID [UID-Nr.] [E-Mail des Betreibers]

[Signatur des Mandanten]

Musterfirma Personal GmbH

Farben im Layout

Die Farben stehen im Mail-Layout selbst; das Handbuch rechnet den Kontrast dazu. Mails nutzen Inline-Farben, weil Mailprogramme keine Tokens kennen.

Regeln für Mails

• Plattform-Mails kommen vom Betreiber und tragen das Betreiber-Branding; sie nennen im Fuß die Pflichtangaben des Betreibers.
• Mandanten-Mails kommen vom Mandanten, über dessen eigenen SMTP-Zugang. Ohne Zugang wartet die Mail; sie geht nie ersatzweise über die Plattform.
• Die Kopfzeile einer Plattform-Mail nennt kurz den Anlass (zum Beispiel „Vertrag“); Vertrags- und Testphasen-Mails an Kunden tragen eine neutrale Kopfzeile.
• Mails nutzen Inline-Stile und Tabellenlayout, keine Webschriften und keine Bilder, die zum Lesen nötig wären.
• Werbe-Serienmails enthalten den Abmeldelink.

Plattform-Konsole

Die Plattform-Konsole des Betreibers trägt immer die Betreibermarke; ihr Name steht in jedem Seitentitel.

[Seitentitel] – [App-Name]

[Logo Mandant]

Backoffice (Mandant)

[Seitentitel] – EagleDesk · Plattform

Plattform

Plattform

Kennzeichnung

• Der Name der Konsole lautet „EagleDesk · Plattform“ und steht in jedem Seitentitel (Browser-Tab).
• Die Kopfleiste zeigt das Betreiber-Logo, nie Name, Logo oder Farbe eines Mandanten.
• Zielbild: Neben dem Logo steht sichtbar die Markenzeile „Plattform“.
• Dieselbe Panel-CI wie im Backoffice: hell, Amber als Akzent, Graphit und Bone.
• Für Suchmaschinen gesperrt (noindex).

Fünf Prinzipien für Texte

Die Beispiele oben zeigen den Ton, diese fünf Regeln sagen, woran man ihn erkennt. Sie gelten für Werbeseite, Backoffice, Portale, Mails und Belege.

1. Klar. Ein Gedanke pro Satz, aktiv statt passiv, konkrete Substantive wie Einsatz, Frist, Beleg und Freigabe, Zahlen statt Adjektive.
2. Fachlich korrekt nach österreichischem AÜG. Wir nutzen die Begriffe des österreichischen Rechts (Überlassung, Beschäftiger, Überlassungsmitteilung) und keine deutschen Konstrukte. Ein Rechtsverweis nennt Gesetz und Paragraf nur dann, wenn er stimmt; im Zweifel steht der Begriff allein.
3. Kein Hype. Keine Superlative, keine Ausrufezeichen, keine leeren Adjektive wie innovativ, nahtlos oder mühelos. Die Werbeseite kommt heute ohne Ausrufezeichen aus.
4. Ehrlich zum Entwicklungsstand. Was noch nicht läuft, heißt „in Entwicklung“, mit Zeitraum, wenn er feststeht. Statuszeile und Test-Satz nennen den Betastart; kein Text tut so, als sei etwas schon da.
5. Anrede nach Ausgabe. Werbeseite, Produkt, Portale, Mails und Rechtstexte sprechen durchgehend mit „Sie“. Eine Ausgabe wechselt die Form nicht mitten im Text.

Wortliste

Eine Schreibweise je Begriff, abgeleitet aus dem Glossar des Backoffice und den vorhandenen Texten. „Gilt für“ nennt, wo die Regel heute durchgesetzt ist.

Anrede nach Ausgabe

Alle deutschen Ausgaben sprechen mit „Sie“, unabhängig vom Geschmack der Autorin oder des Autors. Die Tabelle beschreibt den Bestand; das Beispiel steht wörtlich so in den Texten. Die englischen Texte sprechen durchgehend mit „you“.

Das sagen wir nicht

Diese Aussagen stehen in keinem Text: weder auf der Werbeseite noch in Mails, Belegen oder Sharing-Texten. Wer unsicher ist, beschreibt, was das System heute tut.

• Keine Zusage von Lohn-Echtbetrieb.
• Keine Zusage von Meldungen an die Sozialversicherung oder an Behörden.
• Keine Zahlen zu Wettbewerbern (Preise, Kundenzahlen, Marktanteile) und keine Vergleiche mit namentlich genannten Fremdprodukten; verglichen wird sachlich mit der klassischen Desktop-Installation.

Standardsätze

Die Sätze stammen unverändert aus den Texten der Werbeseite; ändert sich dort ein Satz, ändert er sich hier mit. Sie werden unverändert kopiert: Ein umformulierter Satz wäre ein neuer Claim.

Die Zahl der Testtage kommt aus der Plattform-Einstellung (derzeit 14 Tage).

Angaben des Betreibers

Quelle ist die Betreiberkonfiguration der Plattform. Maßgeblich bleibt das Impressum; fehlt eine Angabe, steht sie hier nicht.

So arbeitet der Generator

• Alle Eingaben werden als Text behandelt und maskiert; Sonderzeichen laufen nie als Markup.
• Links entstehen nur für http(s), mailto und tel. Alles andere, etwa javascript:, wird verworfen; ein ungültiges Telefon oder eine ungültige E-Mail-Adresse bleibt Text ohne Link.
• Das Logo ist eine absolute Bildadresse (PNG, helle Variante) auf diesem Server; das Mailprogramm lädt es beim Lesen.
• Die Tabelle hat einen weißen Hintergrund und feste Textfarben, damit die Signatur im Dark Mode eines Mailprogramms lesbar bleibt.
• Nichts wird gespeichert und nichts gesendet; die Eingaben bleiben im Browser.

Generator

Rich-Text kopieren und im Mailprogramm in den Einstellungen der Signatur einfügen. Mailprogramme ohne Rich-Text-Signatur nehmen den Klartext.

Die Firmenzeilen unter dem Logo stammen aus den Firmendaten oben.