V4

assets/css/custom.css

@@ -1998,58 +1998,632 @@ body.menu-open {
     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;
+/* QUESTIONNAIRE (KI-CHECK.PHP) */
-    font-family: var(--font-heading);
+/* ------------------------------ */
-    font-weight: var(--weight-semibold);
+
-    transition: all var(--duration-normal);
+.questionnaire-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: var(--space-6) var(--space-4);
+    min-height: calc(100vh - 80px); /* Adjust for header */
+    display: flex;
+    flex-direction: column;
 }
 
-.usecase-btn:hover {
+.welcome-screen, .question-screen, .completion-screen {
-    background: var(--cyan);
+    display: none;
-    border-color: var(--cyan);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.welcome-screen.active, .question-screen.active, .completion-screen.active {
+    display: flex;
+}
+
+.fade-in {
+    animation: fade-in 0.5s var(--ease-smooth) forwards;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Welcome Screen */
+.welcome-content {
+    max-width: 700px;
+    text-align: center;
+}
+
+.welcome-badge {
+    display: inline-block;
+    padding: 8px 20px;
+    background: var(--gradient-primary);
+    border-radius: 50px;
+    font: 14px var(--font-heading), bold, uppercase;
     color: var(--bg-primary);
+    letter-spacing: 0.1em;
+    margin-bottom: 32px;
+}
+
+.welcome-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-5xl);
+    font-weight: var(--weight-bold);
+    color: var(--text-white);
+    line-height: 1.2;
+    margin-bottom: 24px;
+}
+
+.welcome-description {
+    font-size: var(--text-xl);
+    color: var(--text-gray);
+    line-height: 1.6;
+    margin-bottom: 48px;
+}
+
+.welcome-benefits {
+    display: flex;
+    gap: 32px;
+    justify-content: center;
+    margin-bottom: 48px;
+    flex-wrap: wrap;
+}
+
+.benefit-item .benefit-icon {
+    margin-right: 8px;
+    color: var(--cyan);
+}
+
+.btn-start {
+    font-family: var(--font-heading);
+    font-weight: var(--weight-bold);
+    font-size: 18px;
+    color: var(--bg-primary);
+    background: var(--gradient-cyan);
+    padding: 16px 48px;
+    border-radius: 50px;
+    border: none;
+    cursor: pointer;
+    transition: all var(--duration-normal);
+    text-decoration: none;
+    display: inline-flex;
+}
+
+.btn-start:hover {
+    filter: brightness(1.1);
+    transform: scale(1.05);
+    box-shadow: 0 4px 20px rgba(0, 245, 255, 0.3);
+}
+
+.welcome-note {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-top: 24px;
+}
+
+/* Progress Bar */
+.progress-container {
+    width: 100%;
+    padding: var(--space-3) 0;
+    margin-bottom: var(--space-6);
+    text-align: center;
+}
+
+.progress-bar {
+    height: 8px;
+    background-color: var(--bg-tertiary);
+    border-radius: 4px;
+    width: 0;
+    transition: width var(--duration-normal) var(--ease-smooth);
+    background-image: var(--gradient-primary);
+}
+
+.progress-text {
+    font-family: var(--font-heading);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-top: var(--space-1);
+    font-weight: var(--weight-medium);
+}
+
+/* Question Screen */
+.question-header {
+    width: 100%;
+    text-align: left;
+    margin-bottom: var(--space-4);
+}
+
+.section-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-base);
+    font-weight: var(--weight-bold);
+    color: var(--purple);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.question-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-3xl);
+    font-weight: var(--weight-semibold);
+    color: var(--text-white);
+    margin-top: var(--space-1);
+}
+
+.options-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+    width: 100%;
+}
+
+.option {
+    padding: var(--space-3);
+    background: var(--bg-secondary);
+    border: 1px solid var(--bg-tertiary);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-smooth);
+    font-size: var(--text-lg);
+}
+
+.option:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--cyan);
+    transform: translateX(10px);
+}
+
+.option.selected {
+    background: var(--gradient-primary);
+    color: var(--bg-primary);
+    font-weight: var(--weight-bold);
+    border-color: transparent;
+}
+
+.textarea-option {
+    width: 100%;
+    min-height: 150px;
+    padding: var(--space-3);
+    background: var(--bg-secondary);
+    border: 1px solid var(--bg-tertiary);
+    border-radius: 12px;
+    font-family: var(--font-body);
+    font-size: var(--text-lg);
+    color: var(--text-white);
+    resize: vertical;
+}
+
+.textarea-option:focus {
+    outline: none;
+    border-color: var(--cyan);
+    box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2);
+}
+
+/* Navigation */
+.navigation-buttons {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: var(--space-6);
+    border-top: 1px solid var(--bg-tertiary);
+    padding-top: var(--space-4);
+}
+
+.btn-prev, .btn-next {
+    font-family: var(--font-heading);
+    font-weight: var(--weight-bold);
+    font-size: 16px;
+    padding: 12px 32px;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all var(--duration-normal);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn-next {
+    background: var(--gradient-primary);
+    color: var(--bg-primary);
+    border: none;
+}
+
+.btn-next:hover {
+    filter: brightness(1.1);
+}
+
+.btn-prev {
+    background: transparent;
+    border: 1px solid var(--text-muted);
+    color: var(--text-muted);
+}
+
+.btn-prev:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-white);
+    border-color: var(--text-white);
+}
+
+/* Completion Screen */
+.email-capture-content, .thank-you-content {
+    text-align: center;
+    max-width: 700px;
+}
+
+#email-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    margin-top: var(--space-6);
+    width: 100%;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#email-input {
+    font-family: var(--font-body);
+    font-size: 18px;
+    padding: 16px 24px;
+    border-radius: 12px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--bg-tertiary);
+    color: var(--text-white);
+    text-align: center;
+}
+
+#email-input:focus {
+    outline: none;
+    border-color: var(--cyan);
+    box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2);
+}
+
+.consent-container {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    text-align: left;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+}
+
+.consent-container input {
+    margin-top: 4px;
+    flex-shrink: 0;
+}
+
+.consent-container a {
+    color: var(--cyan);
+    text-decoration: none;
+}
+
+.consent-container a:hover {
+    text-decoration: underline;
 }
 
 
