# DESIGN.md — United4Business (Alexander Kuschick, Detmold)

> Design-Spezifikation für den Build-Agenten. Verbindlich.
> Farbwahrheit: `brand/brand-measurements.json` (Messung vom 2026-10-20, Freistellung rembg).
> Jeder Hex in diesem Dokument steht wörtlich in `brand/tokens.css` **und** in den Messwerten.
> Gestaltungsrahmen: Richtung B «Bande am Spielfeldrand» (Wettbewerbssieger), Polarität gedreht
> (siehe §1, `DUNKELANTEIL_ZIEL`).

---

## 1. Visual Theme & Atmosphere

### Die Design-Welt

Die Seite ist gebaut wie die Werbebande am Rand eines Platzes: ein Stapel randloser Flächen über
die volle Bildschirmbreite, jede mit **genau einer** Botschaft in breiten Versalien, dazwischen
keine Lücke, sondern eine 1px-Linie. Man kippt beim Scrollen von Bande zu Bande, ohne Übergang,
ohne Karten, ohne Raster — der Rhythmus liegt im Innenpolster, nie im Zwischenraum. Zwei dunkle
Banden rahmen die Seite (die erste, die letzte), eine dritte schmale dunkle Bande trägt in der
Mitte die Zahlen; alles dazwischen ist hell, weil dieses Geschäft kein Stadion ist, sondern ein
Schreibtisch mit 29 Jahren Akten darauf. Es soll sich anfühlen wie ein Brett am Zaun: physisch,
laut in der Ansage, vollkommen schmucklos in der Ausführung. Kein Foto, kein Icon-Raster, kein
Verlauf — die einzige handgemachte Form der ganzen Marke ist der Pinselstrich aus dem Logo, und
der kommt höchstens zweimal pro Seite vor, immer vom Bandenrand abgeschnitten.

### Logo-Analyse (angeschaut: `brand/logo.png`, 1024×1024, freigestellt)

Was tatsächlich im Bild steht — nicht, was man erwarten würde:

1. **Die Wortmarke ist eine weit gesperrte Versal-Grotesk mit leichtem Strichstärkenkontrast.**
   «UNITED4SPORTS» läuft auf einer Zeile, die Buchstaben stehen einzeln und breit, die Endungen
   sind minimal ausgestellt (Optima-Anmutung), die Sperrung ist deutlich **positiv** — nirgends
   negativ. Das Suffix «.com» läuft in Gemeinen und ist der einzige Bruch in der Versalzeile.
2. **Die «4» ist kein Schriftzeichen.** Sie ist ein breiter, dunkler Pinselstrich, der die Zeile
   vertikal durchbricht: Er ragt deutlich über die Versalhöhe und weit unter die Grundlinie, die
   Schlaufe ist offen gemalt, die Kante franst. Das ist das **einzige** handgemachte Element der
   ganzen Marke — und das einzige Element, das den Markenwechsel überlebt: aus `UNITED4SPORTS`
   wird `UNITED4BUSINESS`, die Vier bleibt. Sie ist deshalb nicht Dekoration, sondern der
   Vermögenswert dieser Marke.
3. **Die Marke ist fast achromatisch — mit genau einem Farbereignis.** Die Wortmarke steht in
   Grautönen, der Pinselstrich in dunklem Anthrazit; Farbe gibt es ausschliesslich in den drei
   winzigen orangen Keilen vor der Claimzeile «SPORTMANAGEMENT». Genau dieses Orange ist das, was
   die Messung als `Vibrant` herausgezogen hat (`#eb6913`). Das Logo macht damit die Einsatzregel
   selbst vor: **Orange ist ein Signal, keine Fläche.** Auf der ganzen Markenfläche nimmt es unter
   2 % ein.
4. **Die Claimzeile ist fett, eng und klein** — der Gegenpol zur breiten, luftigen Hauptzeile. Das
   Logo arbeitet also bereits mit zwei weit auseinanderliegenden Graden und keinem dazwischen.
   Genau das ist die Typo-Doktrin dieser Seite (§3).

**Was das Logo verspricht:** jemanden, der breit und ruhig auftritt, aber von Hand unterschreibt.
Kein Konzern-Baukasten, kein Startup. Ein Einzelner mit Brett am Zaun.

**Ehrlicher Vermerk:** Die vorliegende Datei ist die **United4Sports**-Marke. Ein eigenes
United4Business-Logo existiert laut Dossier, wurde aber nicht geliefert. Diese Spezifikation ist
so gebaut, dass sie den Wechsel trägt: Die Wortmarke wird auf der Seite nie als Bild gesetzt,
sondern typografisch (§3); das einzige übernommene Bildzeichen ist die Vier. Kommt das U4B-Logo
nach, ändert sich nichts ausser der Datei im Kopf und im Fuss.

### Das Signature-Motiv

**(a) Name: DIE LEITUNG.**

**(b) Was es ist und warum es zu diesem Betrieb gehört:** Eine durchgehende 1px-Linie in
`#eb6913`, die die ganze Seite durchzieht — sie steht zwischen je zwei Banden (statt eines
Abstands), sie liegt unter der aktiven Navigation, sie bildet die Unterkante jedes Formularfelds,
und sie trennt im Mandatsregister die Zeilen. Dieser Mann verkauft buchstäblich Leitungen: DSL,
Telefon, Internet, Mobilfunk, Strom, Gas. Alles, was er vermittelt, ist eine Verbindung zwischen
einem Anbieter und einem Betrieb — und sein Versprechen ist, dass diese Verbindung **ohne Umweg**
läuft, weil er frei und unabhängig ist. Eine Linie, die nirgends unterbrochen wird, ist dafür das
präzise Bild. Und sie endet **genau einmal pro Seite** nicht in einer Kante, sondern im
handgemalten Pinselstrich der Vier aus dem Logo: Dort, wo die Leitung aufhört, steht eine
Unterschrift. Das ist die ganze Positionierung in einer Form — Maschinenlinie plus Handstrich.

**(c) Anwendungs-Tabelle**

| Ort | Erscheinung | Grösse / Wert | Regel |
|---|---|---|---|
| Zwischen zwei Banden | durchgehende Linie `#eb6913` | `1px`, volle Breite, Abstand 0 | **Ersetzt** den Zwischenraum. Zwischen zwei Banden steht nie eine Lücke. |
| Hero (Bande 01) | die Vier, weiss aus der Bande ausgespart | Höhe `66vh`, rechts **und** unten vom Bandenrand angeschnitten | Liegt hinter der Wortmarke, nie darüber. Opazität 100 %, keine Transparenz. |
| Fussbande (Bande 10) | die Vier, zweiter und letzter Auftritt | Höhe `40vh`, links und unten angeschnitten | Gespiegelt ist verboten — es ist derselbe Strich, nur anders beschnitten. |
| Navigation | Leitung unter dem aktiven Punkt | `1px`, Breite = Textbreite | Nur der aktive Punkt trägt sie, nie der Hover (Hover = Farbwechsel, §4). |
| Formular | Feldunterkante und Fokus-Rahmen | `1px` Rahmen, Fokus siehe §4 | Im Feld ist die Leitung Struktur; sie wird nie zur Fehlerfarbe. |
| Mandatsregister (Bande 08) | Zeilentrenner | `1px`, volle Spaltenbreite | Trägt die Lesbarkeit der Jahreszahl-Spalte, nicht die Dekoration. |
| Print (Briefbogen, Visitenkarte) | Linie am oberen Blattrand, randabfallend | `1pt`, Abstand zur Blattkante 0 | Darunter 24 mm Luft, dann erst Text. |
| Social (Post-Kachel) | Leitung am unteren Kachelrand + Vier angeschnitten | Linie `2px` bei 1080×1080 | Pro Kachel **entweder** Linie **oder** Vier — nie beides zusammen ausser im Hero. |

**Verbote (damit das Motiv nicht zur Tapete wird):**
- **Die Vier wird nie zum Muster.** Kein Wiederholen, kein Raster, kein Wasserzeichen, keine
  Rotation, keine Spiegelung, nie mehr als **zweimal pro Seite**, nie vollständig sichtbar.
- **Die Leitung ist nie dick und nie bunt.** Keine 2px-Variante im Web, kein zweiter Farbton, kein
  gestrichelter Verlauf, keine Linie als Rahmen um eine Fläche. Sie trennt oder führt — sie
  umschliesst nie.
- **Die Leitung trägt nie Information.** Ihr Kontrast gegen die hellen Gründe liegt bei 2.99:1
  (gegen `#fcf6f3`) bzw. 3.04:1 (gegen `#444444`) — sie ist Struktur, nie Bedeutung. Nichts darf
  allein an ihrer Farbe erkennbar sein.

`SIGNATURE_MOTIV: Die Leitung — eine durchgehende 1px-Linie in Orange verbindet jede Bande, jedes Feld und jede Zeile und endet genau einmal pro Seite im handgemalten Pinselstrich-Vier aus dem Logo.`

### Modus, Dunkelanteil, Selbstbindung

`DUNKELANTEIL_ZIEL: 30%`

Nachrechenbar an der Bandenhöhe der Startseite (Desktop 1440, Werte in px):

