Landing: Events-Sektion, Grid-Hintergrund, scharfe Form, Konzept-Texte, Telefon im Footer

UI / Layout - Subtiler 72px-Grid auf html (rgba(10,10,10,.032)), body transparent - Neue Events-Sektion vor #kontakt: TechDay-Card + AI-GameJam-Card mit 3px-Border + 7px-Offset-Shadow, ganze Card klickbar via stretched-link - Form mit scharfen Ecken und 12px-Offset-Shadow (raffael-Stil), Section-Dark-Button-Schatten, monochromer Form-Status Navigation - Nur noch Start / TechDay / GameJam + Kontakt-Button (Anchor-Links zur Landingpage raus, da sie ohnehin direkt darunter erscheinen) - Größere Hover-Fläche pro Nav-Link via padding, Unterstreichung via ::after fest positioniert - Mobile-Nav synchron, TechDay-Page synchron Copy - Hero: CTA 'Projekt besprechen' -> 'Kontakt aufnehmen' - Leistungen: neuer Intro + alle sechs Card-Texte (Hands-Off, Anzug, Kommandozentrale, Tools-aneinander-vorbei, zerstueckelte Teil- loesungen, waechst-mit-Ihrem-Betrieb) - Vorgehen -> 'Konzept' / 'Das ToolCTRL Konzept.' mit vier Schritten (Situationsanalyse, Grundkonzepte, Umsetzung, Betrieb & Wartung) - Kontakt-Intro umgeschrieben, Form-Label 'Worum geht es Ihnen?' Kontakt - E-Mail global admin@ -> info@ (5 Dateien inkl. script.js Fallback) - Telefon +49 1523 7750939 in Footer-Kontaktspalte (index + techday), klickbar via tel: Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-02 19:59:42 +02:00
1 parent 0a9983b6d9
commit 6597f6b303
@@ -37,7 +37,7 @@
    R&amp;D² UG (haftungsbeschränkt)<br />
    Orbinstraße 1<br />
    76646 Bruchsal<br />
-    E-Mail: <a href="mailto:admin@tool-ctrl.de">admin@tool-ctrl.de</a>
+    E-Mail: <a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a>
  </p>
  <p>Die vollständigen Anbieterangaben finden Sie im <a href="/impressum.html">Impressum</a>.</p>

@@ -129,7 +129,7 @@
  </ul>
  <p>
    Zur Ausübung Ihrer Rechte genügt eine formlose Nachricht an
-    <a href="mailto:admin@tool-ctrl.de">admin@tool-ctrl.de</a>.
+    <a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a>.
  </p>

  <h2>8. Beschwerderecht bei der Aufsichtsbehörde</h2>
@@ -40,7 +40,7 @@
  <h2>Kontakt</h2>
  <p>
    Telefon: <span class="legal-tbd">[ Telefonnummer ]</span><br />
-    E-Mail: <a href="mailto:admin@tool-ctrl.de">admin@tool-ctrl.de</a><br />
+    E-Mail: <a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a><br />
    Web: <a href="https://tool-ctrl.de">tool-ctrl.de</a>
  </p>

@@ -18,9 +18,7 @@
      <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 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>
@@ -30,9 +28,7 @@
    </button>
  </div>
  <div class="mobile-nav" hidden>
-    <a href="#leistungen">Leistungen</a>
-    <a href="#vorgehen">Vorgehen</a>
-    <a href="#arbeit">Organisation</a>
+    <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>
@@ -56,7 +52,7 @@
        klar aussieht und sich schnell bedienen lässt.
      </p>
      <div class="hero-actions">
-        <a class="btn btn-solid" href="#kontakt">Projekt besprechen</a>
+        <a class="btn btn-solid" href="#kontakt">Kontakt aufnehmen</a>
        <a class="btn btn-ghost" href="#leistungen">Leistungen ansehen</a>
      </div>
    </div>
@@ -143,10 +139,11 @@
      <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.
+        Wir arbeiten dort, wo manuelle Schritte an alleinstehenden Tabellen
+        und veralteten Insellösungen zu viel Zeit und Nerven kosten. Daraus
+        bauen wir moderne und tragfähige Infrastrukturen aus Prozessen,
+        Automatisierung und Schnittstellen, zugeschnitten auf Ihren
+        Betrieb und Ihren Ablauf, nicht angepasst.
      </p>
    </div>

