Website der Purinto GmbH aufsetzen

Statische Website ohne Build-Schritt: reines HTML, CSS und Vanilla-JS,
lauffaehig auf beliebigem Webspace.

Neun Seiten: Startseite, Dienstleistungen, Projekte, Ueber uns, Kontakt
sowie Impressum, Datenschutz, Danke-Seite und 404.

Kernstueck der Startseite ist die Stueckzahl-Achse: ein logarithmischer
Regler von 1 bis 100.000 Stueck, der zur gewaehlten Menge Verfahren,
Werkzeugkosten, Lieferzeit und Anwendungsfall ausgibt. Die dritte Zone
ist optisch zurueckgenommen, weil Serienspritzguss ueber Partnerbetriebe
laeuft und nicht zum eigenen Leistungsumfang gehoert. Der Leistungsumfang
ist durchgehend auf FDM, SLA und SLA-gedruckte Formeinsaetze beschraenkt.

Gestaltung nach Vorgabe: Anthrazit, Salbeigruen und Flieder als Akzent.
Archivo, Public Sans und IBM Plex Mono werden lokal ausgeliefert statt
ueber die Google-CDN eingebunden.

Kontaktformular ueber Web3Forms mit Client-Validierung; der Access-Key
ist noch ein Platzhalter. Alle Firmen- und Projektinhalte sind sichtbar
als Platzhalter markiert, die Uebergabe-Checkliste steht in der README.

Geprueft: WCAG-AA-Kontraste auf allen Seiten, kein horizontaler Ueberlauf
von 320 bis 1920 px, Tastaturbedienung der Achse, feste Zeilenzahl der
Hero-Headline.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Denise Krölling 2026-08-13 13:07:08 +02:00
commit 1a63f66463
29 changed files with 6898 additions and 0 deletions

94
404.html Normal file
View file

@ -0,0 +1,94 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Seite nicht gefunden — Purinto GmbH</title>
<meta
name="description"
content="Diese Seite existiert nicht. Hier finden Sie die Wege zu den Inhalten von Purinto."
/>
<meta name="robots" content="noindex, follow" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="/index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="/dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="/projekte.html">Projekte</a></li>
<li><a class="nav__link" href="/ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="/kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="/kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="sektion">
<div class="huelle huelle--eng">
<p class="eyebrow">Fehler 404</p>
<h1 class="display t-2xl">Diese Seite gibt es nicht.</h1>
<p class="lead mt-6">
Der Link ist entweder veraltet oder enthält einen Tippfehler. Hier
sind die Wege, die funktionieren:
</p>
<ul class="haken mt-7">
<li><a href="/index.html">Startseite mit dem Überblick</a></li>
<li><a href="/dienstleistungen.html">Dienstleistungen im Detail</a></li>
<li><a href="/projekte.html">Ausgewählte Projekte</a></li>
<li><a href="/ueber-uns.html">Über uns</a></li>
<li><a href="/kontakt.html">Kontakt und Anfrage</a></li>
</ul>
<p class="mt-7">
<a class="knopf knopf--primaer" href="/index.html">Zur Startseite</a>
</p>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__unten" style="border-top: none; padding-top: 0">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="/impressum.html">Impressum</a>
<a href="/datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="/assets/js/site.js" defer></script>
</body>
</html>

280
README.md Normal file
View file

@ -0,0 +1,280 @@
# 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.

2144
assets/css/main.css Normal file

File diff suppressed because it is too large Load diff

184
assets/css/tokens.css Normal file
View file

@ -0,0 +1,184 @@
/* ==========================================================================
Purinto GmbH — Design-Tokens
Einzige Quelle für Farben, Typografie, Abstände und Radien.
Farbvorgabe: helleres Anthrazit + Salbeigrün + Flieder als Akzent.
========================================================================== */
:root {
/* --- Anthrazit: trägt den Engineering-Ernst ---------------------------- */
--anthrazit-900: #22282b;
--anthrazit-800: #2e3538;
--anthrazit-700: #3c4347; /* "helleres Anthrazit" – dunkle Sektionen */
--anthrazit-600: #525b5f;
--anthrazit-500: #626b6f; /* auf --dunst geprüft: 5,03:1 (WCAG AA) */
--anthrazit-400: #8b9296;
--anthrazit-300: #aeb5b7;
--anthrazit-200: #c9cfd0;
--anthrazit-100: #e3e7e6;
/* --- Salbei: trägt die Nachhaltigkeit --------------------------------- */
--salbei-800: #4a5d50;
--salbei-700: #5e7565;
--salbei-600: #75907c;
--salbei-500: #8fa894;
--salbei-400: #a9bdad;
--salbei-300: #c2d0c4;
--salbei-200: #d6e0d6;
--salbei-100: #e8eee8;
/* --- Flieder: der freundliche, unerwartete Ton. Sparsam einsetzen. ----- */
--flieder-900: #493a6b;
--flieder-800: #5b4880; /* CTA-Fläche, weißer Text ~6,5:1 */
--flieder-700: #6e5a96; /* Links, Fokusring */
--flieder-600: #8570ae;
--flieder-500: #9b85c4;
--flieder-400: #b09fd5;
--flieder-300: #c6b5e3; /* heller Marker auf dunklem Grund */
--flieder-200: #dcd2ef;
--flieder-100: #eee9f7;
/* --- Neutrale Flächen ------------------------------------------------- */
--dunst: #f5f6f3;
--papier: #ffffff;
/* --- Semantische Zuweisungen ------------------------------------------ */
--bg: var(--dunst);
--bg-karte: var(--papier);
--bg-dunkel: var(--anthrazit-700);
--bg-dunkel-tief: var(--anthrazit-900);
--bg-salbei: var(--salbei-100);
--text: var(--anthrazit-900);
--text-leise: var(--anthrazit-500);
--text-invers: #f2f4f1;
--text-invers-leise: #b6bfbc;
/* Gedämpfter Text auf --bg-dunkel. Nicht --anthrazit-400 verwenden:
das ergibt dort nur 3,19:1 und fällt unter AA. */
--text-invers-schwach: var(--anthrazit-300);
--linie: var(--anthrazit-200);
--linie-zart: var(--anthrazit-100);
--linie-invers: rgba(255, 255, 255, 0.16);
--akzent: var(--flieder-800);
--akzent-hover: var(--flieder-900);
--akzent-hell: var(--flieder-300);
--fokus: var(--flieder-700);
/* --- Typografie -------------------------------------------------------
Archivo in expandierter Breite gibt der weichen Salbei-Flieder-Palette
ein hartes Rückgrat. Verdana als Fallback, weil ebenfalls breit läuft. */
--f-display: "Archivo", "Archivo Fallback", Verdana, "DejaVu Sans", sans-serif;
--f-text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
"Liberation Mono", monospace;
/* Fließende Typo-Skala */
/* Hergeleitet, nicht geschätzt: Die Hero-Headline hat feste Umbrüche und
soll immer genau drei Zeilen haben. Ihre längste Zeile misst 10,26 em.
Neben dem Logo (3,06 em breit) plus Spalten­abstand muss also gelten:
10,26 F <= Spaltenbreite. Daraus ergeben sich Minimum, Steigung und
Maximum unten. Wird der Headline-Text geändert, neu rechnen. */
--t-3xl: clamp(2.1rem, 0.05rem + 6.2vw, 5rem);
--t-2xl: clamp(1.95rem, 1.45rem + 2.2vw, 3.3rem);
--t-xl: clamp(1.45rem, 1.28rem + 0.85vw, 2.05rem);
--t-lg: clamp(1.15rem, 1.07rem + 0.36vw, 1.4rem);
--t-md: 1.0625rem;
--t-sm: 0.9375rem;
--t-xs: 0.8125rem;
--t-2xs: 0.6875rem;
--lh-eng: 1.02;
/* Fortsetzung siehe Media Query am Dateiende: Unter 500px gilt für --t-3xl
eine eigene, größere Skala, weil dort vier Headline-Zeilen erlaubt sind. */
--lh-kopf: 1.14;
--lh-normal: 1.62;
--ls-display: -0.022em;
--ls-mono: 0.11em;
/* --- Abstände ---------------------------------------------------------- */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--sektion-y: clamp(3.5rem, 2rem + 6vw, 7rem);
--breite: 1200px;
--breite-eng: 740px;
--rand: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
/* --- Radien: zurückhaltend, technisch ---------------------------------- */
--r-1: 2px;
--r-2: 4px;
--r-3: 8px;
--r-4: 14px;
/* --- Schatten ---------------------------------------------------------- */
--schatten-1: 0 1px 2px rgba(34, 40, 43, 0.05),
0 2px 8px rgba(34, 40, 43, 0.04);
--schatten-2: 0 2px 4px rgba(34, 40, 43, 0.06),
0 14px 30px rgba(34, 40, 43, 0.08);
--dauer: 220ms;
--kurve: cubic-bezier(0.2, 0.7, 0.3, 1);
/* --- Schichtlinien: Textur, die auf den additiven Schichtaufbau anspielt.
Wird sehr sparsam als Hintergrund eingesetzt. -------------------- */
--schichten: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.05) 0,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px,
transparent 7px
);
}
/* Unter 500px darf die Hero-Headline vier Zeilen haben. Die festen Umbrüche
sind dort ausgeblendet (siehe .hero__umbruch), sie bricht also frei um.
Dadurch entfällt die enge Grenze aus der längsten Einzelzeile, und die
Schrift kann auf dem Telefon deutlich größer stehen. */
@media (max-width: 499px) {
:root {
--t-3xl: clamp(1.75rem, -0.07rem + 9.1vw, 2.8rem);
}
}
/* Schriften werden lokal ausgeliefert – keine Einbindung über die Google-CDN,
die in AT/DE datenschutzrechtlich angreifbar ist (LG München I, 3 O 17493/20).
Fehlen die Dateien, greifen automatisch die Fallbacks oben. */
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("../fonts/public-sans-variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-medium.woff2") format("woff2");
font-weight: 500;
font-display: swap;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Bildplatzhalter">
<defs>
<pattern id="g1" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="#d9dedd" stroke-width="1" />
</pattern>
</defs>
<rect width="800" height="600" fill="#eef0ed" />
<rect width="800" height="600" fill="url(#g1)" />
<rect x="230" y="180" width="340" height="240" rx="18" fill="none" stroke="#8fa894" stroke-width="3" />
<rect x="270" y="220" width="260" height="160" rx="10" fill="#dfe6df" stroke="#8fa894" stroke-width="1.5" />
<circle cx="300" cy="250" r="9" fill="none" stroke="#6b7478" stroke-width="2" />
<circle cx="500" cy="250" r="9" fill="none" stroke="#6b7478" stroke-width="2" />
<circle cx="300" cy="350" r="9" fill="none" stroke="#6b7478" stroke-width="2" />
<circle cx="500" cy="350" r="9" fill="none" stroke="#6b7478" stroke-width="2" />
<path d="M230 452h340" stroke="#9b85c4" stroke-width="2" />
<path d="M230 445v14M570 445v14" stroke="#9b85c4" stroke-width="2" />
<text x="400" y="500" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="19" fill="#6b7478" letter-spacing="2">BILDPLATZHALTER</text>
<text x="400" y="528" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="15" fill="#8b9296">Gehäuse</text>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Bildplatzhalter">
<defs>
<pattern id="g2" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="#d9dedd" stroke-width="1" />
</pattern>
</defs>
<rect width="800" height="600" fill="#eef0ed" />
<rect width="800" height="600" fill="url(#g2)" />
<path d="M250 400V210a20 20 0 0 1 20-20h120a20 20 0 0 1 20 20v40h140a20 20 0 0 1 20 20v130" fill="none" stroke="#8fa894" stroke-width="3" stroke-linejoin="round" />
<path d="M285 400V225h90v60h140a20 20 0 0 1 20 20v95" fill="#dfe6df" stroke="#8fa894" stroke-width="1.5" stroke-linejoin="round" />
<circle cx="330" cy="270" r="11" fill="none" stroke="#6b7478" stroke-width="2" />
<circle cx="500" cy="345" r="11" fill="none" stroke="#6b7478" stroke-width="2" />
<path d="M250 432h320" stroke="#9b85c4" stroke-width="2" />
<path d="M250 425v14M570 425v14" stroke="#9b85c4" stroke-width="2" />
<text x="400" y="500" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="19" fill="#6b7478" letter-spacing="2">BILDPLATZHALTER</text>
<text x="400" y="528" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="15" fill="#8b9296">Führungselement</text>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Bildplatzhalter">
<defs>
<pattern id="g3" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="#d9dedd" stroke-width="1" />
</pattern>
</defs>
<rect width="800" height="600" fill="#eef0ed" />
<rect width="800" height="600" fill="url(#g3)" />
<path d="M240 400V300a160 160 0 0 1 320 0v100" fill="#dfe6df" stroke="#8fa894" stroke-width="3" />
<path d="M285 400V300a115 115 0 0 1 230 0v100" fill="none" stroke="#8fa894" stroke-width="1.5" />
<path d="M240 400h320" stroke="#8fa894" stroke-width="3" />
<circle cx="400" cy="300" r="26" fill="none" stroke="#6b7478" stroke-width="2" />
<path d="M400 274v52M374 300h52" stroke="#6b7478" stroke-width="1.5" />
<path d="M240 432h320" stroke="#9b85c4" stroke-width="2" />
<path d="M240 425v14M560 425v14" stroke="#9b85c4" stroke-width="2" />
<text x="400" y="500" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="19" fill="#6b7478" letter-spacing="2">BILDPLATZHALTER</text>
<text x="400" y="528" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="15" fill="#8b9296">Sichtteil</text>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Bildplatzhalter">
<defs>
<pattern id="g4" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="#d9dedd" stroke-width="1" />
</pattern>
</defs>
<rect width="800" height="600" fill="#eef0ed" />
<rect width="800" height="600" fill="url(#g4)" />
<rect x="220" y="200" width="360" height="200" rx="12" fill="#dfe6df" stroke="#8fa894" stroke-width="3" />
<circle cx="270" cy="250" r="14" fill="#eef0ed" stroke="#6b7478" stroke-width="2" />
<circle cx="530" cy="250" r="14" fill="#eef0ed" stroke="#6b7478" stroke-width="2" />
<circle cx="270" cy="350" r="14" fill="#eef0ed" stroke="#6b7478" stroke-width="2" />
<circle cx="530" cy="350" r="14" fill="#eef0ed" stroke="#6b7478" stroke-width="2" />
<rect x="340" y="255" width="120" height="90" rx="8" fill="#eef0ed" stroke="#8fa894" stroke-width="1.5" />
<path d="M220 432h360" stroke="#9b85c4" stroke-width="2" />
<path d="M220 425v14M580 425v14" stroke="#9b85c4" stroke-width="2" />
<text x="400" y="500" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="19" fill="#6b7478" letter-spacing="2">BILDPLATZHALTER</text>
<text x="400" y="528" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="15" fill="#8b9296">Trägerplatte</text>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Bildplatzhalter">
<defs>
<pattern id="g5" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="#d9dedd" stroke-width="1" />
</pattern>
</defs>
<rect width="800" height="600" fill="#eef0ed" />
<rect width="800" height="600" fill="url(#g5)" />
<path d="M260 380V250a16 16 0 0 1 16-16h60v-24a18 18 0 0 1 36 0v24h60a16 16 0 0 1 16 16v130" fill="#dfe6df" stroke="#8fa894" stroke-width="3" stroke-linejoin="round" />
<path d="M300 380V274h200v106" fill="none" stroke="#8fa894" stroke-width="1.5" />
<path d="M470 300h70a22 22 0 0 1 0 44h-70" fill="none" stroke="#6b7478" stroke-width="2" stroke-linejoin="round" />
<path d="M260 412h288" stroke="#9b85c4" stroke-width="2" />
<path d="M260 405v14M548 405v14" stroke="#9b85c4" stroke-width="2" />
<text x="400" y="500" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="19" fill="#6b7478" letter-spacing="2">BILDPLATZHALTER</text>
<text x="400" y="528" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="15" fill="#8b9296">Schnappverbindung</text>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Bildplatzhalter">
<defs>
<pattern id="g6" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="#d9dedd" stroke-width="1" />
</pattern>
</defs>
<rect width="800" height="600" fill="#eef0ed" />
<rect width="800" height="600" fill="url(#g6)" />
<rect x="230" y="180" width="340" height="110" rx="6" fill="#dfe6df" stroke="#8fa894" stroke-width="3" />
<rect x="230" y="310" width="340" height="110" rx="6" fill="#dfe6df" stroke="#8fa894" stroke-width="3" />
<path d="M330 290v-46a70 70 0 0 1 140 0v46" fill="#eef0ed" stroke="#6b7478" stroke-width="2" />
<path d="M330 310v46a70 70 0 0 0 140 0v-46" fill="#eef0ed" stroke="#6b7478" stroke-width="2" />
<path d="M600 180v240" stroke="#9b85c4" stroke-width="2" />
<path d="M593 180h14M593 420h14" stroke="#9b85c4" stroke-width="2" />
<text x="400" y="500" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="19" fill="#6b7478" letter-spacing="2">BILDPLATZHALTER</text>
<text x="400" y="528" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="15" fill="#8b9296">Formeinsatz</text>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

