purinto-website/README.md

# Purinto GmbH — Website

Statische Website ohne Build-Schritt. Reines HTML, CSS und JavaScript — kein
Node, kein npm, keine Abhängigkeiten. Jede Datei lässt sich direkt bearbeiten
und auf beliebigem Webspace ablegen.

---

## Vor dem Livegang: die Checkliste

Alles, was noch ersetzt werden muss, ist auf der Website **farbig markiert**
(hellflieder mit gestrichelter Unterlinie). Sie finden es also beim Durchklicken
sofort. Suchen Sie im Editor nach `platzhalter`, um alle Stellen aufzulisten.

### 1. Kontaktformular scharfschalten

Das Formular ist fertig verdrahtet, es fehlt nur der Zugangsschlüssel:

1. Auf <https://web3forms.com> die E-Mail-Adresse eintragen, an die Anfragen
   gehen sollen. Sie bekommen den Schlüssel per Mail — kostenlos, kein Konto.
2. In `kontakt.html` nach `DEIN-WEB3FORMS-ACCESS-KEY` suchen und durch den
   Schlüssel ersetzen.
3. In derselben Datei die Zeile mit `name="redirect"` auf Ihre echte Domain
   anpassen.

Der Schlüssel darf öffentlich im Quelltext stehen — er erlaubt nur das Senden
an genau die hinterlegte Adresse.

**Testen Sie danach einmal echt:** Formular ausfüllen, absenden, prüfen ob die
Mail ankommt. Solange der Platzhalter drinsteht, zeigt das Formular eine
Fehlermeldung an und verweist auf die E-Mail-Adresse — es sendet nichts ins
Leere.

### 2. Firmendaten eintragen

Diese Angaben stehen an mehreren Stellen und müssen überall gleich sein:

| Angabe | Wo |
|---|---|
| E-Mail, Telefon, Adresse | Fußzeile **jeder** Seite, `kontakt.html`, `impressum.html`, `datenschutz.html` |
| Firmenbuchnummer, UID, Gericht | `impressum.html` |
| Gewerbewortlaut, Kammer, Behörde | `impressum.html` |
| Adresse im JSON-LD | `index.html`, ganz unten im `<script type="application/ld+json">` |
| Domain | `sitemap.xml`, `robots.txt`, alle `<link rel="canonical">` und `og:url` |

### 3. Logo einsetzen

Auf der Startseite steht ein **Logo-Platzhalter**: eine anthrazitfarbene Kachel
mit dem Buchstaben P. Ab 700 px Bildschirmbreite steht sie rechts neben der
Headline und ist immer exakt so hoch wie diese — Headline und Logo liegen in
derselben Grid-Zeile, das Logo ist über `align-self: stretch` an deren Höhe
gebunden. Unter 700 px rückt es über die Headline, weil die Textspalte sonst zu
schmal würde.

Die **Breite** kommt aus `--logo-groesse` in `assets/css/main.css` bei `.hero`
und ist aus der Headline gerechnet (Schriftgröße × Zeilenhöhe × 3 Zeilen). Da
die Headline immer genau drei Zeilen hat, ist die Kachel dadurch auf jeder
Bildschirmbreite quadratisch. Wer die Headline-Größe ändert, ändert das Logo
automatisch mit.

### Die Zeilenzahl der Headline ist festgelegt

Ab 500 px hat die Headline **genau drei Zeilen**, darunter **genau vier**. Das
ist kein Zufall des Umbruchs, sondern eingestellt — und hängt an drei Stellen,
die man nur gemeinsam ändern kann:

1. In `index.html` steht die Headline mit **festen Umbrüchen** (`<br
   class="hero__umbruch">`) nach „Prototyp" und nach „die".
2. In `main.css` werden diese Umbrüche **unter 500 px ausgeblendet**. Ein
   `display: none` auf einem `<br>` erzeugt keinen Zeilenumbruch mehr — die
   Headline bricht dort frei um und wird über `text-wrap: balance` auf vier
   gleichmäßige Zeilen verteilt.