@@ -154,39 +151,40 @@
      <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>
+        <p>ToolCTRL wandelt repetitive Prozesse in eine komplett
+           automatische Hands-Off-Erfahrung, während Sie sich um die
+           wichtigeren Aufgaben im Betrieb kümmern.</p>
      </article>
      <article class="card">
        <span class="icon-key"><img src="/assets/icons/settings.svg" alt="" class="card-icon" /></span>
        <h3>Individuelle Software</h3>
-        <p>Anwendungen, die exakt zu Ihrem Geschäft passen. Schlank
-           gebaut, klar bedienbar und auf Dauer wartbar.</p>
+        <p>Wir bauen Software, die Ihrem Betrieb so gut sitzt wie ein
+           maßgeschneiderter Anzug.</p>
      </article>
      <article class="card">
        <span class="icon-key"><img src="/assets/icons/chart.svg" alt="" class="card-icon" /></span>
        <h3>Dashboards &amp; Datenflüsse</h3>
-        <p>Verstreute Daten an einem Ort: aktuell, übersichtlich und
-           als Grundlage für schnelle Entscheidungen.</p>
+        <p>Alle Datenpunkte integriert und aufbereitet. Ihre ganz eigene
+           Kommandozentrale.</p>
      </article>
      <article class="card">
        <span class="icon-key"><img src="/assets/icons/share.svg" alt="" class="card-icon" /></span>
        <h3>Schnittstellen &amp; Integrationen</h3>
-        <p>Bestehende Tools, APIs und Systeme greifen ineinander, statt
-           nebeneinander zu laufen.</p>
+        <p>Bestehende Tools arbeiten zusammen, statt aneinander vorbei.
+           Was in einem System passiert, ist im nächsten sofort da.</p>
      </article>
      <article class="card">
        <span class="icon-key"><img src="/assets/icons/columns.svg" alt="" class="card-icon" /></span>
        <h3>Interne Tools</h3>
-        <p>Werkzeuge für das eigene Team, die verstreute Tabellenlösungen
-           ablösen und mit Ihren Abläufen mitwachsen.</p>
+        <p>Tools, die ganze Teams durch ihre Arbeitstage tragen. Keine
+           zerstückelten Teillösungen und Tabellenblätter mehr.</p>
      </article>
      <article class="card">
        <span class="icon-key"><img src="/assets/icons/time.svg" alt="" class="card-icon" /></span>
        <h3>Betrieb &amp; Weiterentwicklung</h3>
-        <p>Nach dem Launch ist nicht Schluss: Wartung, Anpassung und
-           Ausbau aus einer Hand.</p>
+        <p>Nach dem Launch ist nicht Schluss: Wartung, Anpassung,
+           Erweiterungen und Updates aus einer Hand. Unsere Software
+           wächst mit Ihrem Betrieb.</p>
      </article>
    </div>
  </div>
@@ -196,38 +194,46 @@
 <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>
+      <span class="eyebrow">Konzept</span>
+      <h2 class="section-title">Das ToolCTRL Konzept.</h2>
      <p class="section-intro">
-        Kein Wasserfall, kein Blindflug. Ein Ablauf, der Ergebnisse früh
-        sichtbar macht und Sie an jeder Stelle einbezieht.
+        Ihr Anliegen wird in vier klare Schritte unterteilt: von der
+        Situationsanalyse über die ersten Grundkonzepte in die konkrete
+        Umsetzung und den Betrieb. Unser Team ist an jeder Stelle für
+        Sie da, um bestmögliche Ergebnisse zu liefern und
+        sicherzustellen.
      </p>
    </div>

    <ol class="steps">
      <li class="step">
        <span class="step-num">01</span>
-        <h3>Analyse</h3>
-        <p>Wir sehen uns Ihren Ablauf an und legen offen, wo Zeit, Daten
-           und Klarheit verloren gehen.</p>
+        <h3>Situationsanalyse</h3>
+        <p>Unser Team geht mit Ihnen alle Prozesse und Abläufe in Ihrem
+           Betrieb durch, um klarzustellen, wo Zeit, Effizienz und damit
+           auch Geld verloren gehen.</p>
      </li>
      <li class="step">
        <span class="step-num">02</span>
