Die Oberflaeche auf das Manner-CD umstellen
Some checks failed
CI / Lint, Typen, Tests, Build (push) Successful in 11m45s
CI / Migrationen auf leerer Datenbank (push) Has been cancelled

Farben, Schrift, Logo und Symbole folgen jetzt dem CD Manual 2022. An der
Logik aendert sich nichts: keine Migration, keine Abfrage, keine Berechtigung.

Die zwei Markenfarben stehen in §1.1 als #F69686 (Rosa) und #164194 (Blau).
Welche davon was traegt, ist nicht gewaehlt, sondern nachgerechnet: Weiss auf
Rosa kommt auf 2.18:1 und faellt damit auch fuer Grossschrift durch, Blau auf
Rosa auf 4.34:1 und reicht fuer das Logo, nicht fuer Text. Schwarz auf Rosa
sind 7.47:1, Weiss auf Blau 9.47:1. Rosa ist deshalb Flaeche, Blau ist
Interaktion — zwei Skalen, brand-* und accent-*, statt einer geteilten.

Von den 26 Stellen mit brand-50/100/200 sind nur sieben auf accent gewandert.
Der Rest meint einen Zustand und keinen Markenton: die Zeile unter dem Zeiger,
der gewaehlte Listeneintrag, der aktive Menuepunkt. Gegen die warme
Seitenflaeche ist ein kuehler Ton dort deutlicher, und Blau heisst in dieser
Oberflaeche ab jetzt "reagiert auf dich". Nach accent gingen die Faelle ohne
eigene Bedeutung — "Geplant", "Offen", der neutrale Protokoll-Chip — und die
offene Planstelle im Organigramm, die vorher ein blasses Blau war und damit
wie eine schwaechere Person aussah.

Die Funktionsfarben bleiben, was sie sind. Das Manual regelt die Identitaet,
nicht die Rueckmeldung: Rot heisst Fehler, weil die Benutzerin das mitbringt.
`info` bleibt bewusst tuerkis — Blau saehe ab jetzt bedienbar aus, und gemessen
kaeme ein blaues info dem violetten Chip auf dE 6.8 nahe, also nicht
unterscheidbar. Violett ist dabei nachgezogen: gegen den Fehler-Chip stand es
bei dE 8.0, "Austritt" und "Befoerderung" waren im Vorbeigehen dieselbe blasse
Flaeche. Jetzt dE 15.0.

Die Schrift ist Barlow. Nachgezaehlt ist das Manual zu 95 % in DIN gesetzt
(Regular 79 %, Bold 16 %); Helvetica Neue steht nur in den Visitenkarten und im
Claim. DIN laesst sich nicht ausliefern — eine Drucklizenz deckt keinen Webfont
—, und die freien Nachbauten der DIN 1451 sind Schilderschriften, bei 14 px in
einer langen Tabelle schlechter lesbar als das, was sie ersetzen. Die Variable
heisst --font-din und nicht --font-barlow: liegt eines Tages eine Web-Lizenz
vor, ist der Wechsel diese eine Deklaration.

Nebenbei zwei Dinge repariert, die vorher schon falsch waren. Die Umrandung von
Eingabefeldern, Knoepfen und Suchfeldern lag bei 1.30:1 und damit unter den 3:1,
die WCAG 1.4.11 fuer Bedienelemente verlangt; border-strong bringt 3.56:1. Und
das mitgelieferte favicon.ico liess sich gar nicht bauen: eingebettet waren
24-Bit-RGB-PNG, waehrend der Kopf 32 bpp behauptete. Alle Rastersymbole liegen
jetzt als RGBA vor, und ihr Blau ist auf den CD-Wert gezogen — samt der
kantengeglaetteten Raender, indem je Pixel der Blauanteil bestimmt und neu
gemischt wurde.

Das Logo ist das Markenlogo (§4.1), nicht das Unternehmenslogo, das §3.2 fuer
eine Anwendung mit der AG als Absender vorsaehe — es liegt nicht vor. Der
Freiraum X/3 steckt im Bauteil selbst und nicht in den Aufrufstellen, sonst
haengt seine Einhaltung daran, dass jede einzelne daran denkt.

docs/farbschema.html zeigt Token, Kontraste und Bauteile nebeneinander und
laesst sich ohne Server oeffnen.

Nicht im Browser gesehen: Anmeldung laeuft ueber das Firmenkonto und die
Datenbank ist von hier nicht erreichbar. Lint, Typen, Schemaabgleich, 524 Tests
und der Build sind sauber.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-14 19:12:52 +02:00
parent 99e4357c02
commit f7a5c48615
33 changed files with 1305 additions and 92 deletions

