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:

<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:

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.