V3

assets/css/custom.css

@@ -813,51 +813,58 @@ body {
 
 /* SOCIAL PROOF SECTION */
 .social-proof-section {
-    padding: var(--space-8) 0;
+    background: #0F1728; /* secondary bg - different from hero */
-    background-color: var(--bg-primary);
+    padding: 80px 48px;
+    text-align: center;
+    border-top: 1px solid rgba(0,245,255,0.1);
+    border-bottom: 1px solid rgba(0,245,255,0.1);
     overflow: hidden;
 }
 
 .social-proof-headline {
-    text-align: center;
+    font: 18px 'Space Grotesk', medium;
-    font-family: var(--font-heading);
+    color: #64748B;
-    font-weight: var(--weight-medium);
+    letter-spacing: 0.05em;
-    color: var(--text-muted);
+    text-transform: uppercase;
-    margin-bottom: var(--space-6);
+    margin-bottom: 48px;
 }
 
 .logo-marquee {
     width: 100%;
-    position: relative;
+    overflow: hidden;
-    -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
-    mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
 }
 
 .logo-track {
     display: flex;
-    width: max-content;
+    gap: 64px;
-    animation: marquee 40s linear infinite;
+    animation: scroll-logos 40s linear infinite;
+}
+
+@keyframes scroll-logos {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+}
+
+.logo-track:hover {
+    animation-play-state: paused;
 }
 
 .logo-item {
-    display: flex;
+    flex-shrink: 0;
-    align-items: center;
+    padding: 24px 32px;
-    justify-content: center;
+    background: rgba(255,255,255,0.02);
-    width: 200px;
+    border: 1px solid rgba(255,255,255,0.05);
-    font-family: var(--font-heading);
+    border-radius: 16px;
-    font-size: var(--text-xl);
+    font-size: 20px;
-    color: var(--text-muted);
+    font-weight: 500;
-    opacity: 0.6;
+    color: #94A3B8;
-    transition: opacity var(--duration-normal), color var(--duration-normal);
+    transition: all 300ms;
-}
-.logo-item:hover {
-    color: var(--text-gray);
-    opacity: 1;
 }
 
-@keyframes marquee {
+.logo-item:hover {
-    from { transform: translateX(0); }
+    background: rgba(255,255,255,0.05);
-    to { transform: translateX(-50%); }
+    color: #FFFFFF;
+    transform: scale(1.05);
 }
 
 /* VALUE PROPOSITION SECTION */
@@ -1576,3 +1583,473 @@ body.menu-open {
         display: block;
     }
 }
+
+/* ------------------------------ */
+/* SUBPAGES */
+/* ------------------------------ */
+
+.page-main {
+    padding-top: 80px; /* mainHeader height */
+}
+
+.page-hero-section {
+    padding: var(--space-12) 0;
+    background-color: var(--bg-secondary);
+    text-align: center;
+    border-bottom: 1px solid rgba(0, 245, 255, 0.1);
+}
+
+.breadcrumb {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-bottom: var(--space-3);
+}
+
+.breadcrumb a {
+    color: var(--text-gray);
+    text-decoration: none;
+    transition: color var(--duration-fast);
+}
+
+.breadcrumb a:hover {
+    color: var(--cyan);
+}
+
+.breadcrumb-separator {
+    color: var(--text-muted);
+}
+
+.page-badge {
+    display: inline-block;
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--purple);
+    border-radius: 50px;
+    color: var(--purple);
+    font-family: var(--font-heading);
+    font-weight: var(--weight-bold);
+    font-size: var(--text-sm);
+    letter-spacing: 1px;
+    margin-bottom: var(--space-3);
+}
+
+.page-headline {
+    font-family: var(--font-heading);
+    font-size: var(--text-5xl);
+    font-weight: var(--weight-bold);
+    color: var(--text-white);
+    line-height: var(--leading-tight);
+    margin-bottom: var(--space-3);
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.page-subtext {
+    font-size: var(--text-xl);
+    line-height: var(--leading-relaxed);
+    color: var(--text-gray);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+
+/* TARGET GROUPS SECTION (fuer-wen.php) */
+.target-groups-section,
+.speed-comparison-section,
+.definition-section,
+.how-ai-works-section,
+.use-cases-section {
+    padding: var(--space-16) 0;
+}
+
+.target-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-6);
+}
+
+.target-card {
+    background: var(--bg-secondary);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 16px;
+    padding: var(--space-6);
+    display: flex;
+    flex-direction: column;
+}
+
+.target-icon {
+    font-size: 48px;
+    margin-bottom: var(--space-4);
+}
+
+.target-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-2xl);
+    font-weight: var(--weight-semibold);
+    color: var(--text-white);
+    margin-bottom: var(--space-2);
+}
+
+.target-description {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--text-gray);
+    flex-grow: 1;
+    margin-bottom: var(--space-4);
+}
+
+.target-benefits h4 {
+    font-size: var(--text-base);
+    font-weight: var(--weight-semibold);
+    color: var(--cyan);
+    margin-bottom: var(--space-2);
+}
+
+.feature-list {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.feature-list li {
+    padding-left: 1.5em;
+    position: relative;
+    color: var(--text-gray);
+}
+
+.feature-list li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--cyan);
+    font-weight: bold;
+}
+
+.target-stat {
+    margin-top: auto;
+    padding-top: var(--space-4);
+    border-top: 1px solid rgba(255,255,255,0.1);
+    text-align: center;
+}
+
+.stat-number {
+    display: block;
+    font-size: var(--text-4xl);
+    font-weight: var(--weight-bold);
+    color: var(--text-white);
+    line-height: 1.1;
+}
+
+.stat-label {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+}
+
+/* SPEED COMPARISON SECTION (warum-jetzt.php) */
+.timeline-bars {
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+}
+
+.timeline-bar {
+    display: grid;
+    grid-template-columns: 150px 1fr 100px;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: var(--text-base);
+}
+
+.bar-label {
+    text-align: right;
+    color: var(--text-gray);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.bar-name {
+    font-weight: var(--weight-semibold);
+    color: var(--text-white);
+}
+
+.bar-badge {
+    font-size: var(--text-xs);
+    font-weight: bold;
+    color: var(--bg-primary);
+    background: var(--cyan);
+    padding: 2px 6px;
+    border-radius: 6px;
+}
+
+.bar-track {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    height: 32px;
+    overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.bar-fill {
+    height: 100%;
+    background: var(--gradient-primary);
+    border-radius: 8px;
+    animation: fill-bar 2s var(--ease-bounce) forwards;
+}
+
+.timeline-bar.bar-fastest .bar-fill {
+    background: var(--gradient-cyan);
+}
+
+@keyframes fill-bar {
+    from { width: 0 !important; }
+    to { /* width is set via inline style */ }
+}
+
+.bar-value {
+    font-weight: var(--weight-bold);
+    color: var(--text-white);
+    font-size: var(--text-lg);
+}
+
+
+/* DEFINITION CARD (was-ist-ki.php) */
+.definition-card {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 64px;
+    background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(168,85,247,0.1));
+    border: 2px solid rgba(0,245,255,0.3);
+    border-radius: 32px;
+    text-align: center;
+}
+.definition-icon {
+    font-size: 80px;
+    margin-bottom: 24px;
+}
+.definition-title {
+    font: 32px 'Space Grotesk', bold;
+    color: #FFFFFF;
+    margin-bottom: 24px;
+}
+.definition-text {
+    font: 24px 'Inter', regular;
+    color: #CBD5E1;
+    line-height: 1.7;
+}
+.definition-text strong {
+    color: #00F5FF;
+    font-weight: 600;
+}
+@media (max-width: 767px) {
+    .definition-card {
+        padding: 40px 32px;
+    }
+    .definition-text {
+        font-size: 20px;
+    }
+}
+
+/* HOW AI WORKS SECTION (was-ist-ki.php) */
+.core-abilities-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-6);
+}
+
+.ability-card {
+    background: var(--bg-secondary);
+    border-radius: 16px;
+    padding: var(--space-6);
+    text-align: center;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.ability-icon {
+    font-size: 48px;
+    margin-bottom: var(--space-3);
+    display: block;
+}
+
+.ability-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-xl);
+    font-weight: var(--weight-semibold);
+    color: var(--text-white);
+    margin-bottom: var(--space-2);
+}
+
+.ability-description {
+    font-size: var(--text-base);
+    color: var(--text-gray);
+    line-height: var(--leading-normal);
+}
+
+/* USE CASES SECTION (einsatzmoeglichkeiten.php) */
+.use-cases-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-6);
+}
+
+.usecase-card {
+    background: var(--bg-secondary);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 16px;
+    padding: var(--space-6);
+    display: flex;
+    flex-direction: column;
+}
+
+.usecase-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-bottom: var(--space-3);
+}
+
+.usecase-icon {
+    font-size: 32px;
+}
+
+.usecase-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-2xl);
+    font-weight: var(--weight-semibold);
+    color: var(--text-white);
+}
+
+.usecase-description {
+    font-style: italic;
+    color: var(--text-gray);
+    margin-bottom: var(--space-4);
+    flex-grow: 1;
+}
+
+.usecase-features {
+    margin-bottom: var(--space-4);
+}
+
+.usecase-features h4 {
+    font-size: var(--text-base);
+    font-weight: var(--weight-semibold);
+    color: var(--cyan);
+    margin-bottom: var(--space-2);
+}
+
+.usecase-features ul {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    font-size: var(--text-sm);
+}
+
+.usecase-features ul li {
+    padding-left: 1.5em;
+    position: relative;
+}
+
+.usecase-features ul li::before {
+    content: '›';
+    position: absolute;
+    left: 0;
+    color: var(--cyan);
+    font-weight: bold;
+}
+
+.usecase-benefits {
+    display: flex;
+    gap: var(--space-4);
+    margin-top: auto;
+    padding-top: var(--space-4);
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.benefit-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.benefit-icon {
+    font-size: 20px;
+}
+
+.benefit-text {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-gray);
+}
+
+.usecase-btn {
+    margin-top: var(--space-4);
+    width: 100%;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: var(--text-white);
+    padding: var(--space-2);
+    border-radius: 12px;
+    font-family: var(--font-heading);
+    font-weight: var(--weight-semibold);
+    transition: all var(--duration-normal);
+}
+
+.usecase-btn:hover {
+    background: var(--cyan);
+    border-color: var(--cyan);
+    color: var(--bg-primary);
+}
+
+
+/* RESPONSIVE ADJUSTMENTS FOR SUBPAGES */
+@media (max-width: 1023px) {
+    .page-headline {
+        font-size: var(--text-4xl);
+    }
+    .page-subtext {
+        font-size: var(--text-lg);
+    }
+
+    .target-cards-grid,
+    .core-abilities-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .use-cases-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 767px) {
+    .page-hero-section {
+        padding: var(--space-8) 0;
+    }
+    .page-headline {
+        font-size: var(--text-3xl);
+    }
+
+    .timeline-bar {
+        grid-template-columns: 100px 1fr;
+        gap: var(--space-2);
+    }
+    .timeline-bar .bar-value {
+        grid-column: 2 / 3;
+        grid-row: 1;
+        justify-self: end;
+        padding-right: var(--space-2);
+        font-size: var(--text-base);
+    }
+}
+