-        <h3>Konzept</h3>
-        <p>Ein konkreter Lösungsvorschlag mit Aufwand, Umfang und
-           erwartetem Nutzen, transparent kalkuliert.</p>
+        <h3>Grundkonzepte</h3>
+        <p>Aus der Situationsanalyse erstellen wir zusammen ein
+           Lastenheft. Daraus bauen wir Ihnen erste Lösungskonzepte, die
+           wir iterativ auf Basis Ihres Feedbacks anpassen, bis wir zu
+           Ihrem gewünschten Endergebnis kommen.</p>
      </li>
      <li class="step">
        <span class="step-num">03</span>
        <h3>Umsetzung</h3>
-        <p>Wir bauen in kurzen Zyklen. Sie sehen früh ein funktionierendes
-           Ergebnis statt nur Folien.</p>
+        <p>Nach Vereinbarung des Lösungswegs bekommen Sie früh Ihre
+           erste funktionierende Version mit allen Grundfunktionen.
+           Iterativ wird Ihre Software verbessert und zum gewünschten
+           Endergebnis geformt.</p>
      </li>
      <li class="step">
        <span class="step-num">04</span>
-        <h3>Betrieb</h3>
-        <p>Übergabe, Einweisung und laufende Pflege, damit die Lösung
-           dauerhaft trägt.</p>
+        <h3>Betrieb &amp; Wartung</h3>
+        <p>Übergabe, Einweisungen, Updates und Wartung, damit Ihre
+           Software langfristig tragfähig bleibt.</p>
      </li>
    </ol>
  </div>
@@ -280,6 +286,46 @@
  </div>
 </section>

+<!-- ============ EVENTS / COMMUNITY ============ -->
+<section class="section event-section" id="events">
+  <div class="wrap">
+    <div class="section-head event-head">
+      <span class="eyebrow">Events</span>
+      <h2 class="section-title">Lieber ausprobieren als schönreden.</h2>
+      <p class="section-intro">
+        TechDay und GameJam zeigen unsere Arbeit dort, wo echte Leute sie
+        anfassen: lokal, direkt und mit Ergebnissen, über die man reden kann.
+      </p>
+    </div>
+    <div class="event-grid">
+      <article class="event-card event-card-media">
+        <div class="event-poster">
+          <img src="/assets/techday-event.png" alt="TechDay Bruchsal 2026 Motiv" width="683" height="384" loading="lazy" decoding="async" />
+        </div>
+        <div>
+          <span class="event-label">27. Mai 2026</span>
+          <h3>TechDay Bruchsal</h3>
+          <p>Talks, Workshops und Austausch rund um Technologie in Bruchsal.</p>
+          <a href="/techday.html">TechDay ansehen</a>
+        </div>
+      </article>
+      <article class="event-card event-card-code">
+        <div class="mini-terminal" aria-hidden="true">
+          <span>AI_GAMEJAM</span>
+          <strong>Human in the Loop</strong>
+          <em>2 Stunden / KI / spielbar</em>
+        </div>
+        <div>
+          <span class="event-label">TechDay Format</span>
+          <h3>AI GameJam</h3>
+          <p>Ein kompaktes Format, bei dem aus Idee, KI-Unterstützung und menschlicher Steuerung ein spielbares Ergebnis wird.</p>
+          <a href="/gamejam.html">GameJam ansehen</a>
+        </div>
+      </article>
+    </div>
+  </div>
+</section>
+
 <!-- ============ KONTAKT ============ -->
 <section class="section section-dark" id="kontakt">
  <div class="wrap kontakt-grid">
@@ -287,13 +333,13 @@
      <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.
+        Interesse? Fragen? Lassen Sie uns darüber reden. Füllen Sie das
+        Formular aus, wir melden uns in Kürze bei Ihnen.
      </p>
      <dl class="contact-list">
        <div>
          <dt>E-Mail</dt>
-          <dd><a href="mailto:admin@tool-ctrl.de">admin@tool-ctrl.de</a></dd>
+          <dd><a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a></dd>
        </div>
        <div>
          <dt>LinkedIn</dt>
