# AGENTS.md — Kodax Design- und Coding-Regeln für KI-Agenten

Diese Datei in `AGENTS.md`, `CLAUDE.md`, `.cursor/rules/kodax.md` oder in das
Projektwissen eines Vibe-Coding-Tools legen.

## Nicht verhandelbar
- Farben nur über Tokens: `bg-marine`, `bg-marine-deep`, `bg-marine-mid`, `bg-sand`, `bg-sand-2`, `bg-sand-3`, `text-gold`, `text-gold-deep`, `border-marine/10`.
- Verboten: `text-white`, `bg-black`, `bg-[#...]`, Tailwind-Standardfarben (`slate`, `zinc`, `indigo`, …), Farbwerte direkt im Component-Code.
- `--radius: 0.125rem` (2 px). Keine `rounded-lg/xl/full` ausser Avatar.
- Keine `shadow-*`. Tiefe entsteht durch Hintergrundwechsel und 1-px-Border.
- Schriften: `font-sans` = Geist, `font-mono` = Geist Mono. Nichts anderes.

## Bausteine (copy-paste)
```tsx
// Eyebrow
<p className="font-mono text-[11px] uppercase tracking-[0.25em] text-gold-deep">Leistungen</p>

// Sektion
<section className="mx-auto max-w-7xl px-6 py-24 lg:py-32"> … </section>

// Dunkle Sektion
<section className="bg-marine-deep text-sand"> … </section>

// Karte hell
<div className="border border-marine/10 bg-card p-8"> … </div>

// Buttons
<button className="bg-marine px-6 py-3 text-sm font-semibold text-sand hover:bg-marine-deep">Primär</button>
<button className="bg-gold px-6 py-3 text-sm font-semibold text-marine-deep hover:bg-gold-deep">Akzent</button>
<button className="border border-marine/25 px-6 py-3 text-sm font-semibold text-marine hover:border-marine">Sekundär</button>

// Kennzahlen-Band
<div className="grid gap-px border border-marine/10 bg-marine/10 sm:grid-cols-3">
  <div className="bg-sand p-8">
    <p className="text-3xl font-semibold tracking-tight text-marine">99.99%</p>
    <p className="mt-2 font-mono text-[11px] uppercase tracking-[0.2em] text-marine/50">Verfügbarkeit</p>
  </div>
</div>
```

## Seitenaufbau
Eyebrow → H1 → Lead → Inhaltsblöcke (ein Gedanke je Block) → Kennzahlen → ein CTA.
Technische Tiefe immer einklappbar, nie zusammen mit der Führungsebene ausspielen.

## Qualitätsregeln
- Genau ein `h1` pro Seite, eigener Title (< 60 Zeichen) und Meta-Description (< 160 Zeichen).
- Bilder: `alt` gesetzt, `width`/`height` gesetzt, `loading="lazy"` ausser Hero.
- Fokuszustände sichtbar, Ring in Gold Deep, Kontrast mindestens WCAG AA.
- Animation nur Fade + 12 px Translate, 400–700 ms, `prefers-reduced-motion` respektieren.
- Texte nach `kodax-voice-prompt.md`, Bilder nach `kodax-image-prompts.md`.

## Wenn unklar
Nachfragen statt erfinden. Keine neuen Farben, Schriften, Radien oder Schatten
einführen — auch nicht "nur an dieser Stelle".