| Bande | Inhalt | Grund | Höhe | dunkel |
|---|---|---|---|---|
| 01 | Hero | `#444444` | 840 | ✅ |
| 02 | Position: frei und unabhängig | `#fcf6f3` | 380 | — |
| 03 | Telekommunikation | `#f8ece7` | 540 | — |
| 04 | Energie | `#fcf6f3` | 460 | — |
| 05 | Sportmanagement (United4Sports) | `#f8ece7` | 420 | — |
| 06 | Ablauf in vier Schritten | `#fcf6f3` | 620 | — |
| 07 | Beleg-Zahlen | `#444444` | 240 | ✅ |
| 08 | Mandate & Google-Bewertungen | `#f8ece7` | 660 | — |
| 09 | Anfrage / Termin | `#fcf6f3` | 760 | — |
| 10 | Fuss & Kontakt | `#261e1a` | 560 | ✅ |
| | **Summe** | | **5480** | **1640 = 29.9 %** |

Regel für den Build: Wächst eine **helle** Bande (mehr Text, mobiler Umbruch), sinkt der Anteil —
das ist erlaubt. Wächst eine **dunkle** Bande über die Tabellenhöhe hinaus, ist es ein Fehler.
Auf Unterseiten gilt dieselbe Rechnung: **höchstens zwei** dunkle Banden (Hero-Kopf und Fuss),
nie eine dritte.

**Konflikt-Vermerk zur gewählten Richtung (sichtbar, nicht still gelöst):** Richtung B ist als
*dunkle* Seite geschrieben — acht von zehn Banden auf dunklem Grund. Die Ästhetik-Achse setzt
MODUS **hell** und einen Korridor von 0–35 % Dunkelanteil, und das Review misst dagegen. Gedreht
wurde deshalb die **Polarität**, nicht die Idee: Bandenstapel, Haarlinie statt Lücke, eine
Botschaft pro Bande, randlose Flächen, angeschnittene Vier, genau ein gefüllter Knopf — alles
bleibt. Inhaltlich ist das sogar die bessere Lesart: Eine Bande ist ein **dunkles Brett in einer
hellen Umgebung**, nicht eine dunkle Welt. Folge: Entgegen dem Wortlaut der Richtung wird
`surface #fcf6f3` eingesetzt, weil eine hell dominierte Seite zwei unterscheidbare helle Gründe
braucht (`#fcf6f3` und `#f8ece7`, §2).

### Kundenwunsch

`KUNDENWUNSCH_OFFEN: Reinschwarz als Markenfarbe — die Messung findet im Logo kein Reinschwarz, der nächstgelegene gemessene Ton ist #444444 (Abstand 28.9), und der Hell-Korridor (max. 35 % dunkel) verbietet eine schwarz dominierte Seite — stattdessen tragen #444444 die Hero- und Zahlenbande und #261e1a die Fussbande als dunkelster Punkt der Seite, die beiden anderen Wunschfarben sind voll eingelöst: Orange erscheint als #eb6913 (gemessener Logo-Ton, Abstand zum Wunsch vernachlässigbar) auf jeder Leitung und jedem Knopf, Weiss als #ffffff auf allen dunklen Banden.`

Im Klartext für den Kunden: Du wolltest Schwarz, Orange, Weiss. Orange und Weiss bekommst du
unverändert. Reinschwarz bekommst du **nicht** — nicht aus Geschmack, sondern weil in deinem
eigenen Logo kein Schwarz steckt (der dunkelste gemessene Ton ist `#444444`) und weil eine
schwarze Fläche in dieser Grösse den vorgegebenen Hell-Korridor sprengt. Du bekommst dafür die
zwei dunkelsten Töne, die in deiner Marke tatsächlich messbar sind — und die Fussbande in
`#261e1a` ist so dunkel wie diese Seite je wird.

---

## 2. Color Palette & Roles

Alle Werte stammen wörtlich aus `brand-measurements.json`. **Es wird kein Hex erfunden, gemischt
oder interpoliert.** Abstufungen kommen ausschliesslich aus den 12er-Skalen.

### 2.0 Die Rollentrennung der Markenfarbe (gilt vor allem Weiteren)

`#eb6913` ist die gemessene Logofarbe und **bleibt unverändert** — sie wird nicht abgedunkelt,
nicht ersetzt, nicht «korrigiert». Was getrennt wird, ist nicht die Farbe, sondern ihre **Rolle**:
Dieselbe Farbe kann Fläche sein oder Schrift sein, und für beides braucht sie einen anderen
Partner. Die Marke hat deshalb drei Töne derselben Orange-Achse — alle drei aus den Messwerten,
keiner erfunden:

| Rolle | Token | Hex | Herkunft im Messwert | Prüfpaar | Ratio |
|---|---|---|---|---|---|
| **Fläche** — die Marke als Fläche (Knopf, Leitung) | `--brand-primary` | `#eb6913` | `rollen.primary` / `skalen.primary.light[8]` | — | — |
| **Schrift auf der Fläche** | `--brand-on-primary` | `#261e1a` | `rollen.ink` | `#261e1a` auf `#eb6913` | **5.11:1** ✅ AA |
| **Die Marke als Schrift auf hellem Grund** | `--brand-primary-ink` | `#c04700` | `skalen.primary.light[10]` | `#c04700` auf `#fcf6f3` | **4.74:1** ✅ AA |

**Warum die Schrift gewechselt wurde und nicht die Marke (Entscheid, nicht Kompromiss):**
`#ffffff` trägt auf `#eb6913` nur **3.20:1** (Matrix, `aa: false`). Die Auflösung ist **nicht**,
`#eb6913` abzudunkeln — dann wäre das Logo auf der Seite eine andere Farbe als auf dem Briefbogen.
Die Auflösung ist, auf der Fläche die **Schrift** zu tauschen: Von Weiss und Schwarz trägt immer
eines von beiden, und hier trägt das dunkle Ende. Als «Schwarz» nimmt dieses System
nicht Reinschwarz (im Logo nicht gemessen, §1 Kundenwunsch), sondern den dunkelsten gemessenen
Markenton `#261e1a` — **5.11:1**. Der gefüllte Knopf trägt also ein dunkles Label auf oranger
Fläche; genau so steht das Orange auch im Logo, wo es als Signalkeil unter dunkler Schrift sitzt.

Spiegelbildlich für den umgekehrten Fall: Wo die Marke als **Schrift** auf hellem Grund gebraucht
wird (Fehlertext, Linkunterlänge, Hervorhebung), ist `#eb6913` mit **2.99:1** zu hell. Dort gilt
`--brand-primary-ink` = `#c04700` — dieselbe Farbe eine Stufe tiefer aus der gemessenen Skala.
**Zwei Abstufungen einer Marke sind normale Markenarbeit; das Überschreiben der Marke wäre es
nicht.**

Daraus folgen die drei Sätze, die der Build-Agent auswendig können muss:
1. `--brand-primary` ist **Fläche**, nie Schrift.
2. `--brand-primary-ink` ist **Schrift auf hell**, nie Fläche.
3. `--brand-on-primary` ist **Schrift auf der Primärfläche** — dunkel, nicht weiss.

### Rollen

| Rolle (Name im System) | Token | Hex | Einsatzregel | Kontrast |
|---|---|---|---|---|
| **Die Bande** (dunkler Grund) | `--brand-secondary` | `#444444` | Grund der Hero- und der Zahlenbande. Nie als Textfarbe, nie als Knopffläche. | `#ffffff` darauf **9.74:1** [Matrix] |
| **Die Nacht** (dunkelster Punkt) | `--brand-ink` | `#261e1a` | Grund **nur** der Fussbande. Sonst: Standard-Textfarbe auf allen hellen Banden. | auf `#fcf6f3` **15.29:1** [Matrix] · auf `#f8ece7` **14.14:1** [Matrix] |
| **Papier** (heller Grund A) | `--brand-surface` | `#fcf6f3` | Grund der Banden 02 / 04 / 06 / 09. Grund der Seite insgesamt. | s. o. |
| **Papier warm** (heller Grund B) | `--brand-surface-alt` | `#f8ece7` | Grund der Banden 03 / 05 / 08. Wechselt **nur** im Bandentakt, nie innerhalb einer Bande. | s. o. |
| **Die Leitung** (Signal) | `--brand-primary` | `#eb6913` | **Nur** 1px-Linie und gefüllte Knopffläche. Nie Textfarbe. Nie Flächenfüllung grösser als ein Knopf. | als Fläche mit `#261e1a`-Beschriftung **5.11:1** [nachgerechnet] |
| **Leitung Schrift** | `--brand-primary-ink` | `#c04700` | Die **einzige** erlaubte orange Schriftfarbe — ausschliesslich auf `#fcf6f3` und `#ffffff` (auf `#f8ece7` nur 4.38:1 → dort verboten, §2.0). | auf `#fcf6f3` **4.74:1** · auf `#ffffff` **5.07:1** [nachgerechnet] |
| **Zustand** | `--brand-accent` | `#dd5c00` | Fokus-Ring auf hellem Grund, Hover-Unterstreichung von Textlinks, gedrückter Zustand der Leitung. Nie Fläche, nie Fliesstext. | gegen `#fcf6f3` **3.50:1** [nachgerechnet] — genügt der 3:1-Schwelle für Nicht-Text-Kontraste |
| **Knopf gedrückt** | `--brand-primary-12` | `#562f1c` | Nur `:active` des gefüllten Knopfs. | mit `#ffffff` **11.54:1** [nachgerechnet] |
| **Schrift auf hell, zweite Stimme** | `--brand-ink-soft` | `#605651` | Beschriftungen, Hilfetext, Mikro-Etiketten auf hellem Grund. | auf `#fcf6f3` **6.66:1** [Matrix] · auf `#f8ece7` **6.16:1** [nachgerechnet] |
| **Schrift auf dunkel, erste Stimme** | `--brand-on-secondary` | `#ffffff` | Alle Versalien und alle Fliesstexte auf dunklen Banden. | **9.74:1** auf `#444444` [Matrix] · **16.37:1** auf `#261e1a` [nachgerechnet] |
| **Schrift auf dunkel, zweite Stimme** | `--brand-border` | `#d4ccc9` | Hilfetext und Mikro-Etikett auf dunklen Banden. | auf `#444444` **6.16:1** · auf `#261e1a` **10.35:1** [nachgerechnet] |
| **Feldrahmen** | `--brand-gray-9` | `#8c7e77` | 1px-Rahmen von Eingabefeldern auf hellem Grund (Nicht-Text-Kontrast ≥ 3:1). | auf `#ffffff` **3.91:1** · auf `#fcf6f3` **3.66:1** [nachgerechnet] |
| **Trenner hell** | `--brand-gray-4` | `#e2dddb` | Zeilentrenner **innerhalb** einer hellen Bande, wo die Leitung zu laut wäre (Register, Tabelle). | rein dekorativ, trägt nie Information |
| **Schrift auf Primärfläche** | `--brand-on-primary` | `#261e1a` | Label des gefüllten Knopfs und jede Schrift, die auf `#eb6913` liegt. **Nicht Weiss** — §2.0. | auf `#eb6913` **5.11:1** [nachgerechnet] |
| **Feldgrund / Weiss** | `--brand-on-secondary` | `#ffffff` | Grund von Eingabefeldern und Schrift auf dunklen Banden. Sonst keine weissen Flächen auf der Seite. | `#261e1a` darauf **16.37:1** [nachgerechnet] |

