# Chrystal Math – Web Quick Guide

Kompakte Anleitung für neue Seiten und Komponenten auf Basis von `styles.css`.

## 1. Grundaufbau

```html
<link rel="stylesheet" href="styles.css">
```

Verwende immer semantisches HTML, eine maximale Inhaltsbreite über `.container` und die vorhandenen Design-Tokens statt neuer Einzelwerte.

```css
color: var(--cm-text-on-dark);
background: var(--cm-bg);
border-radius: var(--cm-radius-md);
font-family: var(--cm-body);
```

## 2. Markenprinzip

**Calculated Chaos** bedeutet: klare Struktur zuerst, kontrollierte Überraschung danach.

- Layout, Abstände und Formulare bleiben ruhig und nachvollziehbar.
- Farbe, Verläufe, Nodes und kleine Sparks setzen gezielte Akzente.
- Pro Komponente höchstens **eine dominante Akzentfarbe**.
- Glow nur dekorativ und sparsam einsetzen; nie für normalen Text.
- Reines Schwarz vermeiden. Dunkle Flächen nutzen `--cm-bg`, `--cm-bg-2` oder `--cm-bg-3`.

## 3. Farben und Aufgaben

| Token | Einsatz |
|---|---|
| `--cm-bg` | dunkler Seitenhintergrund |
| `--cm-bg-2` | Karten und größere Flächen im Dark Mode |
| `--cm-bg-3` | erhöhte oder aktive Flächen |
| `--cm-light` | heller Seitenhintergrund |
| `--cm-text-on-dark` | Haupttext auf dunklen Flächen |
| `--cm-muted-on-dark` | Nebentext auf dunklen Flächen |
| `--cm-ink` | Haupttext auf hellen Flächen |
| `--cm-muted-ink` | Nebentext auf hellen Flächen |
| `--cm-magenta` | primäre Aktion, wichtigste Hervorhebung |
| `--cm-cyan` | Fokus, Links, sekundäre Aktion |
| `--cm-violet` | Kapitel, Kategorien, dekorative Tiefe |
| `--cm-lime` | kleine Überraschungsmomente, Status oder Spark |
| `--cm-gold` | seltene Premium- oder Bühnenakzente |

**Empfohlene Verteilung:** etwa 70 % Basisfarben, 20 % Oberflächen und Textabstufungen, 10 % Akzentfarben.

## 4. Typografie

```css
font-family: var(--cm-display); /* GFS Didot */
font-family: var(--cm-body);    /* Dosis */
```

### GFS Didot

Nur für große Titel, Kampagnenzeilen, Hero-Text und markante Zahlen verwenden. Nicht für Labels, Buttons oder längere Texte.

### Dosis

Für Navigation, Fließtext, Formulare, Buttons, Hinweise und kleine Überschriften verwenden.

### Sinnvolle Hierarchie

```css
.page-title {
  font-family: var(--cm-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 400;
  line-height: .96;
}

.section-title {
  font-family: var(--cm-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
}

.ui-title {
  font-family: var(--cm-body);
  font-size: 1.35rem;
  font-weight: 700;
}
```

## 5. Light und Dark Mode

Das bestehende CSS ist standardmäßig dunkel. Für helle Einzelseiten oder Komponenten kann diese kleine Erweiterung an `styles.css` angehängt werden:

```css
.cm-page {
  min-height: 100vh;
}

.cm-page--dark {
  color-scheme: dark;
  background: var(--cm-bg);
  color: var(--cm-text-on-dark);
}

.cm-page--light {
  color-scheme: light;
  background: var(--cm-light);
  color: var(--cm-ink);
}
```

Beim Wechsel des Themes ändern sich hauptsächlich Hintergrund, Kartenfläche, Text- und Rahmenfarbe. Akzentfarben bleiben gleich.

## 6. Formulare

Formulare sollen klarer und ruhiger sein als die dekorativen Brand-Elemente.

- Labels immer sichtbar oberhalb des Feldes.
- Platzhalter sind Beispiele, keine Ersatz-Labels.
- Fokuszustand immer deutlich in Cyan.
- Fehlermeldungen als Text plus Symbol ausgeben, nie nur über Farbe.
- Mindestens 44 px hohe Eingabefelder und Buttons.
- Eine Login-Karte sollte höchstens etwa 28rem breit sein.

### CSS-Erweiterung für Login und Formulare