einsatzmoeglichkeiten.php

@@ -0,0 +1,349 @@
+<?php require_once 'includes/lang_loader.php'; ?>
+<!DOCTYPE html>
+<html lang="<?php echo $lang; ?>">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Einsatzmöglichkeiten - Future Now</title>
+    
+    <meta name="description" content="Von Content-Erstellung bis Datenanalyse – entdecken Sie, wo KI Ihrem Unternehmen den größten Mehrwert bietet.">
+    <meta property="og:title" content="Einsatzmöglichkeiten - Future Now">
+    <meta property="og:description" content="Von Content-Erstellung bis Datenanalyse – entdecken Sie, wo KI Ihrem Unternehmen den größten Mehrwert bietet.">
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Einsatzmöglichkeiten - Future Now">
+    <meta name="twitter:description" content="Von Content-Erstellung bis Datenanalyse – entdecken Sie, wo KI Ihrem Unternehmen den größten Mehrwert bietet.">
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    
+    <header id="mainHeader">
+        <div class="inner-container">
+            <div class="logo-container">
+                 <a href="/" class="logo-text">Future Now</a>
+            </div>
+            <nav class="main-nav">
+                <a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
+                <div class="nav-dropdown">
+                    <button class="nav-link active">
+                        <?php echo $t['nav_why_ai']; ?>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="dropdown-menu">
+                        <a href="fuer-wen.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">👥</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="warum-jetzt.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">⚡</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="was-ist-ki.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">🧠</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="einsatzmoeglichkeiten.php" class="dropdown-item active">
+                            <div class="dropdown-item-icon">🚀</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
+                <a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
+                <a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
+                <a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
+            </nav>
+            <div class="header-right">
+                <div class="lang-switcher-container">
+                    <button class="lang-switcher" id="langSwitcherBtn">
+                        <img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
+                        <span><?php echo strtoupper($lang); ?></span>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        <a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
+                        <a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
+                        <a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
+                    </div>
+                </div>
+                <button class="cart-button">
+                    <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="9" cy="21" r="1"></circle>
+                        <circle cx="20" cy="21" r="1"></circle>
+                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                    </svg>
+                </button>
+                <a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
+                <button class="mobile-toggle">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="page-main">
+        <section class="page-hero-section">
+            <div class="container-custom">
+                <div class="breadcrumb">
+                    <a href="/">Home</a>
+                    <span class="breadcrumb-separator">›</span>
+                    <span>Einsatzmöglichkeiten</span>
+                </div>
+                <div class="page-badge">Use Cases</div>
+                <h1 class="page-headline"> Wie Sie <span class="gradient-text">KI</span> in Ihrem Unternehmen einsetzen </h1>
+                <p class="page-subtext"> Von Content-Erstellung bis Datenanalyse – entdecken Sie, wo KI Ihrem Unternehmen den größten Mehrwert bietet. </p>
+            </div>
+        </section>
+
+        <section class="use-cases-section">
+            <div class="container-custom">
+                <div class="use-cases-grid">
+                    <div class="usecase-card">
+                        <div class="usecase-header">
+                            <div class="usecase-icon">✍️</div>
+                            <h3 class="usecase-title">Content-Erstellung & Texte</h3>
+                        </div>
+                        <p class="usecase-description">KI erstellt in Sekunden Texte, die früher Stunden dauerten.</p>
+                        <div class="usecase-features">
+                            <h4>Konkrete Anwendungen:</h4>
+                            <ul>
+                                <li>Blogposts und Artikel automatisch generieren</li>
+                                <li>Social Media Content für Wochen im Voraus</li>
+                                <li>E-Mail-Kampagnen personalisiert schreiben</li>
+                                <li>Produktbeschreibungen in Serie erstellen</li>
+                            </ul>
+                        </div>
+                        <div class="usecase-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">⏱️</span>
+                                <span class="benefit-text">80% Zeitersparnis</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">💰</span>
+                                <span class="benefit-text">Mehr kreativer Output</span>
+                            </div>
+                        </div>
+                        <button class="usecase-btn">Mehr erfahren →</button>
+                    </div>
+                    <div class="usecase-card">
+                        <div class="usecase-header">
+                            <div class="usecase-icon">📈</div>
+                            <h3 class="usecase-title">Marketing & Vertrieb</h3>
+                        </div>
+                        <p class="usecase-description">Erreichen Sie Ihre Kunden gezielter als je zuvor.</p>
+                        <div class="usecase-features">
+                            <h4>Konkrete Anwendungen:</h4>
+                            <ul>
+                                <li>Personalisierte Werbeanzeigen</li>
+                                <li>Automatisierte Lead-Qualifizierung</li>
+                                <li>Preisoptimierung in Echtzeit</li>
+                                <li>Vorhersage von Kündigungsrisiken (Churn Prediction)</li>
+                            </ul>
+                        </div>
+                        <div class="usecase-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">⏱️</span>
+                                <span class="benefit-text">30% mehr qualifizierte Leads</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">💰</span>
+                                <span class="benefit-text">20% höhere Conversion Rate</span>
+                            </div>
+                        </div>
+                        <button class="usecase-btn">Mehr erfahren →</button>
+                    </div>
+                    <div class="usecase-card">
+                        <div class="usecase-header">
+                            <div class="usecase-icon">💬</div>
+                            <h3 class="usecase-title">Kundenservice</h3>
+                        </div>
+                        <p class="usecase-description">Bieten Sie 24/7-Support und steigern Sie die Kundenzufriedenheit.</p>
+                        <div class="usecase-features">
+                            <h4>Konkrete Anwendungen:</h4>
+                            <ul>
+                                <li>Intelligente Chatbots, die 80% der Anfragen lösen</li>
+                                <li>Automatisierte Ticket-Sortierung und -Beantwortung</li>
+                                <li>Sentiment-Analyse von Kundenfeedback</li>
+                                <li>Personalisierte Hilfeartikel und FAQs</li>
+                            </ul>
+                        </div>
+                        <div class="usecase-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">⏱️</span>
+                                <span class="benefit-text">50% schnellere Antwortzeiten</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">💰</span>
+                                <span class="benefit-text">40% weniger Kosten im Support-Team</span>
+                            </div>
+                        </div>
+                        <button class="usecase-btn">Mehr erfahren →</button>
+                    </div>
+                    <div class="usecase-card">
+                        <div class="usecase-header">
+                            <div class="usecase-icon">⚙️</div>
+                            <h3 class="usecase-title">Prozessautomatisierung</h3>
+                        </div>
+                        <p class="usecase-description">Eliminieren Sie repetitive manuelle Aufgaben.</p>
+                        <div class="usecase-features">
+                            <h4>Konkrete Anwendungen:</h4>
+                            <ul>
+                                <li>Automatisierte Dateneingabe und -verarbeitung</li>
+                                <li>Intelligente Dokumentenanalyse (z.B. Verträge, Rechnungen)</li>
+                                <li>Automatisierung von HR-Prozessen (z.B. Bewerber-Screening)</li>
+                                <li>Robotergesteuerte Prozessautomatisierung (RPA)</li>
+                            </ul>
+                        </div>
+                        <div class="usecase-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">⏱️</span>
+                                <span class="benefit-text">90% weniger manuelle Fehler</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">💰</span>
+                                <span class="benefit-text">60% Zeitersparnis bei Admin-Aufgaben</span>
+                            </div>
+                        </div>
+                        <button class="usecase-btn">Mehr erfahren →</button>
+                    </div>
+                    <div class="usecase-card">
+                        <div class="usecase-header">
+                            <div class="usecase-icon">📊</div>
+                            <h3 class="usecase-title">Datenanalyse & Einblicke</h3>
+                        </div>
+                        <p class="usecase-description">Verwandeln Sie Ihre Daten in wertvolle Geschäftseinblicke.</p>
+                        <div class="usecase-features">
+                            <h4>Konkrete Anwendungen:</h4>
+                            <ul>
+                                <li>Vorhersage von Markttrends und Verkaufsprognosen</li>
+                                <li>Analyse von Kundenverhalten und -präferenzen</li>
+                                <li>Aufdeckung von Betrug und Anomalien</li>
+                                <li>Optimierung von Geschäftsstrategien auf Datenbasis</li>
+                            </ul>
+                        </div>
+                        <div class="usecase-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">⏱️</span>
+                                <span class="benefit-text">Schnellere datengestützte Entscheidungen</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">💰</span>
+                                <span class="benefit-text">Aufdeckung neuer Umsatzpotenziale</span>
+                            </div>
+                        </div>
+                        <button class="usecase-btn">Mehr erfahren →</button>
+                    </div>
+                    <div class="usecase-card">
+                        <div class="usecase-header">
+                            <div class="usecase-icon">💡</div>
+                            <h3 class="usecase-title">Produktentwicklung</h3>
+                        </div>
+                        <p class="usecase-description">Entwickeln Sie innovative Produkte und Dienstleistungen.</p>
+                        <div class="usecase-features">
+                            <h4>Konkrete Anwendungen:</h4>
+                            <ul>
+                                <li>Generierung von neuen Produktideen und Designs</li>
+                                <li>Automatisierte Software-Tests und Code-Vervollständigung</li>
+                                <li>Simulation und Optimierung von Prototypen</li>
+                                <li>Personalisierte Produktempfehlungen</li>
+                            </ul>
+                        </div>
+                        <div class="usecase-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">⏱️</span>
+                                <span class="benefit-text">50% schnellere Entwicklungszyklen</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">💰</span>
+                                <span class="benefit-text">Reduzierung der Entwicklungskosten</span>
+                            </div>
+                        </div>
+                        <button class="usecase-btn">Mehr erfahren →</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer id="main-footer">
+        <div class="container-custom">
+            <div class="footer-grid">
+                <!-- Column 1: Company Info -->
+                <div class="footer-column">
+                    <div class="footer-logo">Future Now</div>
+                    <p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
+                    <a href="mailto:info@future-now.online" class="footer-email">
+                        <svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                        info@future-now.online
+                    </a>
+                </div>
+
+                <!-- Column 2: Quick Links -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Quick Links</h4>
+                    <nav class="footer-links">
+                        <a href="fuer-wen.php">Für wen?</a>
+                        <a href="warum-jetzt.php">Warum jetzt?</a>
+                        <a href="was-ist-ki.php">Was ist KI?</a>
+                        <a href="einsatzmoeglichkeiten.php">Einsatz</a>
+                    </nav>
+                </div>
+
+                <!-- Column 3: Legal -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Rechtliches</h4>
+                    <nav class="footer-links">
+                        <a href="/impressum">Impressum</a>
+                        <a href="/datenschutz">Datenschutz</a>
+                        <a href="#cookies">Cookie-Einstellungen</a>
+                    </nav>
+                </div>
+
+                <!-- Column 4: Newsletter -->
+                <div class="footer-column" id="newsletter">
+                    <h4 class="footer-heading">KI-Updates erhalten</h4>
+                    <p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
+                    <form id="newsletterForm" class="newsletter-form">
+                        <input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
+                        <button type="submit">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                            </svg>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
+                <div class="social-links">
+                    <a href="#" aria-label="LinkedIn">L</a>
+                    <a href="#" aria-label="Xing">X</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>

