ToolCTRL-website/public/index.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ToolCTRL — from vision to version</title>
<meta name="description" content="ToolCTRL entwickelt Automatisierungen, interne Tools und individuelle Software — schnell umgesetzt, zuverlässig im Betrieb." />
<link rel="icon" type="image/png" href="/assets/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="/styles.css" />
</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="#vorgehen">Vorgehen</a>
      <a href="#arbeit">Organisation</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="#vorgehen">Vorgehen</a>
    <a href="#arbeit">Organisation</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">
        Software und Automatisierung,<br />
        die einfach&nbsp;läuft.
      </h1>
      <p class="hero-lead">
        ToolCTRL plant, baut und betreibt individuelle Software — von der
        Prozessautomatisierung über interne Tools bis zur Integration
        bestehender Systeme. Schnell umgesetzt, sauber konstruiert,
        zuverlässig im&nbsp;Betrieb.
      </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>

    <!-- 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>

          <!-- zentraler CTRL-Keycap -->
          <rect x="200" y="166" width="140" height="102" rx="14" fill="#000000" />
          <rect x="200" y="152" width="140" height="102" rx="14"
                fill="url(#capface)" stroke="#000000" stroke-width="1.6" />
          <rect x="209" y="159" width="122" height="3" rx="1.5"
                fill="#FFFFFF" opacity="0.12" />
          <path d="M311 175 l8 -9 l8 9" fill="none" stroke="#727272"
                stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
          <text x="270" y="218" text-anchor="middle" class="cap-legend">ctrl</text>
          <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 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>

<!-- ============ VORGEHEN ============ -->
<section class="section section-alt" 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>

<!-- ============ 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>
      <dl class="contact-list">
        <div>
          <dt>E-Mail</dt>
          <dd><a href="mailto:admin@tool-ctrl.de">admin@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.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>from vision to version.</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="#kontakt">Kontakt</a>
      </div>
      <div class="footer-col">
        <span class="footer-h">Kontakt</span>
        <a href="mailto:admin@tool-ctrl.de">admin@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"></script>
</body>
</html>