Files
ToolCTRLandClaude Opus 4.8 41664c3d0d
Deploy / build-and-deploy (push) Successful in 22s
SEO: Meta-Description auf neue Copy (Bedienung & Gestaltung)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-13 15:42:27 +02:00

513 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ToolCTRL: Moderne All-in-One-Software für eure Branche</title>
<meta name="description" content="Software mit echtem Fokus auf Bedienung und Gestaltung, die gut funktioniert, klar aussieht und sich schnell bedienen lässt." />
<link rel="canonical" href="https://tool-ctrl.de/" />
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="ToolCTRL" />
<meta property="og:locale" content="de_DE" />
<meta property="og:url" content="https://tool-ctrl.de/" />
<meta property="og:title" content="ToolCTRL: Moderne All-in-One-Software für eure Branche" />
<meta property="og:description" content="Software mit echtem Fokus auf Bedienung und Gestaltung, die gut funktioniert, klar aussieht und sich schnell bedienen lässt." />
<meta property="og:image" content="https://tool-ctrl.de/assets/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="ToolCTRL Logo mit Tagline: Die Software, die eure Branche längst verdient hat." />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ToolCTRL: Moderne All-in-One-Software für eure Branche" />
<meta name="twitter:description" content="Software mit echtem Fokus auf Bedienung und Gestaltung, die gut funktioniert, klar aussieht und sich schnell bedienen lässt." />
<meta name="twitter:image" content="https://tool-ctrl.de/assets/og-image.png" />
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "ToolCTRL",
"url": "https://tool-ctrl.de",
"logo": "https://tool-ctrl.de/assets/logo-a.png",
"description": "Software mit echtem Fokus auf Bedienung und Gestaltung, die gut funktioniert, klar aussieht und sich schnell bedienen lässt.",
"sameAs": ["https://www.linkedin.com/company/toolctrl/"]
}
</script>
<link rel="icon" type="image/png" href="/assets/favicon.png?v=20260610" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="/styles.css?v=20260610" />
</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="/">Start</a>
<a href="/techday.html">TechDay</a>
<a href="/gamejam.html">GameJam</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="/">Start</a>
<a href="/techday.html">TechDay</a>
<a href="/gamejam.html">GameJam</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">Kontakt aufnehmen</a>
</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 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>
<g 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>
<!-- TEST: echtes Logo (Emblem) in der Mitte -->
<image href="/assets/emblem-black.svg" x="190" y="128"
width="160" height="152" />
<g 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>
<!-- ============ 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 manuelle Schritte an alleinstehenden Tabellen
und veralteten Insellösungen zu viel Zeit und Nerven kosten. Daraus
bauen wir moderne und tragfähige Infrastrukturen aus Prozessen,
Automatisierung und Schnittstellen, zugeschnitten auf Ihren
Betrieb und Ihren Ablauf, nicht angepasst.
</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>ToolCTRL wandelt repetitive Prozesse in eine komplett
automatische Hands-Off-Erfahrung, während Sie sich um die
wichtigeren Aufgaben im Betrieb kümmern.</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>Wir bauen Software, die Ihrem Betrieb so gut sitzt wie ein
maßgeschneiderter Anzug.</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>Alle Datenpunkte integriert und aufbereitet. Ihre ganz eigene
Kommandozentrale.</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 arbeiten zusammen, statt aneinander vorbei.
Was in einem System passiert, ist im nächsten sofort da.</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>Tools, die ganze Teams durch ihre Arbeitstage tragen. Keine
zerstückelten Teillösungen und Tabellenblätter mehr.</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,
Erweiterungen und Updates aus einer Hand. Unsere Software
wächst mit Ihrem Betrieb.</p>
</article>
</div>
</div>
</section>
<!-- ============ VORGEHEN ============ -->
<section class="section section-alt" id="vorgehen">
<div class="wrap">
<div class="section-head">
<span class="eyebrow">Konzept</span>
<h2 class="section-title">Das ToolCTRL Konzept.</h2>
<p class="section-intro">
Ihr Anliegen wird in vier klare Schritte unterteilt: von der
Situationsanalyse über die ersten Grundkonzepte in die konkrete
Umsetzung und den Betrieb. Unser Team ist an jeder Stelle für
Sie da, um bestmögliche Ergebnisse zu liefern und
sicherzustellen.
</p>
</div>
<ol class="steps">
<li class="step">
<span class="step-num">01</span>
<h3>Situationsanalyse</h3>
<p>Unser Team geht mit Ihnen alle Prozesse und Abläufe in Ihrem
Betrieb durch, um klarzustellen, wo Zeit, Effizienz und damit
auch Geld verloren gehen.</p>
</li>
<li class="step">
<span class="step-num">02</span>
<h3>Grundkonzepte</h3>
<p>Aus der Situationsanalyse erstellen wir zusammen ein
Lastenheft. Daraus bauen wir Ihnen erste Lösungskonzepte, die
wir iterativ auf Basis Ihres Feedbacks anpassen, bis wir zu
Ihrem gewünschten Endergebnis kommen.</p>
</li>
<li class="step">
<span class="step-num">03</span>
<h3>Umsetzung</h3>
<p>Nach Vereinbarung des Lösungswegs bekommen Sie früh Ihre
erste funktionierende Version mit allen Grundfunktionen.
Iterativ wird Ihre Software verbessert und zum gewünschten
Endergebnis geformt.</p>
</li>
<li class="step">
<span class="step-num">04</span>
<h3>Betrieb &amp; Wartung</h3>
<p>Übergabe, Einweisungen, Updates und Wartung, damit Ihre
Software langfristig tragfähig bleibt.</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>
<!-- ============ STANDORT / EU-HOSTING ============ -->
<section class="section section-alt" id="standort">
<div class="wrap">
<div class="section-head standort-head">
<span class="eyebrow">Standort</span>
<h2 class="section-title">Ihre Daten gehören nicht nach Virginia.</h2>
<p class="section-intro">
Die meisten Software-Anbieter, mit denen deutsche Unternehmen täglich
arbeiten, sind US-Konzerne. Heißt: Ihre Daten unterliegen US-Recht,
unabhängig davon, was im Vertrag steht oder wo der Server tatsächlich
läuft.
</p>
<p class="standort-claim">
Wir entwickeln in Deutschland, hosten in Deutschland und haften in
Deutschland.
</p>
</div>
<ol class="steps steps-3">
<li class="step">
<span class="step-num">01</span>
<h3>In Deutschland gehostet</h3>
<p>Unsere Server stehen in deutschen Rechenzentren. Keine versteckte
Subunternehmer-Kette, die im US-Cloud-Stack endet.</p>
</li>
<li class="step">
<span class="step-num">02</span>
<h3>Dem deutschen Recht unterstellt</h3>
<p>Verträge nach BGB, Datenschutz nach DSGVO, ohne Hintertür. Der
CLOUD Act hat hier nichts verloren.</p>
</li>
<li class="step">
<span class="step-num">03</span>
<h3>Von Menschen erreichbar</h3>
<p>Kein Support-Ticket im Niemandsland. Wenn etwas brennt, sprechen
Sie mit den Leuten, die Ihre Software gebaut haben.</p>
</li>
</ol>
</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.png" 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.html">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.html">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">
Interesse? Fragen? Lassen Sie uns darüber reden. Füllen Sie das
Formular aus, wir melden uns in Kürze bei Ihnen.
</p>
<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-grid">
<div class="form-row">
<label for="f-vorname">Vorname <span>*</span></label>
<input id="f-vorname" name="vorname" type="text" autocomplete="given-name" required />
</div>
<div class="form-row">
<label for="f-nachname">Nachname <span>*</span></label>
<input id="f-nachname" name="nachname" type="text" autocomplete="family-name" required />
</div>
</div>
<div class="form-grid">
<div class="form-row">
<label for="f-firmenname">Firmenname</label>
<input id="f-firmenname" name="firmenname" type="text" autocomplete="organization" />
</div>
<div class="form-row">
<label for="f-branche">Branche</label>
<input id="f-branche" name="branche" type="text" />
</div>
</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">Telefonnummer</label>
<input id="f-telefon" name="telefon" type="tel" autocomplete="tel" />
</div>
</div>
<div class="form-row">
<label for="f-nachricht">Worum geht es Ihnen? <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.html">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>Die Software, die eure Branche längst verdient hat.</p>
</div>
<div class="footer-cols">
<div class="footer-col">
<span class="footer-h">Navigation</span>
<a href="#leistungen">Leistungen</a>
<a href="#vorgehen">Vorgehen</a>
<a href="#arbeit">Organisation</a>
<a href="/techday.html">TechDay</a>
<a href="/gamejam.html">GameJam</a>
<a href="#kontakt">Kontakt</a>
</div>
<div class="footer-col">
<span class="footer-h">Kontakt</span>
<a href="tel:+4915237750939">+49 1523 7750939</a>
<a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a>
<a href="https://tool-ctrl.de">tool-ctrl.de</a>
<a href="https://www.linkedin.com/company/toolctrl/" target="_blank" rel="noopener">LinkedIn</a>
</div>
</div>
</div>
<div class="wrap footer-base">
<span>© <span id="year">2026</span> ToolCTRL</span>
<span><a href="/impressum.html">Impressum</a> · <a href="/datenschutz.html">Datenschutz</a></span>
</div>
</footer>
<script src="/script.js?v=20260610"></script>
</body>
</html>