-/* RESPONSIVE ADJUSTMENTS FOR SUBPAGES */
+}
-@media (max-width: 1023px) {
+
+/* --- QUESTIONNAIRE STYLES --- */
+.questionnaire-container {
+    min-height: 100vh;
+    background: #0A0E1A;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow-x: hidden;
+}
+
+.welcome-screen {
+    min-height: 100vh;
+    padding: 120px 48px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.welcome-screen.active {
+    display: flex;
+}
+
+.welcome-content {
+    max-width: 700px;
+}
+
+.welcome-badge {
+    display: inline-block;
+    padding: 8px 20px;
+    background: var(--gradient-primary);
+    border-radius: 50px;
+    font: 14px 'Space Grotesk', bold, uppercase;
+    color: #0A0E1A;
+    letter-spacing: 0.1em;
+    margin-bottom: 32px;
+}
+
+.welcome-title {
+    font: 56px 'Space Grotesk', bold;
+    color: #FFFFFF;
+    line-height: 1.2;
+    margin-bottom: 24px;
+}
+
+.welcome-description {
+    font: 20px 'Inter', regular;
+    color: #CBD5E1;
+    line-height: 1.6;
+    margin-bottom: 48px;
+}
+
+.welcome-benefits {
+    display: flex;
+    gap: 32px;
+    justify-content: center;
+    margin-bottom: 48px;
+    flex-wrap: wrap;
+}
+
+.welcome-benefits .benefit-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font: 16px 'Inter', medium;
+    color: var(--text-gray);
+}
+
+.welcome-benefits .benefit-item span:first-child {
+    color: var(--cyan);
+}
+
+.btn-start {
+    font-family: var(--font-heading);
+    font-weight: var(--weight-bold);
+    border-radius: 50px;
+    padding: var(--space-2) var(--space-6);
+    font-size: var(--text-lg);
+    background: var(--gradient-primary);
+    color: var(--text-white);
+    border: none;
+    cursor: pointer;
+    transition: all var(--duration-normal) var(--ease-smooth);
+    margin-bottom: 24px;
+}
+
+.btn-start:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
+}
+
+.welcome-note {
+    font-size: 14px;
+    color: var(--text-muted);
+}
+
+/* Question Screen */
+.question-screen {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    width: 100%;
+    padding: 48px;
+}
+
+.progress-bar-container {
+    width: 100%;
+    max-width: 800px;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    margin-bottom: 48px;
+}
+
+.progress-bar {
+    width: 0%;
+    height: 100%;
+    background: var(--gradient-primary);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.question-content {
+    width: 100%;
+    max-width: 800px;
+}
+
+.question-header {
+    text-align: center;
+    margin-bottom: 48px;
+}
+
+.question-number {
+    font: 16px 'Space Grotesk', medium;
+    color: var(--cyan);
+    margin-bottom: 16px;
+    display: block;
+}
+
+.question-title {
+    font: 32px 'Space Grotesk', bold;
+    color: var(--text-white);
+    line-height: 1.3;
+}
+
+.options-container {
+    display: grid;
+    gap: 16px;
+}
+
+.option {
+    background: var(--bg-secondary);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 20px;
+    font-size: 18px;
+    color: var(--text-gray);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.option:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--cyan);
+}
+
+.option.selected {
+    background: var(--gradient-primary);
+    color: var(--text-white);
+    border-color: transparent;
+}
+
+.textarea-option {
+    width: 100%;
+    min-height: 150px;
+    background: var(--bg-secondary);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 20px;
+    font-size: 18px;
+    color: var(--text-white);
+    font-family: var(--font-body);
+    resize: vertical;
+}
+
+.textarea-option:focus {
+    outline: none;
+    border-color: var(--cyan);
+}
+
+.navigation-buttons {
+    margin-top: 48px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 800px;
+}
+
+.btn-prev, .btn-next {
+    font-family: var(--font-body);
+    font-weight: var(--weight-semibold);
+    border-radius: 8px;
+    padding: 12px 24px;
+    border: 1px solid var(--text-muted);
+    background: transparent;
+    color: var(--text-gray);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-next {
+    background: var(--cyan);
+    color: var(--bg-primary);
+    border-color: var(--cyan);
+}
+
+.btn-prev:hover, .btn-next:hover {
+    filter: brightness(1.2);
+}
+
+/* Email Capture & Thank You */
+.email-capture-screen, .thank-you-screen {
+    text-align: center;
+}
+
+.email-capture-screen h2, .thank-you-screen h2 {
+    font: 32px 'Space Grotesk', bold;
+    color: var(--text-white);
+    margin-bottom: 16px;
+}
+
+.email-capture-screen p, .thank-you-screen p {
+    font-size: 18px;
+    color: var(--text-gray);
+    margin-bottom: 32px;
+}
+
+#email {
+    width: 100%;
+    max-width: 400px;
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid var(--text-muted);
+    background: var(--bg-secondary);
+    color: var(--text-white);
+    font-size: 16px;
+    margin-bottom: 16px;
+}
+
+.consent-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    max-width: 400px;
+    margin: 0 auto;
+    text-align: left;
+}
+
+#consent {
+    min-width: 16px;
+    min-height: 16px;
+}
+
+.consent-container label {
+    font-size: 14px;
+    color: var(--text-muted);
+}
+
+    color: var(--text-gray);
+    padding: var(--space-2);
+    border-radius: 8px;
+    transition: all var(--duration-fast);
+}
+.usecase-btn:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: var(--cyan);
+    color: var(--text-white);
+}
+
+@media (max-width: 767px) {
     .page-headline {
         font-size: var(--text-4xl);
     }
     .page-subtext {
         font-size: var(--text-lg);
     }
-
+    .target-cards-grid {
-    .target-cards-grid,
+        grid-template-columns: 1fr;
+    }
     .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;
+        grid-template-columns: 100px 1fr 80px;
         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);