fuer-wen.php

@@ -0,0 +1,245 @@
+<?php require_once 'includes/lang_loader.php'; ?>
+<!DOCTYPE html>
+<html lang="<?php echo $lang; ?>">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Für wen ist KI? - Future Now</title>
+    
+    <meta name="description" content="Entdecken Sie, wie Ihr Unternehmen – unabhängig von Größe oder Branche – von intelligenter Automatisierung profitieren kann.">
+    <meta property="og:title" content="Für wen ist KI? - Future Now">
+    <meta property="og:description" content="Entdecken Sie, wie Ihr Unternehmen – unabhängig von Größe oder Branche – von intelligenter Automatisierung profitieren kann.">
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Für wen ist KI? - Future Now">
+    <meta name="twitter:description" content="Entdecken Sie, wie Ihr Unternehmen – unabhängig von Größe oder Branche – von intelligenter Automatisierung profitieren kann.">
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    
+    <header id="mainHeader">
+        <div class="inner-container">
+            <div class="logo-container">
+                <a href="/" class="logo-text">Future Now</a>
+            </div>
+            <nav class="main-nav">
+                <a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
+                <div class="nav-dropdown">
+                    <button class="nav-link active">
+                        <?php echo $t['nav_why_ai']; ?>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="dropdown-menu">
+                        <a href="fuer-wen.php" class="dropdown-item active">
+                            <div class="dropdown-item-icon">👥</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="warum-jetzt.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">⚡</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="was-ist-ki.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">🧠</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="einsatzmoeglichkeiten.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">🚀</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
+                <a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
+                <a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
+                <a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
+            </nav>
+            <div class="header-right">
+                <div class="lang-switcher-container">
+                    <button class="lang-switcher" id="langSwitcherBtn">
+                        <img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
+                        <span><?php echo strtoupper($lang); ?></span>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        <a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
+                        <a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
+                        <a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
+                    </div>
+                </div>
+                <button class="cart-button">
+                    <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="9" cy="21" r="1"></circle>
+                        <circle cx="20" cy="21" r="1"></circle>
+                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                    </svg>
+                </button>
+                <a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
+                <button class="mobile-toggle">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="page-main">
+        <section class="page-hero-section">
+            <div class="container-custom">
+                <div class="breadcrumb">
+                    <a href="/">Home</a>
+                    <span class="breadcrumb-separator">›</span>
+                    <span>Für wen ist KI?</span>
+                </div>
+                <div class="page-badge">Zielgruppen</div>
+                <h1 class="page-headline"> Für wen ist <span class="gradient-text">Künstliche Intelligenz</span>? </h1>
+                <p class="page-subtext"> KI ist nicht nur für Tech-Konzerne. Entdecken Sie, wie Ihr Unternehmen – unabhängig von Größe oder Branche – von intelligenter Automatisierung profitieren kann. </p>
+            </div>
+        </section>
+
+        <section class="target-groups-section">
+            <div class="container-custom">
+                <div class="section-header">
+                    <h2 class="section-title">Wer profitiert von KI?</h2>
+                    <p class="section-description"> Drei Hauptgruppen, für die KI einen unmittelbaren Mehrwert bietet </p>
+                </div>
+                <div class="target-cards-grid">
+                    <div class="target-card">
+                        <div class="target-icon">💼</div>
+                        <h3 class="target-title">Selbständige & Freelancer</h3>
+                        <p class="target-description"> Als Einzelkämpfer müssen Sie alles selbst erledigen. KI gibt Ihnen die Superkraft eines ganzen Teams. </p>
+                        <div class="target-benefits">
+                            <h4>Ihre Vorteile:</h4>
+                            <ul class="feature-list">
+                                <li>Automatische Angebotserstellung in Minuten statt Stunden</li>
+                                <li>24/7 Kundenservice ohne zusätzliche Kosten</li>
+                                <li>Social Media Content auf Knopfdruck</li>
+                                <li>Zeit für Akquise statt Administration</li>
+                            </ul>
+                        </div>
+                        <div class="target-stat">
+                            <span class="stat-number">15h</span>
+                            <span class="stat-label">pro Woche mehr Zeit für Ihr Kerngeschäft</span>
+                        </div>
+                    </div>
+                    <div class="target-card">
+                        <div class="target-icon">🏢</div>
+                        <h3 class="target-title">Kleine & mittlere Unternehmen (KMU)</h3>
+                        <p class="target-description"> Bleiben Sie wettbewerbsfähig und optimieren Sie Ihre Prozesse, ohne riesige Teams einstellen zu müssen. </p>
+                        <div class="target-benefits">
+                            <h4>Ihre Vorteile:</h4>
+                            <ul class="feature-list">
+                                <li>Automatisierte Rechnungsverarbeitung und Buchhaltung</li>
+                                <li>Intelligente Lagerverwaltung und Logistik</li>
+                                <li>Personalisierte Marketing-Kampagnen</li>
+                                <li>Effizientere Ressourceneinsatzplanung</li>
+                            </ul>
+                        </div>
+                        <div class="target-stat">
+                            <span class="stat-number">40%</span>
+                            <span class="stat-label">Kostenreduktion bei repetitiven Verwaltungsaufgaben</span>
+                        </div>
+                    </div>
+                    <div class="target-card">
+                        <div class="target-icon">🌍</div>
+                        <h3 class="target-title">Große Unternehmen & Konzerne</h3>
+                        <p class="target-description"> Skalieren Sie Ihre Operationen, analysieren Sie riesige Datenmengen und entdecken Sie neue Geschäftsfelder. </p>
+                        <div class="target-benefits">
+                            <h4>Ihre Vorteile:</h4>
+                            <ul class="feature-list">
+                                <li>Big-Data-Analyse für strategische Entscheidungen</li>
+                                <li>Vorausschauende Wartung (Predictive Maintenance)</li>
+                                <li>Optimierung von Lieferketten in Echtzeit</li>
+                                <li>Entwicklung neuer, datengesteuerter Produkte und Services</li>
+                            </ul>
+                        </div>
+                        <div class="target-stat">
+                            <span class="stat-number">25%</span>
+                            <span class="stat-label">Effizienzsteigerung in der gesamten Wertschöpfungskette</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer id="main-footer">
+        <div class="container-custom">
+            <div class="footer-grid">
+                <!-- Column 1: Company Info -->
+                <div class="footer-column">
+                    <div class="footer-logo">Future Now</div>
+                    <p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
+                    <a href="mailto:info@future-now.online" class="footer-email">
+                        <svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                        info@future-now.online
+                    </a>
+                </div>
+
+                <!-- Column 2: Quick Links -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Quick Links</h4>
+                    <nav class="footer-links">
+                        <a href="fuer-wen.php">Für wen?</a>
+                        <a href="warum-jetzt.php">Warum jetzt?</a>
+                        <a href="was-ist-ki.php">Was ist KI?</a>
+                        <a href="einsatzmoeglichkeiten.php">Einsatz</a>
+                    </nav>
+                </div>
+
+                <!-- Column 3: Legal -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Rechtliches</h4>
+                    <nav class="footer-links">
+                        <a href="/impressum">Impressum</a>
+                        <a href="/datenschutz">Datenschutz</a>
+                        <a href="#cookies">Cookie-Einstellungen</a>
+                    </nav>
+                </div>
+
+                <!-- Column 4: Newsletter -->
+                <div class="footer-column" id="newsletter">
+                    <h4 class="footer-heading">KI-Updates erhalten</h4>
+                    <p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
+                    <form id="newsletterForm" class="newsletter-form">
+                        <input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
+                        <button type="submit">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                            </svg>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
+                <div class="social-links">
+                    <a href="#" aria-label="LinkedIn">L</a>
+                    <a href="#" aria-label="Xing">X</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>

