Deepen homepage visual system

This commit is contained in:
Raffael Sheikh committed 2026-05-24 00:58:46 +02:00
1 parent 14b51dcd67
commit bb7393653e
7 files changed
+450 -169

No files matched your search

+2 -1
View File
@@ -6,8 +6,9 @@
<title>Datenschutzerklärung — ToolCTRL</title>
<meta name="description" content="Datenschutzerklärung von ToolCTRL — Informationen zur Verarbeitung personenbezogener Daten auf dieser Website." />
<meta name="robots" content="noindex" />
<link rel="canonical" href="https://tool-ctrl.de/datenschutz" />
<link rel="icon" type="image/png" href="/assets/favicon.png" />
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/styles.css?v=20260525" />
</head>
<body>
+11
View File
@@ -4,6 +4,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI GameJam — Human in the Loop · TechDay Bruchsal 2026</title>
<meta name="description" content="AI GameJam beim TechDay Bruchsal 2026: In zwei Stunden mit KI ein spielbares Game bauen. Human in the Loop." />
<link rel="canonical" href="https://tool-ctrl.de/gamejam">
<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="AI GameJam — Human in the Loop">
<meta property="og:description" content="Zwei Stunden, KI, ein spielbares Ergebnis: die AI GameJam beim TechDay Bruchsal 2026.">
<meta property="og:url" content="https://tool-ctrl.de/gamejam">
<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="#0c0c0e">
<link rel="icon" type="image/png" href="/assets/favicon.png">
<style>
@font-face {
+2 -1
View File
@@ -6,8 +6,9 @@
<title>Impressum — ToolCTRL</title>
<meta name="description" content="Impressum und Anbieterkennzeichnung von ToolCTRL." />
<meta name="robots" content="noindex" />
<link rel="canonical" href="https://tool-ctrl.de/impressum" />
<link rel="icon" type="image/png" href="/assets/favicon.png" />
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/styles.css?v=20260525" />
</head>
<body>
+91 -44
View File
@@ -3,20 +3,20 @@
<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." />
<title>ToolCTRL — Software gegen Excel, WhatsApp-Chaos und Insellösungen</title>
<meta name="description" content="ToolCTRL baut interne Software, Automatisierung und All-in-One-Systeme für Teams, deren Abläufe nicht in Standardtools passen." />
<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:title" content="ToolCTRL — Software gegen Tool-Chaos" />
<meta property="og:description" content="Wir ersetzen Excel, WhatsApp-Chaos und Insellösungen durch Software, die Teams 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" />
<link rel="stylesheet" href="/styles.css?v=20260525" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
@@ -51,7 +51,7 @@
<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>
<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>
@@ -64,34 +64,42 @@
<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>
<a class="btn btn-solid" href="#kontakt">Ablauf prüfen</a>
</div>
</header>
<main>
<!-- ============ SIGNAL BAR ============ -->
<section class="signal-bar" aria-label="ToolCTRL Fokus">
<div class="wrap signal-inner">
<strong>ToolCTRL baut Betriebssysteme für gewachsene Abläufe.</strong>
<span>Keine Baukastenlösung. Kein Tool-Stapel. Ein System, das Arbeit weiterbringt.</span>
<a href="#kontakt">Ablauf prüfen lassen</a>
</div>
</section>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="hero-kicker">Interne Software · Automatisierung · Betrieb</span>
<h1 class="hero-title">
Moderne, durchdachte All-in-One-Software für Branchen, die zu
lange übersehen&nbsp;wurden.
Wir ersetzen Excel, WhatsApp-Chaos und Insellösungen durch ein System.
</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.
ToolCTRL baut Software für Teams, deren echte Abläufe zu speziell für
Standardtools sind: klare Oberflächen, automatische Übergaben,
belastbare Daten und ein Betrieb, der nicht nach dem Launch endet.
</p>
<div class="hero-actions">
<a class="btn btn-solid" href="#kontakt">Projekt besprechen</a>
<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>Eigene Server</span>
<span>DSGVO-orientiert</span>
<span>Direkter Ansprechpartner</span>
<span>Keine Baukastenlösung</span>
<span>Made in Bruchsal</span>
</div>
</div>
@@ -174,12 +182,45 @@
</div>
</section>
<!-- ============ SYSTEM PROGRESS ============ -->
<section class="mission-rail" aria-label="Von Tool-Chaos zu Betriebssystem">
<div class="wrap">
<div class="mission-head">
<span>Live System Progress</span>
<strong>Vom Flickwerk zum steuerbaren Ablauf</strong>
</div>
<div class="mission-track">
<div class="mission-line"></div>
<div class="mission-step is-done">
<span></span>
<b>Chaos sichtbar</b>
<em>Tabellen, Chats, Rückfragen</em>
</div>
<div class="mission-step is-active">
<span></span>
<b>Ablauf modelliert</b>
<em>Status, Rollen, Daten</em>
</div>
<div class="mission-step">
<span></span>
<b>System gebaut</b>
<em>Oberfläche, Logik, Schnittstellen</em>
</div>
<div class="mission-step">
<span></span>
<b>Betrieb läuft</b>
<em>Wartung, Ausbau, Kontrolle</em>
</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>
<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
@@ -204,33 +245,40 @@
<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>
<span class="ui-status"><i></i> Auftrag #1842 · Live</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>
<span class="ui-nav active">Eingang</span>
<span class="ui-nav">Angebote</span>
<span class="ui-nav">Planung</span>
<span class="ui-nav">Abschluss</span>
</aside>
<div class="ui-main">
<div class="ui-main-head">
<div>
<span class="ui-kicker">Heute</span>
<strong>Operations Board</strong>
<span class="ui-kicker">Heute · 14 aktive Vorgänge</span>
<strong>Workflow Control</strong>
</div>
<span class="ui-pill">12 offen</span>
<span class="ui-pill">3 Blocker</span>
</div>
<div class="ui-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">
<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><span>Auto-Schritte</span><strong>74%</strong></div>
<div><span>Offene Übergaben</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 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>
@@ -302,7 +350,8 @@
<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.
Baukastenlösungen ständig Workarounds erzwingen und niemand mehr
genau weiß, wo der aktuelle Stand liegt.
</p>
</div>
@@ -311,21 +360,25 @@
<span>01</span>
<h3>Handwerk &amp; Service</h3>
<p>Von Anfrage bis Einsatzplanung: weniger Telefonketten, klare Zuständigkeiten, mobile Rückmeldungen.</p>
<small>Anfrage → Angebot → Termin → Abschluss</small>
</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>
<small>Ticket → Check-in → Info → Auswertung</small>
</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>
<small>Mitglied → Rolle → Beitrag → Projekt</small>
</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>
<small>Lead → Beratung → Auftrag → Bindung</small>
</article>
</div>
</div>
@@ -422,9 +475,9 @@
<!-- ============ EVENTS / COMMUNITY ============ -->
<section class="section event-section" id="events">
<div class="wrap">
<div class="section-head">
<div class="section-head event-head">
<span class="eyebrow">Events</span>
<h2 class="section-title">Wir bauen nicht im stillen Kämmerlein.</h2>
<h2 class="section-title">Feldtest statt Hochglanzbehauptung.</h2>
<p class="section-intro">
TechDay und GameJam zeigen, wie wir arbeiten: nah an echten
Anwendern, lokal verankert und mit sichtbaren Ergebnissen.
@@ -433,7 +486,6 @@
<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>
@@ -442,11 +494,6 @@
</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>
@@ -463,13 +510,13 @@
<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>
<h2 class="section-title">Lassen Sie uns Ihren Ablauf prüfen.</h2>
<p class="section-intro">
Beschreiben Sie kurz, woran es hakt. Wir melden uns mit einer
ehrlichen Einschätzung. Unverbindlich und ohne Verkaufsdruck.
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 von 24 Stunden</li>
<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>
+3
View File
@@ -40,9 +40,12 @@
var reduceMotion = window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var revealEls = Array.prototype.slice.call(document.querySelectorAll([
".signal-inner > *",
".hero-copy > *",
".hero-visual",
".trust-strip span",
".mission-head",
".mission-step",
".product-copy > *",
".product-ui",
".section-head",
+320 -100
View File
@@ -58,6 +58,7 @@
--line-strong:#0A0A0A;
--paper: #FFFFFF;
--paper-2:#F6F6F4;
--signal:#FFE600;
--wrap: 1200px;
--grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}
@@ -307,6 +308,46 @@ p, li { text-wrap: pretty; }
}
.mobile-nav .btn { margin-top: 12px; }
/* ============================================================
SIGNAL BAR
============================================================ */
.signal-bar {
background: var(--black);
color: var(--paper);
border-bottom: 4px solid var(--signal);
}
.signal-inner {
min-height: 76px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
}
.signal-inner strong,
.signal-inner a {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 800;
}
.signal-inner strong {
color: var(--signal);
}
.signal-inner strong::before {
content: "+ ";
}
.signal-inner span {
color: #D6D6D6;
font-size: 15px;
font-weight: 500;
}
.signal-inner a {
color: var(--black);
background: var(--signal);
padding: 12px 16px;
box-shadow: 4px 4px 0 #000000, inset 0 1px 0 rgba(255,255,255,.35);
}
/* ============================================================
HERO
============================================================ */
@@ -315,22 +356,41 @@ p, li { text-wrap: pretty; }
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
grid-template-columns: 1.02fr .98fr;
gap: 64px;
align-items: center;
padding: 96px 32px 104px;
padding: 86px 32px 96px;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 800;
color: var(--black);
margin-bottom: 20px;
}
.hero-kicker::before {
content: "";
width: 8px;
height: 8px;
background: var(--signal);
border: 1.5px solid var(--black);
}
.hero-title {
font-size: clamp(30px, 3.6vw, 48px);
line-height: 1.12;
letter-spacing: -.02em;
font-weight: 700;
font-size: clamp(42px, 6.2vw, 82px);
line-height: .94;
letter-spacing: -.045em;
font-weight: 800;
margin: 0 0 24px;
max-width: 9.8em;
}
.hero-lead {
font-size: 17px;
font-size: 18px;
color: var(--gray-1);
max-width: 33em;
max-width: 35em;
margin-bottom: 32px;
}
.hero-actions {
@@ -346,13 +406,14 @@ p, li { text-wrap: pretty; }
}
.trust-strip span {
font-size: 11px;
letter-spacing: .08em;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
color: var(--gray-1);
border: 1px solid var(--line);
padding: 7px 10px;
font-weight: 800;
color: var(--black);
border: 1.5px solid var(--black);
padding: 8px 10px;
background: var(--paper);
box-shadow: 3px 3px 0 rgba(10,10,10,.12);
}
.hero-tag {
margin-top: 34px;
@@ -369,6 +430,7 @@ p, li { text-wrap: pretty; }
border: 1.5px solid var(--black);
background: var(--paper);
position: relative;
box-shadow: 12px 12px 0 rgba(10,10,10,.08);
}
.visual-label {
display: flex;
@@ -383,7 +445,8 @@ p, li { text-wrap: pretty; }
}
.visual-label .dot {
width: 7px; height: 7px;
background: var(--black);
background: var(--signal);
border: 1.5px solid var(--black);
border-radius: 50%;
}
.node-graph { display: block; width: 100%; height: auto; }
@@ -459,15 +522,88 @@ p, li { text-wrap: pretty; }
padding: 6px 10px;
}
/* ============================================================
SYSTEM PROGRESS
============================================================ */
.mission-rail {
background: #191919;
color: var(--paper);
border-bottom: 5px solid var(--signal);
padding: 34px 0 44px;
}
.mission-head {
display: flex;
justify-content: center;
gap: 10px;
align-items: center;
margin-bottom: 32px;
text-align: center;
}
.mission-head span,
.mission-head strong {
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 800;
}
.mission-head span { color: var(--signal); }
.mission-head span::before { content: "+ "; }
.mission-track {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.mission-line {
position: absolute;
left: 0;
right: 0;
top: 15px;
height: 2px;
background:
linear-gradient(90deg, var(--signal) 0 38%, #5B5B5B 38% 100%);
}
.mission-step {
position: relative;
padding-top: 46px;
text-align: center;
}
.mission-step span {
position: absolute;
top: 5px;
left: 50%;
width: 22px;
height: 22px;
transform: translateX(-50%);
border: 3px solid var(--signal);
border-radius: 50%;
background: #191919;
}
.mission-step.is-done span,
.mission-step.is-active span {
background: var(--signal);
box-shadow: 0 0 0 7px rgba(255,230,0,.1);
}
.mission-step b {
display: block;
font-size: 12px;
letter-spacing: .12em;
line-height: 1.25;
text-transform: uppercase;
margin-bottom: 7px;
}
.mission-step em {
display: block;
font-style: normal;
font-size: 12px;
color: #8F8F8F;
}
/* ============================================================
PRODUKTWIRKUNG
============================================================ */
.product-section {
background:
linear-gradient(90deg, rgba(10,10,10,.035) 1px, transparent 1px),
linear-gradient(rgba(10,10,10,.035) 1px, transparent 1px),
var(--paper-2);
background-size: 32px 32px;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.product-grid {
@@ -490,7 +626,8 @@ p, li { text-wrap: pretty; }
border-bottom: 1px solid var(--line);
}
.proof-points strong {
font-size: 14px;
font-size: 21px;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.proof-points span {
@@ -500,7 +637,7 @@ p, li { text-wrap: pretty; }
.product-ui {
border: 1.5px solid var(--black);
background: var(--paper);
box-shadow: 18px 18px 0 rgba(10,10,10,.08);
box-shadow: 18px 18px 0 var(--signal), 19.5px 19.5px 0 var(--black);
overflow: hidden;
}
.ui-top {
@@ -530,9 +667,10 @@ p, li { text-wrap: pretty; }
.ui-status i {
width: 7px;
height: 7px;
background: var(--black);
background: var(--signal);
border: 1px solid var(--black);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(10,10,10,.08);
box-shadow: 0 0 0 5px rgba(255,230,0,.24);
}
.ui-layout {
display: grid;
@@ -588,9 +726,39 @@ p, li { text-wrap: pretty; }
.ui-pill {
flex: none;
border: 1px solid var(--black);
background: var(--signal);
padding: 7px 10px;
font-size: 12px;
font-weight: 700;
font-weight: 800;
}
.ui-flow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin-bottom: 22px;
border: 1px solid var(--black);
}
.ui-flow span {
position: relative;
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--black);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 800;
color: var(--gray-2);
}
.ui-flow span:last-child { border-right: none; }
.ui-flow .done {
color: var(--black);
background: #EFEFEA;
}
.ui-flow .active {
color: var(--black);
background: var(--signal);
}
.ui-metrics {
display: grid;
@@ -641,8 +809,8 @@ p, li { text-wrap: pretty; }
font-weight: 700;
}
.ui-row.is-hot b {
color: var(--paper);
background: var(--black);
color: var(--black);
background: var(--signal);
padding: 5px 7px;
}
.ui-row.is-done {
@@ -657,10 +825,10 @@ section[id] { scroll-margin-top: 92px; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 620px; margin-bottom: 56px; }
.section-title {
font-size: clamp(28px, 3.2vw, 42px);
line-height: 1.12;
letter-spacing: -.02em;
font-weight: 700;
font-size: clamp(34px, 4vw, 54px);
line-height: .98;
letter-spacing: -.04em;
font-weight: 800;
margin: 18px 0 16px;
}
.section-intro {
@@ -765,6 +933,8 @@ section[id] { scroll-margin-top: 92px; }
border-left: 1px solid var(--line-strong);
}
.industry-card {
display: flex;
flex-direction: column;
background: var(--paper);
padding: 30px 24px 32px;
border-right: 1px solid var(--line-strong);
@@ -793,6 +963,18 @@ section[id] { scroll-margin-top: 92px; }
.industry-card p {
font-size: 14px;
color: var(--gray-1);
margin-bottom: 22px;
}
.industry-card small {
display: block;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 800;
color: var(--black);
}
/* ---------- Steps ---------- */
@@ -920,44 +1102,59 @@ section[id] { scroll-margin-top: 92px; }
EVENTS
============================================================ */
.event-section {
background: var(--paper-2);
border-top: 1px solid var(--line);
background: var(--black);
color: var(--paper);
border-top: 5px solid var(--signal);
padding: 64px 0;
}
.event-section .section-head {
max-width: none;
display: grid;
grid-template-columns: .76fr 1fr;
gap: 44px;
align-items: end;
margin-bottom: 32px;
}
.event-section .section-title {
color: var(--paper);
margin-bottom: 0;
}
.event-section .eyebrow {
justify-self: start;
}
.event-section .section-intro {
color: #BDBDBD;
}
.event-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
gap: 0;
border-top: 1px solid #3A3A3A;
border-left: 1px solid #3A3A3A;
}
.event-card {
display: grid;
grid-template-columns: 210px 1fr;
gap: 24px;
align-items: center;
background: var(--paper);
border: 1.5px solid var(--black);
padding: 22px;
min-height: 250px;
display: block;
background: #171717;
border: none;
border-right: 1px solid #3A3A3A;
border-bottom: 1px solid #3A3A3A;
padding: 28px;
min-height: 210px;
transition: transform .15s cubic-bezier(.2, 0, 0, 1), box-shadow .15s ease;
}
.event-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px -22px rgba(0,0,0,.55);
}
.event-card img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: var(--paper);
border: 1px solid rgba(10,10,10,.16);
transform: translateY(-1px);
box-shadow: inset 0 4px 0 var(--signal);
}
.event-card h3 {
font-size: 24px;
line-height: 1.12;
margin-bottom: 10px;
font-size: 32px;
line-height: .98;
margin-bottom: 12px;
color: var(--paper);
}
.event-card p {
font-size: 14px;
color: var(--gray-1);
font-size: 15px;
color: #BDBDBD;
margin-bottom: 18px;
}
.event-card a {
@@ -965,37 +1162,8 @@ section[id] { scroll-margin-top: 92px; }
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
border-bottom: 1.5px solid var(--black);
}
.mini-terminal {
aspect-ratio: 1 / 1;
border: 1.5px solid var(--black);
background:
linear-gradient(90deg, rgba(10,10,10,.06) 1px, transparent 1px),
linear-gradient(rgba(10,10,10,.06) 1px, transparent 1px),
var(--paper);
background-size: 22px 22px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
}
.mini-terminal span,
.mini-terminal em {
font-style: normal;
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gray-2);
font-weight: 800;
}
.mini-terminal strong {
display: block;
font-size: 24px;
line-height: .98;
letter-spacing: -.03em;
text-transform: uppercase;
margin: 14px 0;
color: var(--signal);
border-bottom: 1.5px solid var(--signal);
}
/* ============================================================
@@ -1004,22 +1172,23 @@ section[id] { scroll-margin-top: 92px; }
.section-dark {
background: var(--black);
color: var(--paper);
border-top: 1px solid #262626;
}
.kontakt-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
grid-template-columns: .9fr 1.1fr;
gap: 54px;
align-items: start;
}
.section-dark .section-intro { color: #A6A6A6; }
.contact-promises {
list-style: none;
margin-top: 30px;
margin-top: 24px;
border-top: 1px solid #2B2B2B;
}
.contact-promises li {
position: relative;
padding: 13px 0 13px 26px;
padding: 11px 0 11px 26px;
border-bottom: 1px solid #2B2B2B;
font-size: 14px;
color: #DADADA;
@@ -1034,7 +1203,7 @@ section[id] { scroll-margin-top: 92px; }
background: var(--paper);
}
.contact-list {
margin-top: 34px;
margin-top: 24px;
border-top: 1px solid #2B2B2B;
}
.contact-list > div {
@@ -1059,10 +1228,12 @@ section[id] { scroll-margin-top: 92px; }
.lead-form {
background: var(--paper-2);
color: var(--ink);
padding: 36px 34px;
border-radius: 14px;
padding: 28px;
border-radius: 0;
border: 1.5px solid var(--paper);
box-shadow: 12px 12px 0 rgba(255,255,255,.12);
}
.form-row { margin-bottom: 20px; }
.form-row { margin-bottom: 15px; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -1087,7 +1258,7 @@ section[id] { scroll-margin-top: 92px; }
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: 7px;
padding: 12px 14px;
padding: 11px 13px;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.form-row:focus-within label { color: var(--black); }
@@ -1098,7 +1269,10 @@ section[id] { scroll-margin-top: 92px; }
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 4px rgba(10,10,10,.18);
}
.form-row textarea { resize: vertical; }
.form-row textarea {
resize: vertical;
min-height: 118px;
}
.form-row.invalid input,
.form-row.invalid textarea { border-color: #C0392B; }
@@ -1195,7 +1369,15 @@ section[id] { scroll-margin-top: 92px; }
display: flex;
animation: mobileMenuIn .18s cubic-bezier(.2, 0, 0, 1);
}
.hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 140px 32px 72px; }
.signal-inner {
grid-template-columns: 1fr;
gap: 10px;
padding-top: 18px;
padding-bottom: 18px;
}
.signal-inner a { justify-self: start; }
.hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 84px 32px 72px; }
.mission-track { gap: 12px; }
.product-grid { grid-template-columns: 1fr; gap: 44px; }
.cards { grid-template-columns: 1fr 1fr; }
.industry-grid { grid-template-columns: 1fr 1fr; }
@@ -1218,10 +1400,38 @@ section[id] { scroll-margin-top: 92px; }
.mobile-nav { padding: 16px 20px 24px; }
.section { padding: 64px 0; }
.section-head { margin-bottom: 36px; }
.hero-title { font-size: clamp(42px, 13vw, 58px); }
.hero-actions .btn { flex: 1 1 auto; }
.trust-strip span { flex: 1 1 100%; }
.mission-head {
align-items: flex-start;
flex-direction: column;
text-align: left;
}
.mission-track {
grid-template-columns: 1fr;
gap: 0;
}
.mission-line {
left: 11px;
right: auto;
top: 0;
bottom: 0;
width: 2px;
height: auto;
background: linear-gradient(180deg, var(--signal) 0 45%, #5B5B5B 45% 100%);
}
.mission-step {
min-height: 82px;
padding: 0 0 22px 42px;
text-align: left;
}
.mission-step span {
left: 0;
transform: none;
}
.proof-points div { grid-template-columns: 1fr; gap: 4px; }
.product-ui { box-shadow: 10px 10px 0 rgba(10,10,10,.08); }
.product-ui { box-shadow: 10px 10px 0 var(--signal), 11.5px 11.5px 0 var(--black); }
.ui-layout { grid-template-columns: 1fr; min-height: 0; }
.ui-sidebar {
display: grid;
@@ -1231,6 +1441,14 @@ section[id] { scroll-margin-top: 92px; }
border-bottom: 1px solid var(--line);
}
.ui-nav { margin-bottom: 0; }
.ui-flow { grid-template-columns: 1fr; }
.ui-flow span {
justify-content: flex-start;
padding: 0 12px;
border-right: none;
border-bottom: 1px solid var(--black);
}
.ui-flow span:last-child { border-bottom: none; }
.ui-metrics { grid-template-columns: 1fr; }
.cards { grid-template-columns: 1fr; }
.card { border-right: 1px solid var(--line-strong); }
@@ -1245,8 +1463,10 @@ section[id] { scroll-margin-top: 92px; }
.form-foot .btn { width: 100%; }
.lead-form { padding: 26px 22px; }
.event-card { grid-template-columns: 1fr; }
.event-card img,
.mini-terminal { aspect-ratio: 16 / 10; }
.event-section .section-head {
grid-template-columns: 1fr;
gap: 10px;
}
.site-footer { padding: 22px 0; }
.footer-links { gap: 8px 14px; }
.footer-brand {
+21 -23
View File
@@ -5,8 +5,18 @@
<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" />
<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 beim TechDay Bruchsal 2026" />
<meta property="og:description" content="Vortrag, AI GameJam und mITapp beim ersten Bruchsaler TechDay am 27. Mai 2026." />
<meta property="og:url" content="https://tool-ctrl.de/techday" />
<meta property="og:image" content="https://tool-ctrl.de/assets/techday-event.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" />
<link rel="stylesheet" href="/styles.css?v=20260525" />
</head>
<body>
@@ -241,33 +251,21 @@
<!-- ============ FOOTER ============ -->
<footer class="site-footer">
<div class="wrap footer-inner">
<div class="wrap footer-bar">
<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>
<p>© <span id="year">2026</span> ToolCTRL · Bruchsal</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">TechDay</a>
<a href="/gamejam">GameJam</a>
<a href="/#kontakt">Kontakt</a>
</div>
<div class="footer-col">
<span class="footer-h">Kontakt</span>
<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 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>
<div class="wrap footer-base">
<span>© <span id="year">2026</span> ToolCTRL</span>
<span><a href="/impressum">Impressum</a> · <a href="/datenschutz">Datenschutz</a></span>
</div>
</footer>
<script src="/script.js"></script>