@@ -322,7 +368,7 @@
        </div>
      </div>
      <div class="form-row">
-        <label for="f-nachricht">Worum geht es? <span>*</span></label>
+        <label for="f-nachricht">Worum geht es Ihnen? <span>*</span></label>
        <textarea id="f-nachricht" name="nachricht" rows="4" required
          placeholder="Kurz Ihr Anliegen — wir kümmern uns um die Details."></textarea>
      </div>
@@ -363,7 +409,8 @@
      </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="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>
@@ -108,7 +108,7 @@
      })
      .catch(function () {
        setStatus(
-          "Verbindung fehlgeschlagen. Bitte schreiben Sie uns direkt an admin@tool-ctrl.de.",
+          "Verbindung fehlgeschlagen. Bitte schreiben Sie uns direkt an info@tool-ctrl.de.",
          "err"
        );
      })
@@ -64,12 +64,21 @@

 * { box-sizing: border-box; margin: 0; padding: 0; }

-html { scroll-behavior: smooth; }
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 86px;
+  background:
+    linear-gradient(90deg, rgba(10,10,10,.032) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(10,10,10,.032) 1px, transparent 1px),
+    var(--paper);
+  background-size: 72px 72px;
+  background-attachment: fixed;
+}

 body {
  font-family: var(--grotesk);
  color: var(--ink);
-  background: var(--paper);
+  background: transparent;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
@@ -232,10 +241,20 @@ a { color: inherit; text-decoration: none; }
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
-  padding-bottom: 2px;
-  border-bottom: 1.5px solid transparent;
+  padding: 12px 10px;
+  position: relative;
 }
-.nav > a:not(.btn):hover { border-bottom-color: var(--black); }
+.nav > a:not(.btn)::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  height: 1.5px;
+  background: transparent;
+  transition: background .15s ease;
+}
+.nav > a:not(.btn):hover::after { background: var(--black); }

 .nav-toggle {
  display: none;
@@ -607,14 +626,196 @@ a { color: inherit; text-decoration: none; }
 .contact-list dd { font-size: 15px; }
 .contact-list a:hover { text-decoration: underline; }

+/* ---------- Events Section ---------- */
+.event-section {
+  background: transparent;
+  color: var(--black);
+  padding: clamp(48px, 8vh, 96px) 0;
+  overflow: clip;
+}
+.event-section .section-head {
+  max-width: 880px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  margin: 0 auto clamp(34px, 4.4vh, 48px);
+  text-align: center;
+}
+.event-section .section-title {
+  color: var(--black);
+  margin: 22px 0 0;
+  font-size: clamp(34px, 4vw, 54px);
+  line-height: .96;
+  max-width: 820px;
+}
+.event-section .eyebrow { align-self: center; }
+.event-section .section-intro {
+  color: var(--gray-1);
+  font-size: 16px;
+  line-height: 1.45;
+  max-width: 620px;
+  margin: 24px auto 0;
+}
+.event-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(22px, 2.5vw, 30px);
+  align-items: stretch;
+}
+.event-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(178px, .82fr);
+  gap: clamp(16px, 1.8vw, 22px);
+  align-items: center;
+  background: var(--paper);
+  color: var(--black);
+  border: 3px solid var(--black);
+  padding: clamp(16px, 1.8vw, 22px);
+  box-shadow: 7px 7px 0 var(--black);
+  cursor: pointer;
+  transition: transform .15s cubic-bezier(.2, 0, 0, 1), box-shadow .15s ease;
+}
+.event-card a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.event-card:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 9px 9px 0 var(--black);
+}
+.event-card h3 {
+  font-size: clamp(22px, 2vw, 30px);
+  line-height: 1;
+  margin-bottom: 8px;
+  color: var(--black);
+}
+.event-card p {
+  font-size: 14px;
+  line-height: 1.42;
+  color: #3A3A3A;
+  margin-bottom: 14px;
+}
+.event-card a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  max-width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  text-align: center;
+  color: var(--black);
+  border: 2px solid currentColor;
+  box-shadow: 3px 3px 0 currentColor;
+}
+.event-card-code h3 { color: var(--black); }
+.event-card-code p { color: #3A3A3A; }
+.event-card-code a {
+  color: var(--black);
+  border-color: var(--black);
+  box-shadow: 3px 3px 0 var(--black);
+}
+.event-poster,
+.mini-terminal {
+  border: 3px solid var(--black);
+  box-shadow: 4px 4px 0 var(--black);
+}
+.event-poster {
+  height: clamp(168px, 23vh, 230px);
+  overflow: hidden;
+  background: var(--paper);
+}
+.event-poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: contrast(1.08) saturate(.92);
+}
+.mini-terminal {
+  height: clamp(168px, 23vh, 230px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 18px;
+  background:
+    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(255,255,255,.12) 1px, transparent 1px),
+    var(--black);
+  background-size: 20px 20px;
+  color: var(--paper);
+  border-color: var(--paper);
+  box-shadow: 4px 4px 0 #A8A8A8;
+}
+.mini-terminal span {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: .18em;
+}
+.mini-terminal strong {
+  max-width: 8em;
+  font-size: clamp(26px, 3vw, 38px);
+  line-height: .94;
+  letter-spacing: -.04em;
+  color: var(--paper);
+}
+.mini-terminal em {
+  font-style: normal;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+.event-label {
+  display: block;
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--gray-2);
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+@media (max-width: 760px) {
+  .event-grid { grid-template-columns: 1fr; }
+  .event-card { grid-template-columns: 1fr; }
+}
+
 /* ---------- Form ---------- */
 .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; }