366
docs/farbschema.html Normal file
View File

@@ -0,0 +1,366 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alpenwerk HR — Farbschema nach Manner CD</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--brand-50:#eef3fb; --brand-100:#dae4f5; --brand-200:#afc3e6;
--brand-500:#164194; --brand-600:#11326f; --brand-700:#0d2857;
--accent-50:#fef5f2; --accent-100:#fde7e1; --accent-200:#facec2;
--accent-500:#f69686; --accent-600:#d9604b; --accent-700:#a8402e;
--surface:#fdf6f4; --border:#f0dbd4; --border-subtle:#f8ece8; --border-strong:#a67f70;
--ink:#231f20; --ink-body:#4b4446; --ink-muted:#756c6e;
--success-bg:#dff6dd; --success-text:#0e700e;
--danger-bg:#fde7e9; --danger-text:#b10e1c; --danger-solid:#c50f1f;
--warning-bg:#fff4ce; --warning-text:#835b00;
--info-bg:#d7f0f0; --info-text:#00666d;
--purple-bg:#e4d9f5; --purple-text:#54277f;
--shadow-card: 0 1px 2px rgb(122 60 45 / .05), 0 1px 3px rgb(122 60 45 / .07);
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--surface); color: var(--ink);
font: 14px/1.55 "Barlow", "Segoe UI", system-ui, sans-serif;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
h2 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
color: var(--ink-muted); margin: 44px 0 14px; }
h3 { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
p { color: var(--ink-body); max-width: 68ch; }
.lead { font-size: 15px; }
code { font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 8px;
box-shadow: var(--shadow-card); padding: 20px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* ── Farbfelder ── */
.swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.swatch .fl { height: 84px; display: flex; align-items: flex-end; padding: 8px 10px; font-weight: 700; font-size: 12px; }
.swatch .mt { padding: 8px 10px; font-size: 11px; color: var(--ink-muted); line-height: 1.45; }
.swatch .mt b { color: var(--ink); font-weight: 700; display: block; }
.ramp { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ramp div { flex: 1; height: 62px; display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 5px; font-size: 10px; font-weight: 700; }
/* ── Tabelle ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
color: var(--ink-muted); font-weight: 800; padding: 7px 10px; border-bottom: 1px solid var(--border); }
td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); }
tbody tr:hover { background: var(--brand-50); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.ok { color: var(--success-text); font-weight: 700; }
.warn { color: var(--warning-text); font-weight: 700; }
.bad { color: var(--danger-text); font-weight: 700; }
/* ── Bauteile ── */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px;
font-weight: 700; font-size: 14px; padding: 8px 16px; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: var(--brand-600); }
.btn-secondary { background: #fff; color: var(--ink-body); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface); }
.btn-danger { background: var(--danger-solid); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-body); }
.btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.field { display: block; margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.field input, .field select {
width: 100%; border: 1px solid var(--border-strong); border-radius: 6px;
padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.field input:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.field .hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.field.invalid input { border-color: var(--danger-solid); }
.field.invalid .hint { color: var(--danger-text); font-weight: 700; }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nav { width: 232px; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.nav .hd { height: 56px; display: flex; align-items: center; gap: 0; padding-left: 8px;
border-bottom: 1px solid var(--border); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 3px 10px;
border-radius: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-body); text-decoration: none; }
.nav a.active { background: var(--brand-100); color: var(--brand-700); }
.nav a:hover:not(.active) { background: var(--surface); }
.dot { width: 15px; height: 15px; border-radius: 4px; background: currentColor; opacity: .55; flex: none; }
.note { border-left: 3px solid var(--accent-500); background: #fff;
padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 14px 0; }
.note b { color: var(--ink); }
.freiraum { display: inline-block; outline: 1px dashed var(--accent-600); outline-offset: 0; }
.logo-demo { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.on-blue { background: var(--brand-700); padding: 22px; border-radius: 8px; }
.on-white { background: #fff; padding: 22px; border-radius: 8px; border: 1px solid var(--border); }
</style>
</head>
<body>
<div class="wrap">
<h1>Farbschema nach dem Manner CD Manual 2022</h1>
<p class="lead">Erster Entwurf. Diese Seite zeigt die Token und die Bauteile, die daraus
entstehen — nebeneinander, damit sich vor dem Blick in die Anwendung beurteilen laesst,
ob die Richtung stimmt. Alle Werte hier sind dieselben wie in
<code>app/globals.css</code>.</p>
<!-- ══════════════════════════════════════════════════════════ -->
<h2>1 · Die zwei Markenfarben</h2>
<div class="grid g2">
<div class="swatch">
<div class="fl" style="background:#f69686;color:#231f20">Schrift darauf: ink</div>
<div class="mt"><b>Manner Rosa — #F69686</b>
CMYK 0/50/40/0 · sRGB 246 150 134<br>
Pantone: Orange 021 7.20 + Bright Red 7.20 + Trans. White 85.60<br>
CD §1.1 · im Projekt <code>accent-500</code></div>
</div>
<div class="swatch">
<div class="fl" style="background:#164194;color:#fff">Schrift darauf: weiss</div>
<div class="mt"><b>Manner Blau — #164194</b>
CMYK 100/80/0/0 · sRGB 22 65 148<br>
Pantone Reflex Blue C / U<br>
CD §1.1 · im Projekt <code>brand-500</code></div>
</div>
</div>
<div class="note">
<b>Eine Abweichung, die auffallen wird.</b> Die mitgelieferte Logodatei trug
<code>#034ea2</code> als Blau — den Wert, mit dem das PDF gerendert wurde, nicht den,
den §1.1 im Text als verbindlich nennt. Beide liegen sichtbar auseinander (dE 6.3).
Das Logo ist deshalb auf <code>#164194</code> gezogen worden, damit es neben den
blauen Bedienelementen nicht wie ein Fehler aussieht. Beim Rosa war die Differenz
bedeutungslos (dE 0.9).
</div>
<!-- ══════════════════════════════════════════════════════════ -->
<h2>2 · Warum Blau bedient und Rosa traegt</h2>
<p>Die Rollenverteilung ist nicht gewaehlt, sondern gemessen. Nach WCAG 2.1 braucht
Fliesstext 4.5:1, Grossschrift und Rahmen 3:1.</p>
<div class="card">
<table>
<thead><tr><th>Kombination</th><th class="num">Kontrast</th><th>Fliesstext</th><th>Folge</th></tr></thead>
<tbody>
<tr><td>Weiss auf Manner Rosa</td><td class="num">2.18:1</td><td class="bad">faellt durch</td>
<td>Rosa kann keine weisse Schrift tragen — auch nicht in gross</td></tr>
<tr><td>Manner Blau auf Manner Rosa</td><td class="num">4.34:1</td><td class="warn">knapp daneben</td>
<td>reicht fuer das Logo, nicht fuer Text</td></tr>
<tr><td>ink #231F20 auf Manner Rosa</td><td class="num">7.47:1</td><td class="ok">AAA</td>
<td>so wird Rosa benutzt: Flaeche unter Dunklem</td></tr>
<tr><td>Weiss auf Manner Blau</td><td class="num">9.47:1</td><td class="ok">AAA</td>
<td>Knopf, Panel</td></tr>
<tr><td>Manner Blau auf Weiss</td><td class="num">9.47:1</td><td class="ok">AAA</td>
<td>Link, Fokusring, aktiver Menuepunkt</td></tr>
</tbody>
</table>
</div>
<!-- ══════════════════════════════════════════════════════════ -->
<h2>3 · Die Abstufungen</h2>
<p><b>Blau — alles, was man anfassen kann.</b></p>
<div class="ramp">
<div style="background:var(--brand-50);color:#231f20">50</div>
<div style="background:var(--brand-100);color:#231f20">100</div>
<div style="background:var(--brand-200);color:#231f20">200</div>
<div style="background:var(--brand-500);color:#fff">500 · CD</div>
<div style="background:var(--brand-600);color:#fff">600</div>
<div style="background:var(--brand-700);color:#fff">700</div>
</div>
<p style="margin-top:20px"><b>Rosa — alles, was die Marke traegt.</b></p>
<div class="ramp">
<div style="background:var(--accent-50);color:#231f20">50</div>
<div style="background:var(--accent-100);color:#231f20">100</div>
<div style="background:var(--accent-200);color:#231f20">200</div>
<div style="background:var(--accent-500);color:#231f20">500 · CD</div>
<div style="background:var(--accent-600);color:#fff">600</div>
<div style="background:var(--accent-700);color:#fff">700</div>
</div>
<p style="margin-top:20px"><b>Flaechen und Schrift.</b> Das Schwarz ist <code>#231F20</code>
aus dem Manual, nicht reines Schwarz.</p>
<div class="ramp">
<div style="background:var(--surface);color:#231f20">surface</div>
<div style="background:var(--border-subtle);color:#231f20">border-subtle</div>
<div style="background:var(--border);color:#231f20">border</div>
<div style="background:var(--border-strong);color:#fff">border-strong</div>
<div style="background:var(--ink-muted);color:#fff">ink-muted</div>
<div style="background:var(--ink-body);color:#fff">ink-body</div>
<div style="background:var(--ink);color:#fff">ink</div>
</div>
<!-- ══════════════════════════════════════════════════════════ -->
<h2>4 · Bauteile</h2>
<div class="grid g2">
<div class="card">
<h3>Knoepfe</h3>
<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
<button class="btn btn-primary">Speichern</button>
<button class="btn btn-secondary">Abbrechen</button>
<button class="btn btn-danger">Austritt erfassen</button>
<button class="btn btn-ghost">Zurueck</button>
</div>
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
Der sekundaere Knopf hat jetzt <code>border-strong</code> — vorher war seine
Umrandung mit 1.3:1 kaum zu sehen.</p>
</div>
<div class="card">
<h3>Eingabefelder</h3>
<div class="field">
<label>Nachname</label>
<input value="Gruber">
</div>
<div class="field invalid">
<label>SV-Nummer</label>
<input value="1234 010180">
<div class="hint">Die Pruefziffer stimmt nicht.</div>
</div>
<p style="font-size:12px;color:var(--ink-muted);margin:0">
Rahmen 3.56:1 statt 1.30:1 — WCAG 1.4.11 fuer Bedienelemente.</p>
</div>
<div class="card">
<h3>Status</h3>
<div class="chips">
<span class="chip" style="background:var(--success-bg);color:var(--success-text)">Aktiv</span>
<span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Langzeitabwesenheit</span>
<span class="chip" style="background:var(--accent-200);color:var(--brand-700)">Geplant</span>
<span class="chip" style="background:var(--danger-bg);color:var(--danger-text)">Ausgetreten</span>
</div>
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
„Geplant" ist der Fall ohne besondere Faerbung und bekommt deshalb die
Markenfarbe. Blau saehe hier nach Schaltflaeche aus.</p>
</div>
<div class="card">
<h3>Vorgaenge im Protokoll</h3>
<div class="chips">
<span class="chip" style="background:var(--success-bg);color:var(--success-text)">Neueinstellung</span>
<span class="chip" style="background:var(--danger-bg);color:var(--danger-text)">Austritt</span>
<span class="chip" style="background:var(--info-bg);color:var(--info-text)">Versetzung</span>
<span class="chip" style="background:var(--purple-bg);color:var(--purple-text)">Befoerderung</span>
<span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Vertragsaenderung</span>
<span class="chip" style="background:var(--accent-200);color:var(--brand-700)">Import</span>
</div>
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
Rot bleibt Rot, Gruen bleibt Gruen: das Manual regelt die Identitaet, nicht die
Rueckmeldung. Violett ist nachgezogen — gegen den Fehler-Chip lag es bei dE 8.0
und war im Vorbeigehen dieselbe Flaeche, jetzt bei dE 15.0.</p>
</div>
<div class="card" style="grid-column:1/-1">
<h3>Liste</h3>
<table>
<thead><tr><th>Name</th><th>Pers.-Nr.</th><th>Bereich</th><th>Eintritt</th><th>Status</th></tr></thead>
<tbody>
<tr><td><b>Aigner, Katharina</b></td><td class="num">1042</td><td>Produktion</td><td class="num">01.03.2019</td>
<td><span class="chip" style="background:var(--success-bg);color:var(--success-text)">Aktiv</span></td></tr>
<tr><td><b>Berger, Anna</b></td><td class="num">1187</td><td>Vertrieb</td><td class="num">15.09.2021</td>
<td><span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Abwesend</span></td></tr>
<tr><td><b>Winkler, Michaela</b></td><td class="num">1590</td><td>Technik</td><td class="num">01.10.2026</td>
<td><span class="chip" style="background:var(--accent-200);color:var(--brand-700)">Geplant</span></td></tr>
</tbody>
</table>
<p style="font-size:12px;color:var(--ink-muted);margin:12px 0 0">
Die Zeile unter dem Zeiger wird blau angedeutet, nicht rosa: gegen die warme
Seitenflaeche ist ein kuehler Ton deutlicher, und Blau heisst in dieser
Oberflaeche „reagiert auf dich".</p>
</div>
<div class="card">
<h3>Navigation</h3>
<div class="nav">
<div class="hd">
<img src="../public/brand/manner-logo.svg" alt="Manner" width="60" height="24"
style="padding:8px;box-sizing:content-box">
<span style="font-weight:800;font-size:15px;color:var(--brand-700)">Alpenwerk HR</span>
</div>
<a href="#" class="active"><span class="dot"></span>Uebersicht</a>
<a href="#"><span class="dot"></span>Mitarbeiter:innen</a>
<a href="#"><span class="dot"></span>Organigramm</a>
</div>
</div>
<div class="card">
<h3>Organigramm — die vier Knotenarten</h3>
<div style="display:flex;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700">
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--brand-500)"></span>Person</span>
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--purple-text)"></span>Rolle</span>
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--ink-muted)"></span>Einheit</span>
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--accent-500)"></span>offene Stelle</span>
</div>
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
Die offene Stelle war vorher ein blasses Blau und damit eine schwaechere Person.
In Rosa ist sie etwas anderes — auch dann noch, wenn herausgezoomt nur die
Streifen uebrig sind.</p>
</div>
</div>
<!-- ══════════════════════════════════════════════════════════ -->
<h2>5 · Das Logo und sein Freiraum</h2>
<p>CD §4.1 verlangt „genuegend Freiraum rundum (X, X/3)". X ist hier als Hoehe des
Logos gelesen, der Freiraum also als ein Drittel davon — die gestrichelte Linie zeigt
ihn. Er steckt im Bauteil selbst, nicht in den Aufrufstellen.</p>
<div class="logo-demo">
<div class="on-white">
<span class="freiraum">
<img src="../public/brand/manner-logo.svg" alt="Manner" width="150" height="60"
style="padding:20px;box-sizing:content-box;display:block">
</span>
<div style="font-size:11px;color:var(--ink-muted);margin-top:8px">auf Weiss</div>
</div>
<div class="on-blue">
<span class="freiraum">
<img src="../public/brand/manner-logo.svg" alt="Manner" width="150" height="60"
style="padding:20px;box-sizing:content-box;display:block">
</span>
<div style="font-size:11px;color:#ffffffaa;margin-top:8px">auf dem Panel der Anmeldeseite</div>
</div>
</div>
<p style="font-size:12px;color:var(--ink-muted)">
§1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Die Datei
bringt ihr rosa Feld mit, das Logo ist damit auf jedem Untergrund regelkonform.</p>
<!-- ══════════════════════════════════════════════════════════ -->
<h2>6 · Was hier noch nicht entschieden ist</h2>
<div class="card">
<p style="margin-top:0"><b>Das Logo ist das Markenlogo, nicht das Unternehmenslogo.</b>
Nach §3.2 waere fuer eine Anwendung, hinter der „Josef Manner &amp; Comp. AG" als
Absender steht, das Unternehmenslogo mit dem Stephansdom-Medaillon das richtige. Es
liegt nicht vor. Die offiziellen Dateien gaebe es bei der Kreativdirektion — der
Kontakt steht auf Seite 7 des Manuals.</p>
<p><b>Die Vorlage ist aus dem PDF gezogen, nicht das Original.</b> Fuer die Testphase
traegt das; fuer die Uebergabe gehoert die offizielle Datei hinein.</p>
<p><b>Die Schrift ist Barlow, nicht DIN.</b> Nachgezaehlt ist das Manual zu 95 % in
DIN gesetzt (DIN-Regular 79 %, DIN-Bold 16 %); Helvetica Neue steht nur in den
Visitenkarten-Mustern und im Claim. DIN ist aber lizenzpflichtig, und eine
Drucklizenz deckt die Auslieferung als Webfont nicht ab. Die freien Nachbauten der
DIN 1451 sind Schilderschriften und bei 14 px in einer langen Tabelle schlechter
lesbar als das, was sie ersetzen. Barlow ist dieselbe Grotesk-Familie mit schmalen
Proportionen und geraden Abschluessen. Liegt eine Web-Lizenz fuer DIN vor, ist der
Wechsel eine Zeile in <code>app/layout.tsx</code>.</p>
<p style="margin-bottom:0"><b>Die Symbole sind nachgerechnet, nicht neu exportiert.</b>
Favicon, Apple-Symbol und die Manifest-Symbole kamen als 24-Bit-RGB und trugen
<code>#034DA1</code> als Blau. Sie liegen jetzt als RGBA vor — das verlangt der
Bildpfad des Bauwerkzeugs — und ihr Blau ist auf <code>#164194</code> gezogen,
inklusive der kantengeglaetteten Raender: je Pixel wurde bestimmt, wieviel Blau
darin steckt, und derselbe Anteil neu gemischt. Betroffen waren 5 bis 10 Prozent
der Pixel je Datei. Ein Neuexport aus der korrigierten Vorlage bliebe trotzdem der
sauberere Weg, sobald die offiziellen Dateien da sind.</p>
</div>
</div>
</body>
</html>