Landing: Standort-Section (EU-Hosting) mit Paragraf-Wasserzeichen

Neue Section zwischen Organisation und Events: positioniert ToolCTRL
als deutsch gehostete, dem deutschen Recht unterstellte Alternative zu
US-Software. Grau hinterlegt, hält den Grau/Weiss-Wechsel intakt.
Grosses, blasses Paragraf-Zeichen als Wasserzeichen im Freiraum oben
rechts (analog zum CTRL-Schriftzug im Hero).

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

public/index.html

@@ -7,7 +7,7 @@
 <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." />
 <link rel="icon" type="image/png" href="/assets/favicon.png" />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="stylesheet" href="/styles.css?v=20260523" />
+<link rel="stylesheet" href="/styles.css?v=20260604" />
 </head>
 <body>
 
@@ -285,6 +285,47 @@
   </div>
 </section>
 
+<!-- ============ STANDORT / EU-HOSTING ============ -->
+<section class="section section-alt" id="standort">
+  <div class="wrap">
+    <div class="section-head standort-head">
+      <span class="eyebrow">Standort</span>
+      <h2 class="section-title">Ihre Daten gehören nicht nach Virginia.</h2>
+      <p class="section-intro">
+        Die meisten Software-Anbieter, mit denen deutsche Unternehmen täglich
+        arbeiten, sind US-Konzerne. Heißt: Ihre Daten unterliegen US-Recht,
+        unabhängig davon, was im Vertrag steht oder wo der Server tatsächlich
+        läuft.
+      </p>
+      <p class="standort-claim">
+        Wir entwickeln in Deutschland, hosten in Deutschland und haften in
+        Deutschland.
+      </p>
+    </div>
+
+    <ol class="steps steps-3">
+      <li class="step">
+        <span class="step-num">01</span>
+        <h3>In Deutschland gehostet</h3>
+        <p>Unsere Server stehen in deutschen Rechenzentren. Keine versteckte
+           Subunternehmer-Kette, die im US-Cloud-Stack endet.</p>
+      </li>
+      <li class="step">
+        <span class="step-num">02</span>
+        <h3>Dem deutschen Recht unterstellt</h3>
+        <p>Verträge nach BGB, Datenschutz nach DSGVO, ohne Hintertür. Der
+           CLOUD Act hat hier nichts verloren.</p>
+      </li>
+      <li class="step">
+        <span class="step-num">03</span>
+        <h3>Von Menschen erreichbar</h3>
+        <p>Kein Support-Ticket im Niemandsland. Wenn etwas brennt, sprechen
+           Sie mit den Leuten, die Ihre Software gebaut haben.</p>
+      </li>
+    </ol>
+  </div>
+</section>
+
 <!-- ============ EVENTS / COMMUNITY ============ -->
 <section class="section event-section" id="events">
   <div class="wrap">

public/styles.css

@@ -497,6 +497,37 @@ a { color: inherit; text-decoration: none; }
   color: var(--gray-1);
 }
 
+/* ---------- Standort / EU-Hosting ---------- */
+/* Großes, blasses Paragraf-Zeichen oben rechts — Wasserzeichen, analog
+   zum CTRL-Schriftzug im Hero. Thematisch: Recht, DSGVO, CLOUD Act. */
+#standort {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+#standort .wrap { position: relative; }
+#standort .wrap::before {
+  content: "\00A7";
+  position: absolute;
+  top: -0.12em;
+  right: 11%;
+  z-index: -1;
+  color: rgba(10, 10, 10, .045);
+  font-size: clamp(240px, 28vw, 420px);
+  line-height: 1;
+  font-weight: 900;
+  pointer-events: none;
+}
+.steps-3 { grid-template-columns: repeat(3, 1fr); }
+.standort-claim {
+  font-size: clamp(18px, 1.9vw, 22px);
+  font-weight: 700;
+  letter-spacing: -.01em;
+  line-height: 1.3;
+  margin-top: 22px;
+  color: var(--ink);
+}
+
 /* ============================================================
    ARBEITSWEISE + KANBAN
    ============================================================ */
@@ -951,6 +982,10 @@ a { color: inherit; text-decoration: none; }
   .steps { grid-template-columns: 1fr 1fr; }
   .step:nth-child(2) { border-right: none; }
   .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--line); }
+  /* Standort-Grid bleibt dreispaltig — drei kurze Karten passen */
+  .steps-3 { grid-template-columns: repeat(3, 1fr); }
+  .steps-3 .step:nth-child(2) { border-right: 1px solid var(--line); }
+  .steps-3 .step:nth-child(1), .steps-3 .step:nth-child(2) { border-bottom: none; }
   .arbeit-grid { grid-template-columns: 1fr; gap: 44px; }
   .kontakt-grid { grid-template-columns: 1fr; gap: 44px; }
   .footer-inner { grid-template-columns: 1fr; gap: 36px; }