562 lines
22 KiB
HTML
562 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>ToolCTRL — Die Software, die eure Branche längst verdient hat</title>
|
|
<meta name="description" content="ToolCTRL baut moderne, durchdachte All-in-One-Software für Branchen, die zu lange mit veralteten Insellösungen auskommen mussten. Mit Fokus auf Bedienung und Gestaltung." />
|
|
<link rel="canonical" href="https://tool-ctrl.de/" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:locale" content="de_DE" />
|
|
<meta property="og:site_name" content="ToolCTRL" />
|
|
<meta property="og:title" content="ToolCTRL — All-in-One-Software für übersehene Branchen" />
|
|
<meta property="og:description" content="Wir ersetzen Excel, WhatsApp-Chaos und Insellösungen durch Software, die Mitarbeiter wirklich benutzen." />
|
|
<meta property="og:url" content="https://tool-ctrl.de/" />
|
|
<meta property="og:image" content="https://tool-ctrl.de/assets/logo-a.png" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="theme-color" content="#0A0A0A" />
|
|
<link rel="icon" type="image/png" href="/assets/favicon.png" />
|
|
<link rel="stylesheet" href="/styles.css?v=20260524" />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "ToolCTRL",
|
|
"legalName": "R&D² UG (haftungsbeschränkt)",
|
|
"url": "https://tool-ctrl.de/",
|
|
"email": "info@tool-ctrl.de",
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"streetAddress": "Orbinstr. 1",
|
|
"postalCode": "76646",
|
|
"addressLocality": "Bruchsal",
|
|
"addressCountry": "DE"
|
|
},
|
|
"sameAs": ["https://www.linkedin.com/company/toolctrl/"]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============ HEADER ============ -->
|
|
<header class="site-header" id="top">
|
|
<div class="wrap header-inner">
|
|
<a class="brand" href="#top" aria-label="ToolCTRL Startseite">
|
|
<img src="/assets/logo-black.svg" alt="ToolCTRL" class="brand-logo" />
|
|
</a>
|
|
<nav class="nav" aria-label="Hauptnavigation">
|
|
<a href="#leistungen">Leistungen</a>
|
|
<a href="#branchen">Branchen</a>
|
|
<a href="#vorgehen">Vorgehen</a>
|
|
<a href="#arbeit">Organisation</a>
|
|
<a href="#events">Events</a>
|
|
<a href="/techday">TechDay</a>
|
|
<a class="btn btn-solid btn-sm" href="#kontakt">Kontakt aufnehmen</a>
|
|
</nav>
|
|
<button class="nav-toggle" aria-label="Menü" aria-expanded="false">
|
|
<span></span><span></span>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-nav" hidden>
|
|
<a href="#leistungen">Leistungen</a>
|
|
<a href="#branchen">Branchen</a>
|
|
<a href="#vorgehen">Vorgehen</a>
|
|
<a href="#arbeit">Organisation</a>
|
|
<a href="#events">Events</a>
|
|
<a href="/techday">TechDay</a>
|
|
<a class="btn btn-solid" href="#kontakt">Kontakt aufnehmen</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- ============ HERO ============ -->
|
|
<section class="hero">
|
|
<div class="wrap hero-grid">
|
|
<div class="hero-copy">
|
|
<h1 class="hero-title">
|
|
Moderne, durchdachte All-in-One-Software für Branchen, die zu
|
|
lange übersehen wurden.
|
|
</h1>
|
|
<p class="hero-lead">
|
|
Ganze Branchen arbeiten noch mit veralteten, zusammengestückelten
|
|
Insellösungen. Wir bei ToolCTRL bauen die Alternative: Software mit
|
|
echtem Fokus auf Bedienung und Gestaltung, die gut funktioniert,
|
|
klar aussieht und sich schnell bedienen lässt.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="btn btn-solid" href="#kontakt">Projekt besprechen</a>
|
|
<a class="btn btn-ghost" href="#leistungen">Leistungen ansehen</a>
|
|
</div>
|
|
<div class="trust-strip" aria-label="ToolCTRL Vertrauenssignale">
|
|
<span>Eigene Server</span>
|
|
<span>DSGVO-orientiert</span>
|
|
<span>Direkter Ansprechpartner</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Automatisierung trifft Kontrolle — generisch, kein reales Produkt -->
|
|
<div class="hero-visual" aria-hidden="true">
|
|
<div class="visual-frame">
|
|
<div class="visual-label">
|
|
<span class="dot"></span> Workflow · ctrl
|
|
</div>
|
|
<svg class="node-graph" viewBox="0 0 540 400" role="presentation">
|
|
<defs>
|
|
<pattern id="grid" width="26" height="26" patternUnits="userSpaceOnUse">
|
|
<path d="M26 0H0V26" fill="none" stroke="#ECECEC" stroke-width="1" />
|
|
</pattern>
|
|
<linearGradient id="capface" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#2A2A2A" />
|
|
<stop offset="1" stop-color="#101010" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="540" height="400" fill="url(#grid)" />
|
|
|
|
<!-- Leitungen -->
|
|
<g class="flow-lines" fill="none" stroke="#1A1A1A" stroke-width="1.6">
|
|
<path d="M116 78 C 165 78, 152 182, 200 182" />
|
|
<path d="M116 202 C 158 202, 168 202, 200 202" />
|
|
<path d="M116 326 C 165 326, 152 224, 200 224" />
|
|
<path d="M340 192 C 388 192, 378 118, 424 118" />
|
|
<path d="M340 214 C 388 214, 378 292, 424 292" />
|
|
</g>
|
|
<circle class="flow-signal" r="3.5">
|
|
<animateMotion dur="7.5s" repeatCount="indefinite"
|
|
path="M116 202 C 158 202, 168 202, 200 202" />
|
|
</circle>
|
|
<g class="flow-ports" fill="#1A1A1A">
|
|
<circle cx="116" cy="78" r="3" /><circle cx="116" cy="202" r="3" />
|
|
<circle cx="116" cy="326" r="3" /><circle cx="424" cy="118" r="3" />
|
|
<circle cx="424" cy="292" r="3" />
|
|
</g>
|
|
|
|
<!-- Eingangs-Knoten -->
|
|
<g class="gnode">
|
|
<rect x="24" y="56" width="92" height="44" />
|
|
<text x="70" y="83" text-anchor="middle">Daten</text>
|
|
</g>
|
|
<g class="gnode">
|
|
<rect x="24" y="180" width="92" height="44" />
|
|
<text x="70" y="207" text-anchor="middle">Auslöser</text>
|
|
</g>
|
|
<g class="gnode">
|
|
<rect x="24" y="304" width="92" height="44" />
|
|
<text x="70" y="331" text-anchor="middle">System</text>
|
|
</g>
|
|
|
|
<!-- Ausgangs-Knoten -->
|
|
<g class="gnode">
|
|
<rect x="424" y="96" width="92" height="44" />
|
|
<text x="470" y="123" text-anchor="middle">Aktion</text>
|
|
</g>
|
|
<g class="gnode">
|
|
<rect x="424" y="270" width="92" height="44" />
|
|
<text x="470" y="297" text-anchor="middle">Report</text>
|
|
</g>
|
|
|
|
<!-- ToolCTRL-Emblem in der Mitte -->
|
|
<image class="graph-emblem" href="/assets/emblem-black.svg" x="190" y="128"
|
|
width="160" height="152" />
|
|
<g class="flow-ports flow-ports-center" fill="#000000">
|
|
<circle cx="200" cy="182" r="3" /><circle cx="200" cy="202" r="3" />
|
|
<circle cx="200" cy="224" r="3" /><circle cx="340" cy="192" r="3" />
|
|
<circle cx="340" cy="214" r="3" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="visual-meta">
|
|
<span>Automatisiert</span>
|
|
<span>Kontrolliert</span>
|
|
<span>Wartbar</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ PRODUKTWIRKUNG ============ -->
|
|
<section class="section product-section" id="produkt">
|
|
<div class="wrap product-grid">
|
|
<div class="product-copy">
|
|
<span class="eyebrow">Produktwirkung</span>
|
|
<h2 class="section-title">Nicht noch ein Tool. Ein Betriebssystem für Ihren Ablauf.</h2>
|
|
<p class="section-intro">
|
|
Wir übersetzen gewachsene Prozesse in eine Oberfläche, die Teams
|
|
sofort verstehen: klare Zustände, weniger Rückfragen, automatische
|
|
Übergaben und ein Ort, an dem Arbeit sichtbar wird.
|
|
</p>
|
|
<div class="proof-points" aria-label="Typische Ergebnisse">
|
|
<div>
|
|
<strong>1 Oberfläche</strong>
|
|
<span>statt verstreuter Tabellen, Chats und Ordner</span>
|
|
</div>
|
|
<div>
|
|
<strong>0 Medienbrüche</strong>
|
|
<span>zwischen Anfrage, Bearbeitung und Auswertung</span>
|
|
</div>
|
|
<div>
|
|
<strong>Live-Status</strong>
|
|
<span>für Teams, Leitung und Kundenkommunikation</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-ui" aria-label="Beispielhafte ToolCTRL Oberfläche">
|
|
<div class="ui-top">
|
|
<span class="ui-mark">toolctrl</span>
|
|
<span class="ui-status"><i></i> Live-System</span>
|
|
</div>
|
|
<div class="ui-layout">
|
|
<aside class="ui-sidebar">
|
|
<span class="ui-nav active">Aufträge</span>
|
|
<span class="ui-nav">Team</span>
|
|
<span class="ui-nav">Automationen</span>
|
|
<span class="ui-nav">Reports</span>
|
|
</aside>
|
|
<div class="ui-main">
|
|
<div class="ui-main-head">
|
|
<div>
|
|
<span class="ui-kicker">Heute</span>
|
|
<strong>Operations Board</strong>
|
|
</div>
|
|
<span class="ui-pill">12 offen</span>
|
|
</div>
|
|
<div class="ui-metrics">
|
|
<div><span>Antwortzeit</span><strong>18 min</strong></div>
|
|
<div><span>Automatisiert</span><strong>74%</strong></div>
|
|
<div><span>Blocker</span><strong>03</strong></div>
|
|
</div>
|
|
<div class="ui-table">
|
|
<div class="ui-row is-hot"><span>Anfrage qualifizieren</span><b>Jetzt</b></div>
|
|
<div class="ui-row"><span>Dokumente prüfen</span><b>09:40</b></div>
|
|
<div class="ui-row"><span>Freigabe einholen</span><b>11:15</b></div>
|
|
<div class="ui-row is-done"><span>Report versendet</span><b>Erledigt</b></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ LEISTUNGEN ============ -->
|
|
<section class="section" id="leistungen">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Leistungen</span>
|
|
<h2 class="section-title">Die digitale Infrastruktur Ihres Betriebs.</h2>
|
|
<p class="section-intro">
|
|
Wir arbeiten dort, wo Tabellen, manuelle Schritte und getrennte
|
|
Systeme zu viel Zeit kosten. Daraus bauen wir eine tragfähige
|
|
Infrastruktur: Software, Automatisierung und Schnittstellen,
|
|
zugeschnitten auf Ihren Ablauf, nicht umgekehrt.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<article class="card">
|
|
<span class="icon-key"><img src="/assets/icons/graph.svg" alt="" class="card-icon" /></span>
|
|
<h3>Prozessautomatisierung</h3>
|
|
<p>Wiederkehrende Abläufe werden zu verlässlichen Workflows, die
|
|
ohne manuelles Zutun ausgelöst, verarbeitet und dokumentiert
|
|
werden.</p>
|
|
</article>
|
|
<article class="card">
|
|
<span class="icon-key"><img src="/assets/icons/settings.svg" alt="" class="card-icon" /></span>
|
|
<h3>Individuelle Software</h3>
|
|
<p>Anwendungen, die exakt zu Ihrem Geschäft passen. Schlank
|
|
gebaut, klar bedienbar und auf Dauer wartbar.</p>
|
|
</article>
|
|
<article class="card">
|
|
<span class="icon-key"><img src="/assets/icons/chart.svg" alt="" class="card-icon" /></span>
|
|
<h3>Dashboards & Datenflüsse</h3>
|
|
<p>Verstreute Daten an einem Ort: aktuell, übersichtlich und
|
|
als Grundlage für schnelle Entscheidungen.</p>
|
|
</article>
|
|
<article class="card">
|
|
<span class="icon-key"><img src="/assets/icons/share.svg" alt="" class="card-icon" /></span>
|
|
<h3>Schnittstellen & Integrationen</h3>
|
|
<p>Bestehende Tools, APIs und Systeme greifen ineinander, statt
|
|
nebeneinander zu laufen.</p>
|
|
</article>
|
|
<article class="card">
|
|
<span class="icon-key"><img src="/assets/icons/columns.svg" alt="" class="card-icon" /></span>
|
|
<h3>Interne Tools</h3>
|
|
<p>Werkzeuge für das eigene Team, die verstreute Tabellenlösungen
|
|
ablösen und mit Ihren Abläufen mitwachsen.</p>
|
|
</article>
|
|
<article class="card">
|
|
<span class="icon-key"><img src="/assets/icons/time.svg" alt="" class="card-icon" /></span>
|
|
<h3>Betrieb & Weiterentwicklung</h3>
|
|
<p>Nach dem Launch ist nicht Schluss: Wartung, Anpassung und
|
|
Ausbau aus einer Hand.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ BRANCHEN ============ -->
|
|
<section class="section section-alt" id="branchen">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Branchen</span>
|
|
<h2 class="section-title">Für Teams, bei denen Standardsoftware nie ganz passt.</h2>
|
|
<p class="section-intro">
|
|
ToolCTRL ist interessant, wenn Ihr Ablauf speziell genug ist, dass
|
|
Baukastenlösungen ständig Workarounds erzwingen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="industry-grid">
|
|
<article class="industry-card">
|
|
<span>01</span>
|
|
<h3>Handwerk & Service</h3>
|
|
<p>Von Anfrage bis Einsatzplanung: weniger Telefonketten, klare Zuständigkeiten, mobile Rückmeldungen.</p>
|
|
</article>
|
|
<article class="industry-card">
|
|
<span>02</span>
|
|
<h3>Events & Organisation</h3>
|
|
<p>Anmeldungen, Teilnehmer, Programm und Kommunikation laufen in einem kontrollierten Ablauf zusammen.</p>
|
|
</article>
|
|
<article class="industry-card">
|
|
<span>03</span>
|
|
<h3>Vereine & Verbände</h3>
|
|
<p>Mitglieder, Rollen, Beiträge und Projekte werden verwaltbar, ohne dass Ehrenamt im Tool-Chaos endet.</p>
|
|
</article>
|
|
<article class="industry-card">
|
|
<span>04</span>
|
|
<h3>Lokale Dienstleister</h3>
|
|
<p>Leads, Termine, Angebote und Kundenstatus werden sichtbar, statt in Postfächern zu verschwinden.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ VORGEHEN ============ -->
|
|
<section class="section" id="vorgehen">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Vorgehen</span>
|
|
<h2 class="section-title">In vier klaren Schritten.</h2>
|
|
<p class="section-intro">
|
|
Kein Wasserfall, kein Blindflug. Ein Ablauf, der Ergebnisse früh
|
|
sichtbar macht und Sie an jeder Stelle einbezieht.
|
|
</p>
|
|
</div>
|
|
|
|
<ol class="steps">
|
|
<li class="step">
|
|
<span class="step-num">01</span>
|
|
<h3>Analyse</h3>
|
|
<p>Wir sehen uns Ihren Ablauf an und legen offen, wo Zeit, Daten
|
|
und Klarheit verloren gehen.</p>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-num">02</span>
|
|
<h3>Konzept</h3>
|
|
<p>Ein konkreter Lösungsvorschlag mit Aufwand, Umfang und
|
|
erwartetem Nutzen, transparent kalkuliert.</p>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-num">03</span>
|
|
<h3>Umsetzung</h3>
|
|
<p>Wir bauen in kurzen Zyklen. Sie sehen früh ein funktionierendes
|
|
Ergebnis statt nur Folien.</p>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-num">04</span>
|
|
<h3>Betrieb</h3>
|
|
<p>Übergabe, Einweisung und laufende Pflege, damit die Lösung
|
|
dauerhaft trägt.</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ ARBEITSWEISE / KANBAN VISUAL ============ -->
|
|
<section class="section" id="arbeit">
|
|
<div class="wrap arbeit-grid">
|
|
<div class="arbeit-copy">
|
|
<span class="eyebrow">Organisation</span>
|
|
<h2 class="section-title">Struktur, die in der Software steckt.</h2>
|
|
<p class="section-intro">
|
|
Ob Lead-Verarbeitung, Vertriebspipeline oder Projektboard: Wir
|
|
bauen die Software, in der Aufgaben, Status und Fortschritt
|
|
sichtbar werden und Abläufe automatisch weiterlaufen.
|
|
</p>
|
|
<ul class="checklist">
|
|
<li>Lead- und Vertriebspipelines</li>
|
|
<li>Aufgaben- und Projektboards</li>
|
|
<li>Workflow-Automatisierung und Status-Tracking</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Kanban-Andeutung: bewusst unscharf, kein reales Produkt -->
|
|
<div class="kanban-wrap" aria-hidden="true">
|
|
<div class="kanban">
|
|
<div class="kb-col">
|
|
<div class="kb-head">Backlog</div>
|
|
<div class="kb-card"><span class="kb-line w70"></span><span class="kb-line w40"></span></div>
|
|
<div class="kb-card"><span class="kb-line w55"></span><span class="kb-line w60"></span></div>
|
|
<div class="kb-card"><span class="kb-line w80"></span><span class="kb-line w35"></span></div>
|
|
</div>
|
|
<div class="kb-col">
|
|
<div class="kb-head">In Arbeit</div>
|
|
<div class="kb-card kb-active"><span class="kb-line w65"></span><span class="kb-line w50"></span></div>
|
|
<div class="kb-card"><span class="kb-line w75"></span><span class="kb-line w45"></span></div>
|
|
</div>
|
|
<div class="kb-col">
|
|
<div class="kb-head">Review</div>
|
|
<div class="kb-card"><span class="kb-line w60"></span><span class="kb-line w55"></span></div>
|
|
</div>
|
|
<div class="kb-col">
|
|
<div class="kb-head">Live</div>
|
|
<div class="kb-card kb-done"><span class="kb-line w70"></span><span class="kb-line w40"></span></div>
|
|
<div class="kb-card kb-done"><span class="kb-line w50"></span><span class="kb-line w65"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-fade"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ EVENTS / COMMUNITY ============ -->
|
|
<section class="section event-section" id="events">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<span class="eyebrow">Events</span>
|
|
<h2 class="section-title">Wir bauen nicht im stillen Kämmerlein.</h2>
|
|
<p class="section-intro">
|
|
TechDay und GameJam zeigen, wie wir arbeiten: nah an echten
|
|
Anwendern, lokal verankert und mit sichtbaren Ergebnissen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="event-grid">
|
|
<article class="event-card event-card-media">
|
|
<img src="/assets/techday-event.png" alt="TechDay Bruchsal 2026 Motiv" loading="lazy" />
|
|
<div>
|
|
<span class="event-label">27. Mai 2026</span>
|
|
<h3>TechDay Bruchsal</h3>
|
|
<p>Talks, Workshops und Austausch rund um Technologie in Bruchsal.</p>
|
|
<a href="/techday">TechDay ansehen</a>
|
|
</div>
|
|
</article>
|
|
<article class="event-card event-card-code">
|
|
<div class="mini-terminal" aria-hidden="true">
|
|
<span>AI_GAMEJAM</span>
|
|
<strong>Human in the Loop</strong>
|
|
<em>2 Stunden · KI · Spielbar</em>
|
|
</div>
|
|
<div>
|
|
<span class="event-label">TechDay Format</span>
|
|
<h3>AI GameJam</h3>
|
|
<p>Ein kompaktes Format, bei dem aus Idee, KI-Unterstützung und menschlicher Steuerung ein spielbares Ergebnis wird.</p>
|
|
<a href="/gamejam">GameJam ansehen</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ KONTAKT ============ -->
|
|
<section class="section section-dark" id="kontakt">
|
|
<div class="wrap kontakt-grid">
|
|
<div class="kontakt-copy">
|
|
<span class="eyebrow eyebrow-light">Kontakt</span>
|
|
<h2 class="section-title">Sprechen wir über Ihr Vorhaben.</h2>
|
|
<p class="section-intro">
|
|
Beschreiben Sie kurz, woran es hakt. Wir melden uns mit einer
|
|
ehrlichen Einschätzung. Unverbindlich und ohne Verkaufsdruck.
|
|
</p>
|
|
<ul class="contact-promises">
|
|
<li>Antwort in der Regel innerhalb von 24 Stunden</li>
|
|
<li>Erstgespräch ohne Kosten und ohne Pitch-Deck</li>
|
|
<li>Klare Einschätzung, auch wenn wir nicht die Richtigen sind</li>
|
|
</ul>
|
|
<dl class="contact-list">
|
|
<div>
|
|
<dt>E-Mail</dt>
|
|
<dd><a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a></dd>
|
|
</div>
|
|
<div>
|
|
<dt>LinkedIn</dt>
|
|
<dd><a href="https://www.linkedin.com/company/toolctrl/" target="_blank" rel="noopener">linkedin.com/company/toolctrl</a></dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<form class="lead-form" id="lead-form" novalidate>
|
|
<div class="form-row">
|
|
<label for="f-name">Name <span>*</span></label>
|
|
<input id="f-name" name="name" type="text" autocomplete="name" required />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="f-firma">Firma</label>
|
|
<input id="f-firma" name="firma" type="text" autocomplete="organization" />
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-row">
|
|
<label for="f-email">E-Mail <span>*</span></label>
|
|
<input id="f-email" name="email" type="email" autocomplete="email" required />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="f-telefon">Telefon</label>
|
|
<input id="f-telefon" name="telefon" type="tel" autocomplete="tel" />
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="f-nachricht">Worum geht es? <span>*</span></label>
|
|
<textarea id="f-nachricht" name="nachricht" rows="4" required
|
|
placeholder="Kurz Ihr Anliegen — wir kümmern uns um die Details."></textarea>
|
|
</div>
|
|
<!-- Honeypot gegen Spam -->
|
|
<div class="hp" aria-hidden="true">
|
|
<label for="f-website">Website</label>
|
|
<input id="f-website" name="website" type="text" tabindex="-1" autocomplete="off" />
|
|
</div>
|
|
<div class="form-foot">
|
|
<button type="submit" class="btn btn-solid">Anfrage senden</button>
|
|
<p class="form-note">Mit dem Absenden stimmen Sie der Bearbeitung
|
|
Ihrer Angaben gemäß der
|
|
<a href="/datenschutz">Datenschutzerklärung</a> zu.</p>
|
|
</div>
|
|
<p class="form-status" id="form-status" role="status" hidden></p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- ============ FOOTER ============ -->
|
|
<footer class="site-footer">
|
|
<div class="wrap footer-inner">
|
|
<div class="footer-brand">
|
|
<img src="/assets/logo-white.svg" alt="ToolCTRL" class="footer-logo" />
|
|
<p>Moderne Software, Automatisierung und interne Tools aus Bruchsal.</p>
|
|
</div>
|
|
<nav class="footer-links" aria-label="Footer Navigation">
|
|
<a href="#leistungen">Leistungen</a>
|
|
<a href="#branchen">Branchen</a>
|
|
<a href="#vorgehen">Vorgehen</a>
|
|
<a href="#arbeit">Organisation</a>
|
|
<a href="#events">Events</a>
|
|
<a href="/techday">TechDay</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
<div class="footer-meta">
|
|
<a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a>
|
|
<span>Bruchsal</span>
|
|
<span>Eigene Services · SSL</span>
|
|
<a href="https://www.linkedin.com/company/toolctrl/" target="_blank" rel="noopener">LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
<div class="wrap footer-base">
|
|
<span>© <span id="year">2026</span> ToolCTRL</span>
|
|
<span><a href="/impressum">Impressum</a> · <a href="/datenschutz">Datenschutz</a></span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
</html>
|