204
assets/js/kontakt.js Normal file
View file

@ -0,0 +1,204 @@
/* ==========================================================================
Purinto GmbH — Kontaktformular
Validierung mit konkreten Fehlermeldungen und Versand über Web3Forms.
Ohne JavaScript funktioniert das Formular ebenfalls: Es postet dann direkt
an Web3Forms und landet auf danke.html. Diese Datei verbessert das nur um
Inline-Prüfung und eine Rückmeldung ohne Seitenwechsel.
========================================================================== */
(function () {
"use strict";
var formular = document.querySelector("[data-formular]");
if (!formular) return;
var meldungErfolg = document.querySelector("[data-meldung-erfolg]");
var meldungFehler = document.querySelector("[data-meldung-fehler]");
var meldungFehlerText = document.querySelector("[data-meldung-fehler-text]");
var absendeKnopf = formular.querySelector("[data-absenden]");
var PLATZHALTER_KEY = "DEIN-WEB3FORMS-ACCESS-KEY";
/* ----------------------------------------------------------------------
Prüfregeln. Die Meldungen sagen, was zu tun ist — nicht, was falsch war.
---------------------------------------------------------------------- */
var REGELN = {
name: function (feld) {
if (!feld.value.trim()) {
return "Bitte geben Sie Ihren Namen an, damit wir Sie ansprechen können.";
}
return null;
},
email: function (feld) {
var wert = feld.value.trim();
if (!wert) {
return "Bitte geben Sie eine E-Mail-Adresse an, an die wir antworten können.";
}
// Bewusst großzügig: Die endgültige Prüfung macht der Mailserver.
if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(wert)) {
return "Diese Adresse scheint unvollständig zu sein. Bitte prüfen Sie sie noch einmal.";
}
return null;
},
nachricht: function (feld) {
var wert = feld.value.trim();
if (!wert) {
return "Beschreiben Sie kurz Ihr Bauteil oder Ihre Frage — zwei Sätze genügen.";
}
if (wert.length < 10) {
return "Ein paar Worte mehr helfen uns, die Anfrage richtig einzuschätzen.";
}
return null;
},
datenschutz: function (feld) {
if (!feld.checked) {
return "Ohne diese Zustimmung dürfen wir Ihre Anfrage nicht verarbeiten.";
}
return null;
}
};
function fehlerElement(feld) {
return document.querySelector('[data-fehler-fuer="' + feld.name + '"]');
}
function fehlerZeigen(feld, text) {
var el = fehlerElement(feld);
feld.setAttribute("aria-invalid", "true");
if (el) {
el.textContent = text;
el.classList.add("ist-sichtbar");
}
}
function fehlerLoeschen(feld) {
var el = fehlerElement(feld);
feld.removeAttribute("aria-invalid");
if (el) {
el.textContent = "";
el.classList.remove("ist-sichtbar");
}
}
function feldPruefen(feld) {
var regel = REGELN[feld.name];
if (!regel) return true;
var fehler = regel(feld);
if (fehler) {
fehlerZeigen(feld, fehler);
return false;
}
fehlerLoeschen(feld);
return true;
}
// Nach dem ersten Fehlversuch direkt beim Verlassen des Feldes prüfen,
// vorher nicht — sonst meckert das Formular beim ersten Tippen.
var schonAbgeschickt = false;
Object.keys(REGELN).forEach(function (name) {
var feld = formular.elements[name];
if (!feld) return;
feld.addEventListener("blur", function () {
if (schonAbgeschickt) feldPruefen(feld);
});
feld.addEventListener("input", function () {
if (schonAbgeschickt && feld.getAttribute("aria-invalid") === "true") {
feldPruefen(feld);
}
});
feld.addEventListener("change", function () {
if (schonAbgeschickt) feldPruefen(feld);
});
});
/* ----------------------------------------------------------------------
Absenden
---------------------------------------------------------------------- */
function meldungenAusblenden() {
if (meldungErfolg) meldungErfolg.classList.remove("ist-sichtbar");
if (meldungFehler) meldungFehler.classList.remove("ist-sichtbar");
}
function fehlerMelden(text) {
if (!meldungFehler) return;
if (meldungFehlerText) meldungFehlerText.textContent = text;
meldungFehler.classList.add("ist-sichtbar");
meldungFehler.scrollIntoView({ block: "nearest" });
}
formular.addEventListener("submit", function (e) {
e.preventDefault();
schonAbgeschickt = true;
meldungenAusblenden();
// Alle Regeln prüfen, damit der Besucher alle Fehler auf einmal sieht.
var ersterFehler = null;
Object.keys(REGELN).forEach(function (name) {
var feld = formular.elements[name];
if (!feld) return;
if (!feldPruefen(feld) && !ersterFehler) ersterFehler = feld;
});
if (ersterFehler) {
ersterFehler.focus();
return;
}
var key = formular.elements["access_key"];
if (key && key.value === PLATZHALTER_KEY) {
fehlerMelden(
"Das Formular ist noch nicht mit einem Web3Forms-Zugangsschlüssel verbunden. " +
"Bis dahin erreichen Sie uns direkt per E-Mail."
);
return;
}
absendeKnopf.disabled = true;
var beschriftung = absendeKnopf.textContent;
absendeKnopf.textContent = "Wird gesendet …";
fetch(formular.action, {
method: "POST",
body: new FormData(formular)
})
.then(function (antwort) {
return antwort.json().catch(function () {
return { success: antwort.ok };
});
})
.then(function (ergebnis) {
if (!ergebnis.success) {
throw new Error(ergebnis.message || "Unbekannter Fehler");
}
formular.reset();
if (meldungErfolg) {
meldungErfolg.classList.add("ist-sichtbar");
meldungErfolg.setAttribute("tabindex", "-1");
meldungErfolg.focus();
}
})
.catch(function () {
fehlerMelden(
"Die Anfrage konnte nicht gesendet werden. Bitte versuchen Sie es " +
"noch einmal oder schreiben Sie uns direkt eine E-Mail."
);
})
.then(function () {
absendeKnopf.disabled = false;
absendeKnopf.textContent = beschriftung;
});
});
})();

79
assets/js/projekte.js Normal file
View file

@ -0,0 +1,79 @@
/* ==========================================================================
Purinto GmbH — Projektfilter
Filtert die Projektliste nach Branche und Verfahren. Beide Gruppen wirken
gemeinsam (UND): "Medizintechnik" + "Bridge Tooling" zeigt nur Projekte,
auf die beides zutrifft.
Ohne JavaScript sind schlicht alle Projekte sichtbar — die Filterleiste
wird dann gar nicht erst eingeblendet.
========================================================================== */
(function () {
"use strict";
var leiste = document.querySelector("[data-filter]");
var liste = document.querySelector("[data-projektliste]");
if (!leiste || !liste) return;
var projekte = liste.querySelectorAll("[data-branche]");
var leerHinweis = document.querySelector("[data-leer]");
var zaehler = document.querySelector("[data-zaehler]");
// Filterleiste ist nur mit JS sinnvoll, deshalb erst jetzt einblenden.
leiste.hidden = false;
var auswahl = { branche: "alle", verfahren: "alle" };
function passt(projekt) {
if (
auswahl.branche !== "alle" &&
projekt.getAttribute("data-branche") !== auswahl.branche
) {
return false;
}
if (auswahl.verfahren !== "alle") {
var verfahren = (projekt.getAttribute("data-verfahren") || "").split(/\s+/);
if (verfahren.indexOf(auswahl.verfahren) === -1) return false;
}
return true;
}
function anwenden() {
var sichtbar = 0;
Array.prototype.forEach.call(projekte, function (projekt) {
var zeigen = passt(projekt);
projekt.classList.toggle("ist-versteckt", !zeigen);
if (zeigen) sichtbar++;
});
if (leerHinweis) leerHinweis.hidden = sichtbar > 0;
if (zaehler) {
zaehler.textContent =
sichtbar === 1 ? "1 Projekt" : sichtbar + " Projekte";
}
}
leiste.addEventListener("click", function (e) {
var knopf = e.target.closest("[data-gruppe]");
if (!knopf) return;
var gruppe = knopf.getAttribute("data-gruppe");
auswahl[gruppe] = knopf.getAttribute("data-wert");
// Gedrückten Zustand innerhalb der Gruppe umsetzen
var geschwister = leiste.querySelectorAll(
'[data-gruppe="' + gruppe + '"]'
);
Array.prototype.forEach.call(geschwister, function (el) {
el.setAttribute("aria-pressed", String(el === knopf));
});
anwenden();
});
anwenden();
})();

98
assets/js/site.js Normal file
View file

@ -0,0 +1,98 @@
/* ==========================================================================
Purinto GmbH — Grundverhalten
Mobile-Navigation, Zustand der Kopfzeile beim Scrollen, Einblendungen.
Alles als Progressive Enhancement: ohne JS bleibt die Seite vollständig
bedienbar, nur ohne diese Verfeinerungen.
========================================================================== */
(function () {
"use strict";
/* --- Mobile-Navigation ------------------------------------------------- */
var schalter = document.querySelector("[data-nav-schalter]");
var nav = document.querySelector("[data-nav]");
if (schalter && nav) {
var navUmschalten = function (offen) {
nav.classList.toggle("ist-offen", offen);
schalter.setAttribute("aria-expanded", String(offen));
schalter.querySelector("[data-nav-schalter-text]").textContent = offen
? "Schließen"
: "Menü";
};
schalter.addEventListener("click", function () {
navUmschalten(schalter.getAttribute("aria-expanded") !== "true");
});
// Escape schließt das Menü und gibt den Fokus zurück.
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && nav.classList.contains("ist-offen")) {
navUmschalten(false);
schalter.focus();
}
});
// Beim Wechsel auf Desktop-Breite den mobilen Zustand zurücksetzen,
// sonst bleibt die Navigation unsichtbar hängen.
var breit = window.matchMedia("(min-width: 900px)");
var beiBreitenwechsel = function (mq) {
if (mq.matches) navUmschalten(false);
};
if (breit.addEventListener) {
breit.addEventListener("change", beiBreitenwechsel);
} else if (breit.addListener) {
breit.addListener(beiBreitenwechsel);
}
}
/* --- Kopfzeile bekommt beim Scrollen eine Trennlinie ------------------- */
var kopf = document.querySelector("[data-kopf]");
if (kopf) {
var kopfPruefen = function () {
kopf.classList.toggle("ist-gescrollt", window.scrollY > 8);
};
kopfPruefen();
window.addEventListener("scroll", kopfPruefen, { passive: true });
}
/* --- Dezente Einblendung beim Scrollen --------------------------------- */
var zuEnthuellen = document.querySelectorAll(".reveal");
if (zuEnthuellen.length) {
var ruhig = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (ruhig || !("IntersectionObserver" in window)) {
// Ohne Beobachter oder bei reduzierter Bewegung sofort alles zeigen.
Array.prototype.forEach.call(zuEnthuellen, function (el) {
el.classList.add("ist-sichtbar");
});
} else {
var beobachter = new IntersectionObserver(
function (eintraege) {
eintraege.forEach(function (eintrag) {
if (!eintrag.isIntersecting) return;
eintrag.target.classList.add("ist-sichtbar");
beobachter.unobserve(eintrag.target);
});
},
{ rootMargin: "0px 0px -12% 0px", threshold: 0.08 }
);
Array.prototype.forEach.call(zuEnthuellen, function (el) {
beobachter.observe(el);
});
}
}
/* --- Jahreszahl in der Fußzeile ---------------------------------------- */
var jahr = document.querySelector("[data-jahr]");
if (jahr) jahr.textContent = String(new Date().getFullYear());
})();

View file