index.php

@@ -34,28 +34,28 @@
                         <span class="chevron">▼</span>
                     </button>
                     <div class="dropdown-menu">
-                        <a href="#fuer-wen" class="dropdown-item">
+                        <a href="fuer-wen.php" class="dropdown-item">
                             <div class="dropdown-item-icon">👥</div>
                             <div class="dropdown-item-text">
                                 <span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
                                 <span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
                             </div>
                         </a>
-                        <a href="#warum-jetzt" class="dropdown-item">
+                        <a href="warum-jetzt.php" class="dropdown-item">
                             <div class="dropdown-item-icon">⚡</div>
                             <div class="dropdown-item-text">
                                 <span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
                                 <span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
                             </div>
                         </a>
-                        <a href="#was-ist-ki" class="dropdown-item">
+                        <a href="was-ist-ki.php" class="dropdown-item">
                             <div class="dropdown-item-icon">🧠</div>
                             <div class="dropdown-item-text">
                                 <span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
                                 <span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
                             </div>
                         </a>
-                        <a href="#einsatz" class="dropdown-item">
+                        <a href="einsatzmoeglichkeiten.php" class="dropdown-item">
                             <div class="dropdown-item-icon">🚀</div>
                             <div class="dropdown-item-text">
                                 <span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
@@ -115,9 +115,10 @@
                         <span class="toggle-icon">▼</span>
                     </button>
                     <div class="mobile-subsection">