### Harte Farb-Verbote (V1–V8)

- **V1 — `#eb6913` ist nie Schrift.** Gegen `#fcf6f3` misst die Matrix **2.99:1**, gegen `#f8ece7`
  2.76:1, gegen `#ffffff` 3.20:1 — das reicht **nicht einmal für Grossschrift**. Orange als Text
  existiert ausschliesslich als `--brand-primary-ink` `#c04700` (§2.0), und auch das nur auf
  `#fcf6f3` und `#ffffff`. Wer `var(--brand-primary)` in eine `color:`-Deklaration schreibt, hat
  die Rollentrennung gebrochen.
- **V2 — auf `#eb6913` steht nie Weiss, in keiner Grösse.** Die Matrix misst `#ffffff` auf
  `#eb6913` mit **3.20:1** (`aa: false`); die `aa_large`-Ausnahme wird hier **nicht** genutzt,
  weil sie Lesbarkeit mit Gestaltung erkaufen würde (ein Knopflabel wird nicht auf 24px
  vergrössert, damit eine Schwelle greift). Auf der Primärfläche steht ausnahmslos
  `--brand-on-primary` `#261e1a` — **5.11:1**, AA in jedem Grad. Ein weisses Label auf Orange ist
  ein Blocker, egal wie gross.
- **V3 — `#dd5c00` ist nie Text.** 3.50:1 gegen `#fcf6f3`, 4.37:1 gegen `#261e1a` — beides unter
  4.5. Der Akzent ist Ring, Linie und Zustand, nichts sonst.
- **V4 — `#d4ccc9` ist auf hellem Grund niemals Schrift** (1.48:1 gegen `#fcf6f3`). Auf hellem
  Grund ist es ausschliesslich Trennlinie; als Schrift existiert es nur auf dunklen Banden.
- **V5 — keine Grauwert-Schrift unter `#605651` auf hellem Grund.** `#80746e` (4.23:1) und
  `#8c7e77` (3.66:1) sind Rahmen- und Linienfarben, keine Textfarben.
- **V6 — kein Ton aus der `dark`-Spalte der Skalen.** Diese Seite läuft im Hell-Modus; die
  `skalen.*.dark`-Reihen sind für ein Dark-Theme gemessen, das hier nicht gebaut wird.
- **V7 — keine Tailwind-Defaultfarben.** Kein `slate-800`, kein `orange-500`, kein `gray-50`. Wer
  eine Farbe braucht, die oben nicht steht, hat einen Entwurfsfehler, kein Farbproblem.
- **V8 — kein zweiter Buntton.** Kein Blau, kein Grün, keine Statusfarbe. Erfolg und Fehler im
  Formular werden über **Text und Rahmenstärke** unterschieden, nicht über Rot/Grün (§4) — die
  gemessene Palette enthält keine Semantikfarben, und erfundene wären ein Blocker.

### Verteilungsregel

Auf einem beliebigen Bildschirmausschnitt gilt: **ein** Orangeereignis sichtbar — entweder eine
Leitung oder ein Knopf. Zwei orange Ereignisse gleichzeitig im Blickfeld (Knopf *und*
Leitung-unter-Navigation) sind erlaubt, drei sind verboten.

---

## 3. Typography Rules

### Wahl

- **Display: `Chivo`** (Omnibus-Type, Google Fonts) — Schnitte **900** (Hero) und **700**
  (Bandenköpfe). Ausschliesslich Versalien, Sperrung 0.
- **Body: `Libre Franklin`** (Google Fonts) — Schnitte **400** und **700**. Trägt Fliesstext,
  Versal-Etiketten, Knopflabels **und alle Ziffern** (`font-feature-settings: "tnum"`).

### Begründung — warum Chivo und nicht X/Y/Z

Die Richtung verlangt breit laufende Versalien («Bandenschrift»). Der Kandidat der Richtung,
**Archivo Expanded**, ist durch die Font-Historie gesperrt und steht nicht zur Verfügung; es
brauchte also eine eigene Antwort auf dieselbe Aufgabe.

- **Warum Chivo:** Die einzige typografische Evidenz dieser Marke ist die Wortmarke im Logo — eine
  **Grotesk** mit offenen Punzen, breiter Versalanlage und nur leichtem Strichstärkenkontrast. Eine
  Grotesk ist damit nicht Geschmack, sondern Befund. Chivo ist eine Neo-Grotesk mit ungewöhnlich
  breiter, sehr robuster Versalanlage und vollem Gewichtsspektrum bis 900 — sie liefert den
  Plakatcharakter der Bande über **Gewicht und Versalhöhe** statt über künstlich gedehnte Glyphen.
  Zweitens ist das die ehrlichere Referenz: Echte Werbebanden am Platz sind in schwerer
  Grotesk-Versalschrift gesetzt, nicht in Expanded-Slab. Und der Strichstärkenkontrast des Logos
  wird nicht imitiert, sondern beantwortet — durch den Kontrast 900 zu 400.
- **Gegen BioRhyme Expanded** (der naheliegendste freie Expanded-Kandidat): nachgerechnet
  unbrauchbar. Das Hero-Wort läuft als `UNITED` / `4BUSINESS`, also 9 Versalzeichen in der zweiten
  Zeile. Bei einer Expanded-Versalbreite um 1.0 em passt dieses Wort auf 390px Bildschirmbreite
  (358px innerhalb des Polsters) nur bis etwa Grad 38 — der Hero verliert auf dem Telefon jede
  Präsenz und die Bande ihren Randschnitt. Chivo 900 liegt bei rund 0.72 em Versalbreite und
  trägt dieselbe Zeile bei Grad 56. Die Breite kommt bei uns von der **Bande**, nicht von der
  Dehnung der Buchstaben.
- **Gegen Anton** (Plakat-Klassiker, in PAIRINGS unter «roh/handwerklich»): nur **ein** Schnitt.
  Eine Familie, die 128px-Versalien und 16px-Fliesstext nicht aus demselben Haus bedienen kann,
  bricht die Ein-Familien-Logik, und Anton liest als Sportverein-Klischee — genau das Register,
  aus dem dieser Kunde gerade **heraus** zieht (Sportmanagement ist ausgelagert).
- **Gegen Zilla Slab** (aus der Charakter-Shortlist «klassisch»): Die Shortlist führt
  ausschliesslich Serifen- und Slab-Schriften. Eine Serife widerspricht der einzigen vorhandenen
  Logo-Evidenz (Grotesk) und würde aus einem Telekommunikations- und Energieberater einen Verlag
  machen; Zilla Slab trägt zusätzlich eine fremde, sehr präsente Marken-Identität (Mozilla) und
  hat eine schmalere Versalanlage als nötig. Abweichung von der Shortlist deshalb bewusst und mit
  Begründung an der Logo-Formsprache.
- **Warum Libre Franklin als Body:** Franklin-Gothic-Linie, 1902er Herkunft — zeitlos im Wortsinn,
  B2B-glaubwürdig, bei 16px ohne jede Manier lesbar, und mit vollständigen **Tabellenziffern**
  (`tnum`). Die Beglaubigung dieser Seite läuft über Jahreszahlen und Laufzeiten; die Ziffer
  gehört deshalb in die Textschrift, nicht ins Plakat. Gegen **Work Sans** (zu rund, zu neutral,
  kein eigener Versalcharakter für die Etiketten) und gegen **IBM Plex Sans** (liest als
  IT-Konzern-Hausschrift und würde den «Telekommunikation»-Teil zum Software-Anbieter verschieben).

**Verbotene Schriften, ohne Ausnahme:** Fraunces, Playfair Display, Inter als Display, Lora,
Merriweather sowie alles aus der Historie (Instrument Serif, Commissioner, Bitter, Encode Sans
Expanded, Familjen Grotesk, Crimson Pro, Besley, **Archivo**, Spectral, Source Serif 4).

### Hierarchie (volle Tabelle)