-    }
 }
 
+/* --- QUESTIONNAIRE --- */
+.questionnaire-container {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: var(--space-4);
+  font-family: var(--font-body);
+  color: var(--text-white);
+}

assets/js/questionnaire.js

@@ -0,0 +1,340 @@
+document.addEventListener('DOMContentLoaded', () => {
+    //
+});
+
+const questions = [
+    // SECTION A: Unternehmensprofil (Q1-5) - Placeholders
+    {
+        section: "Unternehmensprofil",
+        question: "In welcher Branche ist Ihr Unternehmen tätig?",
+        type: "single",
+        options: ["Tech", "Handel", "Dienstleistung", "Handwerk", "Industrie", "Sonstiges"]
+    },
+    {
+        section: "Unternehmensprofil",
+        question: "Wie viele Mitarbeiter hat Ihr Unternehmen?",
+        type: "single",
+        options: ["1-10", "11-50", "51-200", "201-1000", "1000+"]
+    },
+    {
+        section: "Unternehmensprofil",
+        question: "Was ist Ihre Rolle im Unternehmen?",
+        type: "single",
+        options: ["Geschäftsführer", "Abteilungsleiter", "Mitarbeiter", "Selbstständig"]
+    },
+    {
+        section: "Unternehmensprofil",
+        question: "Wie vertraut sind Sie mit KI-Technologien?",
+        type: "single",
+        options: ["Sehr vertraut", "Etwas vertraut", "Wenig vertraut", "Gar nicht vertraut"]
+    },
+    {
+        section: "Unternehmensprofil",
+        question: "Nutzt Ihr Unternehmen bereits KI-Anwendungen?",
+        type: "single",
+        options: ["Ja, intensiv", "Ja, teilweise", "Nein, aber geplant", "Nein"]
+    },
+
+    // SECTION B: ZIELE & PRIORITÄTEN (Q6-10)
+    {
+        section: "Ziele & Prioritäten",
+        question: "Welches Ziel möchtest du in den nächsten 30 Tagen erreichen?",
+        type: "multiple",
+        options: ["mehr Leads", "mehr Umsatz", "Zeit sparen", "Prozesse automatisieren", "besseren Überblick gewinnen", "Sonstiges"]
+    },
+    {
+        section: "Ziele & Prioritäten",
+        question: "Was ist langfristig dein wichtigstes Unternehmensziel?",
+        type: "single",
+        auto_advance: true,
+        options: ["Wachstum", "Automatisierung", "weniger Stress", "Skalierung", "Gewinnmaximierung"]
+    },
+    {
+        section: "Ziele & Prioritäten",
+        question: "Welche Kennzahlen sind dir aktuell am wichtigsten?",
+        type: "multiple",
+        options: ["Leads", "Umsatz", "Gewinn", "Zeitersparnis", "Effizienz", "Kundenzufriedenheit"]
+    },
+    {
+        section: "Ziele & Prioritäten",
+        question: "Wie schnell erwartest du sichtbare Ergebnisse?",
+        type: "single",
+        auto_advance: true,
+        options: ["1–7 Tage", "7–14 Tage", "30 Tage", "egal – Hauptsache nachhaltig"]
+    },
+    {
+        section: "Ziele & Prioritäten",
+        question: "Welche deiner Aufgaben möchtest du am liebsten sofort abgeben?",
+        type: "multiple",
+        options: ["Social Media", "Backoffice", "Kundenservice", "Sales", "Terminverwaltung", "E-Mails", "Angebote", "Rechnungen"]
+    },
+
+    // SECTION C: ENGPASSANALYSE (Q11-15)
+    {
+        section: "Engpassanalyse",
+        question: "Welche Aufgabe kostet dich derzeit am meisten Zeit pro Woche?",
+        type: "single",
+        options: ["Nachrichten beantworten", "Verwaltung", "Angebote", "Content-Erstellung", "Support", "Rechnungen"]
+    },
+    {
+        section: "Engpassanalyse",
+        question: "Wo entstehen deine meisten Fehler oder Verzögerungen?",
+        type: "single",
+        options: ["Manuelle Prozesse", "Fehlende Struktur", "Kommunikation", "Tools", "Datenpflege"]
+    },
+    {
+        section: "Engpassanalyse",
+        question: "Welche Prozesse sind aktuell komplett unstrukturiert?",
+        type: "multiple",
+        options: ["Kundenanfragen", "Sales", "Onboarding", "Backoffice", "Content", "Marketing"]
+    },
+    {
+        section: "Engpassanalyse",
+        question: "Welche deiner Abläufe fühlst du als „Flaschenhals"?",
+        type: "textarea",
+        max_chars: 500
+    },
+    {
+        section: "Engpassanalyse",
+        question: "Wie viel Zeit verbringst du wöchentlich mit Admin-Aufgaben?",
+        type: "single",
+        options: ["0-5h", "6-10h", "11-15h", "16-20h", "20+ Stunden"]
+    },
+    
+    // SECTION D: AUTOMATISIERUNGSPOTENZIALE (Q16-20)
+    {
+        section: "Automatisierungspotenziale",
+        question: "Welche KI-Bereiche möchtest du nutzen?",
+        type: "multiple",
+        options: ["Content-Erstellung", "Social Media", "Marketing", "Sales", "Backoffice", "Analyse"]
+    },
+    {
+        section: "Automatisierungspotenziale",
+        question: "Wie wiederkehrend sind die Aufgaben, die du automatisieren möchtest?",
+        type: "single",
+        options: ["Täglich", "Wöchentlich", "Monatlich", "Selten", "Einmalig"]
+    },
+    {
+        section: "Automatisierungspotenziale",
+        question: "Welche Software-Tools sind bei dir im Einsatz?",
+        type: "textarea",
+        placeholder: "z.B. Excel, HubSpot, Salesforce, etc.",
+        max_chars: 500,
+    },
+    {
+        section: "Automatisierungspotenziale",
+        question: "Wie gut sind deine Unternehmensdaten dokumentiert und zugänglich?",
+        type: "single",
+        options: ["Sehr gut", "Gut", "Mittel", "Schlecht", "Sehr schlecht"]
+    },
+    {
+        section: "Automatisierungspotenziale",
+        question: "Welches Budget hast du für die KI-Integration vorgesehen?",
+        type: "single",
+        options: ["Keins", "< 1.000€", "1.000€ - 5.000€", "5.000€ - 10.000€", "> 10.000€"]
+    },
+
+    // SECTION E: MINDSET & BEREITSCHAFT (Q21-25)
+    {
+        section: "Mindset & Bereitschaft",
+        question: "Wie offen ist dein Team für die Einführung neuer Technologien?",
+        type: "single",
+        options: ["Sehr offen", "Offen", "Neutral", "Eher skeptisch", "Ablehnend"]
+    },
+    {
+        section: "Mindset & Bereitschaft",
+        question: "Hast du interne Ressourcen (Personal, Know-how) für ein KI-Projekt?",
+        type: "single",
+        options: ["Ja, umfassend", "Ja, teilweise", "Wenig", "Nein"]
+    },
+    {
+        section: "Mindset & Bereitschaft",
+        question: "Wie wichtig ist dir die Datensicherheit bei der Nutzung von KI?",
+        type: "single",
+        options: ["Extrem wichtig", "Sehr wichtig", "Wichtig", "Weniger wichtig"]
+    },
+    {
+        section: "Mindset & Bereitschaft",
+        question: "Was ist deine größte Sorge bei der Einführung von KI?",
+        type: "textarea",
+        placeholder: "z.B. Kosten, Sicherheit, Akzeptanz im Team",
+        max_chars: 500,
+    },
+    {
+        section: "Mindset & Bereitschaft",
+        question: "Bist du bereit, bestehende Prozesse anzupassen, um KI effektiv zu nutzen?",
+        type: "single",
+        options: ["Ja, absolut", "Ja, wenn nötig", "Eher ungerne", "Nein"]
+    },
+];
+
+let currentQuestionIndex = 0;
+const userAnswers = {};
+
+function startQuestionnaire() {
+    document.querySelector('.welcome-screen').classList.remove('active');
+    document.querySelector('.question-screen').classList.add('active');
+    displayQuestion();
+}
+
+function displayQuestion() {
+    const questionData = questions[currentQuestionIndex];
+    const container = document.getElementById('question-container');
+    container.innerHTML = '';
+    container.classList.remove('fade-in');
+    void container.offsetWidth; // Trigger reflow
+    container.classList.add('fade-in');
+
+    // Update Section Title
+    document.querySelector('.section-title').textContent = `Abschnitt: ${questionData.section}`;
+    
+    let content = `
+        <h2 class="question-title">${questionData.question}</h2>
+        <div class="options-container">
+    `;
+
+    if (questionData.type === 'single' || questionData.type === 'multiple') {
+        questionData.options.forEach(option => {
+            const isSelected = (userAnswers[currentQuestionIndex] && (questionData.type === 'single' ? userAnswers[currentQuestionIndex] === option : userAnswers[currentQuestionIndex].includes(option)));
+            content += `
+                <div 
+                    class="option ${isSelected ? 'selected' : ''}" 
+                    onclick="selectOption(this, '${option}', '${questionData.type}', ${questionData.auto_advance || false})">
+                    ${option}
+                </div>`;
+        });
+    } else if (questionData.type === 'textarea') {
+        const value = userAnswers[currentQuestionIndex] || '';
+        content += `<textarea class="textarea-option" maxlength="${questionData.max_chars || 500}" placeholder="${questionData.placeholder || 'Deine Antwort...'}" oninput="handleTextarea(this.value)">${value}</textarea>`;
+    }
+    content += '</div>';
+    container.innerHTML = content;
+    
+    updateProgress();
+    updateNavigation();
+}
+
+function selectOption(element, option, type, autoAdvance) {
+    if (type === 'single') {
+        userAnswers[currentQuestionIndex] = option;
+        // visual selection is handled in the next displayQuestion call
+        if (autoAdvance) {
+            setTimeout(nextQuestion, 300);
+        }
+    } else { // multiple
+        if (!userAnswers[currentQuestionIndex]) {
+            userAnswers[currentQuestionIndex] = [];
+        }
+        const index = userAnswers[currentQuestionIndex].indexOf(option);
+        if (index > -1) {
+            userAnswers[currentQuestionIndex].splice(index, 1);
+        } else {
+            userAnswers[currentQuestionIndex].push(option);
+        }
+    }
+    displayQuestion(); // Re-render to show selection state
+}
+
+
+function handleTextarea(value) {
+    userAnswers[currentQuestionIndex] = value;
+}
+
+function nextQuestion() {
+    if (currentQuestionIndex < questions.length - 1) {
+        currentQuestionIndex++;
+        displayQuestion();
+    } else {
+        showCompletionScreen();
+    }
+}
+
+function prevQuestion() {
+    if (currentQuestionIndex > 0) {
+        currentQuestionIndex--;
+        displayQuestion();
+    }
+}
+
+function updateProgress() {
+    const progress = (currentQuestionIndex / questions.length) * 100;
+    document.querySelector('.progress-bar').style.width = `${progress}%`;
+    document.querySelector('.progress-text').textContent = `Frage ${currentQuestionIndex + 1} / ${questions.length}`;
+}
+
+function updateNavigation() {
+    document.querySelector('.btn-prev').style.display = currentQuestionIndex > 0 ? 'inline-flex' : 'none';
+    const nextButton = document.querySelector('.btn-next');
+    if (currentQuestionIndex === questions.length - 1) {
+        nextButton.textContent = 'Abschliessen ›';
+    } else {
+        nextButton.textContent = 'Weiter →';
+    }
+}
+
+function showCompletionScreen() {
+    document.querySelector('.question-screen').classList.remove('active');
+    const completionContainer = document.querySelector('.completion-screen');
+    completionContainer.classList.add('active');
+
+    completionContainer.innerHTML = `
+        <div class="email-capture-content fade-in">
+             <div class="welcome-badge">LETZTER SCHRITT</div>
+            <h1 class="welcome-title"> <span class="gradient-text">Report</span> anfordern</h1>
+            <p class="welcome-description">
+                Fast geschafft! Geben Sie Ihre E-Mail-Adresse ein, um Ihren personalisierten KI-Fahrplan sofort zu erhalten.
+            </p>
+            <form id="email-form" onsubmit="submitQuestionnaire(event)">
+                <input type="email" id="email-input" placeholder="deine.email@beispiel.com" required>
+                <div class="consent-container">
+                    <input type="checkbox" id="consent-checkbox" required>
+                    <label for="consent-checkbox">
+                        Ich stimme der Verarbeitung meiner Daten gemäß der <a href="/datenschutz" target="_blank">Datenschutzerklärung</a> zu und möchte den Report per E-Mail erhalten.
+                    </label>
+                </div>
+                <button type="submit" class="btn-start">Report jetzt anfordern →</button>
+            </form>
+        </div>
+    `;
+}
+
+function submitQuestionnaire(event) {
+    event.preventDefault();
+    const email = document.getElementById('email-input').value;
+    const consent = document.getElementById('consent-checkbox').checked;
+
+    if (!consent) {
+        alert("Bitte stimmen Sie der Datenverarbeitung zu.");
+        return;
+    }
+
+    console.log("Email:", email);
+    console.log("Answers:", userAnswers);
+
+    // Show thank you message
+    const completionContainer = document.querySelector('.completion-screen');
+    completionContainer.innerHTML = `
+        <div class="thank-you-content fade-in">
+            <div class="welcome-badge">VIELEN DANK</div>
+            <h1 class="welcome-title">Ihr <span class="gradient-text">KI-Report</span> ist unterwegs!</h1>
+            <p class="welcome-description">
+                Wir haben mit der Analyse begonnen. Ihr personalisierter Fahrplan zur Automatisierung wird in wenigen Minuten in Ihrem Posteingang sein.
+            </p>
+            <div class="welcome-benefits">
+                 <div class="benefit-item">
+                    <span class="benefit-icon">✓</span>
+                    <span>Analyse gestartet</span>
+                </div>
+                 <div class="benefit-item">
+                    <span class="benefit-icon">📫</span>
+                    <span>E-Mail versandt</span>
+                </div>
+                 <div class="benefit-item">
+                    <span class="benefit-icon">🚀</span>
+                    <span>Automatisierung wartet</span>
+                </div>
+            </div>
+             <a href="/" class="btn-start">Zurück zur Startseite</a>
+        </div>
+    `;
+}

