ToolCTRL-website/public/techday.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TechDay Bruchsal 2026: ToolCTRL</title>
<meta name="description" content="ToolCTRL beim Bruchsaler TechDay 2026: Vortrag, AI GameJam und die mITapp. Am 27. Mai 2026 im HubWerk01 Bruchsal." />
<link rel="canonical" href="https://tool-ctrl.de/techday.html" />

<!-- 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/techday.html" />
<meta property="og:title" content="TechDay Bruchsal 2026: ToolCTRL" />
<meta property="og:description" content="ToolCTRL beim Bruchsaler TechDay 2026: Vortrag, AI GameJam und die mITapp. Am 27. Mai 2026 im HubWerk01 Bruchsal." />
<meta property="og:image" content="https://tool-ctrl.de/assets/techday-event.png" />
<meta property="og:image:width" content="683" />
<meta property="og:image:height" content="384" />
<meta property="og:image:alt" content="TechDay Bruchsal 2026 Eventmotiv" />
<meta name="twitter:card" content="summary_large_image" />

<!-- Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "TechDay Bruchsal 2026",
  "startDate": "2026-05-27",
  "eventStatus": "https://schema.org/EventScheduled",
  "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
  "location": {
    "@type": "Place",
    "name": "HubWerk01",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Bruchsal",
      "addressCountry": "DE"
    }
  },
  "image": "https://tool-ctrl.de/assets/techday-event.png",
  "description": "ToolCTRL beim Bruchsaler TechDay 2026: Vortrag, AI GameJam und die mITapp. Am 27. Mai 2026 im HubWerk01 Bruchsal.",
  "organizer": {
    "@type": "Organization",
    "name": "ToolCTRL",
    "url": "https://tool-ctrl.de"
  }
}
</script>
<link rel="icon" type="image/png" href="/assets/favicon.png?v=20260610" />
<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="/" 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="td-hero">
  <div class="wrap">
    <span class="eyebrow">Bruchsaler TechDay · 27. Mai 2026</span>
    <h1 class="td-title">ToolCTRL beim TechDay Bruchsal 2026.</h1>
    <p class="td-lead">
      Der Bruchsaler TechDay ist die erste Tech-Konferenz der Stadt: ein Tag
      voller Talks, Workshops und Austausch im HubWerk01. Als aktiver Teil des
      mITup&nbsp;e.&nbsp;V. sind wir mittendrin: mit einem Vortrag, der AI GameJam
      und der App, die das Event zusammenhält.
    </p>
    <div class="hero-actions">
      <a class="btn btn-solid" href="https://techday-bruchsal-2026.eventbrite.de"
         target="_blank" rel="noopener">Tickets sichern</a>
      <a class="btn btn-ghost" href="https://mitapp.mitup.de/event/techday-bruchsal-2026"
         target="_blank" rel="noopener">Programm ansehen</a>
    </div>
  </div>
</section>

<!-- ============ DER TECHDAY ============ -->
<section class="section">
  <div class="wrap">
    <div class="td-feature">
      <div class="td-feature-text">
        <span class="eyebrow">Der TechDay</span>
        <h2 class="section-title">Ein Tag für Bruchsals Tech-Szene.</h2>
        <p class="section-intro">
          Der TechDay Bruchsal 2026 will die Stadt als regionalen Knotenpunkt
          für Technologie und Vernetzung etablieren. Auf dem Programm stehen
          Vorträge, Workshops und Formate zum Mitmachen. Veranstaltet vom
          gemeinnützigen mITup&nbsp;e.&nbsp;V., dessen Vereinsarbeit wir als
          ToolCTRL aktiv mittragen. Wir bringen uns an gleich drei Stellen ein:
          mit einem eigenen Vortrag, mit der AI GameJam als Rahmenprogramm und
          mit der mITapp als digitalem Zuhause des Events.
        </p>
      </div>
      <img class="td-feature-img" src="/assets/techday-event.png"
           alt="TechDay Bruchsal 2026: Human in the Loop" />
    </div>
  </div>
</section>

<!-- ============ UNSER VORTRAG ============ -->
<section class="section section-alt" id="vortrag">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">Vortrag</span>
      <h2 class="section-title">Unser Beitrag zum Programm.</h2>
    </div>

    <div class="td-split">
      <div class="td-talk">
        <div class="td-talk-kicker">Vortrag von ToolCTRL</div>
        <h3 class="td-talk-title">Ein Designer, mehrere Produkte</h3>
        <p class="td-talk-sub">
          Wie wir große Software mit kleinem Team bauen. Was funktioniert,
          was Müll ist, und wie man heute wirklich shippt.
        </p>
        <div class="td-talk-body">
          <p>
            Wie baut man eine UI-Infrastruktur, die mehrere Produkte trägt und
            nicht nach zwei Jahren auseinanderfällt? Was unterscheidet ein
            wirklich skalierbares Designsystem, das in der Codebase lebt, von
            einer Komponenten-Sammlung, die nur danach aussieht?
          </p>
          <p>
            An einem konkreten Beispiel zeigt David, was wir gebaut haben und
            welche Inspirationen, Referenzen und Entscheidungen das Fundament
            gelegt haben. Dazu: wo die Fehler lauern, die später teuer werden,
            und ehrliche Worte zum aktuellen Tool-Stack. Was wirklich hilft und
            was nur lautes Marketing ist, gerade im KI-Bereich.
          </p>
          <p>
            Für alle, die selbst Software in den Markt bringen, als Developer
            weniger Reibung mit Design wollen oder als Designer enger am Code
            arbeiten möchten.
          </p>
        </div>
      </div>

      <aside class="speaker-card">
        <div class="sp-label">Speaker</div>
        <div class="sp-head">
          <img class="sp-photo" src="/assets/speaker-david.jpg" alt="David Bertram" width="320" height="320" loading="lazy" decoding="async" />
          <div>
            <div class="sp-name">David Bertram</div>
            <div class="sp-role">Co-Founder &amp; Head of Product, ToolCTRL</div>
          </div>
        </div>
        <p class="sp-bio">
          Seit knapp zehn Jahren in Design und Marketing aktiv. Sein Ziel mit
          ToolCTRL: Software, die einfacher, intuitiver und angenehmer zu
          benutzen ist, gerade für Mitarbeitende ohne technischen Hintergrund.
          Gute UI und UX sollen kein teurer Sonderfall sein, sondern Standard.
        </p>
      </aside>
    </div>
  </div>