| Ebene | Font / Schnitt | Desktop ≥1280 | 768–1023 | <480 | Gewicht | Zeilenhöhe | Letter-Spacing | Einsatz |
|---|---|---|---|---|---|---|---|---|
| **D1 Hero** | Chivo | **128px** | 72px | 56px | 900 | 0.90 | -0.01em | Nur Bande 01, nur Versalien, max. 2 Zeilen, genau einmal pro Seite |
| **D2 Bandenkopf** | Chivo | **64px** | 48px | 32px | 700 | 0.95 | -0.01em | Die eine Botschaft einer Bande. Genau eine D2-Zeile pro Bande |
| **N Beleg-Zahl** | Libre Franklin | **32px** | 28px | 24px | 700 | 1.00 | 0 | **Nur Ziffern** mit `tnum`: Jahreszahlen, Laufzeiten, Stückzahlen, Telefonnummer |
| **E Versal-Etikett** | Libre Franklin | **16px** | 16px | 16px | 700 | 1.20 | **+0.10em** | Bandenname, Spaltenkopf, Knopflabel, Navigation. Immer Versalien |
| **B Fliesstext** | Libre Franklin | **16px** | 16px | 16px | 400 | **1.55** | 0 | Jede erklärende Passage. Max. **62 Zeichen** Zeilenlänge |
| **B+ Lead** | Libre Franklin | 16px | 16px | 16px | 700 | 1.55 | 0 | Erster Satz einer Bande, wenn er den Kopf ergänzen muss. Max. 2 Zeilen |
| **M Mikro** | Libre Franklin | **12px** | 12px | 12px | 700 | 1.40 | **+0.12em** | Bandennummer, Rechtszeile, Bildnachweis. Immer Versalien |

### Typo-Doktrin (harte Regeln)

1. **Es gibt genau fünf Grade: 128 / 64 / 32 / 16 / 12.** Die Zwischenlage **48 / 36 / 28 / 24 /
   20 ist verboten** — sie ist das Baukasten-Signal. `32` existiert **ausschliesslich für
   Ziffern** (Ebene N); eine 32px-Wortzeile gibt es nicht.
2. **Das Verbot gilt der Hierarchie, nicht der Skalierung.** Jede Ebene hat pro Breakpoint genau
   einen Wert (Tabelle oben). Dass D2 auf dem Telefon bei 32px landet, erzeugt keine neue Ebene —
   es ist dieselbe Ebene in einer anderen Breite. Eine **zusätzliche** Stufe zwischen D2 und B
   anzulegen, ist ein Blocker.
3. **Sperrung ist nie negativ ausser im Display.** D1/D2 laufen auf -0.01em (optischer Ausgleich
   der Versalhöhe), alles andere auf 0 oder positiv. Negatives Tracking im Fliesstext ist
   verboten.
4. **Gewicht 500 und 600 existieren nicht.** Libre Franklin läuft in 400 und 700, Chivo in 700 und
   900. Vier Schnitte für die ganze Seite, mehr wird nicht geladen.
5. **Versalien sind Struktur, nicht Betonung.** D1, D2, E und M sind immer Versalien; B ist nie
   Versal. Eine einzelne Versal-Hervorhebung im Fliesstext gibt es nicht.
6. **Jede Ziffer, die etwas beweist, ist tabellarisch.** `font-feature-settings: "tnum"` auf jeder
   Jahreszahl, Laufzeit, Telefonnummer und Öffnungszeit — das ist die Beglaubigung der Seite.
7. **Kein Kursiv.** Weder Chivo noch Libre Franklin werden kursiv geladen; Zitate stehen in
   Anführungszeichen, nicht in Schräglage.
8. **Fliesstext bricht bei 62 Zeichen.** `max-width: 62ch` auf jedem B-Block, ausnahmslos.

### Ladung

```
Chivo: 700, 900 (latin, latin-ext) — display: swap, nur Versalien im Einsatz
Libre Franklin: 400, 700 (latin, latin-ext) — display: swap
```
Fallback-Kette: `'Chivo', 'Arial Black', Impact, sans-serif` · `'Libre Franklin', 'Helvetica Neue', Arial, sans-serif`.

---

## 4. Component Stylings

Lesart der Tabellen: **jede Zelle ist ein Wert, kein Adjektiv.** Fehlt ein Zustand, steht dort,
warum es ihn nicht gibt.

### 4.1 Knopf — `btn-primary` (der einzige gefüllte Knopf der Seite)

Geometrie: Höhe `56px` (Touch ≥ 44px erfüllt), Innenpolster `0 24px`, Radius `4px`, Label Ebene E
(16px / 700 / Versal / +0.10em), kein Schatten in keinem Zustand.
Tokens: Fläche `var(--brand-primary)`, Label `var(--brand-on-primary)` — die Rollentrennung aus
§2.0 ist hier der ganze Knopf. Schreibe nie `color: #ffffff` auf diese Fläche.

| Zustand | Fläche | Schrift | Rahmen | Übergang | Kontrast |
|---|---|---|---|---|---|
| default | `#eb6913` (`--brand-primary`) | `#261e1a` (`--brand-on-primary`) | keiner | — | **5.11:1** [nachgerechnet] |
| hover | `#c04700` (`--brand-primary-ink`) | `#ffffff` | keiner | `background-color 300ms ease, color 300ms ease` | **5.07:1** — die Ink-Stufe darf als Fläche Weiss tragen, die Markenfläche nicht |
| active | `#562f1c` | `#ffffff` | keiner | `0ms` (sofort) | **11.54:1** |
| focus-visible | `#eb6913` | `#261e1a` | `outline: 2px solid #dd5c00; outline-offset: 2px` | `0ms` | Ring gegen `#fcf6f3` **3.50:1** |
| disabled | `#e2dddb` | `#605651` | keiner | — | **5.29:1** [nachgerechnet]; `cursor: not-allowed`, keine Opazität-Tricks |

**Auf dunkler Bande** (Hero, Fuss) bleibt die Fläche `#eb6913` mit `#261e1a`-Label — auch hier
**nicht** invertiert auf Weiss; `--brand-on-primary` ist breitenunabhängig und grundunabhängig — der Knopf
sieht überall identisch aus, das ist seine Wiedererkennung. Nur der **Fokusring wechselt auf
`#ffffff`** (`outline: 2px solid #ffffff; outline-offset: 2px`), weil `#dd5c00` gegen `#444444`
nur **2.60:1** trägt und damit unter der 3:1-Schwelle für Bedienelemente liegt.

**Auftritte:** genau **drei** pro Startseite — Bande 01 (Hero), Bande 09 (Formular-Absender),
Bande 10 (Fuss, identisch gefüllt, nicht invertiert). Ein vierter gefüllter Knopf ist ein Fehler.

### 4.2 Knopf — `btn-ghost` (offener Zweitweg)

Geometrie: Höhe `56px`, Polster `0 24px`, Radius `4px`, Label Ebene E.

| Zustand | Fläche | Schrift | Rahmen | Übergang |
|---|---|---|---|---|
| default (hell) | transparent | `#261e1a` | `1px solid #8c7e77` | — |
| hover (hell) | transparent | `#261e1a` | `1px solid #261e1a` | `border-color 160ms ease` |
| active (hell) | `#f8ece7` | `#261e1a` | `1px solid #261e1a` | `0ms` |
| focus-visible (hell) | transparent | `#261e1a` | `1px solid #261e1a` + `outline: 2px solid #dd5c00; outline-offset: 2px` | `0ms` |
| default (dunkel) | transparent | `#ffffff` | `1px solid #ffffff` | — |
| hover (dunkel) | `#ffffff` | `#261e1a` | `1px solid #ffffff` | `background-color 300ms ease, color 300ms ease` — **Inversion ohne Bewegung** |
| active (dunkel) | `#d4ccc9` | `#261e1a` | `1px solid #d4ccc9` | `0ms` |
| focus-visible (dunkel) | transparent | `#ffffff` | `outline: 2px solid #ffffff; outline-offset: 2px` | `0ms` |
| disabled | — | — | — | **Existiert nicht.** Der Geisterknopf steht nur an Stellen, an denen die Handlung immer möglich ist (Telefon, Anfahrt). Es wurde kein deaktiviertes Paar gemessen, also wird keines erfunden. |

**Verbot:** `transform`, `scale`, `translate` in **keinem** Knopfzustand. Diese Marke bewegt sich
nicht, sie kippt die Farbe.

### 4.3 Textlink im Fliesstext

| Zustand | Schrift | Dekoration |
|---|---|---|
| default (hell) | `#261e1a` | `underline`, `text-underline-offset: 3px`, `text-decoration-thickness: 1px`, Farbe `#dd5c00` via `text-decoration-color` |
| hover (hell) | `#261e1a` | `text-decoration-thickness: 2px`, `text-decoration-color: #c04700`, `160ms ease` |
| focus-visible | `#261e1a` | `outline: 2px solid #dd5c00; outline-offset: 2px` |
| default (dunkel) | `#ffffff` | `underline`, Unterlänge `text-decoration-color: #eb6913` |
| hover (dunkel) | `#ffffff` | `text-decoration-thickness: 2px` |

**Regel (Zugänglichkeit):** Links im Fliesstext sind **immer unterstrichen**. Ein Link, der sich
nur durch Farbe unterscheidet, ist verboten — `#eb6913` trägt gegen jeden hellen Grund unter 3:1.

### 4.4 Eingabefeld — `field`

Geometrie: Höhe `56px` (Textarea `168px`), Innenpolster `16px`, Radius `4px`, Grund `#ffffff`,
Schrift Ebene B (16px/400 — **nie kleiner**, sonst zoomt iOS beim Fokus), Beschriftung über dem
Feld in Ebene E, Abstand Label→Feld `8px`, Feld→Feld `24px`.

