Deepen homepage visual system
This commit is contained in:
1 parent
14b51dcd67
commit
bb7393653e
7 files changed
+450
-169
No files matched your search
@@ -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>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
@@ -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 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 & 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 & 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 & 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>
|
||||
|
||||
@@ -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
@@ -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
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user