Denise Krölling
1a63f66463
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>
417 lines
17 KiB
HTML
417 lines
17 KiB
HTML
<!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>
|