| Zustand | Grund | Rahmen | Schrift | Hinweis |
|---|---|---|---|---|
| default | `#ffffff` | `1px solid #8c7e77` | `#261e1a` | Rahmen gegen `#ffffff` **3.91:1** — über der 3:1-Schwelle für Bedienelemente |
| hover | `#ffffff` | `1px solid #605651` | `#261e1a` | `border-color 160ms ease` |
| focus-visible | `#ffffff` | `1px solid #261e1a` | `#261e1a` | zusätzlich `outline: 2px solid #dd5c00; outline-offset: 2px`. Der Rahmenwechsel allein genügt **nicht** — der Ring ist Pflicht |
| filled | `#ffffff` | `1px solid #605651` | `#261e1a` | Platzhalter verschwindet; das **Label bleibt stehen** (kein Floating-Label) |
| error | `#ffffff` | `2px solid #261e1a` | `#261e1a` | Fehlertext darunter, Ebene B 16px in `#c04700` (`--brand-primary-ink`, **4.74:1** gegen `#fcf6f3`), Abstand `8px`, davor das Zeichen «→ ». **Kein Rot** — V8 |
| disabled | `#f6f4f3` | `1px solid #d4ccc9` | `#605651` | `cursor: not-allowed` |

**Platzhalter:** `#605651` auf `#ffffff` (**7.13:1**). Platzhalter ersetzt nie ein Label.
**Pflichtfelder:** mit dem Wort «Pflicht» in Ebene M hinter dem Label, nie mit einem Sternchen.
**Checkbox (Datenschutz):** 24×24px, Radius `4px`, Rahmen `1px solid #8c7e77`, im Zustand `checked`
Fläche `#eb6913` mit Haken in `#261e1a`; Trefferfläche inkl. Text ≥ 44px hoch.
**Erfolgsmeldung nach Absenden:** ersetzt das Formular durch eine D2-Zeile «DANKE.» plus einen
B-Block mit dem Rückrufversprechen. Kein Grün, kein Häkchen-Icon, kein Modal.

### 4.5 Bande (der Karten-Ersatz) — `band`

Diese Seite hat **keine Karten**. Die Bande ist der einzige Container.

| Eigenschaft | Wert |
|---|---|
| Breite | `100%`, randlos (`full-bleed`), nie in einem Container zentriert |
| Innenpolster Desktop | `112px` oben/unten, `112px` links/rechts (`--space-6`) |
| Innenpolster 768–1023 | `72px` / `72px` (`--space-5`) |
| Innenpolster <480 | `40px` / `24px` (`--space-4` / `--space-3`) |
| Aussenabstand | **0** — zwischen zwei Banden liegt nur die Leitung |
| Trennung | `border-top: 1px solid #eb6913` auf **jeder** Bande ausser der ersten |
| Radius | `0` |
| Schatten | keiner (E0, §6) |
| Inhalt | genau **eine** D2-Zeile, optional **ein** E-Etikett darüber, optional **ein** B-Block (≤62ch), optional **ein** Register |

### 4.6 Register-Zeile (Mandate, Leistungen, Ablauf) — `row`

Ersetzt jedes Icon-Raster und jede Kachel.

| Eigenschaft | Wert |
|---|---|
| Aufbau | links Ebene E (Name / Schritt), rechts Ebene N mit `tnum` (Jahr / Laufzeit), rechtsbündig |
| Höhe | min. `72px`, vertikal zentriert |
| Trenner | `border-bottom: 1px solid #e2dddb` auf hellem Grund; `1px solid #b8ada7` auf dunklem Grund (**4.44:1** gegen `#444444`) |
| Beschreibung | Ebene B darunter, max. 62ch, Abstand zum Namen `8px` |
| hover | nur wenn die Zeile verlinkt ist: Grund wechselt auf `#f8ece7` (auf `#fcf6f3`-Banden), `160ms ease` |
| focus-visible | `outline: 2px solid #dd5c00; outline-offset: -2px` (innen, damit der Ring nicht über die Bandenkante tritt) |

### 4.7 Navigation — `nav`

| Eigenschaft | Wert |
|---|---|
| Position | über der Hero-Bande liegend, **transparent**, ohne Fond, Höhe `96px`, Polster `0 112px` |
| Beim Scrollen | wird ab `80px` Scrolltiefe zu `position: fixed`, Fläche `#261e1a`, Höhe `72px`, `border-bottom: 1px solid #eb6913`. Übergang `background-color 300ms ease` — **kein Ein-/Ausblenden, kein Slide** |
| Punkte | Ebene E, Farbe `#ffffff` auf dunklem Fond |
| hover | Farbe `#ffffff`, zusätzlich `box-shadow: inset 0 -1px 0 #eb6913` (die Leitung erscheint) |
| aktiv | `#ffffff` + dauerhafte Leitung `inset 0 -2px 0 #eb6913` |
| focus-visible | `outline: 2px solid #ffffff; outline-offset: 2px` |
| rechts | «Kontakt» ist **dauerhaft sichtbar**, auch mobil, als `btn-ghost` in der dunklen Variante, Höhe `44px` |
| mobil (<768) | Punkte kollabieren in `menu` (Lucide, 24px); offenes Menü = **volle dunkle Bande** `#261e1a` über den ganzen Bildschirm, Punkte in D2-Grad (32px), untereinander, je durch `1px solid #eb6913` getrennt. Kein Overlay-Blur, keine Seitenschublade |

### 4.8 Zitat / Bewertung — `quote`

Kein Kasten, kein Anführungszeichen-Ornament, kein Avatar.

| Eigenschaft | Wert |
|---|---|
| Text | Ebene B, max. 62ch, in typografischen Anführungszeichen «…» |
| Urheber | Ebene E darunter, `#605651`, Abstand `12px` |
| Datum | Ebene M, `tnum`, `#605651`, Abstand `8px` |
| Trennung mehrerer Zitate | `1px solid #e2dddb`, Abstand `40px` darüber und darunter |
| Google-Block | Die Bewertungen werden als **Text** gesetzt (kein eingebettetes Google-Widget, kein fremder iFrame — nDSG/DSGVO). Sternbewertung als Ebene N mit `tnum` («4,9»), dahinter Ebene M «GOOGLE-BEWERTUNGEN» |

### 4.9 Icons

`ICON_SET: lucide`
`ICON_STYLE: stroke-width 1.5, stroke-linecap square, stroke-linejoin miter, 24px`

**Begründung:** Die Formsprache dieser Seite ist die gerade Kante — 1px-Leitungen, Radius 0 ausser
am Knopf, randlose Flächen. Lucides konstante Strichstärke auf dem 24er-Raster hat exakt dieselbe
Logik wie die Leitung. Phosphors Stärke wäre die Weight-Achse thin→fill mit gerundeten Enden —
weicher, und damit in direktem Widerspruch zum **einen** weichen Element, das diese Marke haben
darf: dem Pinselstrich. Zwei weiche Ereignisse heben sich gegenseitig auf. Lucides runde
Standard-Enden werden deshalb auf `square`/`miter` überschrieben, damit kein Icon weicher ist als
eine Bandenkante.

**Einsatz, knapp:** genau fünf Icons auf der ganzen Site — `phone`, `mail`, `map-pin`, `clock`,
`menu`/`x`. Nur in der Fussbande und im mobilen Menü. **Verboten:** ein Icon neben einer Leistung,
ein Icon im Knopf, ein Icon als Aufzählungszeichen, ein Icon-Raster.

---

## 5. Layout Principles

### 5.1 Spacing-Doktrin (verbindlich, 8er-Basis)

| Token | px | Einsatz in diesem Projekt |
|---|---|---|
| `--space-1` | **8** | Label→Feld, Name→Datum, Zeile→Trenner, Fehlertext→Feld |
| `--space-2` | **12** | D2-Kopf→Lead innerhalb derselben Bande, Zitat→Urheber |
| `--space-3` | **24** | Zwischen Gruppen: Text→Knopf, Feld→Feld, Knopf→Knopf, seitliches Polster <480 |
| `--space-4` | **40** | Grosse Gruppentrennung **innerhalb** einer Bande: Register→Register, Zitat→Zitat; Bandenpolster oben/unten <480 |
| `--space-5` | **72** | Bandenpolster 768–1023 |
| `--space-6` | **112** | Bandenpolster Desktop (Standard) |

**Verhältnis-Gesetz:** in-Gruppe : zwischen-Gruppen : Sektion = **8 : 24 : 112** = 1 : 3 : 14 —
erfüllt die Mindestforderung 1 : 2-3 : 6+ mit Reserve. **Nähe = Zugehörigkeit:** Was
zusammengehört, klebt auf `--space-1/2`; was nicht, trennt auf `--space-3` aufwärts. Der
Mittelwert-Brei (alles ~32px) ist **verboten**; ebenso jedes Ad-hoc-Pixelpolster (`p-[37px]`).

**Besonderheit dieser Seite:** Zwischen zwei Banden steht **kein** Spacing-Token, sondern `0` plus
die Leitung. Der gesamte Rhythmus lebt im Innenpolster. Das ist die wichtigste Layoutregel
überhaupt — wer zwischen zwei Banden `margin` setzt, zerstört die Idee.

### 5.2 Zeilenhöhe und Sperrung je Grössenstufe

| Stufe | Zeilenhöhe | Sperrung |
|---|---|---|
| ≥64px (D1/D2) | **0.90 / 0.95** | -0.01em |
| 32px (N, Ziffern) | 1.00 | 0 |
| 16px Fliesstext (B) | **1.55** | 0 |
| 16px Versal (E) | 1.20 | +0.10em |
| 12px Versal (M) | 1.40 | +0.12em |

