Files
alpenwerk-hr/docs/farbschema.html
Andrei Laas d2d5e1dabb
All checks were successful
CI / Lint, Typen, Tests, Build (push) Successful in 11m27s
CI / Migrationen auf leerer Datenbank (push) Successful in 10m2s
Drei Befunde aus dem Test: Logo, Geplant-Filter, Anstehend-Farben
**Das Logo auf der Anmeldeseite.** Statt des Schriftzugs stand dort der
Ersatztext "Manner". Die SVG-Fassung war gueltiges XML, lag im Repository und
war committet — warum sie im Betrieb nicht geladen wurde, laesst sich von hier
aus nicht feststellen; dafuer braucht es die Antwort des Servers auf die URL.

Statt das weiter zu raten, faellt die Angriffsflaeche weg: es gibt jetzt eine
Datei, manner-logo.png, der Schriftzug mit durchsichtigem Grund. Kein XML, kein
Beschnitt, kein eingebackenes Feld. Das Blau darin ist #164194, also der Wert
aus §1.1.

Damit verschwinden auch die zwei Fassungen. §1.2 laesst den Schriftzug nur zur
Gaenze auf Rosa zu, und das Manual kennt dafuer zwei Lagen: auf Weiss gehoert
er nach §4.1 in ein rechteckiges rosa Feld, in einem grossflaechigen rosa
Umfeld nach §3.1 nur mit Freiraum. Beides entsteht jetzt aus derselben Datei —
das Feld zeichnet das Bauteil, aus derselben Polsterung wie den Freiraum.

**Der Filter "Geplant" fand Ausgetretene.** Die Ableitung pruefte den Eintritt
vor dem Austritt, und wer einen Eintritt in der Zukunft hatte, galt als
geplant — auch wenn der Austritt laengst verbucht war. Das trifft genau den
No-Show (Migration 20260814100000): eingestellt, nie erschienen, Austritt vor
dem Eintrittstag. Im Bestand sind das Zeilen mit Eintritt 01.10.2026, die der
Filter mitzaehlte, waehrend die Liste daneben "Ausgetreten" anzeigte.
employees.status, das die SQL-Funktion beim Austritt setzt, sagte von Anfang
an das Richtige; falsch war die Ableitung in der Anwendung.

Ein abgeschlossener Austritt wird jetzt zuerst geprueft: er beendet das
Verhaeltnis, gleichgueltig ob der Eintritt schon war oder noch kommt. Ein
Austritt, der selbst noch bevorsteht, nimmt den Eintritt nicht zurueck — wer
am 01.10. anfaengt und am 31.12. aufhoert, ist heute geplant. Die SQL-Fassung
in lib/employee-status-filter.ts bildet dieselbe Reihenfolge ab.

Keine Migration: beide Fassungen der Regel liegen in TypeScript. In SQL wird
nur der Karenz-Teil wiederholt, fuer die Fuehrungslinie, und der ist nicht
betroffen.

**Die vier Anstehend-Chips.** Zwei davon standen in der Markenfarbe, weil die
Farbe ueber den Beschriftungstext aus der Tabelle der Protokoll-Aktionen
geholt wurde — und die kennt eine andere Sprache: "Neueinstellung", nicht
"Eintritt". Wer dort nicht steht, bekam den neutralen Chip. Ein Nachschlagen,
das bei einem Fehlschlag still etwas Plausibles liefert, faellt eben nicht auf.

Die vier haben jetzt eine eigene Zuordnung, nach dem Wert verschluesselt und
nicht nach der Beschriftung: Eintritt gruen, Austritt rot, Wiedervorlage gelb,
Rueckkehr violett. Tuerkis waere fuer die Rueckkehr die naheliegendere Lesart
gewesen, kam gegen das Gruen des Eintritts aber nur auf dE 13.0; Violett steht
mit 30.8 eindeutig daneben. Schwaechstes Paar der vier: 14.2, schwaechster
Kontrast 5.49:1.

Zehn Tests dazu, darunter die drei Faelle, an denen der Filter gescheitert war.

