Files
ToolCTRL-website/public/index.html
T

601 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ToolCTRL — EU-first Software für souveräne Betriebe</title>
<meta name="description" content="ToolCTRL baut schnelle, bezahlbare SaaS-Systeme für Mittelständler: EU-first gedacht, DSGVO-konform und ohne unnötige US-Cloud-Pflicht." />
<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 — EU-first Software für souveräne Betriebe" />
<meta property="og:description" content="Schnelle SaaS-Systeme für Mittelständler, die keine US-Cloud-Pflicht und keine aufgeblasenen Agenturprojekte wollen." />
<meta property="og:url" content="https://tool-ctrl.de/" />
<meta property="og:image" content="https://tool-ctrl.de/assets/logo-a.webp" />
<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="preload" href="/assets/fonts/space-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="/styles.css?v=20260564" />
<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/wordmark-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="/techday">TechDay</a>
<a href="/gamejam">GameJam</a>
<a class="btn btn-solid btn-sm" href="#kontakt">Ablauf prüfen</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="/techday">TechDay</a>
<a href="/gamejam">GameJam</a>
<a class="btn btn-solid" href="#kontakt">Ablauf prüfen</a>
</div>
</header>
<main>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<h1 class="hero-title">
<span class="no-break">EU-first</span> Software für souveräne Betriebe.
</h1>
<p class="hero-lead">
Keine US-Cloud-Pflicht. Kein Agentur-Bullshit. ToolCTRL baut
individuelle SaaS-Systeme für Mittelständler, bei denen Anfragen,
Termine, Daten und Freigaben nicht länger in Tabellen, Postfächern
und halbfertigen Tools hängen bleiben.
</p>
<div class="hero-actions">
<a class="btn btn-solid" href="#kontakt">Ablauf prüfen lassen</a>
<a class="btn btn-ghost" href="#leistungen">Leistungen ansehen</a>
</div>
<div class="trust-strip" aria-label="ToolCTRL Vertrauenssignale">
<span>Made in Germany</span>
<span>DSGVO-konform</span>
<span>Keine US-Cloud</span>
</div>
</div>
<div class="hero-visual" aria-label="Interaktive Workflow-Control-Grafik">
<div class="visual-frame">
<div class="visual-label" aria-hidden="true">
<span class="window-dots"><i></i><i></i><i></i></span>
</div>
<div class="control-board" data-control-board>
<svg class="control-lines" viewBox="0 0 540 400" preserveAspectRatio="none" aria-hidden="true">
<path data-line="inbox"></path>
<path data-line="docs"></path>
<path data-line="chat"></path>
<path data-line="crm"></path>
<path data-line="team"></path>
<path data-line="report"></path>
</svg>
<div class="logo-node" data-logo-node>
<img src="/assets/emblem-black.svg" alt="" draggable="false" />
</div>
<button class="flow-node is-input" type="button" data-node="inbox" style="--x: 6%; --y: 18%; --r: -2deg;">Anfrage</button>
<button class="flow-node is-input" type="button" data-node="docs" style="--x: 7%; --y: 56%; --r: 1deg;">Dokumente</button>
<button class="flow-node is-input" type="button" data-node="chat" style="--x: 18%; --y: 78%; --r: -1deg;">Chat</button>
<button class="flow-node is-output" type="button" data-node="crm" style="--x: 72%; --y: 16%; --r: 2deg;">CRM</button>
<button class="flow-node is-output" type="button" data-node="team" style="--x: 76%; --y: 56%; --r: -1deg;">Team</button>
<button class="flow-node is-output" type="button" data-node="report" style="--x: 63%; --y: 78%; --r: 1.5deg;">Report</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ KAMPF / WERTE ============ -->
<section class="section stance-section" id="kampf">
<div class="wrap">
<div class="section-head stance-head">
<span class="eyebrow eyebrow-light">Wofür wir kämpfen</span>
<h2 class="section-title">Keine Konzernleine. Keine Folienfabrik.</h2>
<p class="section-intro">
Wir bauen für Mittelständler, die Kontrolle über Daten, Kosten und
Abläufe zurückholen wollen. EU-first, pragmatisch und allergisch gegen
digitale Showprojekte.
</p>
</div>
<div class="stance-grid">
<article class="stance-card">
<span>01</span>
<h3>Digitale Souveränität</h3>
<p>
Keine automatische US-Cloud, kein blinder Plattformgehorsam. Wenn ein
System sinnvoll europäisch laufen kann, wird es so geplant.
</p>
</article>
<article class="stance-card stance-card-dark">
<span>02</span>
<h3>Agenturapparat aus</h3>
<p>
Keine Workshop-Show, keine Tagessatzmaschine, keine sechsstelligen
Projekte, die nach Monaten immer noch vor allem gut aussehen.
</p>
</article>
<article class="stance-card">
<span>03</span>
<h3>Ablauf vor Ego</h3>
<p>
Wir bauen keine Tools für Pitchdecks. Wir bauen Systeme, die im
Alltag führen, Zuständigkeiten klären und Arbeit sichtbar machen.
</p>
</article>
</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 Login. Ein Arbeitsfluss, der führt.</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> Auftrag #1842 · Live</span>
</div>
<div class="ui-layout">
<aside class="ui-sidebar">
<button class="ui-nav active" type="button" data-product-tab="eingang">Eingang</button>
<button class="ui-nav" type="button" data-product-tab="angebote">Angebote</button>
<button class="ui-nav" type="button" data-product-tab="planung">Planung</button>
<button class="ui-nav" type="button" data-product-tab="abschluss">Abschluss</button>
</aside>
<div class="ui-main">
<div class="ui-main-head">
<div>
<span class="ui-kicker" data-product-kicker>Heute · 14 aktive Vorgänge</span>
<strong data-product-title>Workflow Control</strong>
</div>
<span class="ui-pill" data-product-pill>3 Blocker</span>
</div>
<div class="ui-flow" data-product-flow>
<span class="done">Anfrage</span>
<span class="active">Prüfung</span>
<span>Angebot</span>
<span>Termin</span>
<span>Rechnung</span>
</div>
<div class="ui-metrics" data-product-metrics>
<div><span>Antwortzeit</span><strong>18 min</strong></div>
<div><span>Auto-Schritte</span><strong>74%</strong></div>
<div><span>Offene Übergaben</span><strong>03</strong></div>
</div>
<div class="ui-table" data-product-table>
<div class="ui-row is-hot"><span>Kunde wartet auf Rückmeldung</span><b>Jetzt</b></div>
<div class="ui-row"><span>Dokumente aus Postfach übernommen</span><b>Auto</b></div>
<div class="ui-row"><span>Team-Zuständigkeit gesetzt</span><b>11:15</b></div>
<div class="ui-row is-done"><span>Status an Leitung gemeldet</span><b>Erledigt</b></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ VORSPRUNG ============ -->
<section class="section velocity-section" id="vorsprung">
<div class="wrap velocity-grid">
<div class="velocity-copy">
<span class="eyebrow">Unser Vorsprung</span>
<h2 class="section-title">Schneller SaaS bauen. Ohne Baukasten-Vibe.</h2>
<p class="section-intro">
Wir starten nicht mit leerem Repository und endlosen Abstimmungen. Unsere
eigene technische Grundlage deckt Rollen, Datenmodelle, Workflows,
Dashboards, Schnittstellen und Betrieb ab. Dadurch wird Individualsoftware
schneller, ohne nach Standardtool zu riechen.
</p>
</div>
<div class="velocity-stack" aria-label="Warum ToolCTRL schneller liefert">
<article class="velocity-item">
<span>01</span>
<h3>Eigene SaaS-Basis</h3>
<p>Bewährte Infrastruktur statt leerem Repository. Das spart Zeit,
Kosten und Projektchaos.</p>
</article>
<article class="velocity-item">
<span>02</span>
<h3>Früh in den Betrieb</h3>
<p>Wir bauen schnell eine echte Version, testen sie am Ablauf und
verbessern dort, wo Arbeit wirklich passiert.</p>
</article>
<article class="velocity-item">
<span>03</span>
<h3>Budget ins Produkt</h3>
<p>Weniger Reibung, weniger Meeting-Schleifen, weniger Neuentwicklung.
Das Budget landet im System.</p>
</article>
<article class="velocity-item">
<span>04</span>
<h3>Individuell im Ergebnis</h3>
<p>Die Oberfläche und Logik werden auf Ihren Betrieb zugeschnitten.
Die Geschwindigkeit kommt aus unserer Technik.</p>
</article>
</div>
</div>
</section>
<!-- ============ LEISTUNGEN ============ -->
<section class="section services-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>Automation</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; Ausbau</h3>
<p>Nach dem Launch ist nicht Schluss: Wartung, Anpassung und
Ausbau aus einer Hand.</p>
</article>
</div>
</div>
</section>
<!-- ============ BRANCHEN ============ -->
<section class="section industry-section" id="branchen">
<div class="wrap">
<div class="section-head">
<span class="eyebrow">Branchen</span>
<h2 class="section-title">Nicht die Branche ist speziell. Der Ablauf ist es.</h2>
<p class="section-intro">
ToolCTRL ist interessant, wenn Ihr Ablauf speziell genug ist, dass
Baukastenlösungen ständig Workarounds erzwingen und niemand mehr
genau weiß, wo der aktuelle Stand liegt.
</p>
</div>
<div class="industry-map" aria-label="Typische Abläufe">
<div class="industry-row">
<span>01</span>
<strong>Handwerk &amp; Service</strong>
<p>Anfrage, Angebot, Termin, mobile Rückmeldung und Abschluss in einem kontrollierten Ablauf.</p>
<small>Anfrage → Angebot → Termin → Abschluss</small>
</div>
<div class="industry-row">
<span>02</span>
<strong>Events</strong>
<p>Anmeldung, Check-in und Kommunikation laufen sichtbar zusammen.</p>
<small>Ticket → Check-in → Info → Auswertung</small>
</div>
<div class="industry-row">
<span>03</span>
<strong>Vereine &amp; Verbände</strong>
<p>Mitglieder, Rollen, Beiträge und Projekte werden verwaltbar, auch wenn vieles nebenbei passiert.</p>
<small>Mitglied → Rolle → Beitrag → Projekt</small>
</div>
<div class="industry-row">
<span>04</span>
<strong>Lokale Services</strong>
<p>Leads, Termine und Angebote bleiben im Blick.</p>
<small>Lead → Beratung → Auftrag → Bindung</small>
</div>
</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 event-head">
<span class="eyebrow">Events</span>
<h2 class="section-title">Lieber ausprobieren als schönreden.</h2>
<p class="section-intro">
TechDay und GameJam zeigen unsere Arbeit dort, wo echte Leute sie
anfassen: lokal, direkt und mit Ergebnissen, über die man reden kann.
</p>
</div>
<div class="event-grid">
<article class="event-card event-card-media">
<div class="event-poster">
<img src="/assets/techday-event.webp" alt="TechDay Bruchsal 2026 Motiv" width="683" height="384" loading="lazy" decoding="async" />
</div>
<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">Lassen Sie uns Ihren Ablauf prüfen.</h2>
<p class="section-intro">
Schicken Sie uns kurz, wo Arbeit aktuell hängen bleibt. Wir melden uns
mit einer ehrlichen Einschätzung, ob ein eigenes System sinnvoll ist.
</p>
<ul class="contact-promises">
<li>Antwort in der Regel innerhalb eines Werktags</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/wordmark-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?v=20260554"></script>
</body>
</html>