**Regel:** Kopf→Fliesstext ist immer enger (`--space-2` = 12px) als Fliesstext→nächste Gruppe
(`--space-3` = 24px). Zugehörigkeit vor Symmetrie.

### 5.3 Container, Raster, Asymmetrie

- **Die Bande ist randlos.** Es gibt keinen zentrierten Seitencontainer. Der Inhalt sitzt im
  Innenpolster der Bande, **linksbündig**, Textblöcke auf `max-width: 62ch`.
- **Nichts ist zentriert** ausser der Erfolgsmeldung nach dem Absenden des Formulars. Keine
  zentrierten Überschriften, keine zentrierten Knöpfe, kein zentrierter Hero.
- **Asymmetrie-Prinzip:** Auf der ganzen Site existiert **höchstens ein** dreispaltiges Raster —
  es ist die Zahlenbande 07 (vier Zahlen in einer Reihe zählt als Register, nicht als Raster).
  Praktisch heisst das: **kein** 3er-Raster auf der Startseite. Alles andere ist ein
  einspaltiges Register, das die volle Bandenbreite nutzt.
- **Die 62-Zeichen-Regel schlägt die Bandenbreite.** Auf 1920px bleibt der Fliesstext schmal und
  links — die leere rechte Hälfte ist die Bande, nicht ein Fehler.
- **Hero-Satz:** Wortmarke linksbündig auf der vertikalen Mitte, Vier dahinter rechts und unten
  angeschnitten, darunter die Leitung über die volle Breite, darunter eine einzige 16px-Zeile,
  rechts daneben der Knopf.

### 5.4 Seitenstruktur

| Seite | Banden | Zweck |
|---|---|---|
| **Start** | 10 (Tabelle §1) | Firmenporträt in einem Scroll — wer, was, wie, Beleg, Anfrage |
| **Leistungen** | 5 (Kopf dunkel, Telekommunikation, Energie, Sportmanagement, Anfrage) | Die drei Felder im Register, je mit B-Block |
| **Alexander Kuschick** | 5 (Kopf dunkel, Person, Agentur Kuschick → United4Business, Ablauf, Fuss) | Wer dahintersteht und wie das Haus aufgestellt ist |
| **Kontakt & Termin** | 4 (Kopf dunkel, Formular, Erreichbarkeit, Fuss) | Das Ziel der Seite |
| Impressum / Datenschutz | 2 (Kopf, Text) | Pflicht. Fliesstext-Ebene B, keine D2-Zeilen ausser dem Titel |

Mehr als diese Seiten gibt es nicht — der Kunde ist «kein Freund von ewig langen Seiten».

---

## 6. Depth & Elevation

**Philosophie:** *Tiefe entsteht in dieser Marke durch den Bandenwechsel, nicht durch Schatten.*
Eine Werbebande steht am Zaun — sie schwebt nicht. Deshalb hat das System nur **drei** Stufen, und
die mittlere ist bewusst **ein einziger harter Layer** statt der üblichen zwei bis drei weichen:
weiche Mehrfachschatten sind das Vokabular von Software-Oberflächen, nicht von Brettern.

| Stufe | Name | Wert | Einsatz |
|---|---|---|---|
| **E0** | **Bande** | `box-shadow: none` | **Standard.** Jede Bande, jedes Register, jedes Zitat, jeder Knopf, jedes Feld im Ruhezustand. 95 % der Seite liegt auf E0 |
| **E1** | **Kante** | `--brand-shadow`: `0 1px 0 rgb(38 30 26 / 0.12)` | Genau zwei Fälle: die **fixierte Navigation** nach dem Scrollen und die **mobile Telefonleiste** am unteren Rand. Ein harter 1px-Absatz, kein Weichzeichner |
| **E2** | **Flutlicht** | `--brand-shadow-lift`: `0 2px 0 rgb(38 30 26 / 0.16), 0 12px 32px rgb(38 30 26 / 0.10)` | Genau **ein** Fall auf der ganzen Site: das geöffnete mobile Menü über dem Seiteninhalt. Zwei Layer — eine harte Kante, dahinter ein weiter, sehr schwacher Abfall |

**Regeln:**
- Schatten sind immer `rgb()`/`rgba()` mit den Kanälen von `#261e1a` (38 30 26) — **nie** ein
  Hex-Schatten, nie reines Schwarz.
- **Kein Hover erzeugt Elevation.** Keine Karte hebt sich, nichts bekommt beim Zeigen einen
  Schatten. Zustandswechsel sind Farbwechsel (§4).
- **Keine Stufe zwischen E1 und E2.** Wer «ein bisschen mehr Tiefe» braucht, wechselt stattdessen
  den Bandengrund.

---

## 7. Do's and Don'ts

### Do

1. **Setze pro Bande genau eine Botschaft.** Eine D2-Zeile, darunter höchstens ein B-Block von
   62 Zeichen Breite und ein Register. Wenn eine Bande zwei Dinge sagen will, sind es zwei Banden.
2. **Setze zwischen zwei Banden die Leitung, nie eine Lücke.** `border-top: 1px solid #eb6913`,
   `margin: 0`.
3. **Beglaubige jede Behauptung mit einer tabellarischen Ziffer.** Jeder Mandatsname bekommt eine
   Jahreszahl (`tnum`), jede Aussage über Dauer eine Zahl. «Seit 1997» schlägt «langjährig»,
   «SG Holzhausen-Barntrup, seit 2019» schlägt «viele zufriedene Kunden».
4. **Halte die gefüllte orange Fläche auf Knopfgrösse.** Ein Knopf pro Bande, drei pro Seite,
   immer dasselbe Label «TERMIN VEREINBAREN».
5. **Setze die Telefonnummer auf dem Telefon als eigenen 56px-Treffer** in einer fixierten
   Bodenleiste (`#261e1a`, Leitung oben, `tel:`-Link, E-Label + N-Ziffern).
6. **Gib jedem fokussierbaren Element einen sichtbaren Ring** — 2px, 2px Abstand, `#dd5c00` auf
   hell, `#ffffff` auf dunkel. Tastaturbedienung ist auf einer Seite mit drei Knöpfen die halbe
   Zugänglichkeit.
7. **Lass die rechte Bildschirmhälfte leer, wenn der Text zu Ende ist.** Leere ist hier das
   Material, nicht der Fehler.
8. **Schreibe die Vier in jedes Format mit** — Hero und Fuss im Web, Blattkopf im Print,
   Kachelrand im Social. Immer angeschnitten.

### Don't

1. **Kein zentrierter Gradient-Hero.** Kein Verlauf irgendwo auf dieser Seite — nicht als
   Hintergrund, nicht als Überblendung über die Vier, nicht als Knopffüllung. Flächen sind flach.
2. **Kein Icon-Raster und keine Leistungs-Kacheln.** Drei Leistungen in drei Kästen mit drei Icons
   ist exakt das Baukasten-Bild, das diese Richtung ausschliesst. Leistungen sind Banden und
   Register.
3. **Kein Schriftgrad ausser 128 / 64 / 32 / 16 / 12** (plus die Breakpoint-Werte der Tabelle in
   §3). Kein 24, kein 20, kein 18. 32 ist nur für Ziffern.
4. **`#eb6913` ist nie Schrift und nie Fläche grösser als ein Knopf** (2.99:1 gegen `#fcf6f3`).
   Keine orange Sektion, kein oranger Kasten, keine orange Überschrift.
5. **Kein Radius ausser 4px** — und den gibt es nur an Knopf, Feld und Checkbox. Keine runden
   Ecken an Banden, Bildern, Registern, Zitaten. **Keine Pill-Knöpfe** (`9999px`).
6. **Keine Logowand aus Vereinswappen** und keine Fremdlogos. Es sind zu wenige belegte Namen
   (fünf), und Beglaubigung läuft hier über gesetzte Namen mit Datum, nicht über Bilder.
7. **Keine Stock-Fotografie von Menschen am Laptop, keine KI-erzeugten Personen.** Diese Firma
   besitzt keine eigene Fotografie; die Bildstelle wird **gestrichen**, nicht gefüllt (§10). Ein
   Porträt von Alexander Kuschick darf nur erscheinen, wenn er eine echte Aufnahme liefert.
8. **Keine Animation ausser Farbwechsel.** Kein Scroll-Reveal, kein Parallax, kein Zähler, der
   hochläuft, kein `transform` auf irgendeinem Zustand. `prefers-reduced-motion` ist trivial
   erfüllt, weil es nichts zu reduzieren gibt.
9. **Kein zweiter Buntton, keine Semantikfarbe.** Fehler sind `#261e1a`-Rahmen auf 2px plus Text
   in `#c04700`, nicht rot.
10. **Keine weisse Fläche ausser im Eingabefeld.** `#ffffff` (`--brand-on-secondary`) ist
    Feldgrund und Schrift auf dunklen Banden — nie ein Seitengrund (dafür gibt es `#fcf6f3`) und
    **nie Schrift auf Orange** (§2.0, V2).
11. **Die Vier wird nie gedreht, gespiegelt, getönt oder wiederholt** und nie als vollständige
    Figur gezeigt. Sie ist angeschnitten oder sie ist nicht da.
12. **Kein eingebettetes Google-Widget und kein fremder iFrame** für Bewertungen oder Karte.
    Bewertungen sind Text, die Anfahrt ist eine Adresse plus Textlink.

---

## 8. Responsive Behavior

### Breakpoints