@ -0,0 +1,272 @@
/* ==========================================================================
Purinto GmbH — Stückzahl-Achse
Das Signature-Element: eine logarithmische Achse von 1 bis 100.000 Stück.
Der Besucher wählt eine Stückzahl und sieht, welches Verfahren dafür das
richtige ist — inklusive der ehrlichen Grenze, ab der Purinto mit
Partnerbetrieben arbeitet statt selbst zu fertigen.
ALLE fachlichen Eckwerte stehen in ZONEN. Wer die Grenzen ändern will,
ändert sie hier — Achse, Beschriftung und Tafel ziehen automatisch nach.
========================================================================== */
(function () {
"use strict";
var wurzel = document.querySelector("[data-achse]");
if (!wurzel) return;
/* ----------------------------------------------------------------------
Fachliche Datenbasis — vor Livegang bestätigen.
"bis" ist jeweils die obere Grenze der Zone in Stück.
---------------------------------------------------------------------- */
var MIN = 1;
var MAX = 100000;
var ZONEN = [
{
id: "druck",
bis: 100,
kurz: "FDM · SLA",
verfahren: "FDM oder SLA — direkt gedruckt",
partner: false,
werkzeug: "Kein Werkzeug nötig",
lieferzeit: "1–5 Arbeitstage",
stueckkosten: "Über die Menge konstant",
anwendung:
"Funktionsmuster, Passungs- und Einbauprüfungen, Vorrichtungen, Designfreigaben",
hinweis:
"In diesem Bereich fertigen wir direkt aus der CAD-Datei. Änderungen kosten nichts außer einem neuen Druck — genau richtig, solange die Konstruktion noch in Bewegung ist."
},
{
id: "bridge",
bis: 1000,
kurz: "Bridge Tooling",
verfahren: "Bridge Tooling — SLA-gedruckter Formeinsatz",
partner: false,
werkzeug: "Gering — der Formeinsatz wird gedruckt, nicht gefräst",
lieferzeit: "2–3 Wochen bis zum ersten Schuss",
stueckkosten: "Deutlich unter dem Direktdruck",
anwendung:
"Vorserien, Markttests, Nullserien und Zulassungsmuster im späteren Serienwerkstoff",
hinweis:
"Hier liegt unser Schwerpunkt. Sie bekommen Teile im echten Serienwerkstoff mit Spritzguss-Eigenschaften, ohne vorher ein Stahlwerkzeug zu finanzieren."
},
{
id: "serie",
bis: MAX,
kurz: "Serienspritzguss",
verfahren: "Serienspritzguss — Stahlwerkzeug",
partner: true,
werkzeug: "Hoch — Stahlwerkzeug als einmalige Investition",
lieferzeit: "8–14 Wochen bis zum ersten Schuss",
stueckkosten: "Am niedrigsten, sobald die Menge das Werkzeug trägt",
anwendung: "Serienfertigung nach abgeschlossener Entwicklung",
hinweis:
"Ab hier ist ein Stahlwerkzeug wirtschaftlich. Das ist nicht unser Kerngeschäft — wir begleiten den Übergang und vermitteln an lokale Spritzgießer, mit denen wir zusammenarbeiten."
}
];
var START = 40; // Stückzahl beim Laden der Seite
/* ----------------------------------------------------------------------
Umrechnung zwischen Stückzahl und Position auf der Achse
---------------------------------------------------------------------- */
var SPANNE = Math.log10(MAX) - Math.log10(MIN);
function wertZuAnteil(wert) {
return (Math.log10(wert) - Math.log10(MIN)) / SPANNE;
}
function anteilZuWert(anteil) {
return Math.pow(10, Math.log10(MIN) + anteil * SPANNE);
}
// Auf lesbare Stufen runden — "37 Stück" hilft niemandem bei "etwa 40".
function runden(wert) {
if (wert < 10) return Math.max(MIN, Math.round(wert));
if (wert < 100) return Math.round(wert / 5) * 5;
if (wert < 1000) return Math.round(wert / 10) * 10;
if (wert < 10000) return Math.round(wert / 100) * 100;
return Math.round(wert / 1000) * 1000;
}
function zoneFuer(wert) {
for (var i = 0; i < ZONEN.length; i++) {
if (wert <= ZONEN[i].bis) return ZONEN[i];
}
return ZONEN[ZONEN.length - 1];
}
// Bewusst nicht toLocaleString: de-AT trennt Tausender mit einem schmalen
// Leerzeichen ("100 000"), der übrige Seitentext schreibt "100.000".
// Explizite Formatierung hält beides deckungsgleich.
function formatieren(zahl) {
return String(zahl).replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
/* ----------------------------------------------------------------------
Elemente
---------------------------------------------------------------------- */
var spur = wurzel.querySelector("[data-spur]");
var griff = wurzel.querySelector("[data-griff]");
var zonenElemente = wurzel.querySelectorAll("[data-zone]");
var ausgabe = document.querySelector("[data-ausgabe]");
var verfahrenAus = document.querySelector("[data-verfahren]");
var hinweisAus = document.querySelector("[data-hinweis]");
var werkzeugAus = document.querySelector("[data-werkzeug]");
var lieferzeitAus = document.querySelector("[data-lieferzeit]");
var stueckkostenAus = document.querySelector("[data-stueckkosten]");
var anwendungAus = document.querySelector("[data-anwendung]");
if (!spur || !griff) return;
/* ----------------------------------------------------------------------
Zonenbreiten aus den Daten ableiten, damit geänderte Grenzen
sofort auch optisch stimmen
---------------------------------------------------------------------- */
(function zonenAufbauen() {
var vorher = 0;
ZONEN.forEach(function (zone, i) {
var ende = wertZuAnteil(zone.bis) * 100;
var breite = ende - vorher;
if (zonenElemente[i]) zonenElemente[i].style.width = breite + "%";
var flaeche = wurzel.querySelector('[data-flaeche="' + zone.id + '"]');
if (flaeche) {
flaeche.style.left = vorher + "%";
flaeche.style.right = 100 - ende + "%";
}
vorher = ende;
});
// Skalenbeschriftungen aus derselben Umrechnung setzen, damit sie
// exakt über den Zonengrenzen stehen.
var skala = wurzel.querySelectorAll("[data-skala]");
Array.prototype.forEach.call(skala, function (el) {
var wert = Number(el.getAttribute("data-skala"));
if (!wert) return;
el.style.left = wertZuAnteil(wert) * 100 + "%";
});
})();
/* ----------------------------------------------------------------------
Zustand setzen
---------------------------------------------------------------------- */
var aktuellerWert = START;
function setzen(wert) {
wert = Math.min(MAX, Math.max(MIN, runden(wert)));
aktuellerWert = wert;
var anteil = wertZuAnteil(wert);
var zone = zoneFuer(wert);
griff.style.left = anteil * 100 + "%";
griff.setAttribute("aria-valuenow", String(wert));
griff.setAttribute(
"aria-valuetext",
formatieren(wert) + " Stück, " + zone.verfahren
);
Array.prototype.forEach.call(zonenElemente, function (el) {
el.classList.toggle("ist-aktiv", el.getAttribute("data-zone") === zone.id);
});
if (ausgabe) ausgabe.textContent = formatieren(wert);
if (verfahrenAus) verfahrenAus.textContent = zone.verfahren;
if (hinweisAus) hinweisAus.textContent = zone.hinweis;
if (werkzeugAus) werkzeugAus.textContent = zone.werkzeug;
if (lieferzeitAus) lieferzeitAus.textContent = zone.lieferzeit;
if (stueckkostenAus) stueckkostenAus.textContent = zone.stueckkosten;
if (anwendungAus) anwendungAus.textContent = zone.anwendung;
}
/* ----------------------------------------------------------------------
Zeigerbedienung
---------------------------------------------------------------------- */
function ausPosition(clientX) {
var kasten = spur.getBoundingClientRect();
if (!kasten.width) return;
var anteil = (clientX - kasten.left) / kasten.width;
setzen(anteilZuWert(Math.min(1, Math.max(0, anteil))));
}
var zieht = false;
spur.addEventListener("pointerdown", function (e) {
zieht = true;
spur.setPointerCapture(e.pointerId);
ausPosition(e.clientX);
griff.focus();
e.preventDefault();
});
spur.addEventListener("pointermove", function (e) {
if (zieht) ausPosition(e.clientX);
});
var beenden = function (e) {
if (!zieht) return;
zieht = false;
if (spur.hasPointerCapture && spur.hasPointerCapture(e.pointerId)) {
spur.releasePointerCapture(e.pointerId);
}
};
spur.addEventListener("pointerup", beenden);
spur.addEventListener("pointercancel", beenden);
/* ----------------------------------------------------------------------
Tastaturbedienung — der Griff ist ein role="slider"
---------------------------------------------------------------------- */
var SCHRITT = 0.02; // Anteil der Gesamtachse pro Tastendruck
griff.addEventListener("keydown", function (e) {
var anteil = wertZuAnteil(aktuellerWert);
var neu = null;
switch (e.key) {
case "ArrowRight":
case "ArrowUp":
neu = anteil + SCHRITT;
break;
case "ArrowLeft":
case "ArrowDown":
neu = anteil - SCHRITT;
break;
case "PageUp":
neu = anteil + SCHRITT * 5;
break;
case "PageDown":
neu = anteil - SCHRITT * 5;
break;
case "Home":
neu = 0;
break;
case "End":
neu = 1;
break;
default:
return;
}
e.preventDefault();
setzen(anteilZuWert(Math.min(1, Math.max(0, neu))));
});
griff.setAttribute("aria-valuemin", String(MIN));
griff.setAttribute("aria-valuemax", String(MAX));
setzen(START);
})();

95
danke.html Normal file
View file

@ -0,0 +1,95 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Danke für Ihre Anfrage — Purinto GmbH</title>
<meta name="description" content="Ihre Anfrage an Purinto ist eingegangen." />
<meta name="robots" content="noindex, nofollow" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="sektion">
<div class="huelle huelle--eng">
<p class="eyebrow">Anfrage eingegangen</p>
<h1 class="display t-2xl">Danke — wir haben Ihre Anfrage.</h1>
<p class="lead mt-6">
Sie bekommen innerhalb von zwei Arbeitstagen eine Rückmeldung mit
einer ersten Einschätzung zu Machbarkeit, Verfahren und Kosten. Wenn
wir dafür noch etwas brauchen, fragen wir gezielt nach.
</p>
<div class="hinweis mt-7">
<span class="hinweis__titel">Noch ein CAD-Modell nachreichen?</span>
<p>
Schicken Sie STEP- oder STL-Dateien einfach an
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>. Auf Wunsch senden wir vorab eine Geheimhaltungsvereinbarung.
</p>
</div>
<div class="knopf-reihe mt-7">
<a class="knopf knopf--primaer" href="index.html">Zur Startseite</a>
<a class="knopf knopf--sekundaer" href="projekte.html">Projekte ansehen</a>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__unten" style="border-top: none; padding-top: 0">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
</body>
</html>

353
datenschutz.html Normal file
View file

@ -0,0 +1,353 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Datenschutzerklärung — Purinto GmbH</title>
<meta
name="description"
content="Wie die Purinto GmbH personenbezogene Daten verarbeitet — Kontaktformular, Server-Logfiles, Ihre Rechte."
/>
<meta name="robots" content="noindex, follow" />
<link rel="canonical" href="https://www.purinto.at/datenschutz.html" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="seitenkopf">
<div class="huelle">
<p class="eyebrow">Rechtliches</p>
<h1 class="display t-2xl seitenkopf__titel">Datenschutzerklärung</h1>
<p class="lead">
Informationen nach Art. 13 und 14 der Datenschutz-Grundverordnung.
</p>
</div>
</section>
<section class="sektion">
<div class="huelle">
<div class="hinweis" style="max-width: 68ch">
<span class="hinweis__titel">Vor dem Livegang zu erledigen</span>
<p>
Der Text beschreibt genau die Technik, die auf dieser Website
tatsächlich eingesetzt wird. Sobald weitere Dienste dazukommen —
Analyse, Kartendienst, Newsletter, eingebettete Videos — muss er
ergänzt werden. Ersetzen Sie alle markierten Stellen und lassen
Sie den Text prüfen. Diese Vorlage ist keine Rechtsberatung.
</p>
</div>
<div class="rechtstext mt-7">
<h2>Verantwortlicher</h2>
<p>
Verantwortlich für die Verarbeitung personenbezogener Daten auf
dieser Website ist:
</p>
<dl>
<div>
<dt>Firma</dt>
<dd>Purinto GmbH</dd>
</div>
<div>
<dt>Anschrift</dt>
<dd>
<span class="platzhalter"
>[Straße und Hausnummer]<br />[PLZ] [Ort]<br />Österreich</span
>
</dd>
</div>
<div>
<dt>E-Mail</dt>
<dd>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</dd>
</div>
<div>
<dt>Telefon</dt>
<dd><span class="platzhalter">[+43 …]</span></dd>
</div>
</dl>
<p>
Ein Datenschutzbeauftragter ist nach Art. 37 DSGVO
<span class="platzhalter"
>[nicht bestellt / bestellt: Name und Kontakt]</span
>.
</p>
<h2>Keine Cookies, kein Tracking</h2>
<p>
Diese Website setzt keine Cookies, bindet keine Analyse- oder
Trackingdienste ein und lädt keine Inhalte von fremden Servern
nach. Schriften und Grafiken werden von unserem eigenen Webspace
ausgeliefert. Aus diesem Grund gibt es hier auch kein
Cookie-Banner — es wäre gegenstandslos.
</p>
<h2>Aufruf der Website: Server-Logfiles</h2>
<p>
Beim Aufruf dieser Website übermittelt Ihr Browser technisch
notwendige Daten, die unser Webhoster in Logdateien speichert:
</p>
<ul>
<li>aufgerufene Adresse und Datum und Uhrzeit des Zugriffs</li>
<li>übertragene Datenmenge und Meldung über den Erfolg des Abrufs</li>
<li>Browsertyp und Betriebssystem</li>
<li>zuvor besuchte Seite (Referrer), sofern übermittelt</li>
<li>IP-Adresse</li>
</ul>
<p>
<strong>Zweck und Rechtsgrundlage:</strong> Diese Verarbeitung
dient dem technischen Betrieb, der Stabilität und der Sicherheit
der Website. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO
(berechtigtes Interesse an einem sicheren und funktionsfähigen
Webauftritt).
</p>
<p>
<strong>Speicherdauer:</strong>
<span class="platzhalter"
>[Angabe des Hosters übernehmen, üblich sind 7 bis 30
Tage]</span
>.
</p>
<h2>Hosting</h2>
<p>
Diese Website wird gehostet bei
<span class="platzhalter"
>[Name, Anschrift und Land des Hosters]</span
>. Der Hoster verarbeitet die oben genannten Daten in unserem
Auftrag. Mit ihm besteht ein Auftragsverarbeitungsvertrag nach
Art. 28 DSGVO.
</p>
<h2>Kontaktformular</h2>
<p>
Wenn Sie uns über das Formular auf der Kontaktseite eine Anfrage
senden, verarbeiten wir die von Ihnen eingegebenen Angaben: Name,
E-Mail-Adresse sowie, falls angegeben, Firma, Telefonnummer, Art
des Anliegens, Stückzahl und Ihre Nachricht.
</p>
<p>
<strong>Zweck und Rechtsgrundlage:</strong> Wir verarbeiten diese
Daten ausschließlich, um Ihre Anfrage zu bearbeiten und zu
beantworten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO
(Durchführung vorvertraglicher Maßnahmen) sowie Ihre Einwilligung
nach Art. 6 Abs. 1 lit. a DSGVO, die Sie beim Absenden erteilen.
Sie können diese Einwilligung jederzeit formlos widerrufen; die
Rechtmäßigkeit der bis dahin erfolgten Verarbeitung bleibt davon
unberührt.
</p>
<p>
<strong>Empfänger:</strong> Für die Zustellung der
Formularnachrichten nutzen wir den Dienst Web3Forms
<span class="platzhalter"
>[Anbieter, vollständige Anschrift und Serverstandort ergänzen —
die Angaben finden Sie in der Datenschutzerklärung des
Anbieters]</span
>. Der Anbieter verarbeitet die Formulardaten in unserem Auftrag
und leitet sie an unser E-Mail-Postfach weiter.
<span class="platzhalter"
>[Vor dem Livegang klären: Auftragsverarbeitungsvertrag nach
Art. 28 DSGVO abschließen und prüfen, ob eine Übermittlung in
ein Drittland stattfindet. Ist das der Fall, muss hier die
Rechtsgrundlage der Übermittlung nach Kapitel V DSGVO ergänzt
werden. Alternativ lässt sich der Versand auf ein eigenes
Skript beim Hoster umstellen.]</span
>
</p>
<p>
<strong>Speicherdauer:</strong> Wir bewahren Ihre Anfrage so
lange auf, wie es für die Bearbeitung erforderlich ist. Führt die
Anfrage zu einem Auftrag, gelten die gesetzlichen
Aufbewahrungsfristen, insbesondere die siebenjährige Frist nach
§ 132 Bundesabgabenordnung. Andernfalls löschen wir die Anfrage
<span class="platzhalter">[z. B. nach zwölf Monaten]</span>.
</p>
<h2>Kontakt per E-Mail oder Telefon</h2>
<p>
Wenn Sie uns direkt per E-Mail oder telefonisch kontaktieren,
verarbeiten wir Ihre Angaben zur Bearbeitung des Anliegens.
Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, soweit es um die
Anbahnung oder Erfüllung eines Vertrags geht, sonst Art. 6 Abs. 1
lit. f DSGVO.
</p>
<p>
Übermitteln Sie uns CAD-Dateien, verarbeiten wir diese
ausschließlich zur Bearbeitung Ihrer Anfrage und geben sie nicht
ohne Ihre Zustimmung an Dritte weiter. Ist für die Umsetzung ein
Partnerbetrieb erforderlich, holen wir Ihre Zustimmung vorher ein.
</p>
<h2>Weitergabe an Dritte</h2>
<p>
Eine Weitergabe Ihrer Daten erfolgt nur, wenn Sie eingewilligt
haben, dies zur Vertragserfüllung erforderlich ist oder eine
gesetzliche Verpflichtung besteht. Ihre Daten werden nicht
verkauft und nicht für Werbung Dritter verwendet.
</p>
<h2>Ihre Rechte</h2>
<p>Ihnen stehen gegenüber uns folgende Rechte zu:</p>
<ul>
<li>Auskunft über die zu Ihrer Person gespeicherten Daten (Art. 15 DSGVO)</li>
<li>Berichtigung unrichtiger Daten (Art. 16 DSGVO)</li>
<li>Löschung (Art. 17 DSGVO)</li>
<li>Einschränkung der Verarbeitung (Art. 18 DSGVO)</li>
<li>Datenübertragbarkeit (Art. 20 DSGVO)</li>
<li>
Widerspruch gegen Verarbeitungen, die auf einem berechtigten
Interesse beruhen (Art. 21 DSGVO)
</li>
<li>Widerruf einer erteilten Einwilligung (Art. 7 Abs. 3 DSGVO)</li>
</ul>
<p>
Wenden Sie sich dafür formlos an die oben genannte Adresse. Wir
antworten innerhalb der gesetzlichen Frist von einem Monat.
</p>
<h2>Beschwerderecht</h2>
<p>
Wenn Sie der Ansicht sind, dass die Verarbeitung Ihrer Daten gegen
die DSGVO verstößt, können Sie sich bei der Aufsichtsbehörde
beschweren:
</p>
<dl>
<div>
<dt>Behörde</dt>
<dd>Österreichische Datenschutzbehörde</dd>
</div>
<div>
<dt>Anschrift</dt>
<dd>Barichgasse 40–42, 1030 Wien</dd>
</div>
<div>
<dt>Website</dt>
<dd>
<a href="https://www.dsb.gv.at" rel="noopener">dsb.gv.at</a>
</dd>
</div>
</dl>
<h2>Datensicherheit</h2>
<p>
Diese Website wird über eine verschlüsselte HTTPS-Verbindung
ausgeliefert. Damit sind die Daten, die Sie an uns übermitteln,
auf dem Transportweg geschützt.
<span class="platzhalter"
>[Sicherstellen, dass beim Hoster ein gültiges Zertifikat
eingerichtet ist und alle Aufrufe auf HTTPS umgeleitet
werden.]</span
>
</p>
<h2>Änderungen dieser Erklärung</h2>
<p>
Wir passen diese Datenschutzerklärung an, sobald sich die
Verarbeitung oder die Rechtslage ändert. Es gilt die jeweils hier
veröffentlichte Fassung.
</p>
<p class="mono leise">
Stand: <span class="platzhalter">[Monat Jahr eintragen]</span>
</p>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
</body>
</html>

568
dienstleistungen.html Normal file
View file

@ -0,0 +1,568 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dienstleistungen — Purinto GmbH</title>
<meta
name="description"
content="Konstruktionsbegleitung, Materialauswahl, Bauteiloptimierung, Prototypen aus FDM und SLA sowie Kleinserien mit Bridge Tooling — die Leistungen von Purinto im Detail."
/>
<link rel="canonical" href="https://www.purinto.at/dienstleistungen.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Dienstleistungen — Purinto GmbH" />
<meta
property="og:description"
content="Von der Konstruktionsbegleitung bis zur Kleinserie im Serienwerkstoff."
/>
<meta property="og:locale" content="de_AT" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li>
<a class="nav__link" href="dienstleistungen.html" aria-current="page"
>Dienstleistungen</a
>
</li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="seitenkopf">
<div class="huelle">
<p class="eyebrow">Dienstleistungen</p>
<h1 class="display t-2xl seitenkopf__titel">
Fünf Leistungen, die aufeinander aufbauen.
</h1>
<p class="lead">
Sie können jede einzeln beauftragen. Zusammen ergeben sie den Weg
von der ersten Idee zum Bauteil, das sich in Serie fertigen lässt.
</p>
</div>
</section>
<div class="huelle">
<nav class="sprungnav" aria-label="Leistungen auf dieser Seite">
<a class="sprungnav__link" href="#konstruktion">01 Konstruktion</a>
<a class="sprungnav__link" href="#material">02 Materialauswahl</a>
<a class="sprungnav__link" href="#optimierung">03 Optimierung</a>
<a class="sprungnav__link" href="#prototypen">04 Prototypen</a>
<a class="sprungnav__link" href="#bridge">05 Bridge Tooling</a>
</nav>
</div>
<!-- ============ 01 Konstruktionsbegleitung ============ -->
<section class="leistung" id="konstruktion" aria-labelledby="t-konstruktion">
<div class="huelle">
<div class="leistung__kopf">
<span class="leistung__nummer">01 — Konstruktion</span>
<h2 class="display t-xl" id="t-konstruktion">Konstruktionsbegleitung</h2>
<p class="lead mt-6">
Die meisten teuren Überraschungen im Spritzguss entstehen nicht im
Werkzeug, sondern im CAD-Modell. Wir prüfen Ihre Konstruktion,
bevor sie in die Fertigung geht.
</p>
</div>
<div class="leistung__raster">
<div>
<div class="block">
<p class="block__titel">Was wir machen</p>
<p>
Wir gehen Ihr Bauteil systematisch auf Fertigbarkeit durch:
Wandstärkenverteilung und Materialanhäufungen,
Entformungsschrägen und Entformungsrichtung, Rippengeometrie
und deren Anbindung, zu erwartende Bindenähte und
Einfallstellen, Anschnittlage, Toleranzketten über die
gesamte Baugruppe sowie die Wahl der Fügetechnik. Das Ergebnis
ist keine Liste von Bedenken, sondern ein überarbeitungsfähiger
Konstruktionsvorschlag.
</p>
</div>
<div class="block">
<p class="block__titel">Wann es sinnvoll ist</p>
<p>
Am wirksamsten, bevor Sie ein Werkzeug beauftragen —
idealerweise schon in der Konzeptphase, solange Änderungen
nichts kosten. Ebenso sinnvoll bei einem bestehenden Bauteil,
das Probleme macht: Verzug, Einfallstellen, Maßabweichungen
oder Ausschuss in der Montage.
</p>
</div>
</div>
<div>
<div class="block">
<p class="block__titel">Was Sie bekommen</p>
<ul class="haken">
<li>Kommentiertes CAD-Review als PDF mit priorisierten Befunden</li>
<li>Konkrete Änderungsvorschläge mit Begründung, nicht nur Hinweise</li>
<li>Empfehlung zu Entformungsrichtung, Trennebene und Anschnittlage</li>
<li>Toleranzkonzept über die Baugruppe</li>
<li>Auf Wunsch das überarbeitete 3D-Modell</li>
</ul>
</div>
<dl class="datenzeile">
<div>
<dt>Typische Dauer</dt>
<dd>3–10 Arbeitstage</dd>
</div>
<div>
<dt>Wir brauchen von Ihnen</dt>
<dd>STEP-Datei, Einsatzfall, Stückzahl</dd>
</div>
<div>
<dt>Ergebnis</dt>
<dd>CAD-Review als PDF</dd>
</div>
<div>
<dt>Sinnvoll ab</dt>
<dd>Konzeptphase</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<!-- ============ 02 Materialauswahl ============ -->
<section class="leistung" id="material" aria-labelledby="t-material">
<div class="huelle">
<div class="leistung__kopf">
<span class="leistung__nummer">02 — Werkstoff</span>
<h2 class="display t-xl" id="t-material">Materialauswahl und -beratung</h2>
<p class="lead mt-6">
Ein Werkstoff, der auf dem Datenblatt passt, kann im Bauteil
trotzdem versagen. Wir wählen ihn entlang Ihres tatsächlichen
Anforderungsprofils aus.
</p>
</div>
<div class="leistung__raster">
<div>
<div class="block">
<p class="block__titel">Was wir machen</p>
<p>
Wir nehmen die Anforderungen auf — mechanische Last,
Dauergebrauchstemperatur, Medienkontakt, UV- und
Witterungsbelastung, Brandverhalten, erforderliche Zulassungen
und Kostenrahmen — und leiten daraus Werkstoffkandidaten ab.
Datenblattwerte bewerten wir im Kontext: Kurzzeitkennwerte aus
dem Zugversuch sagen wenig über das Kriechverhalten unter
Dauerlast. Zusätzlich benennen wir Ersatzwerkstoffe für den
Fall, dass ein Typ nicht lieferbar ist.
</p>
</div>
<div class="block">
<p class="block__titel">Wann es sinnvoll ist</p>
<p>
Bei neuen Bauteilen vor der Konstruktion, weil der Werkstoff
die Geometrie mitbestimmt — Wandstärke, Radien und
Entformungsschrägen hängen davon ab. Bei bestehenden Bauteilen
dann, wenn Kosten, Lieferfähigkeit, Regulatorik oder
Nachhaltigkeitsziele einen Wechsel erfordern.
</p>
</div>
</div>
<div>
<div class="block">
<p class="block__titel">Was Sie bekommen</p>
<ul class="haken">
<li>Dokumentiertes Anforderungsprofil als gemeinsame Grundlage</li>
<li>Zwei bis vier begründete Werkstoffkandidaten mit Datenblättern</li>
<li>Bewertung nach Funktion, Verarbeitbarkeit, Kosten und Verfügbarkeit</li>
<li>Prüfung von Rezyklaten und Biopolymeren, wo die Anforderungen es zulassen</li>
<li>Auf Wunsch Prüfkörper oder Musterteile im Kandidatenwerkstoff</li>
</ul>
</div>
<dl class="datenzeile">
<div>
<dt>Typische Dauer</dt>
<dd>5–10 Arbeitstage</dd>
</div>
<div>
<dt>Wir brauchen von Ihnen</dt>
<dd>Einsatzfall, Lastfall, Umgebung</dd>
</div>
<div>
<dt>Ergebnis</dt>
<dd>Werkstoffempfehlung mit Begründung</dd>
</div>
<div>
<dt>Zulassungen</dt>
<dd>Nach Bedarf berücksichtigt</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<!-- ============ 03 Bauteiloptimierung ============ -->
<section class="leistung" id="optimierung" aria-labelledby="t-optimierung">
<div class="huelle">
<div class="leistung__kopf">
<span class="leistung__nummer">03 — Optimierung</span>
<h2 class="display t-xl" id="t-optimierung">Bauteiloptimierung</h2>
<p class="lead mt-6">
Ein Bauteil kann funktionieren und trotzdem zu teuer, zu schwer
oder zu aufwendig zu fertigen sein.
</p>
</div>
<div class="leistung__raster">
<div>
<div class="block">
<p class="block__titel">Was wir machen</p>
<p>
Wir arbeiten an Rippengeometrie und Wandstärken, ersetzen
Materialanhäufungen durch Aussparungen bei gleicher
Steifigkeit, verbessern die Entformbarkeit, um Schieber im
Werkzeug zu vermeiden, und integrieren Funktionen, um Teile
und Montageschritte einzusparen. Jede Änderung wird gegen die
ursprüngliche Anforderung geprüft — Optimierung darf keine
Funktion kosten.
</p>
</div>
<div class="block">
<p class="block__titel">Wann es sinnvoll ist</p>
<p>
Wenn Stückkosten, Gewicht, Zykluszeit oder Ausschussquote
nicht stimmen. Oder wenn ein Prototyp zwar funktioniert, in
dieser Form aber nicht wirtschaftlich zu fertigen ist — ein
häufiger Fall bei Bauteilen, die für den 3D-Druck entworfen
wurden und nun in den Spritzguss sollen.
</p>
</div>
</div>
<div>
<div class="block">
<p class="block__titel">Was Sie bekommen</p>
<ul class="haken">
<li>Analyse der Kostentreiber am konkreten Bauteil</li>
<li>Optimierungsvorschläge mit erwarteter Wirkung</li>
<li>Überarbeitetes 3D-Modell</li>
<li>Gedruckte Muster zur Absicherung der Änderungen</li>
<li>Bewertung der Auswirkung auf die späteren Werkzeugkosten</li>
</ul>
</div>
<dl class="datenzeile">
<div>
<dt>Typische Dauer</dt>
<dd>1–3 Wochen</dd>
</div>
<div>
<dt>Wir brauchen von Ihnen</dt>
<dd>Aktuelles Modell, Kostenstruktur</dd>
</div>
<div>
<dt>Ergebnis</dt>
<dd>Überarbeitetes Modell und Bericht</dd>
</div>
<div>
<dt>Übliche Hebel</dt>
<dd>Material, Zykluszeit, Montage</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<!-- ============ 04 Prototypen ============ -->
<section class="leistung" id="prototypen" aria-labelledby="t-prototypen">
<div class="huelle">
<div class="leistung__kopf">
<span class="leistung__nummer">04 — Prototypen</span>
<h2 class="display t-xl" id="t-prototypen">
Prototypen im 3D-Druck: FDM und SLA
</h2>
<p class="lead mt-6">
Zwei Verfahren, zwei Stärken. Wir wählen nach Bauteil und
Einsatzzweck — nicht danach, welche Maschine gerade frei ist.
</p>
</div>
<div class="leistung__raster">
<div>
<div class="block">
<p class="block__titel">FDM — Schmelzschichtung</p>
<p>
Stark bei belastbaren Funktionsteilen, großen Geometrien,
Vorrichtungen und allem, was mechanisch etwas aushalten muss.
Verarbeitet werden Serienthermoplaste von PLA und PETG über
ABS und ASA bis PA und PC, auch faserverstärkt. Die
Schichtstruktur bleibt sichtbar und die Festigkeit ist
richtungsabhängig — beides berücksichtigen wir bereits bei der
Ausrichtung des Bauteils im Bauraum.
</p>
</div>
<div class="block">
<p class="block__titel">SLA — Stereolithografie</p>
<p>
Stark bei feinen Details, glatten Oberflächen, engen Toleranzen
und Sichtteilen. SLA ist zugleich die Grundlage unserer
Formeinsätze für das Bridge Tooling. Nach dem Druck folgen
Reinigung und UV-Nachhärtung; die endgültigen mechanischen
Eigenschaften stellen sich erst danach ein.
</p>
</div>
</div>
<div>
<div class="block">
<p class="block__titel">Was Sie bekommen</p>
<ul class="haken">
<li>Verfahrensempfehlung je Bauteil statt pauschaler Festlegung</li>
<li>Konstruktionshinweise für das gewählte Verfahren</li>
<li>Teile innerhalb von 1–3 Arbeitstagen ab Freigabe</li>
<li>
Nachbearbeitung: Supportentfernung, UV-Nachhärtung, Schleifen
und Glätten, Lackieren, eingepresste Gewindeeinsätze
</li>
<li>Auf Wunsch Maßprotokoll der kritischen Maße</li>
</ul>
</div>
<dl class="datenzeile">
<div>
<dt>Verfahren</dt>
<dd>FDM und SLA</dd>
</div>
<div>
<dt>Stückzahl</dt>
<dd>1–100 Stück</dd>
</div>
<div>
<dt>Erste Teile</dt>
<dd>1–3 Arbeitstage</dd>
</div>
<div>
<dt>Datenformat</dt>
<dd>STEP bevorzugt, STL möglich</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<!-- ============ 05 Bridge Tooling ============ -->
<section class="leistung" id="bridge" aria-labelledby="t-bridge">
<div class="huelle">
<div class="leistung__kopf">
<span class="leistung__nummer">05 — Kleinserie</span>
<h2 class="display t-xl" id="t-bridge">
Bridge Tooling und Kleinserien
</h2>
<p class="lead mt-6">
Die Brücke zwischen gedrucktem Prototyp und Serienwerkzeug — mit
Teilen aus dem echten Serienwerkstoff.
</p>
</div>
<div class="leistung__raster">
<div>
<div class="block">
<p class="block__titel">Was wir machen</p>
<p>
Statt ein Stahlwerkzeug zu fräsen, drucken wir den Formeinsatz
im SLA-Verfahren aus einem temperaturbeständigen Harz und
setzen ihn in ein Normalien-Werkzeug ein. Damit spritzen wir
Ihr Bauteil im späteren Serienwerkstoff. Sie erhalten Teile
mit Spritzguss-Gefüge, -Oberfläche und -Schwindung — keine
Annäherung aus einem Druckverfahren.
</p>
</div>
<div class="block">
<p class="block__titel">Zur Standzeit, offen gesagt</p>
<p>
Die Standzeit eines gedruckten Formeinsatzes ist begrenzt. Sie
hängt vom verarbeiteten Werkstoff, der Massetemperatur, der
Bauteilgeometrie und den Entformungsschrägen ab. Wir legen den
Einsatz entsprechend aus und sagen Ihnen vor Auftragsbeginn,
welche Losgröße realistisch ist und ab wann ein zweiter
Einsatz nötig wird. Das ist günstiger als jede Überraschung
mitten in der Serie.
</p>
</div>
<div class="block">
<p class="block__titel">Wann es sinnvoll ist</p>
<p>
Bei Vorserien, Markttests, Nullserien und Zulassungsmustern.
Immer dann, wenn Sie Teile im Serienwerkstoff brauchen, das
Design aber noch nicht endgültig eingefroren ist.
</p>
</div>
</div>
<div>
<div class="block">
<p class="block__titel">Was Sie bekommen</p>
<ul class="haken">
<li>Auslegung und Fertigung des SLA-Formeinsatzes</li>
<li>Spritzguss im späteren Serienwerkstoff</li>
<li>Realistische Angabe zur erreichbaren Losgröße vorab</li>
<li>Bemusterung und Maßprotokoll</li>
<li>
Einen Konstruktionsstand, der direkt in ein Serienwerkzeug
übernommen werden kann
</li>
</ul>
</div>
<dl class="datenzeile">
<div>
<dt>Losgröße</dt>
<dd>100–1.000 Stück</dd>
</div>
<div>
<dt>Erste Teile</dt>
<dd>2–3 Wochen</dd>
</div>
<div>
<dt>Werkzeug</dt>
<dd>SLA-gedruckter Formeinsatz</dd>
</div>
<div>
<dt>Werkstoff</dt>
<dd>Serienthermoplast</dd>
</div>
</dl>
<div class="hinweis mt-6">
<span class="hinweis__titel">Und danach?</span>
<p>
Ab etwa 1.000 Stück wird ein Stahlwerkzeug wirtschaftlich.
Diesen Schritt gehen wir mit: Wir übergeben den abgesicherten
Konstruktionsstand und vermitteln an Spritzgießer in der
Region, mit denen wir zusammenarbeiten — Formeinsätze aus
Stahl lassen sich darüber ebenfalls realisieren. Die
Serienfertigung selbst ist nicht unser Schwerpunkt. Wir sagen
das lieber vorher, als Sie später weiterzureichen.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta-band sektion">
<div class="huelle cta-band__innen">
<div>
<h2 class="display t-2xl">Noch unklar, was Sie brauchen?</h2>
<p class="cta-band__text">
Beschreiben Sie uns den Einsatzfall und die gewünschte Stückzahl.
Wir sagen Ihnen, welche dieser Leistungen tatsächlich weiterhilft
— und welche Sie sich sparen können.
</p>
</div>
<div class="knopf-reihe">
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
<a class="knopf knopf--hell" href="projekte.html">Projekte ansehen</a>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
</body>
</html>

6
favicon.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect width="24" height="24" rx="4" fill="#f5f6f3" />
<rect x="7" y="4.5" width="10" height="4" rx="1" fill="#9b85c4" />
<rect x="5" y="10" width="14" height="4" rx="1" fill="#8fa894" />
<rect x="3" y="15.5" width="18" height="4" rx="1" fill="#3c4347" />
</svg>

After

Width:  |  Height:  |  Size: 331 B

289
impressum.html Normal file
View file

@ -0,0 +1,289 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Impressum — Purinto GmbH</title>
<meta name="description" content="Impressum und Offenlegung der Purinto GmbH." />
<meta name="robots" content="noindex, follow" />
<link rel="canonical" href="https://www.purinto.at/impressum.html" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="seitenkopf">
<div class="huelle">
<p class="eyebrow">Rechtliches</p>
<h1 class="display t-2xl seitenkopf__titel">Impressum</h1>
<p class="lead">
Offenlegung nach § 5 E-Commerce-Gesetz und § 25 Mediengesetz.
</p>
</div>
</section>
<section class="sektion">
<div class="huelle">
<div class="hinweis" style="max-width: 68ch">
<span class="hinweis__titel">Vor dem Livegang zu erledigen</span>
<p>
Diese Seite liefert die vollständige Struktur, aber noch nicht
Ihre Daten. Alle farbig markierten Stellen müssen ersetzt werden.
Lassen Sie den fertigen Text anschließend anwaltlich oder über die
Wirtschaftskammer prüfen — ein fehlerhaftes Impressum ist in
Österreich abmahnfähig. Diese Vorlage ist keine Rechtsberatung.
</p>
</div>
<div class="rechtstext mt-7">
<h2>Medieninhaber und Diensteanbieter</h2>
<dl>
<div>
<dt>Firma</dt>
<dd>Purinto GmbH</dd>
</div>
<div>
<dt>Anschrift</dt>
<dd>
<span class="platzhalter"
>[Straße und Hausnummer]<br />[PLZ] [Ort]<br />Österreich</span
>
</dd>
</div>
<div>
<dt>E-Mail</dt>
<dd>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</dd>
</div>
<div>
<dt>Telefon</dt>
<dd><span class="platzhalter">[+43 …]</span></dd>
</div>
</dl>
<h2>Unternehmensdaten</h2>
<dl>
<div>
<dt>Rechtsform</dt>
<dd>Gesellschaft mit beschränkter Haftung (GmbH)</dd>
</div>
<div>
<dt>Firmenbuchnummer</dt>
<dd><span class="platzhalter">[FN ###### x]</span></dd>
</div>
<div>
<dt>Firmenbuchgericht</dt>
<dd><span class="platzhalter">[Landesgericht …]</span></dd>
</div>
<div>
<dt>Sitz</dt>
<dd><span class="platzhalter">[Politische Gemeinde]</span></dd>
</div>
<div>
<dt>UID-Nummer</dt>
<dd><span class="platzhalter">[ATU########]</span></dd>
</div>
<div>
<dt>Geschäftsführung</dt>
<dd><span class="platzhalter">[Vorname Nachname]</span></dd>
</div>
</dl>
<h2>Gewerberecht und Aufsicht</h2>
<dl>
<div>
<dt>Gewerbe</dt>
<dd>
<span class="platzhalter"
>[Exakter Wortlaut aus dem Gewerberegister]</span
>
</dd>
</div>
<div>
<dt>Kammerzugehörigkeit</dt>
<dd>
Wirtschaftskammer Österreich,
<span class="platzhalter">[Landeskammer und Fachgruppe]</span>
</dd>
</div>
<div>
<dt>Gewerbebehörde</dt>
<dd>
<span class="platzhalter"
>[Bezirkshauptmannschaft oder Magistrat]</span
>
</dd>
</div>
<div>
<dt>Anwendbare Rechtsvorschrift</dt>
<dd>
Gewerbeordnung 1994, abrufbar über das Rechtsinformationssystem
des Bundes unter
<a href="https://www.ris.bka.gv.at" rel="noopener">ris.bka.gv.at</a>
</dd>
</div>
</dl>
<h2>Unternehmensgegenstand</h2>
<p>
Entwicklungsbegleitende Dienstleistungen in der Kunststofftechnik:
Konstruktionsbegleitung, Materialauswahl und Bauteiloptimierung
sowie die Fertigung von Prototypen und Kleinserien mittels
3D-Druck (FDM und SLA) und Bridge Tooling.
</p>
<h2>Blattlinie nach § 25 Mediengesetz</h2>
<p>
Diese Website informiert über das Leistungsangebot, die
Arbeitsweise und die Projekte der Purinto GmbH. Sie dient der
Darstellung des Unternehmens gegenüber Kundinnen und Kunden,
Partnerbetrieben und Interessierten.
</p>
<h2>Verbraucherschlichtung</h2>
<p>
<span class="platzhalter"
>[PLATZHALTER — bitte aktuell prüfen lassen: Die Europäische
Online-Streitbeilegungsplattform hat ihren Betrieb 2025
eingestellt. Ältere Impressumsvorlagen verlinken sie weiterhin;
ein solcher Link wäre heute veraltet. Klären Sie mit der
Wirtschaftskammer, welcher Hinweis auf alternative
Streitbeilegung für Ihr Gewerbe derzeit korrekt ist, und setzen
Sie ihn hier ein.]</span
>
</p>
<h2>Haftung für Inhalte</h2>
<p>
Die Inhalte dieser Website wurden mit Sorgfalt erstellt. Für die
Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir
jedoch keine Gewähr übernehmen. Angaben zu Verfahren, Toleranzen,
Werkstoffen und Lieferzeiten sind Richtwerte und ersetzen keine
projektbezogene technische Prüfung.
</p>
<h2>Haftung für Links</h2>
<p>
Diese Website enthält Verweise auf externe Websites Dritter. Auf
deren Inhalte haben wir keinen Einfluss und übernehmen dafür keine
Haftung. Für die Inhalte verlinkter Seiten ist stets deren
jeweiliger Anbieter verantwortlich.
</p>
<h2>Urheberrecht</h2>
<p>
Die auf dieser Website veröffentlichten Inhalte, Texte und
Abbildungen unterliegen dem österreichischen Urheberrecht. Jede
Verwertung außerhalb der Grenzen des Urheberrechts bedarf unserer
vorherigen schriftlichen Zustimmung.
</p>
<h2>Bildnachweis</h2>
<p>
<span class="platzhalter"
>[PLATZHALTER: Sobald echte Fotos eingesetzt werden, hier
Urheber und Lizenz je Bild angeben. Die aktuell eingesetzten
Grafiken sind eigens erstellte Platzhalter.]</span
>
</p>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
</body>
</html>

798
index.html Normal file
View file

@ -0,0 +1,798 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Purinto GmbH — Entwicklungsbegleitende Kunststofftechnik</title>
<meta
name="description"
content="Purinto begleitet Ihre Kunststoffentwicklung von der Konstruktion über die Werkstoffauswahl bis zum serienreifen Bauteil — mit FDM, SLA und Bridge Tooling für Prototypen und Kleinserien."
/>
<link rel="canonical" href="https://www.purinto.at/" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Purinto GmbH — Entwicklungsbegleitende Kunststofftechnik"
/>
<meta
property="og:description"
content="Konstruktionsbegleitung, Materialauswahl, Prototypen und Kleinserien aus FDM, SLA und Bridge Tooling."
/>
<meta property="og:locale" content="de_AT" />
<meta property="og:url" content="https://www.purinto.at/" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<!-- ================= Hero ================= -->
<section class="hero">
<div class="huelle hero__innen">
<div class="anlauf">
<p class="eyebrow">Entwicklungsbegleitende Kunststofftechnik · Österreich</p>
<!-- Headline und Logo stehen bewusst in einer Grid-Zeile: So ist
das Logo immer exakt so hoch wie die Headline, unabhängig
davon, über wie viele Zeilen sie gerade läuft. -->
<div class="hero__kopf">
<!-- Feste Umbrüche ab 500px: Dort hat die Headline genau drei
Zeilen, und --t-3xl ist so begrenzt, dass die längste Zeile
"Zwischen Prototyp" (10,26 em) in die Textspalte passt.
Unter 500px werden die Umbrüche per CSS ausgeblendet — dann
bricht die Headline frei auf vier Zeilen um und darf dafür
deutlich größer sein. Wird der Text geändert, muss die
Grenze in tokens.css nachgerechnet werden. -->
<h1 class="display t-hero hero__titel">
Zwischen Prototyp<br class="hero__umbruch" />
und Serie liegt die<br class="hero__umbruch" />
<span class="hervor">teuerste</span> Strecke.
</h1>
<!-- Logo-Platzhalter. Gegen die echte Wortmarke tauschen: entweder
den Buchstaben ersetzen oder das ganze <div> durch
<img src="assets/img/logo.svg" alt="Purinto" class="hero__logo">. -->
<div class="hero__logo" aria-hidden="true">P</div>
</div>
<p class="lead hero__lead">
Purinto begleitet Ihre Kunststoffentwicklung von der Konstruktion
über die Werkstoffauswahl bis zum serienreifen Bauteil. Wir
fertigen Prototypen im 3D-Druck und Kleinserien im Spritzguss —
damit Sie das Stahlwerkzeug erst bestellen, wenn das Bauteil
wirklich steht.
</p>
<div class="knopf-reihe">
<a class="knopf knopf--primaer" href="kontakt.html">
Bauteil anfragen
</a>
<a class="knopf knopf--sekundaer" href="dienstleistungen.html">
Leistungen ansehen
</a>
</div>
<ul class="hero__spektrum">
<li>Konstruktionsbegleitung</li>
<li>Materialauswahl</li>
<li>Bauteiloptimierung</li>
<li>FDM &amp; SLA</li>
<li>Bridge Tooling</li>
</ul>
</div>
</div>
</section>
<!-- ================= Signature: Stückzahl-Achse ================= -->
<section
class="achse-band sektion sektion--dunkel"
aria-labelledby="achse-titel"
>
<div class="huelle achse-band__innen">
<div class="achse-band__kopf">
<p class="eyebrow">Verfahrenswahl</p>
<h2 class="display t-2xl" id="achse-titel">
Wie viele Teile brauchen Sie?
</h2>
<p class="lead">
Die Stückzahl entscheidet über das Verfahren — und über die Kosten.
Ziehen Sie den Regler auf Ihre Menge.
</p>
</div>
<div class="achse" data-achse>
<div class="achse__zonen">
<div class="achse__zone" data-zone="druck" style="width: 40%">
FDM · SLA
</div>
<div class="achse__zone" data-zone="bridge" style="width: 20%">
Bridge Tooling
</div>
<div
class="achse__zone achse__zone--partner"
data-zone="serie"
style="width: 40%"
>
Serie · Partner
</div>
</div>
<div class="achse__spur" data-spur>
<span
class="achse__flaeche achse__flaeche--druck"
data-flaeche="druck"
style="left: 0; right: 60%"
></span>
<span
class="achse__flaeche achse__flaeche--bridge"
data-flaeche="bridge"
style="left: 40%; right: 40%"
></span>
<span
class="achse__flaeche achse__flaeche--partner"
data-flaeche="serie"
style="left: 60%; right: 0"
></span>
<button
class="achse__griff"
type="button"
data-griff
role="slider"
aria-label="Stückzahl wählen"
aria-valuemin="1"
aria-valuemax="100000"
aria-valuenow="40"
aria-valuetext="40 Stück — FDM oder SLA, direkt gedruckt"
style="left: 32%"
></button>
</div>
<!-- Positionen setzt stueckzahl-achse.js aus denselben Daten wie
die Zonen; die inline-Werte sind der Stand ohne JavaScript. -->
<ul class="achse__skala" aria-hidden="true">
<li data-skala="1" style="left: 0">1</li>
<li data-skala="100" style="left: 40%">100</li>
<li data-skala="1000" style="left: 60%">1.000</li>
<li data-skala="100000" style="left: 100%">100.000</li>
</ul>
</div>
<div class="achse__tafel">
<div>
<span class="achse__ausgabe" data-ausgabe aria-live="polite"
>40</span
>
<span class="achse__ausgabe-einheit">Stück</span>
<p class="achse__verfahren" data-verfahren>
FDM oder SLA — direkt gedruckt
</p>
<p class="achse__hinweis" data-hinweis>
In diesem Bereich fertigen wir direkt aus der CAD-Datei.
Änderungen kosten nichts außer einem neuen Druck — genau
richtig, solange die Konstruktion noch in Bewegung ist.
</p>
</div>
<dl class="achse__werte">
<div class="achse__wert">
<dt>Werkzeugkosten</dt>
<dd data-werkzeug>Kein Werkzeug nötig</dd>
</div>
<div class="achse__wert">
<dt>Erste Teile</dt>
<dd data-lieferzeit>1–5 Arbeitstage</dd>
</div>
<div class="achse__wert">
<dt>Stückkosten</dt>
<dd data-stueckkosten>Über die Menge konstant</dd>
</div>
<div class="achse__wert">
<dt>Typische Anwendung</dt>
<dd data-anwendung>
Funktionsmuster, Passungs- und Einbauprüfungen, Vorrichtungen,
Designfreigaben
</dd>
</div>
</dl>
</div>
<p class="achse__fussnote">
Ab etwa 1.000 Stück endet unsere eigene Fertigung. Den Übergang zum
Stahlwerkzeug begleiten wir und vermitteln an Spritzgießer in der
Region, mit denen wir zusammenarbeiten — die Serienfertigung selbst
ist nicht unser Geschäft. Alle Angaben sind Richtwerte und hängen
von Geometrie, Werkstoff und Anforderungen ab.
</p>
</div>
</section>
<!-- ================= Leistungen ================= -->
<section class="sektion" aria-labelledby="leistungen-titel">
<div class="huelle">
<div class="sektion__kopf reveal">
<p class="eyebrow">Leistungen</p>
<h2 class="display t-2xl" id="leistungen-titel">
Fünf Bausteine, die zusammen ein serienreifes Bauteil ergeben.
</h2>
</div>
<div class="raster raster--3 reveal">
<article class="karte">
<p class="karte__marke">01 — Konstruktion</p>
<h3 class="karte__titel">Konstruktionsbegleitung</h3>
<p class="karte__text">
Wir lesen Ihr CAD-Modell wie ein Werkzeugmacher: Wandstärken,
Entformungsschrägen, Bindenähte, Einfallstellen, Toleranzketten.
Bevor das Werkzeug steht, nicht danach.
</p>
<p class="karte__fuss">
<a class="pfeil-link" href="dienstleistungen.html#konstruktion"
>Mehr dazu</a
>
</p>
</article>
<article class="karte">
<p class="karte__marke">02 — Werkstoff</p>
<h3 class="karte__titel">Materialauswahl</h3>
<p class="karte__text">
Vom Anforderungsprofil zum belastbaren Werkstoffvorschlag —
mechanisch, thermisch, chemisch und normativ geprüft. Rezyklate
und Biopolymere stehen dabei gleichberechtigt zur Auswahl.
</p>
<p class="karte__fuss">
<a class="pfeil-link" href="dienstleistungen.html#material"
>Mehr dazu</a
>
</p>
</article>
<article class="karte">
<p class="karte__marke">03 — Optimierung</p>
<h3 class="karte__titel">Bauteiloptimierung</h3>
<p class="karte__text">
Weniger Material, kürzere Zykluszeit, sichere Entformung. Wir
optimieren das Bauteil auf Fertigbarkeit und Kosten — ohne die
Funktion zu beschneiden.
</p>
<p class="karte__fuss">
<a class="pfeil-link" href="dienstleistungen.html#optimierung"
>Mehr dazu</a
>
</p>
</article>
<article class="karte">
<p class="karte__marke">04 — Prototypen</p>
<h3 class="karte__titel">3D-Druck: FDM &amp; SLA</h3>
<p class="karte__text">
Belastbare Funktionsteile und große Geometrien aus FDM, präzise
Sicht- und Passteile aus SLA. Erste Teile in wenigen
Arbeitstagen, direkt aus Ihrer CAD-Datei.
</p>
<p class="karte__fuss">
<a class="pfeil-link" href="dienstleistungen.html#prototypen"
>Mehr dazu</a
>
</p>
</article>
<article class="karte">
<p class="karte__marke">05 — Kleinserie</p>
<h3 class="karte__titel">Bridge Tooling</h3>
<p class="karte__text">
SLA-gedruckte Formeinsätze für den Spritzguss. Sie bekommen
Teile im späteren Serienwerkstoff mit Spritzguss-Eigenschaften,
ohne vorher ein Stahlwerkzeug zu finanzieren.
</p>
<p class="karte__fuss">
<a class="pfeil-link" href="dienstleistungen.html#bridge"
>Mehr dazu</a
>
</p>
</article>
<article class="karte karte--flach" style="background: var(--salbei-100); border-color: var(--salbei-300)">
<p class="karte__marke">Und wenn Sie noch nicht wissen, was Sie brauchen?</p>
<h3 class="karte__titel">Dann fangen wir damit an.</h3>
<p class="karte__text">
Schicken Sie uns Ihr Modell und beschreiben Sie den Einsatzfall.
Sie bekommen eine Einschätzung, welches Verfahren passt und was
an der Konstruktion noch im Weg steht.
</p>
<p class="karte__fuss">
<a class="pfeil-link" href="kontakt.html">Anfrage stellen</a>
</p>
</article>
</div>
</div>
</section>
<!-- ================= Verfahrensmatrix ================= -->
<section class="sektion sektion--linie" aria-labelledby="matrix-titel">
<div class="huelle">
<div class="sektion__kopf reveal">
<p class="eyebrow">Verfahren im Vergleich</p>
<h2 class="display t-2xl" id="matrix-titel">
Was welches Verfahren kann.
</h2>
<p class="lead">
Die vierte Spalte ist bewusst abgesetzt: Serienspritzguss
realisieren wir gemeinsam mit Partnerbetrieben, nicht im eigenen
Haus.
</p>
</div>
<div class="matrix-huelle reveal">
<table class="matrix">
<caption class="nur-sr">
Vergleich der Fertigungsverfahren nach Stückzahl, Toleranz,
Oberfläche, Werkstoff, Werkzeugkosten und Vorlaufzeit
</caption>
<thead>
<tr>
<th scope="col"><span class="nur-sr">Merkmal</span></th>
<th scope="col">FDM</th>
<th scope="col">SLA</th>
<th scope="col">Bridge Tooling</th>
<th scope="col" class="ist-partner">
Serienspritzguss
<span class="matrix__partnermarke">über Partner</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Stückzahl</th>
<td>1 – 50</td>
<td>1 – 100</td>
<td>100 – 1.000</td>
<td class="ist-partner">ab 1.000</td>
</tr>
<tr>
<th scope="row">Toleranz</th>
<td>± 0,3 mm</td>
<td>± 0,1 mm</td>
<td>Spritzgussniveau</td>
<td class="ist-partner">Spritzgussniveau</td>
</tr>
<tr>
<th scope="row">Oberfläche</th>
<td>Sichtbare Schichtstruktur</td>
<td>Glatt, lackierfähig</td>
<td>Formeinsatz-abhängig, glatt</td>
<td class="ist-partner">Nach Werkzeugfinish</td>
</tr>
<tr>
<th scope="row">Werkstoffe</th>
<td>PLA, PETG, ABS, ASA, PA, PC — auch faserverstärkt</td>
<td>Standard-, Zäh- und Temperaturharze</td>
<td>Serienthermoplaste wie PP, PE, ABS, PA, POM</td>
<td class="ist-partner">Volles Serienspektrum</td>
</tr>
<tr>
<th scope="row">Werkzeugkosten</th>
<td>Keine</td>
<td>Keine</td>
<td>Gering — Formeinsatz wird gedruckt</td>
<td class="ist-partner">Hoch — Stahlwerkzeug</td>
</tr>
<tr>
<th scope="row">Erste Teile</th>
<td>1 – 3 Arbeitstage</td>
<td>1 – 3 Arbeitstage</td>
<td>2 – 3 Wochen</td>
<td class="ist-partner">8 – 14 Wochen</td>
</tr>
</tbody>
</table>
</div>
<p class="mono leise mt-6">
Richtwerte. Erreichbare Toleranzen und Zeiten hängen von Geometrie,
Bauteilgröße und Werkstoff ab.
</p>
</div>
</section>
<!-- ================= Branchen ================= -->
<section class="sektion sektion--salbei" aria-labelledby="branchen-titel">
<div class="huelle">
<div class="sektion__kopf reveal">
<p class="eyebrow">Branchen</p>
<h2 class="display t-2xl" id="branchen-titel">
Wo wir arbeiten.
</h2>
</div>
<div class="raster raster--4 reveal">
<article class="branche">
<h3 class="branche__titel">Industrie &amp; Maschinenbau</h3>
<p class="branche__text">
Gehäuse, Abdeckungen, Führungen und Vorrichtungen in kleinen
Losgrößen. Häufig mit engen Toleranzen und technischen
Thermoplasten.
</p>
</article>
<article class="branche">
<h3 class="branche__titel">Medizin- &amp; Labortechnik</h3>
<p class="branche__text">
Bauteile mit Nachweispflicht: Werkstoffe mit
Biokompatibilitätsnachweis, dokumentierte Chargen,
reproduzierbare Kleinserien für Validierung und Zulassung.
</p>
</article>
<article class="branche">
<h3 class="branche__titel">Automotive &amp; Mobilität</h3>
<p class="branche__text">
Funktionsprototypen, Vorserien und Betriebsmittel. Schwerpunkte
sind Gewicht, Temperaturbeständigkeit und die Absicherung von
Einbausituationen.
</p>
</article>
<article class="branche">
<h3 class="branche__titel">Start-ups &amp; Konsumgüter</h3>
<p class="branche__text">
Produktentwicklung ohne eigene Kunststoffabteilung. Wir bringen
die Fertigungserfahrung mit und halten das Anfangsinvestment
klein.
</p>
</article>
</div>
</div>
</section>
<!-- ================= Nachhaltigkeit ================= -->
<section class="sektion" aria-labelledby="nachhaltig-titel">
<div class="huelle">
<div class="sektion__kopf reveal">
<p class="eyebrow">Haltung</p>
<h2 class="display t-2xl" id="nachhaltig-titel">
Nachhaltig heißt hier: nichts herstellen, was niemand braucht.
</h2>
<p class="lead">
Kunststoff ist ein guter Werkstoff, wenn man ihn sparsam und
richtig einsetzt. Das sind die vier Stellen, an denen sich das in
unserer Arbeit tatsächlich auswirkt.
</p>
</div>
<div class="nachhaltig reveal">
<div class="nachhaltig__punkt">
<svg class="nachhaltig__zeichen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M4 19h16M6 19V9l6-4 6 4v10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div>
<p class="nachhaltig__titel">Material nur dort, wo es trägt</p>
<p class="nachhaltig__text">
Additive Fertigung baut das Bauteil auf, statt es aus dem
Vollen herauszuarbeiten. Es entsteht kein Zerspanungsabfall —
und in der Optimierung nehmen wir jedes Gramm heraus, das
keine Last aufnimmt.
</p>
</div>
</div>
<div class="nachhaltig__punkt">
<svg class="nachhaltig__zeichen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M3 12a9 9 0 0 1 15.5-6.2M21 12a9 9 0 0 1-15.5 6.2" stroke-linecap="round" />
<path d="M18 3v3.5h-3.5M6 21v-3.5h3.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div>
<p class="nachhaltig__titel">Kein Werkzeug im Schrott</p>
<p class="nachhaltig__text">
Ein Stahlwerkzeug, das nach der ersten Serie geändert werden
muss, ist teuer und meistens verloren. Ein gedruckter
Formeinsatz kostet einen Bruchteil und wird bei einer
Konstruktionsänderung einfach neu gedruckt.
</p>
</div>
</div>
<div class="nachhaltig__punkt">
<svg class="nachhaltig__zeichen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M4 7h16M4 12h11M4 17h6" stroke-linecap="round" />
</svg>
<div>
<p class="nachhaltig__titel">Losgrößen nach Bedarf</p>
<p class="nachhaltig__text">
Wer ein teures Werkzeug amortisieren muss, produziert auf
Vorrat. Mit Bridge Tooling fertigen Sie die Menge, die Sie
wirklich absetzen — statt ein Lager zu füllen, das später
entsorgt wird.
</p>
</div>
</div>
<div class="nachhaltig__punkt">
<svg class="nachhaltig__zeichen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M12 20c0-5 3-8 8-8 0 5-3 8-8 8Z" stroke-linejoin="round" />
<path d="M12 20c0-4-2.5-6.5-6.5-6.5C5.5 17 8 20 12 20Z" stroke-linejoin="round" />
<path d="M12 20v-6" stroke-linecap="round" />
</svg>
<div>
<p class="nachhaltig__titel">Rezyklate gehören in die Auswahl</p>
<p class="nachhaltig__text">
Wir prüfen Rezyklate und Biopolymere mit denselben Kennwerten
wie Neuware. Wo sie die Anforderungen erfüllen, schlagen wir
sie vor — und sagen ebenso deutlich, wo sie es nicht tun.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ================= Projekte-Teaser ================= -->
<section class="sektion sektion--linie" aria-labelledby="projekte-titel">
<div class="huelle">
<div class="sektion__kopf reveal">
<p class="eyebrow">Projekte</p>
<h2 class="display t-2xl" id="projekte-titel">
Ausgewählte Arbeiten.
</h2>
</div>
<div class="raster raster--3 reveal">
<article class="projekt">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-01.svg" alt="" width="800" height="600" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Medizintechnik</span>
<span class="tag">Bridge Tooling</span>
</div>
<h3 class="projekt__titel">
<span class="platzhalter">Gehäuse für ein Analysegerät</span>
</h3>
<p class="projekt__block">
<span class="platzhalter"
>600 Stück im Serienwerkstoff für die Validierung — vier
Monate vor der geplanten Werkzeugfreigabe.</span
>
</p>
</div>
</article>
<article class="projekt">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-02.svg" alt="" width="800" height="600" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Maschinenbau</span>
<span class="tag">Konstruktion</span>
</div>
<h3 class="projekt__titel">
<span class="platzhalter">Führungselement mit Schnappverbindung</span>
</h3>
<p class="projekt__block">
<span class="platzhalter"
>Nach der Umkonstruktion entfielen zwei Schrauben und ein
Montageschritt.</span
>
</p>
</div>
</article>
<article class="projekt">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-03.svg" alt="" width="800" height="600" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Konsumgüter</span>
<span class="tag">SLA</span>
</div>
<h3 class="projekt__titel">
<span class="platzhalter">Sichtteil für einen Produktlaunch</span>
</h3>
<p class="projekt__block">
<span class="platzhalter"
>Lackierfähige SLA-Muster für Fotoproduktion und
Messeauftritt in acht Arbeitstagen.</span
>
</p>
</div>
</article>
</div>
<p class="mt-7">
<a class="knopf knopf--sekundaer" href="projekte.html">
Alle Projekte ansehen
</a>
</p>
</div>
</section>
<!-- ================= Ablauf ================= -->
<section class="sektion sektion--linie" aria-labelledby="ablauf-titel">
<div class="huelle">
<div class="sektion__kopf reveal">
<p class="eyebrow">Ablauf</p>
<h2 class="display t-2xl" id="ablauf-titel">
Von der Anfrage zum Teil.
</h2>
</div>
<ol class="ablauf reveal">
<li class="ablauf__schritt">
<h3 class="ablauf__titel">Anfrage mit CAD-Modell</h3>
<p class="ablauf__text">
Sie schicken uns STEP oder STL, dazu Stückzahl,
Einsatzbedingungen und Wunschtermin. Wenn noch kein Modell
existiert, reicht eine Skizze für den Anfang.
</p>
</li>
<li class="ablauf__schritt">
<h3 class="ablauf__titel">Machbarkeits-Rückmeldung</h3>
<p class="ablauf__text">
Innerhalb von zwei Arbeitstagen: was funktioniert, was wir an
der Konstruktion ändern würden und welches Verfahren zu Ihrer
Stückzahl passt.
</p>
</li>
<li class="ablauf__schritt">
<h3 class="ablauf__titel">Angebot</h3>
<p class="ablauf__text">
Fest kalkuliert, mit Verfahren, Werkstoff, Stückkosten und
Liefertermin. Keine Positionen, die erst in der Rechnung
auftauchen.
</p>
</li>
<li class="ablauf__schritt">
<h3 class="ablauf__titel">Fertigung und Lieferung</h3>
<p class="ablauf__text">
Wir fertigen, prüfen und liefern — auf Wunsch mit Messprotokoll.
Danach begleiten wir den nächsten Schritt Richtung Serie.
</p>
</li>
</ol>
</div>
</section>
<!-- ================= CTA ================= -->
<section class="cta-band sektion">
<div class="huelle cta-band__innen">
<div>
<h2 class="display t-2xl">Schicken Sie uns Ihr CAD-Modell.</h2>
<p class="cta-band__text">
Sie bekommen eine ehrliche Einschätzung zu Machbarkeit, Verfahren
und Kosten — auch dann, wenn die Antwort lautet, dass ein anderes
Verfahren besser passt.
</p>
</div>
<div class="knopf-reihe">
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
<a class="knopf knopf--hell" href="dienstleistungen.html">Leistungen</a>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Purinto GmbH",
"url": "https://www.purinto.at/",
"description": "Entwicklungsbegleitende Dienstleistungen in der Kunststofftechnik: Konstruktionsbegleitung, Materialauswahl, Bauteiloptimierung sowie Prototypen und Kleinserien mit FDM, SLA und Bridge Tooling.",
"email": "office@purinto.at",
"address": {
"@type": "PostalAddress",
"streetAddress": "Musterstraße 1",
"postalCode": "0000",
"addressLocality": "Musterort",
"addressCountry": "AT"
},
"knowsAbout": [
"Kunststofftechnik",
"Konstruktionsbegleitung",
"Design for Manufacturing",
"Materialauswahl",
"FDM 3D-Druck",
"SLA 3D-Druck",
"Bridge Tooling",
"Spritzguss-Kleinserien"
]
}
</script>
<script src="assets/js/site.js" defer></script>
<script src="assets/js/stueckzahl-achse.js" defer></script>
</body>
</html>

417
kontakt.html Normal file
View file

@ -0,0 +1,417 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kontakt — Purinto GmbH</title>
<meta
name="description"
content="Anfrage an Purinto: Bauteil, Stückzahl und Einsatzfall schildern. Sie erhalten innerhalb von zwei Arbeitstagen eine Einschätzung zu Machbarkeit, Verfahren und Kosten."
/>
<link rel="canonical" href="https://www.purinto.at/kontakt.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Kontakt — Purinto GmbH" />
<meta
property="og:description"
content="Schicken Sie uns Ihr Bauteil — Sie bekommen eine Einschätzung zu Machbarkeit, Verfahren und Kosten."
/>
<meta property="og:locale" content="de_AT" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li>
<a class="nav__link" href="kontakt.html" aria-current="page">Kontakt</a>
</li>
</ul>
<a class="knopf knopf--primaer" href="#formular">Zum Formular</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="seitenkopf">
<div class="huelle">
<p class="eyebrow">Kontakt</p>
<h1 class="display t-2xl seitenkopf__titel">
Erzählen Sie uns von Ihrem Bauteil.
</h1>
<p class="lead">
Je konkreter die Anfrage, desto brauchbarer die Antwort. Ideal sind
ein CAD-Modell, die geplante Stückzahl und ein Satz zum Einsatzfall
— aber eine Skizze und eine Idee reichen für den Anfang auch.
</p>
</div>
</section>
<section class="sektion">
<div class="huelle">
<div class="kontakt-raster">
<!-- ============ Formular ============ -->
<div id="formular">
<div
class="meldung meldung--erfolg"
data-meldung-erfolg
role="status"
>
<span class="meldung__titel">Ihre Anfrage ist angekommen.</span>
<p>
Wir melden uns innerhalb von zwei Arbeitstagen mit einer
Einschätzung. Wenn Sie noch ein CAD-Modell nachreichen
möchten, antworten Sie einfach auf unsere Bestätigungsmail.
</p>
</div>
<div
class="meldung meldung--fehler"
data-meldung-fehler
role="alert"
>
<span class="meldung__titel">Das hat nicht geklappt</span>
<p data-meldung-fehler-text></p>
<p class="mt-6">
Direkt per E-Mail:
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</p>
</div>
<!--
Web3Forms: Der Access-Key unten muss durch den echten Schlüssel
ersetzt werden. Kostenlos unter https://web3forms.com mit der
Empfänger-E-Mail anfordern — der Schlüssel darf öffentlich im
Quelltext stehen, er erlaubt nur das Senden an genau diese
Adresse. Details stehen in der README.
-->
<form
class="formular"
data-formular
action="https://api.web3forms.com/submit"
method="POST"
novalidate
>
<input
type="hidden"
name="access_key"
value="DEIN-WEB3FORMS-ACCESS-KEY"
/>
<input
type="hidden"
name="subject"
value="Neue Anfrage über purinto.at"
/>
<input type="hidden" name="from_name" value="Purinto Website" />
<input
type="hidden"
name="redirect"
value="https://www.purinto.at/danke.html"
/>
<!-- Honeypot von Web3Forms: bleibt für Menschen unsichtbar. -->
<label class="honigtopf">
Dieses Feld bitte leer lassen
<input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" />
</label>
<div class="feld-paar">
<div class="feld">
<label class="feld__label" for="name">
Name <span class="feld__pflicht" aria-hidden="true">*</span>
</label>
<input
class="feld__eingabe"
type="text"
id="name"
name="name"
autocomplete="name"
required
aria-describedby="fehler-name"
/>
<p class="feld__fehler" id="fehler-name" data-fehler-fuer="name"></p>
</div>
<div class="feld">
<label class="feld__label" for="firma">Firma</label>
<input
class="feld__eingabe"
type="text"
id="firma"
name="firma"
autocomplete="organization"
/>
</div>
</div>
<div class="feld-paar">
<div class="feld">
<label class="feld__label" for="email">
E-Mail <span class="feld__pflicht" aria-hidden="true">*</span>
</label>
<input
class="feld__eingabe"
type="email"
id="email"
name="email"
autocomplete="email"
required
aria-describedby="fehler-email"
/>
<p class="feld__fehler" id="fehler-email" data-fehler-fuer="email"></p>
</div>
<div class="feld">
<label class="feld__label" for="telefon">Telefon</label>
<input
class="feld__eingabe"
type="tel"
id="telefon"
name="telefon"
autocomplete="tel"
/>
<p class="feld__hilfe">Falls ein Rückruf schneller geht.</p>
</div>
</div>
<div class="feld-paar">
<div class="feld">
<label class="feld__label" for="anliegen">Anliegen</label>
<select class="feld__eingabe" id="anliegen" name="anliegen">
<option>Erstberatung</option>
<option>Angebot für Prototypen</option>
<option>Angebot für eine Kleinserie</option>
<option>Konstruktionsbegleitung</option>
<option>Materialberatung</option>
<option>Etwas anderes</option>
</select>
</div>
<div class="feld">
<label class="feld__label" for="stueckzahl">Stückzahl</label>
<select class="feld__eingabe" id="stueckzahl" name="stueckzahl">
<option>Noch offen</option>
<option>1 – 10</option>
<option>10 – 100</option>
<option>100 – 1.000</option>
<option>Mehr als 1.000</option>
</select>
</div>
</div>
<div class="feld">
<label class="feld__label" for="nachricht">
Ihr Bauteil und Ihre Frage
<span class="feld__pflicht" aria-hidden="true">*</span>
</label>
<textarea
class="feld__eingabe"
id="nachricht"
name="nachricht"
required
aria-describedby="hilfe-nachricht fehler-nachricht"
></textarea>
<p class="feld__hilfe" id="hilfe-nachricht">
Hilfreich sind: Einsatzfall, Belastung, Temperaturbereich,
gewünschter Termin und ob es schon ein CAD-Modell gibt.
</p>
<p class="feld__fehler" id="fehler-nachricht" data-fehler-fuer="nachricht"></p>
</div>
<div class="feld">
<label class="zustimmung">
<input type="checkbox" name="datenschutz" required aria-describedby="fehler-datenschutz" />
<span class="zustimmung__text">
Ich bin damit einverstanden, dass meine Angaben zur
Bearbeitung dieser Anfrage gespeichert und verarbeitet
werden. Sie werden nicht an Dritte weitergegeben und
nicht für Werbung verwendet. Näheres in der
<a href="datenschutz.html">Datenschutzerklärung</a>.
</span>
</label>
<p class="feld__fehler" id="fehler-datenschutz" data-fehler-fuer="datenschutz"></p>
</div>
<div>
<button class="knopf knopf--primaer" type="submit" data-absenden>
Anfrage senden
</button>
<p class="feld__hilfe mt-6">
Mit <span aria-hidden="true">*</span> gekennzeichnete Felder
brauchen wir, um antworten zu können.
</p>
</div>
</form>
</div>
<!-- ============ Seitenspalte ============ -->
<aside class="seitenspalte">
<div>
<p class="fuss__titel" style="color: var(--anthrazit-500)">
Direkter Draht
</p>
<dl class="kontaktliste">
<div>
<dt>E-Mail</dt>
<dd>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</dd>
</div>
<div>
<dt>Telefon</dt>
<dd><span class="platzhalter">+43 (0) 000 000 00 00</span></dd>
</div>
<div>
<dt>Adresse</dt>
<dd>
<span class="platzhalter"
>Purinto GmbH<br />Musterstraße 1<br />0000
Musterort</span
>
</dd>
</div>
<div>
<dt>Erreichbarkeit</dt>
<dd>
<span class="platzhalter">Mo–Do 8–17 Uhr, Fr 8–13 Uhr</span>
</dd>
</div>
</dl>
</div>
<div>
<p class="fuss__titel" style="color: var(--anthrazit-500)">
Was danach passiert
</p>
<ol class="ablauf" style="grid-template-columns: 1fr; gap: var(--s-5)">
<li class="ablauf__schritt">
<h2 class="ablauf__titel">Wir lesen mit</h2>
<p class="ablauf__text">
Ihre Anfrage geht direkt an die Person, die sie fachlich
beurteilen kann — nicht in ein Sammelpostfach.
</p>
</li>
<li class="ablauf__schritt">
<h2 class="ablauf__titel">Rückmeldung in zwei Arbeitstagen</h2>
<p class="ablauf__text">
Mit einer ersten Einschätzung zu Machbarkeit und Verfahren
— oder mit den Rückfragen, die wir noch brauchen.
</p>
</li>
<li class="ablauf__schritt">
<h2 class="ablauf__titel">Angebot oder Gespräch</h2>
<p class="ablauf__text">
Bei klarer Aufgabe direkt ein Angebot. Bei offenen Punkten
zuerst ein kurzes Telefonat.
</p>
</li>
</ol>
</div>
<div class="hinweis">
<span class="hinweis__titel">CAD-Dateien</span>
<p>
Das Formular nimmt keine Dateianhänge entgegen. Schicken Sie
STEP- oder STL-Dateien bitte per E-Mail an
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
— gern mit dem Hinweis, dass Sie das Formular bereits
ausgefüllt haben. Auf Wunsch senden wir vorab eine
Geheimhaltungsvereinbarung.
</p>
</div>
</aside>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
<script src="assets/js/kontakt.js" defer></script>
</body>
</html>

452
projekte.html Normal file
View file

@ -0,0 +1,452 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Projekte — Purinto GmbH</title>
<meta
name="description"
content="Ausgewählte Projekte aus Maschinenbau, Medizintechnik, Automotive und Konsumgütern — realisiert mit Konstruktionsbegleitung, FDM, SLA und Bridge Tooling."
/>
<link rel="canonical" href="https://www.purinto.at/projekte.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Projekte — Purinto GmbH" />
<meta
property="og:description"
content="Ausgewählte Arbeiten aus vier Branchen — von der Konstruktionsbegleitung bis zur Kleinserie."
/>
<meta property="og:locale" content="de_AT" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li>
<a class="nav__link" href="projekte.html" aria-current="page">Projekte</a>
</li>
<li><a class="nav__link" href="ueber-uns.html">Über uns</a></li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="seitenkopf">
<div class="huelle">
<p class="eyebrow">Projekte</p>
<h1 class="display t-2xl seitenkopf__titel">
Bauteile, die es in die Anwendung geschafft haben.
</h1>
<p class="lead">
Eine Auswahl aus vier Branchen. Zu jedem Projekt steht, worin die
eigentliche Schwierigkeit lag — nicht nur, welches Verfahren zum
Einsatz kam.
</p>
</div>
</section>
<div class="huelle">
<div class="filter" data-filter hidden>
<div class="filter__gruppe">
<span class="filter__titel" id="f-branche">Branche</span>
<button
class="filter__knopf"
type="button"
data-gruppe="branche"
data-wert="alle"
aria-pressed="true"
>
Alle
</button>
<button class="filter__knopf" type="button" data-gruppe="branche" data-wert="maschinenbau" aria-pressed="false">
Maschinenbau
</button>
<button class="filter__knopf" type="button" data-gruppe="branche" data-wert="medizin" aria-pressed="false">
Medizintechnik
</button>
<button class="filter__knopf" type="button" data-gruppe="branche" data-wert="automotive" aria-pressed="false">
Automotive
</button>
<button class="filter__knopf" type="button" data-gruppe="branche" data-wert="konsum" aria-pressed="false">
Konsumgüter
</button>
</div>
<div class="filter__gruppe">
<span class="filter__titel" id="f-verfahren">Verfahren</span>
<button
class="filter__knopf"
type="button"
data-gruppe="verfahren"
data-wert="alle"
aria-pressed="true"
>
Alle
</button>
<button class="filter__knopf" type="button" data-gruppe="verfahren" data-wert="fdm" aria-pressed="false">
FDM
</button>
<button class="filter__knopf" type="button" data-gruppe="verfahren" data-wert="sla" aria-pressed="false">
SLA
</button>
<button class="filter__knopf" type="button" data-gruppe="verfahren" data-wert="bridge" aria-pressed="false">
Bridge Tooling
</button>
<button class="filter__knopf" type="button" data-gruppe="verfahren" data-wert="konstruktion" aria-pressed="false">
Konstruktion
</button>
<button class="filter__knopf" type="button" data-gruppe="verfahren" data-wert="material" aria-pressed="false">
Materialauswahl
</button>
</div>
</div>
</div>
<section class="sektion" aria-label="Projektliste">
<div class="huelle">
<p class="mono leise" data-zaehler aria-live="polite">6 Projekte</p>
<div class="raster raster--3 mt-6" data-projektliste>
<!-- 01 -->
<article class="projekt" data-branche="medizin" data-verfahren="bridge material">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-01.svg" alt="" width="800" height="600" loading="lazy" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Medizintechnik</span>
<span class="tag">Bridge Tooling</span>
<span class="tag">Materialauswahl</span>
</div>
<h2 class="projekt__titel">
<span class="platzhalter">Gehäuse für ein Analysegerät</span>
</h2>
<p class="projekt__block">
<b>Aufgabe</b>
<span class="platzhalter"
>600 Gehäuse im Serienwerkstoff für die Validierung — vier
Monate vor der geplanten Werkzeugfreigabe.</span
>
</p>
<p class="projekt__block">
<b>Lösung</b>
<span class="platzhalter"
>Werkstoffwechsel auf ein Material mit
Biokompatibilitätsnachweis, danach Fertigung über einen
SLA-Formeinsatz.</span
>
</p>
<div class="projekt__ergebnis">
<span class="projekt__kennzahl platzhalter">4 Monate</span>
<p class="leise mono">
<span class="platzhalter">früher in der Validierung · 2025</span>
</p>
</div>
</div>
</article>
<!-- 02 -->
<article class="projekt" data-branche="maschinenbau" data-verfahren="konstruktion fdm">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-02.svg" alt="" width="800" height="600" loading="lazy" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Maschinenbau</span>
<span class="tag">Konstruktion</span>
<span class="tag">FDM</span>
</div>
<h2 class="projekt__titel">
<span class="platzhalter">Führungselement mit Schnappverbindung</span>
</h2>
<p class="projekt__block">
<b>Aufgabe</b>
<span class="platzhalter"
>Ein verschraubtes Bauteil aus drei Einzelteilen verursachte
zu hohe Montagekosten.</span
>
</p>
<p class="projekt__block">
<b>Lösung</b>
<span class="platzhalter"
>Funktionsintegration zu einem Spritzgussteil mit
Schnappverbindung, abgesichert über gedruckte Muster.</span
>
</p>
<div class="projekt__ergebnis">
<span class="projekt__kennzahl platzhalter">2 Teile</span>
<p class="leise mono">
<span class="platzhalter">und ein Montageschritt entfallen · 2025</span>
</p>
</div>
</div>
</article>
<!-- 03 -->
<article class="projekt" data-branche="konsum" data-verfahren="sla">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-03.svg" alt="" width="800" height="600" loading="lazy" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Konsumgüter</span>
<span class="tag">SLA</span>
</div>
<h2 class="projekt__titel">
<span class="platzhalter">Sichtteil für einen Produktlaunch</span>
</h2>
<p class="projekt__block">
<b>Aufgabe</b>
<span class="platzhalter"
>Lackierfähige Muster für Fotoproduktion und Messeauftritt,
bevor das Serienwerkzeug stand.</span
>
</p>
<p class="projekt__block">
<b>Lösung</b>
<span class="platzhalter"
>SLA-Druck mit anschließendem Schleifen und Lackieren in der
späteren Serienfarbe.</span
>
</p>
<div class="projekt__ergebnis">
<span class="projekt__kennzahl platzhalter">8 Tage</span>
<p class="leise mono">
<span class="platzhalter">von der Freigabe zum Muster · 2025</span>
</p>
</div>
</div>
</article>
<!-- 04 -->
<article class="projekt" data-branche="automotive" data-verfahren="fdm konstruktion">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-04.svg" alt="" width="800" height="600" loading="lazy" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Automotive</span>
<span class="tag">FDM</span>
<span class="tag">Konstruktion</span>
</div>
<h2 class="projekt__titel">
<span class="platzhalter">Trägerplatte für Sensorik im Innenraum</span>
</h2>
<p class="projekt__block">
<b>Aufgabe</b>
<span class="platzhalter"
>Einbausituation absichern und Gewicht reduzieren, bei
Dauergebrauchstemperaturen bis 90 °C.</span
>
</p>
<p class="projekt__block">
<b>Lösung</b>
<span class="platzhalter"
>Rippenoptimierung und Werkstoffwechsel, Funktionsmuster aus
faserverstärktem FDM-Material.</span
>
</p>
<div class="projekt__ergebnis">
<span class="projekt__kennzahl platzhalter">− 22 %</span>
<p class="leise mono">
<span class="platzhalter">Bauteilgewicht · 2026</span>
</p>
</div>
</div>
</article>
<!-- 05 -->
<article class="projekt" data-branche="maschinenbau" data-verfahren="bridge">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-06.svg" alt="" width="800" height="600" loading="lazy" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Maschinenbau</span>
<span class="tag">Bridge Tooling</span>
</div>
<h2 class="projekt__titel">
<span class="platzhalter">Abdeckkappe in Serienqualität</span>
</h2>
<p class="projekt__block">
<b>Aufgabe</b>
<span class="platzhalter"
>Ersatzteilbedarf von rund 400 Stück pro Jahr — für ein
Stahlwerkzeug zu wenig, für den Druck zu viel.</span
>
</p>
<p class="projekt__block">
<b>Lösung</b>
<span class="platzhalter"
>SLA-Formeinsatz mit jährlichem Abruf statt Werkzeuginvest
und Lagerhaltung.</span
>
</p>
<div class="projekt__ergebnis">
<span class="projekt__kennzahl platzhalter">400 / Jahr</span>
<p class="leise mono">
<span class="platzhalter">ohne Lagerbestand · 2026</span>
</p>
</div>
</div>
</article>
<!-- 06 -->
<article class="projekt" data-branche="konsum" data-verfahren="material bridge">
<div class="projekt__bild">
<img src="assets/img/projekte/platzhalter-05.svg" alt="" width="800" height="600" loading="lazy" />
</div>
<div class="projekt__innen">
<div class="projekt__meta">
<span class="tag tag--branche">Konsumgüter</span>
<span class="tag">Materialauswahl</span>
<span class="tag">Bridge Tooling</span>
</div>
<h2 class="projekt__titel">
<span class="platzhalter">Verschluss mit Schnappfunktion</span>
</h2>
<p class="projekt__block">
<b>Aufgabe</b>
<span class="platzhalter"
>Ein Start-up brauchte 800 Stück für den Markttest, mit
Lebensmittelkontakt-Zulassung.</span
>
</p>
<p class="projekt__block">
<b>Lösung</b>
<span class="platzhalter"
>Werkstoffauswahl mit Zulassungsnachweis, danach Kleinserie
über einen gedruckten Formeinsatz.</span
>
</p>
<div class="projekt__ergebnis">
<span class="projekt__kennzahl platzhalter">800 Stück</span>
<p class="leise mono">
<span class="platzhalter">ohne Werkzeuginvestition · 2026</span>
</p>
</div>
</div>
</article>
</div>
<p class="leer-hinweis" data-leer hidden>
Zu dieser Kombination gibt es kein Projekt. Setzen Sie einen der
beiden Filter auf „Alle“.
</p>
<div class="hinweis mt-7">
<span class="hinweis__titel">Zur Darstellung</span>
<p>
Ein großer Teil unserer Arbeit entsteht in laufenden
Entwicklungsprojekten und unterliegt Geheimhaltungsvereinbarungen.
Wir zeigen solche Projekte anonymisiert: ohne Kundennamen und mit
Bildern, die das Bauteil nicht identifizierbar machen. Was wir
zeigen dürfen, zeigen wir gern im Gespräch.
</p>
</div>
</div>
</section>
<section class="cta-band sektion">
<div class="huelle cta-band__innen">
<div>
<h2 class="display t-2xl">Haben Sie einen ähnlichen Fall?</h2>
<p class="cta-band__text">
Schicken Sie uns Ihr CAD-Modell und die geplante Stückzahl. Sie
bekommen eine Einschätzung zu Machbarkeit, Verfahren und Kosten.
</p>
</div>
<div class="knopf-reihe">
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
<a class="knopf knopf--hell" href="dienstleistungen.html">Leistungen</a>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
<script src="assets/js/projekte.js" defer></script>
</body>
</html>

5
robots.txt Normal file
View file

@ -0,0 +1,5 @@
User-agent: *
Allow: /
Disallow: /danke.html
Sitemap: https://www.purinto.at/sitemap.xml

32
sitemap.xml Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Beim Domainwechsel alle Adressen anpassen. -->
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.purinto.at/</loc>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.purinto.at/dienstleistungen.html</loc>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.purinto.at/projekte.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.purinto.at/ueber-uns.html</loc>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.purinto.at/kontakt.html</loc>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.purinto.at/impressum.html</loc>
<priority>0.2</priority>
</url>
<url>
<loc>https://www.purinto.at/datenschutz.html</loc>
<priority>0.2</priority>
</url>
</urlset>

422
ueber-uns.html Normal file
View file

@ -0,0 +1,422 @@
<!doctype html>
<html lang="de-AT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Über uns — Purinto GmbH</title>
<meta
name="description"
content="Wie Purinto entstanden ist: der Werdegang hinter dem Unternehmen, die Haltung zur Arbeit und der Weg zur Gründung."
/>
<link rel="canonical" href="https://www.purinto.at/ueber-uns.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Über uns — Purinto GmbH" />
<meta
property="og:description"
content="Der Werdegang hinter Purinto und die Haltung, aus der das Unternehmen entstanden ist."
/>
<meta property="og:locale" content="de_AT" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<a class="sprungmarke" href="#inhalt">Zum Inhalt springen</a>
<header class="kopf" data-kopf>
<div class="huelle kopf__innen">
<a class="marke" href="index.html" aria-label="Purinto GmbH, zur Startseite">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#3c4347" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<button
class="nav__schalter"
type="button"
data-nav-schalter
aria-expanded="false"
aria-controls="hauptnav"
>
<span data-nav-schalter-text>Menü</span>
<span class="nav__balken" aria-hidden="true"></span>
</button>
<nav class="nav" id="hauptnav" data-nav aria-label="Hauptnavigation">
<ul class="nav__liste">
<li><a class="nav__link" href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a class="nav__link" href="projekte.html">Projekte</a></li>
<li>
<a class="nav__link" href="ueber-uns.html" aria-current="page">Über uns</a>
</li>
<li><a class="nav__link" href="kontakt.html">Kontakt</a></li>
</ul>
<a class="knopf knopf--primaer" href="kontakt.html">Anfrage stellen</a>
</nav>
</div>
</header>
<main id="inhalt">
<section class="seitenkopf">
<div class="huelle">
<p class="eyebrow">Über uns</p>
<h1 class="display t-2xl seitenkopf__titel">
Purinto ist neu. Die Erfahrung dahinter ist es nicht.
</h1>
<p class="lead">
Das Unternehmen wird 2026 gegründet. Entstanden ist es aus Jahren in
Konstruktion, Werkzeugbau und Fertigung — und aus einer Beobachtung,
die sich in fast jedem Entwicklungsprojekt wiederholt hat.
</p>
</div>
</section>
<section class="sektion" aria-labelledby="warum-titel">
<div class="huelle huelle--eng">
<h2 class="display t-xl" id="warum-titel">
Warum es Purinto gibt
</h2>
<div class="fliess mt-6">
<p>
Zwischen einem funktionierenden Prototyp und einem serienreifen
Bauteil liegt eine Strecke, die viele Entwicklungsprojekte
unterschätzen. Der gedruckte Prototyp passt, also wird das
Serienwerkzeug beauftragt — und dann zeigt sich, dass die
Wandstärke zu Einfallstellen führt, die Entformung einen Schieber
braucht oder der Werkstoff unter Dauerlast kriecht. Änderungen an
einem Stahlwerkzeug sind teuer, manchmal unmöglich.
</p>
<p>
Purinto setzt genau an dieser Stelle an: Bauteile vorab auf
Fertigbarkeit prüfen, den Werkstoff nach dem echten
Anforderungsprofil wählen und die ersten Hundert bis Tausend Teile
über einen gedruckten Formeinsatz fertigen — im Serienwerkstoff,
mit Spritzguss-Eigenschaften, ohne vorher ein Werkzeug zu
finanzieren, das vielleicht noch nicht das richtige ist.
</p>
<p>
<span class="platzhalter"
>[PLATZHALTER: Hier gehört Ihre persönliche Motivation hin — die
konkrete Situation oder das Projekt, das den Ausschlag zur
Gründung gegeben hat. Zwei bis vier Sätze in Ihren eigenen
Worten wirken hier stärker als jede allgemeine
Formulierung.]</span
>
</p>
</div>
</div>
</section>
<section class="sektion sektion--salbei" aria-labelledby="weg-titel">
<div class="huelle huelle--eng">
<p class="eyebrow">Werdegang</p>
<h2 class="display t-xl" id="weg-titel">Der Weg bis hierher</h2>
<p class="lead mt-6">
Ein neu gegründetes Unternehmen hat keine Firmenhistorie. Was es hat,
ist der Weg der Menschen dahinter — und der ist hier
nachgezeichnet.
</p>
<ol class="zeitstrahl mt-7">
<li class="etappe">
<span class="etappe__jahr platzhalter">[JJJJ]</span>
<h3 class="etappe__titel">
<span class="platzhalter">Ausbildung in der Kunststofftechnik</span>
</h3>
<p class="etappe__text">
<span class="platzhalter"
>[PLATZHALTER: Studium oder Ausbildung, Institution,
Schwerpunkt. Beispiel: Studium Kunststofftechnik mit
Schwerpunkt Verarbeitung und Werkstoffkunde.]</span
>
</p>
</li>
<li class="etappe">
<span class="etappe__jahr platzhalter">[JJJJ]</span>
<h3 class="etappe__titel">
<span class="platzhalter">Erste Jahre in Konstruktion und Werkzeugbau</span>
</h3>
<p class="etappe__text">
<span class="platzhalter"
>[PLATZHALTER: Wo, in welcher Rolle, mit welchen Bauteilen und
Branchen. Konkrete Aufgaben wirken glaubwürdiger als
Positionsbezeichnungen.]</span
>
</p>
</li>
<li class="etappe">
<span class="etappe__jahr platzhalter">[JJJJ]</span>
<h3 class="etappe__titel">
<span class="platzhalter">Verantwortung in der Produktentwicklung</span>
</h3>
<p class="etappe__text">
<span class="platzhalter"
>[PLATZHALTER: Projekte von der Konstruktion bis zur
Serienfreigabe begleitet — gern mit einer Zahl, etwa der
Anzahl betreuter Werkzeuge oder Serienanläufe.]</span
>
</p>
</li>
<li class="etappe">
<span class="etappe__jahr platzhalter">[JJJJ]</span>
<h3 class="etappe__titel">
<span class="platzhalter">Die Idee zu Purinto</span>
</h3>
<p class="etappe__text">
<span class="platzhalter"
>[PLATZHALTER: Der Auslöser. Welches wiederkehrende Problem hat
gezeigt, dass es dieses Angebot braucht?]</span
>
</p>
</li>
<li class="etappe etappe--jetzt">
<span class="etappe__jahr">2026</span>
<h3 class="etappe__titel">Gründung der Purinto GmbH</h3>
<p class="etappe__text">
Start mit eigenem Maschinenpark für FDM und SLA sowie einem
Netzwerk aus Spritzgießern und Werkzeugbauern in der Region.
<span class="platzhalter"
>[PLATZHALTER: Gründungsmonat und Standort ergänzen.]</span
>
</p>
</li>
<li class="etappe">
<span class="etappe__jahr">Ausblick</span>
<h3 class="etappe__titel">Was als Nächstes kommt</h3>
<p class="etappe__text">
<span class="platzhalter"
>[PLATZHALTER: Geplanter Ausbau — zusätzliche Kapazität,
Werkstoffspektrum, Prüfmöglichkeiten oder Zertifizierungen.
Ehrliche Vorhaben statt großer Versprechen.]</span
>
</p>
</li>
</ol>
</div>
</section>
<section class="sektion" aria-labelledby="haltung-titel">
<div class="huelle">
<div class="sektion__kopf">
<p class="eyebrow">Arbeitsweise</p>
<h2 class="display t-xl" id="haltung-titel">
Drei Dinge, auf die Sie sich verlassen können
</h2>
</div>
<div class="raster raster--3">
<article class="karte karte--flach">
<p class="karte__marke">Grundsatz</p>
<h3 class="karte__titel">Wir sagen vorher, was nicht geht</h3>
<p class="karte__text">
Wenn ein Verfahren für Ihre Anforderung ungeeignet ist, hören Sie
das vor der Beauftragung — auch wenn wir damit einen Auftrag
verlieren. Eine Standzeit, die wir nicht halten können, sagen wir
nicht zu.
</p>
</article>
<article class="karte karte--flach">
<p class="karte__marke">Grundsatz</p>
<h3 class="karte__titel">Jede Empfehlung mit Begründung</h3>
<p class="karte__text">
Sie bekommen nicht nur das Ergebnis, sondern den Weg dorthin:
welche Kennwerte den Ausschlag gaben, welche Alternativen
geprüft wurden und woran sie gescheitert sind. Damit können Sie
die Entscheidung intern vertreten.
</p>
</article>
<article class="karte karte--flach">
<p class="karte__marke">Grundsatz</p>
<h3 class="karte__titel">Das Bauteil zählt, nicht das Verfahren</h3>
<p class="karte__text">
Wir haben kein Interesse daran, eine bestimmte Maschine
auszulasten. Wenn Ihr Bauteil besser gefräst, tiefgezogen oder
gleich in Serie gespritzt wird, sagen wir das und vermitteln
weiter.
</p>
</article>
</div>
</div>
</section>
<section class="sektion sektion--linie" aria-labelledby="team-titel">
<div class="huelle">
<div class="sektion__kopf">
<p class="eyebrow">Team</p>
<h2 class="display t-xl" id="team-titel">Wer dahintersteht</h2>
</div>
<div class="profil">
<div class="profil__bild">
<svg viewBox="0 0 400 500" role="img" aria-label="Platzhalter für ein Portraitfoto">
<rect width="400" height="500" fill="#e3e7e6" />
<circle cx="200" cy="195" r="70" fill="#c9cfd0" />
<path d="M70 460c0-75 58-130 130-130s130 55 130 130z" fill="#c9cfd0" />
<text x="200" y="490" text-anchor="middle" font-family="ui-monospace, Consolas, monospace" font-size="17" fill="#6b7478">PORTRAITFOTO</text>
</svg>
</div>
<div>
<h3 class="display t-xl">
<span class="platzhalter">[Vorname Nachname]</span>
</h3>
<p class="mono leise mt-6">
<span class="platzhalter">[Funktion, z. B. Geschäftsführung]</span>
</p>
<div class="fliess mt-6">
<p>
<span class="platzhalter"
>[PLATZHALTER: Kurzprofil in drei bis fünf Sätzen —
fachlicher Hintergrund, Schwerpunkte, was Sie an dieser
Arbeit interessiert. Ruhig persönlich, das ist die Seite
dafür.]</span
>
</p>
</div>
<dl class="datenzeile">
<div>
<dt>Schwerpunkte</dt>
<dd>
<span class="platzhalter">[z. B. Spritzgusskonstruktion, Werkstoffauswahl]</span>
</dd>
</div>
<div>
<dt>Kontakt</dt>
<dd>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section class="sektion sektion--linie" aria-labelledby="standort-titel">
<div class="huelle">
<div class="sektion__kopf">
<p class="eyebrow">Standort und Ausstattung</p>
<h2 class="display t-xl" id="standort-titel">Womit wir arbeiten</h2>
</div>
<div class="raster raster--3">
<article class="karte karte--flach">
<p class="karte__marke">Fertigung im Haus</p>
<h3 class="karte__titel">FDM und SLA</h3>
<p class="karte__text">
<span class="platzhalter"
>[PLATZHALTER: Anzahl und Typ der Drucker, verfügbare Bauräume
in mm, verarbeitbare Werkstoffe.]</span
>
</p>
</article>
<article class="karte karte--flach">
<p class="karte__marke">Nachbearbeitung und Prüfung</p>
<h3 class="karte__titel">Finish und Maßkontrolle</h3>
<p class="karte__text">
<span class="platzhalter"
>[PLATZHALTER: UV-Härtekammer, Schleif- und Lackierplatz,
Messmittel für das Maßprotokoll.]</span
>
</p>
</article>
<article class="karte karte--flach">
<p class="karte__marke">Partnernetzwerk</p>
<h3 class="karte__titel">Spritzguss und Werkzeugbau</h3>
<p class="karte__text">
Für den Spritzguss der Kleinserien und den späteren Übergang zum
Stahlwerkzeug arbeiten wir mit Betrieben in der Region zusammen.
<span class="platzhalter">[PLATZHALTER: Region konkretisieren.]</span>
</p>
</article>
</div>
</div>
</section>
<section class="cta-band sektion">
<div class="huelle cta-band__innen">
<div>
<h2 class="display t-2xl">Lernen wir uns kennen.</h2>
<p class="cta-band__text">
Der einfachste Einstieg ist ein konkretes Bauteil. Schicken Sie
uns Ihr Modell — oder rufen Sie einfach an.
</p>
</div>
<div class="knopf-reihe">
<a class="knopf knopf--primaer" href="kontakt.html">Kontakt aufnehmen</a>
<a class="knopf knopf--hell" href="dienstleistungen.html">Leistungen</a>
</div>
</div>
</section>
</main>
<footer class="fuss">
<div class="huelle">
<div class="fuss__raster">
<div>
<a class="marke fuss__marke" href="index.html">
<svg class="marke__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<rect x="6" y="4" width="12" height="4.4" rx="1" fill="#9b85c4" />
<rect x="4" y="9.8" width="16" height="4.4" rx="1" fill="#8fa894" />
<rect x="2" y="15.6" width="20" height="4.4" rx="1" fill="#e3e7e6" />
</svg>
<span class="marke__wort">Purinto</span>
</a>
<p class="fuss__text">
Entwicklungsbegleitende Kunststofftechnik. Konstruktion,
Werkstoffauswahl, Prototypen und Kleinserien aus einer Hand.
</p>
</div>
<div>
<p class="fuss__titel">Navigation</p>
<ul class="fuss__liste">
<li><a href="dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div>
<p class="fuss__titel">Kontakt</p>
<ul class="fuss__liste">
<li>
<a href="mailto:office@purinto.at" class="platzhalter"
>office@purinto.at</a
>
</li>
<li><span class="platzhalter">+43 (0) 000 000 00 00</span></li>
<li><span class="platzhalter">Musterstraße 1, 0000 Musterort</span></li>
</ul>
</div>
</div>
<div class="fuss__unten">
<p>© <span data-jahr>2026</span> Purinto GmbH</p>
<div class="fuss__rechtlich">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/site.js" defer></script>
</body>
</html>