3. In `tokens.css` hat `--t-3xl` deshalb **zwei Skalen**: Ab 500 px ist sie so
   begrenzt, dass die längste feste Zeile („Zwischen Prototyp", 10,26 em) neben
   dem Logo in die Textspalte passt. Unter 500 px entfällt diese enge Grenze,
   und die Schrift darf auf dem Telefon deutlich größer stehen.

Weil die Headline ab 500 px immer dreizeilig ist, entspricht ihre Höhe exakt der
Logobreite — deshalb ist die Kachel auf jeder Bildschirmbreite quadratisch.

> **Beim Ändern des Headline-Textes:** Messen Sie die neue längste Zeile und
> rechnen Sie die Grenzen in `tokens.css` nach. Sonst bricht die Headline auf
> irgendeiner Breite auf eine Zeile mehr um, und das Logo passt nicht mehr dazu.
> Am schnellsten prüfen Sie das, indem Sie das Browserfenster einmal von ganz
> schmal bis ganz breit ziehen und die Zeilenzahl beobachten.

Sobald das echte Logo vorliegt, in `index.html` nach `hero__logo` suchen und das
`<div>` ersetzen durch:

```html
<img src="assets/img/logo.svg" alt="Purinto" class="hero__logo" />
```

Das Stylesheet erkennt den Wechsel: Sobald ein `<img>` die Klasse trägt,
entfallen Kachelhintergrund und Radius automatisch, und die Breite folgt der
Höhe — ein querformatiges Logo behält damit sein Seitenverhältnis. SVG ist
gegenüber PNG zu bevorzugen, es bleibt auf allen Bildschirmen scharf.

Das **kleine Zeichen in der Menüleiste** (die drei gestapelten Balken) ist
davon unabhängig und bleibt bestehen. Wenn Sie es ebenfalls austauschen wollen:
Es steht als `<svg class="marke__zeichen">` in jeder HTML-Datei, in Kopf- und
Fußzeile. Die Fußzeilen-Variante hat einen helleren untersten Balken, damit sie
auf dunklem Grund sichtbar bleibt.

### 4. Inhalte ersetzen

- **`ueber-uns.html`** — Werdegang, Jahreszahlen, Gründungsgeschichte,
  Portraitfoto, Ausstattung. Die Zeitstrahl-Etappen sind vorstrukturiert; jede
  enthält einen Hinweis, was dort hingehört.
- **`projekte.html`** — sechs Projektkarten mit Bild, Aufgabe, Lösung,
  Ergebnis. Die Struktur *Aufgabe → Lösung → Ergebnis mit Kennzahl* trägt die
  Glaubwürdigkeit; behalten Sie sie bei.
- **`index.html`** — die drei Projekt-Teaser entsprechen den ersten drei Karten
  auf der Projektseite.

### 5. Fachliche Eckwerte bestätigen

Ich habe branchenübliche Richtwerte angesetzt. **Bitte gegenprüfen**, bevor die
Seite online geht — es sind Zusagen an Kunden:

- **Zonengrenzen der Stückzahl-Achse** (100 und 1.000 Stück) sowie alle Angaben
  zu Werkzeugkosten, Lieferzeit und Anwendung: zentral in
  `assets/js/stueckzahl-achse.js` in der Konstante `ZONEN`. Grenzen dort ändern
  — Achse, Beschriftung und Skala ziehen automatisch nach.
- **Verfahrensmatrix** auf `index.html`: Toleranzen, Oberflächen, Werkstoffe,
  Vorlaufzeiten.
- **Standzeiten der SLA-Formeinsätze**, beschrieben in `dienstleistungen.html`
  unter „Bridge Tooling".
- Bauräume und verfügbare Werkstoffe in `ueber-uns.html`.

### 6. Impressum und Datenschutz prüfen lassen

Beide Seiten liefern die vollständige Struktur nach § 5 ECG, § 25 MedienG und
Art. 13 DSGVO — aber **keine Rechtsberatung**. Lassen Sie die fertigen Texte
anwaltlich oder über die Wirtschaftskammer prüfen. Zwei Punkte besonders:

- **Verbraucherschlichtung:** Die EU-Plattform zur Online-Streitbeilegung hat
  ihren Betrieb eingestellt. Ältere Impressumsvorlagen verlinken sie weiterhin
  — übernehmen Sie das nicht ungeprüft.
- **Web3Forms:** Für den Formularversand brauchen Sie einen
  Auftragsverarbeitungsvertrag nach Art. 28 DSGVO und müssen klären, ob eine
  Übermittlung in ein Drittland stattfindet. Falls das nicht gewünscht ist,
  lässt sich der Versand auf ein PHP-Skript beim eigenen Hoster umstellen.

---

## Lokal ansehen

Doppelklick auf `index.html` genügt für einen schnellen Blick. Für einen
realistischen Test besser über einen kleinen Webserver, damit Pfade und
Schriften sich genauso verhalten wie später online.

Mit installiertem Python:

```bash
python -m http.server 8000
```

Danach <http://localhost:8000> im Browser öffnen.

---

## Veröffentlichen

Alle Dateien in das Web-Wurzelverzeichnis hochladen — das war es. Kein Build,
kein Deployment-Schritt.

- **Klassisches Hosting** (World4You, easyname, Hosttech): Inhalt des Ordners
  per FTP nach `/html` bzw. `/httpdocs`.
- **Netlify oder Cloudflare Pages**: Ordner ins Dashboard ziehen, oder das
  Git-Repository verbinden. Build-Befehl leer lassen, Publish-Verzeichnis `/`.

Danach unbedingt prüfen:

- **HTTPS aktiv** und alle Aufrufe werden auf `https://` umgeleitet.
- **Eine Domainvariante** ist die maßgebliche (mit oder ohne `www`), die andere
  leitet dorthin um.
- `404.html` ist als Fehlerseite eingerichtet. Bei Netlify und Cloudflare Pages
  passiert das automatisch; bei Apache genügt in der `.htaccess`:
  `ErrorDocument 404 /404.html`

---

## Aufbau

```
index.html              Startseite
dienstleistungen.html   Die fünf Leistungen im Detail
projekte.html           Projektübersicht mit Filter
ueber-uns.html          Werdegang und Haltung
kontakt.html            Formular und Direktkontakt
impressum.html          Pflichtangaben
datenschutz.html        Pflichtangaben
danke.html              Bestätigung nach Formularversand
404.html                Fehlerseite

assets/css/tokens.css   Farben, Schriften, Abstände — hier zentral ändern
assets/css/main.css     Layout und alle Bauteile
assets/js/site.js       Navigation, Kopfzeile, Einblendungen
assets/js/stueckzahl-achse.js   Der interaktive Regler auf der Startseite
assets/js/projekte.js   Filter der Projektseite
assets/js/kontakt.js    Formularprüfung und Versand
assets/img/projekte/    Bildplatzhalter (SVG)
assets/fonts/           Schriften, lokal ausgeliefert
```

### Farben ändern

Alle Farben stehen in `assets/css/tokens.css` ganz oben. Eine Änderung dort
wirkt auf die gesamte Website. Die Rollenverteilung:

- **Anthrazit** trägt den technischen Ernst — Text und dunkle Flächen
- **Salbeigrün** steht für Nachhaltigkeit — Flächen, Diagramme, Auszeichnungen
- **Flieder** ist der freundliche Akzent — sparsam einsetzen: Schaltflächen,
  aktiver Zustand, der Regler auf der Startseite

Alle Farbkombinationen wurden gegen WCAG AA (Kontrast mindestens 4,5:1)
geprüft. Wenn Sie Farben ändern, prüfen Sie das erneut — sonst wird Text für
Menschen mit eingeschränktem Sehvermögen unlesbar.

### Kopf- und Fußzeile ändern

Beide stehen **in jeder HTML-Datei einzeln**. Das ist bei einer statischen
Website ohne Build-Schritt der robusteste Weg, hat aber einen Preis: Ein neuer
Menüpunkt muss in allen neun Dateien ergänzt werden. Am einfachsten mit
„Suchen und Ersetzen in allen Dateien" im Editor.

Der aktive Menüpunkt wird über `aria-current="page"` markiert — beim Anlegen
einer neuen Seite dort setzen, wo der Link auf die eigene Seite zeigt.

---

## Schriften

Drei Schriftfamilien, alle unter der SIL Open Font License, also auch
kommerziell frei verwendbar:

- **Archivo** — Überschriften, in expandierter Laufweite gesetzt
- **Public Sans** — Fließtext
- **IBM Plex Mono** — Kennwerte, Beschriftungen, technische Angaben

Die Dateien liegen unter `assets/fonts/` und werden **vom eigenen Server
ausgeliefert**. Sie sind bewusst nicht über die Google-Fonts-CDN eingebunden:
Diese Einbindung überträgt die IP-Adresse der Besucher an Google und ist in
Österreich und Deutschland datenschutzrechtlich angreifbar (LG München I,
Az. 3 O 17493/20). Bitte so belassen.

Wichtig bei einem Austausch: Archivo wird in der Variante mit **Breitenachse**
verwendet. Eine Fassung ohne diese Achse ignoriert `font-stretch` still — die
Überschriften erscheinen dann in normaler statt expandierter Laufweite.

---

## Barrierefreiheit

Eingebaut und geprüft:

- Sprungmarke zum Inhalt, sichtbarer Fokusrahmen auf allen bedienbaren Elementen
- Alle Text-Hintergrund-Kombinationen erfüllen WCAG AA
- Die Stückzahl-Achse ist per Tastatur bedienbar: Pfeiltasten, Bild auf/ab,
  Pos1 und Ende
- `prefers-reduced-motion` wird respektiert — wer Animationen abgeschaltet hat,
  bekommt keine
- Kein horizontaler Überlauf von 320 px bis 1600 px

Beim Ergänzen von Inhalten bitte beibehalten: **eine `<h1>` pro Seite**,
Überschriftenebenen nicht überspringen, und für inhaltstragende Bilder ein
aussagekräftiges `alt`-Attribut setzen. Die Bildplatzhalter haben bewusst ein
leeres `alt`, weil sie rein dekorativ sind — beim Austausch gegen echte
Projektfotos entsprechend beschreiben.

---

## Datenschutz: Stand der Technik

Die Seite setzt **keine Cookies**, bindet **keine Analyse- oder
Trackingdienste** ein und lädt **nichts von fremden Servern** nach. Deshalb ist
kein Cookie-Banner nötig. Wenn Sie später etwas ergänzen — Google Analytics,
eine eingebettete Karte, ein YouTube-Video, ein Newsletter-Formular — ändert
sich das, und die Datenschutzerklärung muss angepasst werden.