einsatzmoeglichkeiten.php

@@ -20,83 +20,7 @@
 </head>
 <body>
     
-    <header id="mainHeader">
+    <?php include 'includes/header.php'; ?>
-        <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">
@@ -282,66 +206,7 @@
         </section>
     </main>
 
-    <footer id="main-footer">
+    <?php include 'includes/footer.php'; ?>
-        <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>

fuer-wen.php

@@ -20,83 +20,7 @@
 </head>
 <body>
     
-    <header id="mainHeader">
+    <?php include 'includes/header.php'; ?>
-        <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">
@@ -178,66 +102,7 @@
         </section>
     </main>
 
-    <footer id="main-footer">
+    <?php include 'includes/footer.php'; ?>
-        <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>

includes/footer.php

@@ -0,0 +1,62 @@
+    <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>
+                        <a href="ki-check.php">KI-Check</a>
+                        <a href="#blog">Blog</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>

includes/header.php

@@ -0,0 +1,115 @@
+    <header id="mainHeader">
+        <div class="inner-container">
+            <div class="logo-container">
+                <span class="logo-text">Future Now</span>
+            </div>
+            <nav class="main-nav">
+                <a href="index.php#home" class="nav-link active"><?php echo $t['nav_home']; ?></a>
+                <div class="nav-dropdown">
+                    <button class="nav-link">
+                        <?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">
+                            <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.php" 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>
+
+    <!-- MOBILE MENU -->
+    <div class="mobile-menu" id="mobileMenu">
+        <button class="mobile-close" id="closeMobileMenu">
+            <svg 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+        </button>
+
+        <div class="mobile-menu-content">
+            <nav class="mobile-nav">
+                <a href="index.php#home" class="mobile-nav-link">Home</a>
+                
+                <div class="mobile-nav-section">
+                    <button class="mobile-nav-link section-toggle">
+                        Warum KI?
+                        <span class="toggle-icon">▼</span>
+                    </button>
+                    <div class="mobile-subsection">
+                         <a href="fuer-wen.php" class="mobile-subnav-link">Für wen ist KI?</a>
+                         <a href="warum-jetzt.php" class="mobile-subnav-link">Warum jetzt handeln?</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>
+
+                <a href="ki-check.php" class="mobile-nav-link">KI-Check</a>
+                <a href="#ueber-uns" class="mobile-nav-link">Über uns</a>
+            </nav>
+
+            <div class="mobile-menu-footer">
+                <a href="ki-check.php" class="btn btn-primary">Jetzt KI-Check starten</a>
+                 <div class="lang-switcher-mobile">
+                    <span>Sprache:</span>
+                    <a href="#" class="active">DE</a>
+                    <a href="#">EN</a>
+                </div>
+            </div>
+        </div>
+    </div>

