Refine homepage messaging and background

public/index.html

@@ -80,8 +80,9 @@
       </h1>
       <p class="hero-lead">
         Keine US-Cloud-Pflicht. Kein Agentur-Bullshit. ToolCTRL baut
-        individuelle SaaS-Systeme schnell, bezahlbar und passend zu echten
-        Abläufen.
+        individuelle SaaS-Systeme für Mittelständler, bei denen Anfragen,
+        Termine, Daten und Freigaben nicht länger in Tabellen, Postfächern
+        und halbfertigen Tools hängen bleiben.
       </p>
       <div class="hero-actions">
         <a class="btn btn-solid" href="#kontakt">Ablauf prüfen lassen</a>

public/styles.css

@@ -58,12 +58,18 @@
 
 html {
   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;
@@ -544,14 +550,33 @@ p, li { text-wrap: pretty; }
    HERO
    ============================================================ */
 .hero {
-  min-height: 0;
+  display: flex;
+  position: relative;
+  isolation: isolate;
+  min-height: calc(100svh - var(--header-h));
+  overflow: hidden;
+}
+.hero::before {
+  content: "CTRL";
+  position: absolute;
+  left: -0.18em;
+  bottom: -0.36em;
+  z-index: -1;
+  color: rgba(10,10,10,.028);
+  font-size: clamp(180px, 26vw, 420px);
+  line-height: .78;
+  font-weight: 900;
+  letter-spacing: 0;
+  pointer-events: none;
 }
 .hero-grid {
+  flex: 1;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 64px;
-  align-items: start;
-  padding: clamp(42px, 5vh, 62px) 32px clamp(44px, 6vh, 72px);
+  align-items: center;
+  align-content: start;
+  padding: clamp(96px, 18svh, 190px) 32px clamp(44px, 6vh, 72px);
 }
 .hero-copy,
 .hero-visual {
@@ -943,7 +968,11 @@ p, li { text-wrap: pretty; }
    HALTUNG
    ============================================================ */
 .section.stance-section {
-  background: var(--black);
+  background:
+    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
+    var(--black);
+  background-size: 72px 72px;
   color: var(--paper);
   padding: 86px 0 96px;
 }
@@ -1103,9 +1132,7 @@ p, li { text-wrap: pretty; }
 /* ============================================================
    PRODUKTWIRKUNG
    ============================================================ */
-.product-section {
-  background: var(--paper);
-}
+.product-section { background: transparent; }
 .product-grid {
   display: grid;
   grid-template-columns: .86fr 1.14fr;
@@ -1338,7 +1365,7 @@ p, li { text-wrap: pretty; }
 .section { padding: var(--section-y) 0; }
 section[id] { scroll-margin-top: 92px; }
 .site-footer { scroll-margin-top: 92px; }
-.section-alt { background: var(--paper-2); }
+.section-alt { background: transparent; }
 .section-head { max-width: 620px; margin-bottom: 56px; }
 .section-title {
   font-size: var(--type-section-title);
@@ -1508,9 +1535,7 @@ section[id] { scroll-margin-top: 92px; }
 }
 
 /* ---------- Industries ---------- */
-.industry-section {
-  background: var(--paper-2);
-}
+.industry-section { background: transparent; }
 .industry-section > .wrap {
   display: grid;
   grid-template-columns: .62fr .38fr;
@@ -1820,7 +1845,7 @@ section[id] { scroll-margin-top: 92px; }
    EVENTS
    ============================================================ */
 .event-section {
-  background: var(--paper);
+  background: transparent;
   color: var(--black);
   min-height: var(--viewport-section-h);
   display: flex;
@@ -1985,7 +2010,11 @@ section[id] { scroll-margin-top: 92px; }
    KONTAKT
    ============================================================ */
 .section-dark {
-  background: var(--black);
+  background:
+    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
+    var(--black);
+  background-size: 72px 72px;
   color: var(--paper);
 }
 .kontakt-grid {
@@ -2147,7 +2176,11 @@ section[id] { scroll-margin-top: 92px; }
    FOOTER
    ============================================================ */
 .site-footer {
-  background: var(--black);
+  background:
+    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
+    var(--black);
+  background-size: 72px 72px;
   color: var(--paper);
   padding: 22px 0;
 }
@@ -2229,6 +2262,12 @@ section[id] { scroll-margin-top: 92px; }
   }
   .hero {
     min-height: 0;
+    background: transparent;
+    overflow: visible;
+  }
+  .hero::before,
+  .hero::after {
+    content: none;
   }
   .hero-grid {
     grid-template-columns: 1fr;
@@ -2236,6 +2275,7 @@ section[id] { scroll-margin-top: 92px; }
     align-items: start;
     min-height: 0;
     padding: 64px 32px;
+    transform: none;
   }
   .hero-actions { margin-top: 36px; }
   .stance-grid { grid-template-columns: 1fr; }