# Tugässer Design System

Version 2.0.0

Eine moderne, offene Brauerei-Marke für Heilbronn. Leitgedanke: **Heilbronn hat Durst. Wir haben eine Idee.** Die Website ist die Referenzimplementierung; `design-system.html` zeigt dieselben Grundlagen und Komponenten.

## Haltung und Sprache

Tugässer ist ein gemeinschaftliches Brauereiprojekt im Aufbau. Selbstbewusst auftreten, ohne fertige Produkte oder eine existierende Braustätte vorzutäuschen. Locker, konkret, trocken humorvoll: „Rezept fehlt. Leute gesucht.“ Historische Passagen, insbesondere die Enteignung der Familie Würzburger, bleiben sachlich. Zeitabhängige Sachangaben sind übernommener Inhaltsstand, keine neue Faktenprüfung.

## Einbindung

```html
<link rel="stylesheet" href="design-system.css?v=2.0.0">
<link rel="stylesheet" href="site.css?v=2.0.0">
<script src="site.js?v=2.0.0" defer></script>
```

`design-system.css` enthält Tokens und Komponenten. `site.css` enthält das Seitenlayout. Die Struktur-Primitiven aus `.od-frames/layout.css` stehen als erster `@layer od-layout` im HTML. `site.js` ergänzt Navigation und optionale dekorative Scrollbewegung. Inhalt und Links funktionieren ohne JavaScript. Die HTML-Dateien lassen sich direkt im Browser öffnen; Build und Backend sind nicht nötig.

## Farbrollen

| Token | Wert | Einsatz |
|---|---|---|
| `--tg-color-primary` | `#013565` | Logo-Blau: Text, Linien, Markenflächen |
| `--tg-color-accent` | `#8F3B32` | Mattes Ziegelrot: primäre Aktion und einzelne Aussagen |
| `--tg-color-background` | `#FFFFFF` | Grundfläche |
| `--tg-color-surface` | `#F5F7FA` | Leise abgesetzte Kapitel |
| `--tg-color-muted` | `#8CA3C2` | Dekoration; kein Fließtext auf Weiß |
| `--tg-color-border` | `#DBE2EC` | Nicht wesentliche Trennlinien |

Blau und Ziegelrot tragen weiße Schrift; auf hellen Flächen steht blauer Text. Status braucht zusätzlich Text oder Form. `.tg-inverse` kennzeichnet blaue Flächen mit weißem Fokusrahmen.

## Typografie

Public Sans wird lokal in 400, 600, 800 und 900 geladen. Fallback: `system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif`.

| Rolle | Größe | Regel |
|---|---|---|
| Display | `clamp(48px, 7vw, 112px)` | 900, Zeilenhöhe 1, kurze gesetzte Zeilen |
| Überschrift | `clamp(32px, 4vw, 64px)` | 800–900, Zeilenhöhe 1.06 |
| Fließtext | 18px / mobil 16px | 400, Zeilenhöhe 1.6, bis 70ch |
| Label | 16px | 600–900, sparsame Laufweite |

Autorentexte passend schreiben, nicht abschneiden. Sachtexte vollständig umbrechen lassen. Zahlen und Einheiten zusammenhalten. Lange Wörter bei Bedarf an sinnvollen deutschen Stellen trennen.

## Layout und Rhythmus

8px-Grundraster mit 16, 24, 32, 48, 64, 96 und 128px. Maximal 1280px Inhaltsbreite; seitlich 24px mobil und 48–64px auf großen Bildschirmen. Breakpoints: 375, 768, 1024 und 1440px. Inhalte fließen in Flex oder Grid.

Die vier Kapitel bleiben Traum, Bestandsaufnahme, Idee und Mitmachen. Offener typografischer Einstieg, großzügige Bild/Text-Komposition, lesbare Chronologie, Bestandsliste, abschließende Einladung. Keine Standard-Kartenstapel oder Druckschatten. Controls verwenden 8px Radius; redaktionelle Bereiche bleiben offen.

## Komponenten

- `.tg-button` und Varianten `--accent`, `--outline`, `--light`, `--ghost-light`, `--small`: echte Links oder Buttons. Bestehende `.button`-Aliase bleiben erhalten.
- `.tg-text-link`: unterstrichener sekundärer Handlungsweg mit mindestens 44px Höhe.
- `.tg-section-label` mit `.tg-section-label__number`: Kapitelnummer und Beschriftung im Fluss. Die Nummer sitzt mittig im quadratischen Rahmen mit runder Kontur.
- `.tg-field`, `.tg-input`, `.tg-select`, `.tg-textarea`: sichtbare Labels, Hinweise über `aria-describedby`, Fehler beim Verlassen des Feldes.
- `.tg-status`: Statuszeichen und Text. `.tg-status--error` ergänzt die Fehlermeldung.
- `.tg-seal-frame > .tg-seal`: runder weißer Schutzraum. Das Originalbild behält 896:876 und `height: auto`. Niemals beide Bildachsen festsetzen, einfärben, drehen oder beschneiden.

Die Website verlinkt auf die vorhandene Anmeldung und Ideensammlung. Das Formular im Styleguide demonstriert nur lokale Validierung und sendet keine Daten.

## Navigation und Bewegung

Eine sticky Kopfzeile trägt vier Kapitelziele. Mobil öffnet sie die Navigation innerhalb der Kopfzeile; Escape schließt und setzt den Fokus zurück. Die Anker `phase-01` bis `phase-04` bleiben stabil. Ein ResizeObserver liefert die Kopfzeilenhöhe für den Scroll-Abstand. Keine zweite feste Aktionsleiste.

180ms für kleine Zustandswechsel, 240ms für Eintritt, 150ms für Austritt; ease-out hinein, ease-in hinaus. Nur transform und opacity animieren. Optionale Scrollbewegung liegt auf dekorativen Linien, nicht auf Text, Logo oder Fotos. Reduced-motion deaktiviert sie. Der Hauptscroll wird beim Scrollen nie programmatisch nachgeführt.

## Medien

Lokale Originale: Siegel 896×876, Wortmarke 984×799, Bildmarke 362×360, Rathausfoto 1280×960, historische Ansicht 752×600. Inhaltsbilder vollständig zeigen; Urheber und Lizenz nennen. Website und Styleguide verwenden das Siegel, die Website zusätzlich beide Stadtmotive. Die übrigen Originaldateien bleiben verfügbar.

Rathausfoto: Joachim Köhler, CC BY-SA 3.0. Historische Ansicht: Robert Stieler, um 1878, Stadtarchiv Heilbronn, Public Domain. Public Sans: SIL Open Font License. Quellen stehen auf der Website.

## Pflege

Änderungen zuerst an gemeinsamen Tokens und Komponenten durchführen, dann Styleguide und Dokumentation fortschreiben. Seitenregeln bleiben in `site.css`. Die Quellen wurden in diesem Produktionsdurchgang ohne nachträgliche Browserprüfung erstellt.