index.php

@@ -21,121 +21,7 @@
 </head>
 <body>
     
-    <header id="mainHeader">
+    <?php include 'includes/header.php'; ?>
-        <div class="inner-container">
-            <div class="logo-container">
-                <span class="logo-text">Future Now</span>
-            </div>
-            <nav class="main-nav">
-                <a href="#home" class="nav-link active"><?php echo $t['nav_home']; ?></a>
-                <div class="nav-dropdown">
-                    <button class="nav-link">
-                        <?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">
-                            <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>
-
-    <!-- MOBILE MENU -->
-    <div class="mobile-menu" id="mobileMenu">
-        <button class="mobile-close" id="closeMobileMenu">
-            <svg 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-        </button>
-
-        <div class="mobile-menu-content">
-            <nav class="mobile-nav">
-                <a href="#home" class="mobile-nav-link">Home</a>
-                
-                <div class="mobile-nav-section">
-                    <button class="mobile-nav-link section-toggle">
-                        Warum KI?
-                        <span class="toggle-icon">▼</span>
-                    </button>
-                    <div class="mobile-subsection">
-                         <a href="fuer-wen.php" class="mobile-subnav-link">Für wen ist KI?</a>
-                         <a href="warum-jetzt.php" class="mobile-subnav-link">Warum jetzt handeln?</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>
-
-                <a href="#ki-check" class="mobile-nav-link">KI-Check</a>
-                <a href="#ueber-uns" class="mobile-nav-link">Über uns</a>
-            </nav>
-
-            <div class="mobile-menu-footer">
-                <a href="#ki-check" class="btn btn-primary">Jetzt KI-Check starten</a>
-                 <div class="lang-switcher-mobile">
-                    <span>Sprache:</span>
-                    <a href="#" class="active">DE</a>
-                    <a href="#">EN</a>
-                </div>
-            </div>
-        </div>
-    </div>
 
     <main>
         <section id="home" class="hero-section">