-                         <a href="#fuer-wen" class="mobile-subnav-link">Für wen ist KI?</a>
+                         <a href="fuer-wen.php" class="mobile-subnav-link">Für wen ist KI?</a>
-                         <a href="#warum-jetzt" class="mobile-subnav-link">Warum jetzt handeln?</a>
+                         <a href="warum-jetzt.php" class="mobile-subnav-link">Warum jetzt handeln?</a>
-                         <a href="#was-ist-ki" class="mobile-subnav-link">Was ist KI?</a>
+                         <a href="was-ist-ki.php" class="mobile-subnav-link">Was ist KI?</a>
+                         <a href="einsatzmoeglichkeiten.php" class="mobile-subnav-link">Einsatzmöglichkeiten</a>
                     </div>
                 </div>
 
@@ -208,28 +209,27 @@
 
         <!-- SOCIAL PROOF SECTION -->
         <section id="social-proof" class="social-proof-section">
-            <div class="container-fluid">
+            <p class="social-proof-headline"> Vertraut von 500+ deutschen Unternehmen </p>
-                <p class="social-proof-headline">Über 500+ Unternehmen vertrauen uns bereits</p>
+            <div class="logo-marquee">
-                <div class="logo-marquee">
+                <div class="logo-track">
-                    <div class="logo-track">
+                    <!-- Duplicate logos twice for seamless loop -->
-                        <div class="logo-item">Unternehmen A</div>
+                    <div class="logo-item">TechCorp</div>
-                        <div class="logo-item">Startup B</div>
+                    <div class="logo-item">InnovateLabs</div>
-                        <div class="logo-item">Kanzlei C</div>
+                    <div class="logo-item">FutureWorks</div>
-                        <div class="logo-item">Praxis D</div>
+                    <div class="logo-item">DataFlow</div>
-                        <div class="logo-item">Handwerk E</div>
+                    <div class="logo-item">SmartSolutions</div>
-                        <div class="logo-item">Agentur F</div>
+                    <div class="logo-item">AIVentures</div>
-                        <div class="logo-item">Beratung G</div>
+                    <div class="logo-item">CloudSync</div>
-                        <div class="logo-item">Konzern H</div>
+                    <div class="logo-item">AutomateHub</div>
-                        <!-- Repeat for seamless loop -->
+                    <!-- Duplicate set for seamless loop -->
-                        <div class="logo-item">Unternehmen A</div>
+                    <div class="logo-item">TechCorp</div>
-                        <div class="logo-item">Startup B</div>
+                    <div class="logo-item">InnovateLabs</div>
-                        <div class="logo-item">Kanzlei C</div>
+                    <div class="logo-item">FutureWorks</div>
-                        <div class="logo-item">Praxis D</div>
+                    <div class="logo-item">DataFlow</div>
-                        <div class="logo-item">Handwerk E</div>
+                    <div class="logo-item">SmartSolutions</div>
-                        <div class="logo-item">Agentur F</div>
+                    <div class="logo-item">AIVentures</div>
-                        <div class="logo-item">Beratung G</div>
+                    <div class="logo-item">CloudSync</div>
-                        <div class="logo-item">Konzern H</div>
+                    <div class="logo-item">AutomateHub</div>
-                    </div>
                 </div>
             </div>
         </section>