Lint, Typen, Schemaabgleich, 562 Tests und der Build sind sauber. Im Browser
nicht gesehen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-15 20:42:42 +02:00

401 lines
23 KiB
HTML

<!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;
background: var(--accent-500); border-bottom: 1px solid var(--accent-600); }
.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-rosa { background: var(--accent-500); 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><b>Rosa ist die fuehrende Farbe.</b> Es traegt die grossen Flaechen — das Panel der
Anmeldeseite, das Band ueber der Anwendung aus Kopfzeile und Logokopf. Blau ist die
Farbe der kleinen, bedienbaren Dinge: Knopf, Link, Fokusring, ausgewaehlter Eintrag.
Dasselbe Verhaeltnis steckt im Schriftzug selbst — blaue Lettern auf rosa Feld.</p>
<p>Welche Farbe welche Rolle bekommt, ist dabei 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>brand-700 auf Manner Rosa</td><td class="num">6.60:1</td><td class="ok">AA</td>
<td><b>so steht Text im rosa Band</b> — dieselbe Paarung wie im Schriftzug</td></tr>
<tr><td>ink-muted auf Manner Rosa</td><td class="num">2.33:1</td><td class="bad">faellt durch</td>
<td>deshalb steht im rosa Band nichts Gedaempftes mehr</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.png" 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>Anstehend — die vier Arten</h3>
<div class="chips">
<span class="chip" style="background:var(--success-bg);color:var(--success-text)">Eintritt</span>
<span class="chip" style="background:var(--danger-bg);color:var(--danger-text)">Austritt</span>
<span class="chip" style="background:var(--purple-bg);color:var(--purple-text)">Rückkehr</span>
<span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Wiedervorlage</span>
</div>
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
Jemand kommt (gruen), jemand geht (rot), ein Termin will erledigt werden (gelb) —
und die Rueckkehr ist keines davon, also eine eigene Klasse. Tuerkis waere die
naheliegendere Lesart gewesen, kam gegen das Gruen aber nur auf dE 13.0; Violett
steht mit 30.8 eindeutig daneben. Schwaechstes Paar der vier: 14.2.</p>
</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>Eine Datei: <code>manner-logo.png</code>, der Schriftzug mit durchsichtigem Grund.
§1.2 laesst ihn nur zur Gaenze auf Rosa zu, und das Manual kennt dafuer zwei Lagen —
beide entstehen aus derselben Datei, den Unterschied macht das Bauteil.</p>
<div class="logo-demo">
<div class="on-white">
<span class="freiraum" style="background:var(--accent-500)">
<img src="../public/brand/manner-logo.png" 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 — das rosa Feld zeichnet das Bauteil (§4.1)</div>
</div>
<div class="on-rosa">
<span class="freiraum">
<img src="../public/brand/manner-logo.png" alt="Manner" width="150" height="60"
style="padding:20px;box-sizing:content-box;display:block">
</span>
<div style="font-size:11px;color:var(--brand-700);margin-top:8px">
im rosa Umfeld — nur Freiraum, kein eigenes Feld (§3.1)</div>
</div>
</div>
<p style="font-size:12px;color:var(--ink-body)">
Der Freiraum X/3 (gestrichelt) steckt im Bauteil selbst und nicht in den
Aufrufstellen — sonst haengt seine Einhaltung daran, dass jede einzelne daran denkt.
Auf Weiss ist er zugleich der Rand des rosa Feldes.</p>
<div class="note">
<b>Warum nicht mehr als SVG.</b> Vorher lagen hier zwei aus dem Manual gezogene SVG,
eines mit eingebackenem rosa Feld und eines ohne. Auf der rosa Flaeche blieb das
eingebackene Feld als Rechteck sichtbar, und im Betrieb wurde die Datei ueberhaupt
nicht geladen — die Anmeldeseite zeigte nur den Ersatztext „Manner". Ein PNG mit
durchsichtigem Grund hat keine dieser Angriffsflaechen: kein XML, kein Beschnitt,
kein Feld, das an der falschen Stelle endet.
</div>
<!-- ══════════════════════════════════════════════════════════ -->
<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>