TechDay: Keyvisual, GameJam-Teaser und Layout-Feinschliff

- Der-TechDay-Abschnitt zweispaltig mit offiziellem Event-Keyvisual
- GameJam-Abschnitt: Hero-Element der GameJam-Seite als HTML nachgebaut
  (Kicker, "Human in the Loop", Subline, Raster-Hintergrund)
- Event-Infos: breitere Label-Spalte, sauberer Abstand bei "Veranstalter"

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/styles.css

@@ -748,6 +748,70 @@ a { color: inherit; text-decoration: none; }
   margin-bottom: 30px;
 }
 
+.td-feature {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 56px;
+  align-items: center;
+}
+.td-feature-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border: 1.5px solid var(--black);
+}
+
+/* GameJam-Teaser — Hero-Element der GameJam-Seite, als HTML nachgebaut */
+.gj-teaser {
+  position: relative;
+  border: 1.5px solid var(--black);
+  background: var(--paper);
+  padding: 52px 36px;
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 360px;
+}
+.gj-teaser .gj-bg {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(10,10,10,.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(10,10,10,.05) 1px, transparent 1px);
+  background-size: 38px 38px;
+  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 44%, #000 32%, transparent 80%);
+  mask-image: radial-gradient(ellipse 72% 70% at 50% 44%, #000 32%, transparent 80%);
+}
+.gj-teaser > *:not(.gj-bg) { position: relative; z-index: 1; }
+.gj-kicker {
+  font-size: 11px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--gray-2);
+  margin-bottom: 18px;
+}
+.gj-title {
+  font-size: clamp(38px, 5.5vw, 60px);
+  font-weight: 800;
+  line-height: .95;
+  letter-spacing: -.03em;
+  text-transform: uppercase;
+  margin-bottom: 18px;
+}
+.gj-sub {
+  font-size: 14px;
+  color: var(--gray-1);
+  max-width: 24em;
+  margin: 0 auto;
+}
+.gj-sub b { color: var(--ink); font-weight: 600; }
+
+/* Event-Infos: breitere Label-Spalte (für "Veranstalter") */
+#infos .contact-list > div { grid-template-columns: 132px 1fr; }
+
 .td-split {
   display: grid;
   grid-template-columns: 1.45fr 1fr;
@@ -844,6 +908,7 @@ a { color: inherit; text-decoration: none; }
 }
 
 @media (max-width: 820px) {
+  .td-feature { grid-template-columns: 1fr; gap: 32px; }
   .td-split { grid-template-columns: 1fr; gap: 36px; }
   .placeholder-grid { grid-template-columns: 1fr 1fr; }
 }

public/techday.html

@@ -63,18 +63,22 @@
 <!-- ============ DER TECHDAY ============ -->
 <section class="section">
   <div class="wrap">
-    <div class="section-head">
-      <span class="eyebrow">Der TechDay</span>
-      <h2 class="section-title">Ein Tag für Bruchsals Tech-Szene.</h2>
-      <p class="section-intro">
-        Der TechDay Bruchsal 2026 will die Stadt als regionalen Knotenpunkt
-        für Technologie und Vernetzung etablieren. Auf dem Programm stehen
-        Vorträge, Workshops und Formate zum Mitmachen. Veranstaltet vom
-        gemeinnützigen mITup&nbsp;e.&nbsp;V., dessen Vereinsarbeit wir als
-        ToolCTRL aktiv mittragen. Wir bringen uns an gleich drei Stellen ein:
-        mit einem eigenen Vortrag, mit der AI GameJam als Rahmenprogramm und
-        mit der mITapp als digitalem Zuhause des Events.
-      </p>
+    <div class="td-feature">
+      <div class="td-feature-text">
+        <span class="eyebrow">Der TechDay</span>
+        <h2 class="section-title">Ein Tag für Bruchsals Tech-Szene.</h2>
+        <p class="section-intro">
+          Der TechDay Bruchsal 2026 will die Stadt als regionalen Knotenpunkt
+          für Technologie und Vernetzung etablieren. Auf dem Programm stehen
+          Vorträge, Workshops und Formate zum Mitmachen. Veranstaltet vom
+          gemeinnützigen mITup&nbsp;e.&nbsp;V., dessen Vereinsarbeit wir als
+          ToolCTRL aktiv mittragen. Wir bringen uns an gleich drei Stellen ein:
+          mit einem eigenen Vortrag, mit der AI GameJam als Rahmenprogramm und
+          mit der mITapp als digitalem Zuhause des Events.
+        </p>
+      </div>
+      <img class="td-feature-img" src="/assets/techday-event.png"
+           alt="TechDay Bruchsal 2026: Human in the Loop" />
     </div>
   </div>
 </section>
@@ -170,17 +174,25 @@
 <!-- ============ GAMEJAM ============ -->
 <section class="section section-alt" id="gamejam">
   <div class="wrap">
-    <div class="section-head">
-      <span class="eyebrow">Rahmenprogramm</span>
-      <h2 class="section-title">AI GameJam: Human in the Loop.</h2>
-      <p class="section-intro">
-        Teil des TechDay ist unsere AI GameJam: in zwei Stunden ein Spiel
-        bauen, der Mensch steuert die KI. Mit Live-Countdown, Ablaufplan und
-        Upload für die fertigen Spiele. Die GameJam hat ihre eigene Seite.
-      </p>
-    </div>
-    <div class="hero-actions">
-      <a class="btn btn-solid" href="/gamejam.html">Zur GameJam-Seite</a>
+    <div class="td-feature">
+      <div class="td-feature-text">
+        <span class="eyebrow">Rahmenprogramm</span>
+        <h2 class="section-title">AI GameJam: Human in the Loop.</h2>
+        <p class="section-intro">
+          Teil des TechDay ist unsere AI GameJam: in zwei Stunden ein Spiel
+          bauen, der Mensch steuert die KI. Mit Live-Countdown, Ablaufplan und
+          Upload für die fertigen Spiele. Die GameJam hat ihre eigene Seite.
+        </p>
+        <div class="hero-actions" style="margin-top:28px;">
+          <a class="btn btn-solid" href="/gamejam.html">Zur GameJam-Seite</a>
+        </div>
+      </div>
+      <div class="gj-teaser" aria-hidden="true">
+        <div class="gj-bg"></div>
+        <div class="gj-kicker">AI GameJam // TechDay Bruchsal 2026</div>
+        <div class="gj-title">Human in<br />the Loop</div>
+        <p class="gj-sub">Ein Spiel bauen mit KI in zwei Stunden. <b>Der Mensch steuert.</b></p>
+      </div>
     </div>
   </div>
 </section>