@@ -352,8 +352,10 @@
                 <div class="footer-column">
                     <h4 class="footer-heading">Quick Links</h4>
                     <nav class="footer-links">
-                        <a href="#fuer-wen">Für wen?</a>
+                        <a href="fuer-wen.php">Für wen?</a>
-                        <a href="#warum-jetzt">Warum jetzt?</a>
+                        <a href="warum-jetzt.php">Warum jetzt?</a>
+                        <a href="was-ist-ki.php">Was ist KI?</a>
+                        <a href="einsatzmoeglichkeiten.php">Einsatz</a>
                         <a href="#ki-check">KI-Check</a>
                         <a href="#blog">Blog</a>
                     </nav>

warum-jetzt.php

@@ -0,0 +1,237 @@
+<?php require_once 'includes/lang_loader.php'; ?>
+<!DOCTYPE html>
+<html lang="<?php echo $lang; ?>">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Warum jetzt handeln? - Future Now</title>
+    
+    <meta name="description" content="Die KI-Revolution läuft bereits. Unternehmen, die heute handeln, gewinnen morgen Märkte. Wer wartet, riskiert den Anschluss zu verlieren.">
+    <meta property="og:title" content="Warum jetzt handeln? - Future Now">
+    <meta property="og:description" content="Die KI-Revolution läuft bereits. Unternehmen, die heute handeln, gewinnen morgen Märkte. Wer wartet, riskiert den Anschluss zu verlieren.">
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Warum jetzt handeln? - Future Now">
+    <meta name="twitter:description" content="Die KI-Revolution läuft bereits. Unternehmen, die heute handeln, gewinnen morgen Märkte. Wer wartet, riskiert den Anschluss zu verlieren.">
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    
+    <header id="mainHeader">
+        <div class="inner-container">
+            <div class="logo-container">
+                 <a href="/" class="logo-text">Future Now</a>
+            </div>
+            <nav class="main-nav">
+                <a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
+                <div class="nav-dropdown">
+                    <button class="nav-link active">
+                        <?php echo $t['nav_why_ai']; ?>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="dropdown-menu">
+                        <a href="fuer-wen.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">👥</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="warum-jetzt.php" class="dropdown-item active">
+                            <div class="dropdown-item-icon">⚡</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="was-ist-ki.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">🧠</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="einsatzmoeglichkeiten.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">🚀</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
+                <a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
+                <a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
+                <a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
+            </nav>
+            <div class="header-right">
+                <div class="lang-switcher-container">
+                    <button class="lang-switcher" id="langSwitcherBtn">
+                        <img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
+                        <span><?php echo strtoupper($lang); ?></span>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        <a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
+                        <a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
+                        <a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
+                    </div>
+                </div>
+                <button class="cart-button">
+                    <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="9" cy="21" r="1"></circle>
+                        <circle cx="20" cy="21" r="1"></circle>
+                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                    </svg>
+                </button>
+                <a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
+                <button class="mobile-toggle">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="page-main">
+        <section class="page-hero-section">
+            <div class="container-custom">
+                <div class="breadcrumb">
+                    <a href="/">Home</a>
+                    <span class="breadcrumb-separator">›</span>
+                    <span>Warum jetzt handeln?</span>
+                </div>
+                <div class="page-badge">Dringlichkeit</div>
+                <h1 class="page-headline"> Warum <span class="gradient-text">jetzt</span> der richtige Zeitpunkt ist </h1>
+                <p class="page-subtext"> Die KI-Revolution läuft bereits. Unternehmen, die heute handeln, gewinnen morgen Märkte. Wer wartet, riskiert den Anschluss zu verlieren. </p>
+            </div>
+        </section>
+
+        <section class="speed-comparison-section">
+            <div class="container-custom">
+                <div class="section-header">
+                    <h2 class="section-title">Zeit bis 1 Mio. Nutzer</h2>
+                    <p class="section-description"> Vollkommen neue Dynamik – KI beschleunigt alles </p>
+                </div>
+                <div class="timeline-bars">
+                    <div class="timeline-bar bar-fastest">
+                        <div class="bar-label">
+                            <span class="bar-name">ChatGPT</span>
+                            <span class="bar-badge">KI-ERA</span>
+                        </div>
+                        <div class="bar-track">
+                            <div class="bar-fill" style="width: 100%"></div>
+                        </div>
+                        <div class="bar-value">5 Tage</div>
+                    </div>
+                    <div class="timeline-bar">
+                        <div class="bar-label">
+                            <span class="bar-name">Instagram</span>
+                        </div>
+                        <div class="bar-track">
+                            <div class="bar-fill" style="width: 85%"></div>
+                        </div>
+                        <div class="bar-value">75 Tage</div>
+                    </div>
+                    <div class="timeline-bar">
+                        <div class="bar-label">
+                            <span class="bar-name">Spotify</span>
+                        </div>
+                        <div class="bar-track">
+                            <div class="bar-fill" style="width: 70%"></div>
+                        </div>
+                        <div class="bar-value">150 Tage</div>
+                    </div>
+                    <div class="timeline-bar">
+                        <div class="bar-label">
+                            <span class="bar-name">Dropbox</span>
+                        </div>
+                        <div class="bar-track">
+                            <div class="bar-fill" style="width: 55%"></div>
+                        </div>
+                        <div class="bar-value">210 Tage</div>
+                    </div>
+                    <div class="timeline-bar">
+                        <div class="bar-label">
+                            <span class="bar-name">Netflix</span>
+                        </div>
+                        <div class="bar-track">
+                            <div class="bar-fill" style="width: 10%"></div>
+                        </div>
+                        <div class="bar-value">3.5 Jahre</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer id="main-footer">
+        <div class="container-custom">
+            <div class="footer-grid">
+                <!-- Column 1: Company Info -->
+                <div class="footer-column">
+                    <div class="footer-logo">Future Now</div>
+                    <p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
+                    <a href="mailto:info@future-now.online" class="footer-email">
+                        <svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                        info@future-now.online
+                    </a>
+                </div>
+
+                <!-- Column 2: Quick Links -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Quick Links</h4>
+                    <nav class="footer-links">
+                        <a href="fuer-wen.php">Für wen?</a>
+                        <a href="warum-jetzt.php">Warum jetzt?</a>
+                        <a href="was-ist-ki.php">Was ist KI?</a>
+                        <a href="einsatzmoeglichkeiten.php">Einsatz</a>
+                    </nav>
+                </div>
+
+                <!-- Column 3: Legal -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Rechtliches</h4>
+                    <nav class="footer-links">
+                        <a href="/impressum">Impressum</a>
+                        <a href="/datenschutz">Datenschutz</a>
+                        <a href="#cookies">Cookie-Einstellungen</a>
+                    </nav>
+                </div>
+
+                <!-- Column 4: Newsletter -->
+                <div class="footer-column" id="newsletter">
+                    <h4 class="footer-heading">KI-Updates erhalten</h4>
+                    <p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
+                    <form id="newsletterForm" class="newsletter-form">
+                        <input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
+                        <button type="submit">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                            </svg>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
+                <div class="social-links">
+                    <a href="#" aria-label="LinkedIn">L</a>
+                    <a href="#" aria-label="Xing">X</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>

