diff --git a/css/style.css b/css/style.css
index ce477b0..67cbf33 100644
--- a/css/style.css
+++ b/css/style.css
@@ -14,6 +14,10 @@
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -125,15 +129,14 @@ nav.main-nav a.active {
 
 /* Hero Section */
 .hero {
-  padding: 90px 0 60px;
+  padding: 80px 0 50px;
   text-align: center;
   position: relative;
-  overflow: hidden;
 }
 
 .hero-badge {
   display: inline-block;
-  padding: 6px 14px;
+  padding: 6px 16px;
   background: rgba(56, 189, 248, 0.1);
   border: 1px solid rgba(56, 189, 248, 0.25);
   border-radius: 9999px;
@@ -160,10 +163,18 @@ nav.main-nav a.active {
 .hero p {
   font-size: 1.15rem;
   color: var(--text-muted);
-  max-width: 650px;
+  max-width: 700px;
   margin: 0 auto 36px;
 }
 
+.hero code {
+  background: rgba(56, 189, 248, 0.15);
+  color: var(--accent);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.95em;
+}
+
 .hero-actions {
   display: flex;
   gap: 16px;
@@ -172,6 +183,10 @@ nav.main-nav a.active {
 }
 
 /* Features Grid */
+section.features, section.steps, section.contact {
+  scroll-margin-top: 85px;
+}
+
 .features {
   padding: 60px 0 80px;
 }
@@ -193,7 +208,7 @@ nav.main-nav a.active {
 
 .grid-3 {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 24px;
 }
 
@@ -227,6 +242,54 @@ nav.main-nav a.active {
   font-size: 0.95rem;
 }
 
+/* Steps Section */
+.steps {
+  padding: 60px 0 80px;
+  background: rgba(19, 27, 46, 0.5);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.step-number {
+  width: 44px;
+  height: 44px;
+  background: var(--accent);
+  color: #0b0f19;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 1.2rem;
+  margin-bottom: 18px;
+}
+
+/* Contact CTA */
+.contact-cta {
+  padding: 80px 0;
+  text-align: center;
+}
+
+.cta-box {
+  background: linear-gradient(135deg, rgba(26, 38, 64, 0.9) 0%, rgba(19, 27, 46, 0.9) 100%);
+  border: 1px solid rgba(56, 189, 248, 0.2);
+  border-radius: var(--radius-lg);
+  padding: 48px 32px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.cta-box h2 {
+  font-size: 2rem;
+  margin-bottom: 16px;
+}
+
+.cta-box p {
+  color: var(--text-muted);
+  font-size: 1.1rem;
+  margin-bottom: 28px;
+}
+
 /* Content Page (Impressum, Datenschutz) */
 .content-section {
   padding: 60px 0;
diff --git a/index.html b/index.html
index f92db9e..fef2c28 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Waiswuaschd – Das smarte Brotzeit- & Bestellportal</title>
-  <meta name="description" content="Schluss mit Excel-Listen und Zettelwirtschaft im Büro. Bestelle Weißwürste, Brezen und Brotzeit unkompliziert bis zum Stichtag.">
+  <title>Waiswuaschd – Dein eigenes Brotzeit-Portal für Büro & Team</title>
+  <meta name="description" content="Erhalte dein maßgeschneidertes Weißwurst- & Brotzeitportal unter eigener Subdomain (z.B. firma.waiswuaschd.de). Schluss mit Zettelwirtschaft im Team.">
   <link rel="stylesheet" href="css/style.css">
   <link rel="icon" href="favicon.ico">
 </head>
@@ -19,9 +19,11 @@
       <nav class="main-nav">
         <a href="index.html" class="active">Startseite</a>
         <a href="#features">Funktionen</a>
+        <a href="#schritte">So geht's</a>
+        <a href="#kontakt">Portal anfragen</a>
         <a href="impressum.html">Impressum</a>
         <a href="datenschutz.html">Datenschutz</a>
-        <a href="https://wops.dev.waiswuaschd.de" class="btn btn-primary">Zum Portal (WOPS)</a>
+        <a href="https://wops.dev.waiswuaschd.de" class="btn btn-primary" target="_blank" rel="noopener">Live-Demo (WOPS)</a>
       </nav>
     </div>
   </header>
@@ -30,17 +32,18 @@
   <main>
     <section class="hero">
       <div class="container">
-        <div class="hero-badge">✨ Das moderne Bestell-Portal für dein Team</div>
+        <div class="hero-badge">✨ Multi-Tenant Brotzeit-Plattform für Unternehmen & Teams</div>
         <h1>
-          Die gemeinsame Brotzeit.<br>
-          <span class="highlight">Ohne Zettelwirtschaft.</span>
+          Dein eigenes Brotzeit-Portal.<br>
+          <span class="highlight">Unter deiner Wunsch-Subdomain.</span>
         </h1>
         <p>
-          Wer kennt es nicht: Freitagmorgen, Excel-Listen im Büro, unleserliche Notizzettel und jemand muss jedem Kollegen hinterherlaufen. Waiswuaschd nimmt dir diese Arbeit komplett ab.
+          Vergiss unübersichtliche Excel-Tabellen, Notizzettel und das ewige Hinterherlaufen vor dem Freitags-Meeting. 
+          Hol dir dein eigenes, personalisiertes Bestellportal für dein Team – z. B. unter <code>dein-team.waiswuaschd.de</code>.
         </p>
         <div class="hero-actions">
-          <a href="https://wops.dev.waiswuaschd.de" class="btn btn-primary">Jetzt Brotzeit bestellen</a>
-          <a href="#features" class="btn btn-outline">Funktionen entdecken</a>
+          <a href="#kontakt" class="btn btn-primary">Eigenes Portal anfragen</a>
+          <a href="https://wops.dev.waiswuaschd.de" class="btn btn-outline" target="_blank" rel="noopener">Live-Demo testen (WOPS)</a>
         </div>
       </div>
     </section>
@@ -49,28 +52,92 @@
     <section class="features" id="features">
       <div class="container">
         <div class="section-header">
-          <h2>Warum Waiswuaschd?</h2>
-          <p>Entwickelt aus der Praxis für entspannte Büro-Meetings und Teamevents.</p>
+          <h2>Alles, was dein Team für die perfekte Brotzeit braucht</h2>
+          <p>Maßgeschneidert, mandantenfähig und sofort im Browser einsatzbereit.</p>
         </div>
 
         <div class="grid-3">
+          <div class="card">
+            <div class="card-icon">🌐</div>
+            <h3>Eigene Subdomain & Branding</h3>
+            <p>Dein Unternehmen erhält einen exklusiven Bereich unter <code>firma.waiswuaschd.de</code> mit eigenem Firmennamen und geschütztem Zugang für deine Mitarbeiter.</p>
+          </div>
+
           <div class="card">
             <div class="card-icon">🥨</div>
-            <h3>Individuelle Vorbestellung</h3>
-            <p>Jeder Kollege loggt sich mit seinem persönlichen Konto ein und wählt Weißwürste, Brezen, Wiener oder Getränke mit wenigen Klicks aus.</p>
+            <h3>Individuelles Sortiment</h3>
+            <p>Freie Auswahl: Ob traditionelle Weißwürste vom lokalen Metzger, Brezen, Leberkäse, vegane Alternativen oder Getränke – du bestimmst Angebot und Preise.</p>
           </div>
 
           <div class="card">
             <div class="card-icon">⏱️</div>
-            <h3>Feste Bestell-Deadlines</h3>
-            <p>Das Portal schließt automatisch zum Stichtag (z. B. Mittwoch 12:00 Uhr). Wer bis dahin nicht bestellt hat, hat Pech gehabt – kein Nachfragen nötig.</p>
+            <h3>Automatische Deadlines</h3>
+            <p>Feste Stichtage (z. B. Donnerstag 12:00 Uhr): Das Portal schließt pünktlich vor dem Einkauf. Wer bis dahin nicht bestellt hat, fehlt auf der Liste – ganz ohne Diskussionen.</p>
           </div>
 
           <div class="card">
-            <div class="card-icon">📊</div>
+            <div class="card-icon">📋</div>
             <h3>Einkaufsliste auf Knopfdruck</h3>
-            <p>Für den Einkäufer gibt es eine exakte Gesamtaufstellung aller Produkte sowie eine transparente Abrechnungs- und Strichliste.</p>
+            <p>Der Einkäufer sieht in Echtzeit die exakt summierten Mengen für Metzger und Bäcker sowie wer welche Portion bestellt hat.</p>
           </div>
+
+          <div class="card">
+            <div class="card-icon">💳</div>
+            <h3>Transparente Abrechnung</h3>
+            <p>Übersichtliche digitale Strichliste: Wer hat schon gezahlt, wer ist noch offen? Optional mit PayPal-Me-Link des Einkäufers für bargeldlose Sofortzahlung.</p>
+          </div>
+
+          <div class="card">
+            <div class="card-icon">📱</div>
+            <h3>Keine App-Installation</h3>
+            <p>Funktioniert sofort auf jedem Smartphone, Tablet oder Desktop-PC. Keine App-Store-Downloads oder komplizierte Einrichtung für Mitarbeiter.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Schritte -->
+    <section class="steps" id="schritte">
+      <div class="container">
+        <div class="section-header">
+          <h2>In 3 Schritten zu deinem Firmen-Portal</h2>
+          <p>Schnell eingerichtet, ohne IT-Aufwand für dein Unternehmen.</p>
+        </div>
+
+        <div class="grid-3">
+          <div class="card">
+            <div class="step-number">1</div>
+            <h3>Subdomain wählen</h3>
+            <p>Sag uns deinen Wunschnamen (z. B. <code>musterfirma.waiswuaschd.de</code>) und wir richten dein isoliertes Portal ein.</p>
+          </div>
+
+          <div class="card">
+            <div class="step-number">2</div>
+            <h3>Sortiment festlegen</h3>
+            <p>Hinterlege die Lieblingsprodukte deines Teams mit Preisen deiner lokalen Metzgerei oder Bäckerei.</p>
+          </div>
+
+          <div class="card">
+            <div class="step-number">3</div>
+            <h3>Team einladen</h3>
+            <p>Link im Firmen-Chat (Slack, Teams) teilen, Stichtag setzen und ab sofort die Brotzeit stressfrei genießen.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Kontakt / CTA -->
+    <section class="contact-cta" id="kontakt">
+      <div class="container">
+        <div class="cta-box">
+          <h2>Bereit für stressfreie Brotzeit-Runden?</h2>
+          <p>
+            Möchtest du Waiswuaschd in deinem Unternehmen, Büro oder Verein nutzen? 
+            Schreib uns einfach und wir richten deine persönliche Subdomain ein.
+          </p>
+          <a href="mailto:kontakt@waiswuaschd.de?subject=Anfrage%20eigenes%20Waiswuaschd%20Portal" class="btn btn-primary">
+            Eigenes Portal anfragen (kontakt@waiswuaschd.de)
+          </a>
         </div>
       </div>
     </section>
@@ -79,7 +146,7 @@
   <!-- Footer -->
   <footer class="site-footer">
     <div class="container footer-content">
-      <p>&copy; 2026 Waiswuaschd.de – Alle Rechte vorbehalten.</p>
+      <p>&copy; 2026 Waiswuaschd.de – Die Brotzeit-Plattform für Teams.</p>
       <div class="footer-links">
         <a href="impressum.html">Impressum</a>
         <a href="datenschutz.html">Datenschutz</a>