| Name | Breite | Was passiert |
|---|---|---|
| **Wide** | ≥1280px | D1 128px, Bandenpolster 112px, Navigation offen, Vier auf 66vh |
| **Desktop** | 1024–1279px | D1 **96px**, D2 64px, Polster 112px, sonst unverändert |
| **Tablet** | 768–1023px | D1 **72px**, D2 **48px**, N 28px, Polster **72px**, Navigation noch offen, Vier auf 50vh |
| **Mobil** | 480–767px | D1 **64px**, D2 **40px**, N 24px, Polster 40px/24px, Navigation kollabiert zu `menu`, Telefonleiste erscheint |
| **Klein** | <480px | D1 **56px**, D2 **32px**, N 24px, Polster 40px/24px, Vier auf 38vh |

Der Hero bricht **immer** in zwei Zeilen: `UNITED` / `4BUSINESS`. Die Grade oben sind daraus
abgeleitet — neun Versalzeichen in Chivo 900 (~0.72 em) müssen in die Bandenbreite abzüglich
Polster passen: bei 390px sind das 358px nutzbar, 9 × 0.72 × 56 ≈ 363px, mit `-0.01em` Sperrung
passend. **Ein grösserer Grad auf dem Telefon ist ein Umbruchfehler, kein mutiges Design.**

### Verhalten im Einzelnen

- **Banden bleiben randlos auf jeder Breite.** Nichts wird je in einen Container eingerückt.
- **Register kollabieren nicht** — sie sind schon einspaltig. Auf <480px wandert die rechte
  Ziffernspalte unter den Namen (Abstand `--space-1`), rechtsbündig bleibt sie nicht.
- **Zahlenbande 07** läuft auf Desktop als vier Werte nebeneinander, ab <768px als vier
  Registerzeilen untereinander mit `1px solid #b8ada7`.
- **Navigation:** ab <768px Hamburger; offenes Menü ist eine volle `#261e1a`-Bande mit D2-Punkten,
  Trenner `1px solid #eb6913`, Schliessen per `x` oben rechts, Trefferfläche 44×44px.
- **Mobile Telefonleiste:** fixiert unten, Höhe 64px, Grund `#261e1a`, `border-top: 1px solid
  #eb6913`, links `phone`-Icon + Nummer (N 24px, `tnum`), rechts «ANRUFEN» (E). Elevation E1. Sie
  erscheint erst ab Scrolltiefe 80px und verschwindet nie wieder.
- **Touch-Targets ≥ 44px** ausnahmslos: Knöpfe 56px, Navigationspunkte 48px, Checkbox-Zeile 44px,
  Telefonleiste 64px.
- **390px-Regel:** Bei 390px Breite darf **nichts** horizontal scrollen. Prüfpunkte:
  Hero-Wortmarke (siehe Rechnung oben), Telefonnummer in N, die E-Mail-Adresse im Fuss (bricht an
  `@`), die Ziffernspalte im Register. `overflow-x: hidden` ist **keine** zulässige Lösung — der
  Grad wird angepasst.
- **Die Vier** wird auf jeder Breite vom Bandenrand angeschnitten; sie skaliert über `vh`, nie
  über `vw`, damit der Anschnitt auf hohen Telefonen nicht verlorengeht.

---

## 9. Agent Prompt Guide

**An den Build-Agenten, in Imperativform:**

1. **Baue die Startseite als Stapel von zehn `<section>`-Banden** nach der Höhentabelle in §1.
   Setze `margin: 0` und `border-top: 1px solid var(--brand-primary)` auf jede Bande ausser der
   ersten. Zentriere nichts.
2. **Setze die Hero-Wortmarke typografisch**, nicht als Bild: `UNITED` / `4BUSINESS` in Chivo 900,
   Versalien, Zeilenhöhe 0.90. Lege die weisse Pinsel-Vier als `background-image` (SVG, aus
   `brand/logo.svg` freigestellt) dahinter, rechts und unten vom Bandenrand angeschnitten,
   `background-repeat: no-repeat`.
3. **Verwende ausschliesslich die Variablen aus `brand/tokens.css`.** Schreibe keinen Hex-Wert in
   den Code. Kein Tailwind-Farbname.
3a. **Halte die Rollentrennung (§2.0) ein:** `--brand-primary` nur in `background`/`border-color`,
   nie in `color`. Schrift auf dieser Fläche ist immer `--brand-on-primary`. Marken-Orange als
   Schrift gibt es ausschliesslich als `--brand-primary-ink` auf `--brand-surface` oder Weiss.
   Wenn dir eine Farbe fehlt, ist es ein Entwurfsfehler — erfinde keine Sonderfarbe.
4. **Verwende ausschliesslich `--space-1..6` für jeden Abstand.** Kein `p-[37px]`, kein `gap-7`.
5. **Setze genau drei gefüllte Knöpfe auf der Startseite** (Bande 01, 09, 10), alle mit dem Label
   «TERMIN VEREINBAREN», alle nach der Zustandstabelle §4.1.
6. **Baue das Anfrageformular vollständig aus** (§4.4): Name, Firma, Telefon, E-Mail,
   Auswahlfeld «Worum geht es?» (Telekommunikation / Energie / Sportmanagement / anderes),
   Nachricht, Datenschutz-Checkbox. Feldhöhe 56px, Rahmen 1px `--brand-gray-9`, Fokus =
   Rahmenwechsel auf `--brand-ink` **plus** 2px-Ring in `--brand-accent`. Fehlertext in
   `--brand-primary-ink`, nie in `--brand-primary`.
7. **Setze `font-feature-settings: "tnum"` auf jede Ziffer**, die etwas belegt: Jahreszahlen,
   Laufzeiten, Telefonnummer, Öffnungszeiten, Bewertungsschnitt.
8. **Vermeide jede Bewegung.** Keine Scroll-Animation, kein `transform`, kein Fade-In. Übergänge
   nur auf `background-color`, `color`, `border-color`, `text-decoration-thickness`.
9. **Vermeide jedes Bild ausser der Vier.** Keine Fotostrecke, kein Hintergrundfoto, kein
   Icon-Raster, keine generierte Person. Wenn eine Stelle leer wirkt, lass sie leer.
10. **Vermeide fremde Einbettungen.** Keine Google-Maps-iFrames, keine Bewertungs-Widgets, keine
    Fonts von fremden CDNs — Chivo und Libre Franklin werden selbst gehostet (`next/font`).
11. **Setze die Sprache auf `de-DE` und die Anrede durchgehend auf «du»** (§11).
12. **Prüfe am Ende drei Dinge:** (a) Dunkelanteil ≤ 35 %, (b) bei 390px kein horizontales
    Scrollen, (c) jeder fokussierbare Punkt hat einen sichtbaren Ring.

**Bildstimmung für alle generierten Bilder:**
- **COLOR:** warmes Grau und gebrochenes Weiss als Grundton (`#444444`, `#fcf6f3`, `#261e1a`),
  **ein einziges** orange Signalelement im Bild, sonst entsättigt. Kein zweiter Buntton.
- **LIGHT:** bedecktes Nordlicht, weich und richtungslos, kein Sonnenstrahl, keine Lensflares,
  keine Studioblitze, kein Gegenlicht.
- **MOOD:** nüchtern, werktäglich, ostwestfälisch — ein Gewerbegebiet am Dienstagvormittag, nicht
  eine Skyline.

`IMAGE_STYLE: Sober documentary photography of real German small-business infrastructure — fibre ducts, distribution cabinets, provincial office corridors, a plain desk with paper contracts — under flat overcast north daylight, desaturated warm grey, no people, with exactly one small warm-orange man-made signal element in frame, no text.`

`MOODBOARD_PROMPT: A flat lay mood board on warm off-white paper: a dark grey painted wooden advertising board leaning against a wall, a single orange hairline of cable running edge to edge, a coil of orange fibre, a folded contract, a landline handset, photographed from directly above in flat overcast daylight, desaturated warm grey palette with one orange accent, no text, no people, no logos.`

---

## 10. Bildsprache-Rezept

Gilt für **jedes** generierte Bild (Moodboard, Share-Bild, eventuelle Unterseiten-Bilder). Auf der
Website selbst gilt zuerst §7 Don't 7: **Die Seite läuft bildlos.** Das Rezept ist die Regel für
den Fall, dass ein Bild gebraucht wird — nicht die Einladung, eines zu setzen.