+.section-dark .lead-form .btn.btn-solid {
+  border-color: var(--black);
+  box-shadow:
+    0 4px 0 #000000,
+    0 10px 16px -12px rgba(0,0,0,.45),
+    inset 0 2px 0 rgba(255,255,255,.28);
+}
+.section-dark .lead-form .btn.btn-solid:hover {
+  box-shadow:
+    0 5px 0 #000000,
+    0 12px 18px -12px rgba(0,0,0,.45),
+    inset 0 2px 0 rgba(255,255,255,.28);
+}
+.section-dark .lead-form .btn.btn-solid:active {
+  box-shadow:
+    0 1px 0 #000000,
+    0 6px 10px -10px rgba(0,0,0,.4),
+    inset 0 1px 0 rgba(255,255,255,.2);
+}
+.form-row { margin-bottom: 15px; }
 .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
@@ -622,7 +823,7 @@ a { color: inherit; text-decoration: none; }
 }
 .form-row label {
  display: block;
-  font-size: 12px;
+  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
@@ -639,17 +840,26 @@ a { color: inherit; text-decoration: none; }
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 7px;
-  padding: 12px 14px;
-  transition: border-color .15s ease;
+  padding: 11px 13px;
+  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
 }
+.form-row:focus-within label { color: var(--black); }
 .form-row input:focus,
 .form-row textarea:focus {
  outline: none;
  border-color: var(--black);
+  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;
+  min-height: 118px;
 }
-.form-row textarea { resize: vertical; }
 .form-row.invalid input,
-.form-row.invalid textarea { border-color: #C0392B; }
+.form-row.invalid textarea {
+  border-color: var(--black);
+  box-shadow: inset 0 0 0 2px var(--black);
+}

 .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@@ -661,7 +871,7 @@ a { color: inherit; text-decoration: none; }
 }
 .form-foot .btn { flex: none; }
 .form-note {
-  font-size: 12px;
+  font-size: 11px;
  color: var(--gray-2);
  line-height: 1.45;
 }
@@ -679,7 +889,7 @@ a { color: inherit; text-decoration: none; }
  border-radius: 7px;
 }
 .form-status.ok { background: var(--black); color: var(--paper); }
-.form-status.err { border-color: #C0392B; color: #C0392B; }
+.form-status.err { border-color: var(--black); color: var(--black); }

 /* ============================================================
   FOOTER
@@ -17,9 +17,7 @@
      <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 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>
@@ -29,9 +27,7 @@
    </button>
  </div>
  <div class="mobile-nav" hidden>
-    <a href="/#leistungen">Leistungen</a>
-    <a href="/#vorgehen">Vorgehen</a>
-    <a href="/#arbeit">Organisation</a>
+    <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>
@@ -258,7 +254,8 @@
      </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="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>