@@ -332,68 +218,7 @@
         </section>
     </main>
 
-    <footer id="main-footer">
+    <?php include 'includes/footer.php'; ?>
-        <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>
-                        <a href="#ki-check">KI-Check</a>
-                        <a href="#blog">Blog</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>
 
     <!-- COOKIE BANNER -->
     <div class="cookie-banner" id="cookieBanner">

ki-check.php

@@ -0,0 +1,15 @@
+<?php
+include 'includes/header.php';
+?>
+
+<div class="questionnaire-container">
+    <div class="welcome-screen">
+        <h1>AI Readiness Check</h1>
+        <p>This is the welcome screen.</p>
+        <button class="btn-start">Start</button>
+    </div>
+</div>
+
+<?php
+include 'includes/footer.php';
+?>

warum-jetzt.php

@@ -20,83 +20,7 @@
 </head>
 <body>
     
-    <header id="mainHeader">
+    <?php include 'includes/header.php'; ?>
-        <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">
@@ -170,66 +94,7 @@
         </section>
     </main>
 
-    <footer id="main-footer">
+    <?php include 'includes/footer.php'; ?>
-        <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>

was-ist-ki.php

@@ -20,83 +20,7 @@
 </head>
 <body>
     
-    <header id="mainHeader">
+    <?php include 'includes/header.php'; ?>
-        <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">
@@ -150,66 +74,7 @@
 
     </main>
 
-    <footer id="main-footer">
+    <?php include 'includes/footer.php'; ?>
-        <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>