| Parameter | Vorgabe |
|---|---|
| **SUBJEKT — ja** | Infrastruktur, die dieser Mann tatsächlich vermittelt: Glasfaserbündel, Verteilerkasten, Netzwerkschrank, Telefonanlage an der Wand, Stromzähler, Gasleitung an einer Hallenfassade. Dazu das Handwerk des Beratens: Vertragsmappe, Tarifblatt, Taschenrechner, Festnetztelefon, Kugelschreiber auf Papier. Und der Ort: Gewerbegebiet Lippe, Hallenrückseite, Betriebshof, Bande am Sportplatz. |
| **SUBJEKT — nie** | Menschen (weder echt noch generiert), Handschlag, Headset-Callcenter, Serverraum mit blauen LEDs, Hochhaus-Skyline, Glas-Lobby, Tablet mit erfundener Oberfläche, Windrad im Sonnenuntergang, Glühbirne als Energie-Symbol, Fussballstadion. |
| **LICHT** | Bedeckter Tageshimmel, Nordlicht, 10–15 Uhr. Weich, richtungslos, keine harten Schlagschatten, keine goldene Stunde, kein Kunstlicht-Mischlicht. Belichtung einen Hauch unter neutral — nie hochgezogen, nie glänzend. |
| **KOMPOSITION** | Frontal oder exakt von oben. Mittlere bis nahe Distanz, ein einziges Objekt im Bild, linksbündig oder mittig **auf der Fläche**, viel ruhiger Grund. Horizontlinie waagrecht; keine schrägen Kamerawinkel, keine Weitwinkelverzerrung, keine Bokeh-Spielerei. Querformat 3:2 oder Quadrat, randabfallend, **ohne Radius**. |
| **COLOR-GRADE** | Entsättigt auf die Markenwelt: Grau in Richtung `#444444`, helle Flächen in Richtung `#fcf6f3`, Tiefen in Richtung `#261e1a`, warmer (nicht kühler) Graustich. **Genau ein** orangefarbenes Element im Bild, in der Helligkeit von `#eb6913`, maximal 5 % der Bildfläche. Keine Farbverläufe, kein Teal-Orange-Grading, kein Filmkorn-Look. |
| **STIMMUNG** | nüchtern · werktäglich · belegbar |
| **NEGATIVE** | kein Text, keine Schrift, keine Logos, keine Wasserzeichen; keine Stock-Anmutung (lächelnde Teams, gestellte Blicke, Sprechblasen); keine fremden Marken oder Anbieter-Logos; keine Verläufe, kein Bokeh, keine Linsenreflexe, keine HDR-Überzeichnung; kein Blau, kein Grün, kein zweiter Buntton; keine 3D-Renderings, keine Illustrationen, keine Icons im Bild. |

`BILDREZEPT: subjekt=reale Telekom- und Energie-Infrastruktur sowie Beratungs-Handwerkszeug in Ostwestfalen, nie Menschen | licht=bedecktes Nordlicht 10-15 Uhr, weich, richtungslos, leicht unterbelichtet | komposition=frontal oder von oben, ein Objekt, mittlere Distanz, viel ruhiger Grund, 3:2 oder 1:1, randabfallend ohne Radius | grade=entsättigtes warmes Grau Richtung #444444/#fcf6f3/#261e1a mit genau einem orangen Element in der Helligkeit von #eb6913 auf max. 5 % der Fläche | negative=kein Text, keine Logos, keine Menschen, keine Stock-Anmutung, keine Verläufe, kein Bokeh, kein Blau oder Grün, keine 3D-Renderings`

---

## 11. Sprache & Ton

### Anrede-Entscheid

`SPRACHE: du`

**Begründung:** Der Kunde hat «du» ausdrücklich gesetzt (`sprache.ansprache`, Quelle: Kunde). Das
widerspricht der alten Website, die durchgehend siezt — der Widerspruch ist im Dossier als
Konflikt vermerkt und wird hier **zugunsten des Kunden** entschieden. Er trägt es inhaltlich:
Dieses Geschäft ist ein Einzelner mit 29 Jahren persönlichen Beziehungen im Kreis Lippe, der seine
Mandate über Handschlag und Telefonnummer hält, nicht über Vertriebsorganisation. «Du» ist hier
die Stimme von Alexander Kuschick selbst, in der Ich-Form — nicht die eines Unternehmens.
**Das «du» ist nie kumpelhaft.** Es wird mit vollständigen Sätzen, Fachbegriffen und ohne jede
Verkleinerungsform gesprochen; die Repräsentativität kommt aus der Kürze, nicht aus der Distanz.

**Ausnahme (hart):** Impressum, Datenschutz und Widerrufsbelehrung stehen in neutraler
Rechtssprache ohne Anrede. Dort wird weder geduzt noch gesiezt.

**Rückfall-Schalter:** Widerspricht der Kunde beim Abnahmetermin, ist der Wechsel auf «Sie» eine
reine Textänderung — Layout, Banden, Grade und Knopflabels bleiben unverändert. Das Label «TERMIN
VEREINBAREN» funktioniert in beiden Anreden.

### Ton

`TON: klar, knapp, belegend, repräsentativ, unaufgeregt`

Grundregel: **Ein Gedanke pro Satz, ein Satz pro Zeile, eine Zahl statt eines Adjektivs.** Kein
Satz auf dieser Seite ist länger als 18 Wörter. Wo eine Behauptung steht, steht eine Jahreszahl
daneben.

### Beispielsätze

- **Hero (D1 + 16px-Zeile):**
  `UNITED4BUSINESS`
  «Freier, unabhängiger Berater für Telekommunikation und Energie. Detmold, seit 1997.»
- **Bandenkopf (D2) + Lead:**
  `FREI. UNABHÄNGIG. AN KEINEN ANBIETER GEBUNDEN.`
  «Ich sitze auf deiner Seite des Tisches. Du bekommst den Tarif, der zu deinem Betrieb passt —
  nicht den, der die beste Provision bringt.»
- **CTA:** «TERMIN VEREINBAREN» — darunter als B-Zeile: «15 Minuten am Telefon reichen für den
  ersten Überblick.»
- **Hinweistext im Formular:** «Du bekommst innerhalb eines Werktags eine Antwort von mir
  persönlich.»
- **Fehlertext:** «→ Ohne Telefonnummer kann ich dich nicht zurückrufen.»
- **Erfolgsmeldung:** `DANKE.` + «Deine Anfrage ist da. Ich melde mich innerhalb eines Werktags —
  meistens schneller.»
- **Mandatszeile (Register):** «BV Cloppenburg e.V. — 2019» / «FC Lippe Detmold e.V. — 2005»

### Wort-Verbote

Diese Wörter und Wendungen kommen auf der ganzen Site **nicht** vor:

1. «ganzheitlich», «maßgeschneidert», «individuell zugeschnitten» — Beratersprache ohne Inhalt.
2. «innovativ», «zukunftssicher», «digitale Transformation» — gehört einer Branche, in der dieser
   Betrieb nicht steht.
3. «Wir bieten Ihnen …» / «Wir freuen uns auf Ihre Anfrage» — Standardfloskel, und in der
   falschen Anrede.
4. «Rundum-sorglos-Paket», «aus einer Hand», «alles Wichtige auf einen Blick» — Baukastentext.
5. «günstig», «billig», «Schnäppchen», «Top-Preis» — dieser Betrieb verkauft Unabhängigkeit, nicht
   Preis.
6. «Experte», «Profi», «Spezialist» als Selbstbezeichnung — belegt wird mit Jahreszahl und
   Mandatsname, nicht mit Titel.

---

## 12. Known Gaps — ehrlich benannt, nicht erfunden

1. **Kein United4Business-Logo.** Vorliegt die United4Sports-Marke. Die Spezifikation trägt den
   Wechsel (Wortmarke typografisch, Vier als Bildzeichen), aber die Messwerte stammen aus der
   alten Datei. **Sobald das U4B-Logo kommt, wird neu gemessen** — die Farbrollen können sich
   ändern, die Struktur nicht.
2. **Keine Referenznamen aus Telekommunikation und Energie.** Belegt sind ausschliesslich fünf
   Sportmandate (FC Lippe Detmold 2005, SC Bielefeld 04/26, SG Holzhausen-Barntrup 2019,
   BV Cloppenburg 2019, BKK24). Sie stehen im Register der Bande 08, ausdrücklich als Mandate von
   United4Sports etikettiert. **Der Build-Agent erfindet keinen einzigen Firmennamen.** Fehlen
   Telekom-Referenzen weiterhin, bleibt die Bande bei den belegten Namen plus Google-Bewertungen.
3. **Google-Bewertungen:** Die vorliegende `gmb_place_id` gehört dem bestehenden Eintrag; ob er auf
   «Agentur Kuschick» oder «United4Sports» läuft, ist nicht bestätigt. Bewertungstexte werden als
   Text gesetzt (kein Widget) und müssen vor dem Livegang gegengelesen werden. Schnitt und Anzahl
   werden **nicht** geschätzt.
4. **E-Mail-Konflikt:** `la_gomera79@yahoo.de` (Kunde) gegen `detmold@united4sports.com`
   (Impressum). Eine Yahoo-Adresse auf einer Seite, die «repräsentativ» sein soll, untergräbt
   genau diese Wirkung. **Entscheid:** Primärkanal ist das Formular plus Telefon
   (+49 5231 9487187); eine E-Mail-Adresse erscheint nur im Impressum. **Offene Bitte an den
   Kunden:** eine Adresse unter der eigenen Domain einrichten.
5. **Öffnungszeiten-Konflikt:** Kunde «Mo–Fr 09:00–17:30» gegen Website «Sa 09:00–14:00» gegen
   Google «Di–Do 09:00–17:00, Fr bis 14:00». Gesetzt wird die **Kundenangabe**. Die
   Samstags-Erreichbarkeit wäre der stärkste Erreichbarkeits-USP — sie wird erst aufgenommen, wenn
   der Kunde sie bestätigt.
6. **Keine eigene Fotografie.** Es existiert kein einziges verwendbares Foto des Betriebs oder der
   Person. Die Seite ist deshalb bewusst bildlos gebaut (§7/§10). Ein echtes Porträt von Alexander
   Kuschick würde die Seite deutlich verbessern — generiert wird keines.
7. **Holding-Struktur noch offen.** «Agentur Kuschick wird United4Business, Holding geplant» ist
   Absicht, kein Register-Stand. Auf der Seite steht deshalb der Vorgang («Aus Agentur Kuschick
   wird United4Business»), nicht die fertige Struktur.
8. **Kein gemessenes Dark-Theme-Paar.** Die `dark`-Spalten der Skalen sind gemessen, aber nicht
   geprüft — es wird kein Dark Mode gebaut, und `prefers-color-scheme: dark` bleibt unbeantwortet.
   Das ist eine Lücke, keine Nachlässigkeit.