was-ist-ki.php

@@ -0,0 +1,217 @@
+<?php require_once 'includes/lang_loader.php'; ?>
+<!DOCTYPE html>
+<html lang="<?php echo $lang; ?>">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Was ist KI? - Future Now</title>
+    
+    <meta name="description" content="KI einfach erklärt – ohne Fachjargon. Verstehen Sie, wie Künstliche Intelligenz funktioniert und warum sie Ihr Unternehmen voranbringt.">
+    <meta property="og:title" content="Was ist KI? - Future Now">
+    <meta property="og:description" content="KI einfach erklärt – ohne Fachjargon. Verstehen Sie, wie Künstliche Intelligenz funktioniert und warum sie Ihr Unternehmen voranbringt.">
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Was ist KI? - Future Now">
+    <meta name="twitter:description" content="KI einfach erklärt – ohne Fachjargon. Verstehen Sie, wie Künstliche Intelligenz funktioniert und warum sie Ihr Unternehmen voranbringt.">
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    
+    <header id="mainHeader">
+        <div class="inner-container">
+            <div class="logo-container">
+                 <a href="/" class="logo-text">Future Now</a>
+            </div>
+            <nav class="main-nav">
+                <a href="/" class="nav-link"><?php echo $t['nav_home']; ?></a>
+                <div class="nav-dropdown">
+                    <button class="nav-link active">
+                        <?php echo $t['nav_why_ai']; ?>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="dropdown-menu">
+                        <a href="fuer-wen.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">👥</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="warum-jetzt.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">⚡</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="was-ist-ki.php" class="dropdown-item active">
+                            <div class="dropdown-item-icon">🧠</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
+                            </div>
+                        </a>
+                        <a href="einsatzmoeglichkeiten.php" class="dropdown-item">
+                            <div class="dropdown-item-icon">🚀</div>
+                            <div class="dropdown-item-text">
+                                <span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
+                                <span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
+                <a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
+                <a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
+                <a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
+            </nav>
+            <div class="header-right">
+                <div class="lang-switcher-container">
+                    <button class="lang-switcher" id="langSwitcherBtn">
+                        <img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
+                        <span><?php echo strtoupper($lang); ?></span>
+                        <span class="chevron">▼</span>
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        <a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
+                        <a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
+                        <a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
+                    </div>
+                </div>
+                <button class="cart-button">
+                    <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="9" cy="21" r="1"></circle>
+                        <circle cx="20" cy="21" r="1"></circle>
+                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                    </svg>
+                </button>
+                <a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
+                <button class="mobile-toggle">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="page-main">
+        <section class="page-hero-section">
+            <div class="container-custom">
+                <div class="breadcrumb">
+                    <a href="/">Home</a>
+                    <span class="breadcrumb-separator">›</span>
+                    <span>Was ist KI?</span>
+                </div>
+                <div class="page-badge">Grundlagen</div>
+                <h1 class="page-headline"> Was ist <span class="gradient-text">Künstliche Intelligenz</span>? </h1>
+                <p class="page-subtext"> KI einfach erklärt – ohne Fachjargon. Verstehen Sie, wie Künstliche Intelligenz funktioniert und warum sie Ihr Unternehmen voranbringt. </p>
+            </div>
+        </section>
+
+        <section class="definition-section">
+            <div class="container-custom">
+                <div class="definition-card">
+                    <div class="definition-icon">🧠</div>
+                    <h2 class="definition-title">KI in einem Satz</h2>
+                    <p class="definition-text"> Künstliche Intelligenz ist Software, die <strong>lernt, Muster zu erkennen</strong> und <strong>selbstständig Entscheidungen zu treffen</strong> – ähnlich wie ein menschliches Gehirn, nur schneller und ohne müde zu werden. </p>
+                </div>
+            </div>
+        </section>
+
+        <section class="how-ai-works-section">
+            <div class="container-custom">
+                <div class="section-header">
+                    <h2 class="section-title">Die drei Kernfähigkeiten von KI</h2>
+                    <p class="section-description">Künstliche Intelligenz basiert auf drei grundlegenden Fähigkeiten, die zusammenarbeiten.</p>
+                </div>
+                <div class="core-abilities-grid">
+                    <div class="ability-card">
+                        <div class="ability-icon">📚</div>
+                        <h3 class="ability-title">Daten verstehen (Lernen)</h3>
+                        <p class="ability-description">KI-Systeme werden mit riesigen Datenmengen trainiert. Sie lernen, Muster, Zusammenhänge und Merkmale in den Daten zu erkennen, ähnlich wie ein Mensch durch Erfahrung lernt.</p>
+                    </div>
+                    <div class="ability-card">
+                        <div class="ability-icon">💡</div>
+                        <h3 class="ability-title">Schlussfolgern & Vorhersagen (Denken)</h3>
+                        <p class="ability-description">Basierend auf den gelernten Mustern kann die KI logische Schlussfolgerungen ziehen, Fragen beantworten, Probleme lösen und präzise Vorhersagen über zukünftige Ereignisse treffen.</p>
+                    </div>
+                    <div class="ability-card">
+                        <div class="ability-icon">⚙️</div>
+                        <h3 class="ability-title">Aufgaben ausführen (Handeln)</h3>
+                        <p class="ability-description">Nach dem 'Denken' kann die KI handeln: Sie generiert Texte, erstellt Bilder, steuert Maschinen, automatisiert Prozesse oder interagiert mit Benutzern in natürlicher Sprache.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <footer id="main-footer">
+        <div class="container-custom">
+            <div class="footer-grid">
+                <!-- Column 1: Company Info -->
+                <div class="footer-column">
+                    <div class="footer-logo">Future Now</div>
+                    <p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
+                    <a href="mailto:info@future-now.online" class="footer-email">
+                        <svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                        info@future-now.online
+                    </a>
+                </div>
+
+                <!-- Column 2: Quick Links -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Quick Links</h4>
+                    <nav class="footer-links">
+                        <a href="fuer-wen.php">Für wen?</a>
+                        <a href="warum-jetzt.php">Warum jetzt?</a>
+                        <a href="was-ist-ki.php">Was ist KI?</a>
+                        <a href="einsatzmoeglichkeiten.php">Einsatz</a>
+                    </nav>
+                </div>
+
+                <!-- Column 3: Legal -->
+                <div class="footer-column">
+                    <h4 class="footer-heading">Rechtliches</h4>
+                    <nav class="footer-links">
+                        <a href="/impressum">Impressum</a>
+                        <a href="/datenschutz">Datenschutz</a>
+                        <a href="#cookies">Cookie-Einstellungen</a>
+                    </nav>
+                </div>
+
+                <!-- Column 4: Newsletter -->
+                <div class="footer-column" id="newsletter">
+                    <h4 class="footer-heading">KI-Updates erhalten</h4>
+                    <p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
+                    <form id="newsletterForm" class="newsletter-form">
+                        <input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
+                        <button type="submit">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                            </svg>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p class="copyright">&copy; <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
+                <div class="social-links">
+                    <a href="#" aria-label="LinkedIn">L</a>
+                    <a href="#" aria-label="Xing">X</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>