Files
ToolCTRL-website/public/index.html
T

552 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&nbsp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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-bar">
<div class="footer-brand">
<img src="/assets/logo-white.svg" alt="ToolCTRL" class="footer-logo" />
<p>© <span id="year">2026</span> ToolCTRL · Bruchsal</p>
</div>
<div class="footer-links">
<a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a>
<i></i>
<a href="https://www.linkedin.com/company/toolctrl/" target="_blank" rel="noopener">LinkedIn</a>
<i></i>
<a href="/impressum">Impressum</a>
·
<a href="/datenschutz">Datenschutz</a>
</div>
</div>
</footer>
<script src="/script.js"></script>
</body>
</html>