```css
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 15% 18%, rgba(247, 64, 167, .13), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(8, 212, 243, .11), transparent 28%);
}

.auth-card {
  width: min(100%, 28rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow);
}

.cm-page--dark .auth-card {
  background: rgba(33, 20, 58, .92);
  border: 1px solid rgba(255, 255, 255, .12);
}

.cm-page--light .auth-card {
  background: #fff;
  border: 1px solid #eadfea;
  box-shadow: 0 1.2rem 3rem rgba(36, 23, 46, .10);
}

.auth-title {
  margin: .35rem 0 .75rem;
  font-family: var(--cm-display);
  font-size: clamp(2.5rem, 9vw, 3.8rem);
  font-weight: 400;
  line-height: .95;
}

.auth-intro {
  margin: 0 0 1.75rem;
}

.cm-page--dark .auth-intro,
.cm-page--dark .field-hint {
  color: var(--cm-muted-on-dark);
}

.cm-page--light .auth-intro,
.cm-page--light .field-hint {
  color: var(--cm-muted-ink);
}

.form-stack {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: .4rem;
}

.field label {
  font-weight: 700;
}

.input {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem;
  border-radius: var(--cm-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  outline: none;
}

.cm-page--dark .input {
  background: var(--cm-bg);
  color: var(--cm-text-on-dark);
  border-color: rgba(255, 255, 255, .16);
}

.cm-page--light .input {
  background: #fff;
  color: var(--cm-ink);
  border-color: #d9cddd;
}

.input:focus-visible {
  border-color: var(--cm-cyan);
  box-shadow: 0 0 0 .22rem rgba(8, 212, 243, .22);
}

.button--full {
  width: 100%;
}

.auth-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  font-size: .95rem;
}

.field-hint {
  margin: 0;
  font-size: .9rem;
}

.form-error {
  margin: 0;
  color: var(--cm-magenta);
  font-weight: 700;
}
```

## 7. Login-Beispiel

Für Dark Mode:

```html
<body class="cm-page cm-page--dark">
```

Für Light Mode:

```html
<body class="cm-page cm-page--light">
```

Der übrige Aufbau bleibt identisch:

```html
<main class="auth-shell">
  <section class="auth-card" aria-labelledby="login-title">
    <p class="eyebrow">Chrystal Math · Members</p>
    <h1 class="auth-title gradient-text" id="login-title">Welcome back.</h1>
    <p class="auth-intro">Melde dich an, um deinen Bereich zu öffnen.</p>

    <form class="form-stack">
      <div class="field">
        <label for="email">E-Mail-Adresse</label>
        <input class="input" id="email" name="email" type="email"
               autocomplete="email" required>
      </div>

      <div class="field">
        <label for="password">Passwort</label>
        <input class="input" id="password" name="password" type="password"
               autocomplete="current-password" required>
      </div>

      <div class="auth-meta">
        <label><input type="checkbox" name="remember"> Angemeldet bleiben</label>
        <a href="/passwort-vergessen">Passwort vergessen?</a>
      </div>

      <button class="button button--primary button--full" type="submit">
        Anmelden
      </button>
    </form>
  </section>
</main>
```

## 8. Häufige Komponenten

### Primäre Aktion

```html
<button class="button button--primary">Speichern</button>
```

Nur einmal pro klar abgegrenztem Bereich verwenden.

### Sekundäre Aktion

```html
<a class="button button--secondary" href="#">Mehr erfahren</a>
```

### Karten

Karten verwenden eine klare Oberfläche, einen feinen Rahmen und höchstens einen dekorativen Akzent. Nicht jede Karte braucht Glow, Verlauf und Nodes gleichzeitig.

### Eyebrow

```html
<p class="eyebrow">Kategorie · Kontext</p>
```

Für kurze Orientierung über einem Titel. Nicht für ganze Sätze.

## 9. Abstände und Formen

- Kleine Abstände: `.5rem` bis `.75rem`
- Standardabstände: `1rem` bis `1.5rem`
- Abschnittsabstände: `4rem` bis `6rem`
- Kleine Elemente: `--cm-radius-sm`
- Karten und Formulare: `--cm-radius-md`
- Hero- oder Auth-Flächen: `--cm-radius-lg`

## 10. Schnellprüfung vor Veröffentlichung

- Ist die Seite auch ohne dekorative Effekte verständlich?
- Gibt es pro Bereich nur eine klare Hauptaktion?
- Wurde GFS Didot nur für kurze, große Texte genutzt?
- Sind Labels, Fokuszustände und Fehlermeldungen sichtbar?
- Ist Text auf kleinen Displays ohne Zoomen lesbar?
- Funktioniert `prefers-reduced-motion` weiterhin?
- Werden Akzentfarben nicht als alleinige Information verwendet?
- Sind alle dekorativen Nodes und Orbits mit `aria-hidden="true"` versehen?

## Kurzformel

**Dosis organisiert. GFS Didot inszeniert. Magenta führt. Cyan reagiert. Lime überrascht. Der Rest bleibt ruhig.**