</section>

<!-- ============ MITAPP ============ -->
<section class="section" id="mitapp">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">mITapp</span>
      <h2 class="section-title">Die App, die das Event zusammenhält.</h2>
      <p class="section-intro">
        Damit der TechDay rund läuft, haben wir die mITapp gebaut: die
        Community-Plattform für das Event und die Meetups dahinter.
        Teilnehmende finden Programm und Referenten an einem Ort, vernetzen
        sich vor Ort per QR-Code und sammeln dabei Punkte, Level und Badges.
      </p>
    </div>

    <div class="mitapp-shots">
      <figure class="shot">
        <img src="/assets/mitapp-dashboard.webp" alt="mITapp Dashboard-Ansicht" width="1100" height="825" loading="lazy" decoding="async" />
        <figcaption>Dashboard</figcaption>
      </figure>
      <figure class="shot">
        <img src="/assets/mitapp-roadmap.webp" alt="mITapp Event-Roadmap" width="1100" height="825" loading="lazy" decoding="async" />
        <figcaption>Event-Roadmap</figcaption>
      </figure>
      <figure class="shot">
        <img src="/assets/mitapp-qr.webp" alt="mITapp Networking per QR-Code" width="1100" height="825" loading="lazy" decoding="async" />
        <figcaption>Networking per QR-Code</figcaption>
      </figure>
    </div>

    <div class="hero-actions" style="margin-top:32px;">
      <a class="btn btn-solid" href="https://mitapp.mitup.de"
         target="_blank" rel="noopener">mITapp öffnen</a>
      <a class="btn btn-ghost" href="https://mitapp.mitup.de/event/techday-bruchsal-2026"
         target="_blank" rel="noopener">Programm zum TechDay</a>
    </div>
  </div>
</section>

<!-- ============ GAMEJAM ============ -->
<section class="section section-alt" id="gamejam">
  <div class="wrap">
    <div class="td-feature">
      <div class="td-feature-text">
        <span class="eyebrow">Rahmenprogramm</span>
        <h2 class="section-title">AI GameJam: Human in the Loop.</h2>
        <p class="section-intro">
          Teil des TechDay ist unsere AI GameJam: in zwei Stunden ein Spiel
          bauen, der Mensch steuert die KI. Mit Live-Countdown, Ablaufplan und
          Upload für die fertigen Spiele. Die GameJam hat ihre eigene Seite.
        </p>
        <div class="hero-actions" style="margin-top:28px;">
          <a class="btn btn-solid" href="/gamejam.html">Zur GameJam-Seite</a>
        </div>
      </div>
      <div class="gj-teaser" aria-hidden="true">
        <div class="gj-bg"></div>
        <div class="gj-kicker">AI GameJam // TechDay Bruchsal 2026</div>
        <div class="gj-title">Human in<br />the Loop</div>
        <p class="gj-sub">Ein Spiel bauen mit KI in zwei Stunden. <b>Der Mensch steuert.</b></p>
      </div>
    </div>
  </div>
</section>

<!-- ============ EVENT-INFOS ============ -->
<section class="section section-dark" id="infos">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow eyebrow-light">Auf einen Blick</span>
      <h2 class="section-title">Event-Infos.</h2>
    </div>
    <dl class="contact-list">
      <div>
        <dt>Datum</dt>
        <dd>27. Mai 2026</dd>
      </div>
      <div>
        <dt>Ort</dt>
        <dd>HubWerk01, Werner-von-Siemens-Str. 2–6, 76646 Bruchsal</dd>
      </div>
      <div>
        <dt>Veranstalter</dt>
        <dd>mITup e.&nbsp;V.</dd>
      </div>
      <div>
        <dt>Tickets</dt>
        <dd><a href="https://techday-bruchsal-2026.eventbrite.de" target="_blank" rel="noopener">techday-bruchsal-2026.eventbrite.de</a></dd>
      </div>
      <div>
        <dt>Programm</dt>
        <dd><a href="https://mitapp.mitup.de/event/techday-bruchsal-2026" target="_blank" rel="noopener">in der mITapp</a></dd>
      </div>
    </dl>
  </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>