diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..99f2322
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "window.autoDetectColorScheme": true
+}
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..7125bec
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,252 @@
+:root {
+  /* Farben */
+  --primary-color: #0066cc;
+  --secondary-color: #00a86b;
+  --text-color: #333333;
+  --background-color: #ffffff;
+  --accent-color: #ff6b6b;
+
+  /* Schriftarten */
+  --font-primary: 'Roboto', sans-serif;
+  --font-secondary: 'Open Sans', sans-serif;
+
+  /* Abstände und Größen */
+  --spacing-small: 0.5rem;
+  --spacing-medium: 1rem;
+  --spacing-large: 2rem;
+
+  /* Schatten und Übergänge */
+  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --transition: all 0.3s ease;
+}
+
+/* Globale Stile */
+body {
+  font-family: var(--font-primary);
+  color: var(--text-color);
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-medium);
+}
+
+h1, h2, h3 {
+  font-family: var(--font-secondary);
+}
+
+h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+}
+
+h2 {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+}
+
+h3 {
+  font-size: clamp(1.2rem, 3vw, 1.8rem);
+}
+
+/* Header und Navigation */
+header {
+  background-color: var(--background-color);
+  box-shadow: var(--box-shadow);
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+}
+
+nav ul {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+  padding: 0;
+}
+
+nav a {
+  color: var(--text-color);
+  text-decoration: none;
+  padding: var(--spacing-small) var(--spacing-medium);
+  transition: var(--transition);
+}
+
+nav a:hover {
+  color: var(--primary-color);
+}
+
+/* Hero Section */
+.hero {
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: var(--background-color);
+  text-align: center;
+  padding: calc(var(--spacing-large) * 3) var(--spacing-medium);
+}
+
+.cta-button {
+  display: inline-block;
+  background-color: var(--accent-color);
+  color: var(--background-color);
+  padding: var(--spacing-medium) var(--spacing-large);
+  border-radius: 30px;
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+.cta-button:hover {
+  background-color: darken(var(--accent-color), 10%);
+  transform: translateY(-2px);
+}
+
+/* Services Section */
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-large);
+}
+
+.service-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  padding: var(--spacing-large);
+  box-shadow: var(--box-shadow);
+  transition: var(--transition);
+}
+
+.service-card:hover {
+  transform: translateY(-5px);
+}
+
+.service-card img {
+  max-width: 60px;
+  margin-bottom: var(--spacing-medium);
+}
+
+/* About Section */
+.about {
+  background-color: #f8f8f8;
+  padding: var(--spacing-large) 0;
+}
+
+.usp-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.usp-list li::before {
+  content: "✓";
+  color: var(--secondary-color);
+  margin-right: var(--spacing-small);
+}
+
+/* Case Studies Section */
+.case-study-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--spacing-large);
+}
+
+.case-study-card {
+  background-color: var(--background-color);
+  border-radius: 10px;
+  padding: var(--spacing-large);
+  box-shadow: var(--box-shadow);
+}
+
+/* Contact Form */
+.contact form {
+  display: grid;
+  gap: var(--spacing-medium);
+}
+
+.contact input,
+.contact textarea {
+  width: 100%;
+  padding: var(--spacing-small);
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.contact button {
+  background-color: var(--primary-color);
+  color: var(--background-color);
+  border: none;
+  padding: var(--spacing-medium);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.contact button:hover {
+  background-color: darken(var(--primary-color), 10%);
+}
+
+/* Footer */
+footer {
+  background-color: var(--text-color);
+  color: var(--background-color);
+  text-align: center;
+  padding: var(--spacing-medium);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  nav ul {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  nav li {
+    margin-bottom: var(--spacing-small);
+  }
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: #ffffff;
+    --background-color: #1a1a1a;
+  }
+
+  .service-card,
+  .case-study-card {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Accessibility */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-out;
+}
+
+/* Lazy Loading */
+img.lazy {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+img.lazy.loaded {
+  opacity: 1;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2f50e30
--- /dev/null
+++ b/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KI-Lösungen & Beratung | Ihre Experten für künstliche Intelligenz</title>
+    <meta name="description" content="Professionelle KI-Beratung und maßgeschneiderte Lösungen für Ihr Unternehmen. Steigern Sie Ihre Effizienz mit unserer KI-Expertise.">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="js/main.js" defer></script>
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#services">Services</a></li>
+                <li><a href="#about">Über uns</a></li>
+                <li><a href="#case-studies">Case Studies</a></li>
+                <li><a href="#contact">Kontakt</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section id="home" class="hero">
+            <h1>KI-Lösungen für die Zukunft Ihres Unternehmens</h1>
+            <p>Steigern Sie Ihre Effizienz und Wettbewerbsfähigkeit mit maßgeschneiderten KI-Strategien</p>
+            <a href="#contact" class="cta-button">Jetzt Beratungsgespräch vereinbaren</a>
+        </section>
+
+        <section id="services" class="services">
+            <h2>Unsere Services</h2>
+            <div class="service-grid">
+                <div class="service-card">
+                    <img src="assets/icons/strategy.svg" alt="KI-Strategie Icon">
+                    <h3>KI-Strategie</h3>
+                    <p>Entwicklung individueller KI-Strategien für Ihr Unternehmen</p>
+                </div>
+                <div class="service-card">
+                    <img src="assets/icons/implementation.svg" alt="KI-Implementierung Icon">
+                    <h3>KI-Implementierung</h3>
+                    <p>Nahtlose Integration von KI-Lösungen in Ihre bestehenden Systeme</p>
+                </div>
+                <div class="service-card">
+                    <img src="assets/icons/training.svg" alt="KI-Training Icon">
+                    <h3>KI-Training</h3>
+                    <p>Schulungen und Workshops zur Nutzung von KI-Technologien</p>
+                </div>
+                <div class="service-card">
+                    <img src="assets/icons/analytics.svg" alt="KI-Analytics Icon">
+                    <h3>KI-Analytics</h3>
+                    <p>Datenanalyse und Prognosen mithilfe fortschrittlicher KI-Algorithmen</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="about" class="about">
+            <h2>Über uns</h2>
+            <p>Wir sind Ihr vertrauenswürdiger Partner für innovative KI-Lösungen. Unsere Expertise liegt in der Entwicklung und Implementierung maßgeschneiderter KI-Strategien, die Ihr Unternehmen auf die nächste Stufe heben.</p>
+            <ul class="usp-list">
+                <li>Jahrelange Erfahrung in KI-Technologien</li>
+                <li>Interdisziplinäres Team aus KI-Experten und Branchenspezialisten</li>
+                <li>Fokus auf praxisnahe, skalierbare Lösungen</li>
+                <li>Kontinuierliche Forschung und Innovation im KI-Bereich</li>
+            </ul>
+        </section>
+
+        <section id="case-studies" class="case-studies">
+            <h2>Case Studies</h2>
+            <div class="case-study-grid">
+                <div class="case-study-card">
+                    <h3>Effizienzsteigerung in der Logistik</h3>
+                    <p>Durch den Einsatz unserer KI-gestützten Routenoptimierung konnte ein Logistikunternehmen seine Lieferzeiten um 30% verkürzen und Kraftstoffkosten um 25% senken.</p>
+                </div>
+                <div class="case-study-card">
+                    <h3>Präzise Nachfrageprognose im Einzelhandel</h3>
+                    <p>Unsere KI-basierte Prognoselösung ermöglichte einem Einzelhändler eine Reduzierung von Überbeständen um 40% bei gleichzeitiger Steigerung der Produktverfügbarkeit um 15%.</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="contact" class="contact">
+            <h2>Kontaktieren Sie uns</h2>
+            <form action="/submit-form" method="POST">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">E-Mail</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="company">Unternehmen</label>
+                <input type="text" id="company" name="company">
+
+                <label for="message">Nachricht</label>
+                <textarea id="message" name="message" required></textarea>
+
+                <button type="submit">Nachricht senden</button>
+            </form>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2025 OMG AI Solutions. Alle Rechte vorbehalten.</p>
+    </footer>
+</body>
+</html>