sitestructure

lastchatgptmessage.txt

@@ -0,0 +1,6 @@
+ich würde es noch flexibler bauen:
+in der tpl-Funktion bauen wir die Pfade fix, aber aufgrund nachfolgender Struktur.
+
+tpl([dateiname],[type = structure, landing],[(optional)site=main, fakecheck)
+
+Weil dann kann ich im Hintergrund die Pfade ändern und muss das nur in der tpl-Funktion anpassen. Die Seiten bleiben wie sie sind.

partials/landing/fakecheck/hero.php

@@ -0,0 +1,75 @@
+<section id="hero" class="relative overflow-hidden border-b border-brand-border/70">
+    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>
+
+    <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-14 sm:py-20 flex flex-col lg:flex-row gap-10 items-center">
+        <!-- Left: Text -->
+        <div class="flex-1 space-y-6">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="fake_hero_kicker">
+                FakeCheck – Browser-Modus
+            </p>
+            <h1 class="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-white" data-i18n="fake_hero_title">
+                Ist mein USB-Stick fake?
+            </h1>
+            <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="fake_hero_lead">
+                Der FakeCheck hilft dir, typische Fake-Sticks aufzuspüren: Browser-basierte Schreib-/Lesetests und Plausibilitätsprüfungen der nutzbaren Kapazität – ohne Installation.
+            </p>
+
+            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                <button
+                    id="startButton"
+                    class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold bg-brand-primary text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"
+                    data-i18n="fake_cta_start">
+                    Browser-Test starten (Demo)
+                </button>
+
+                <a href="/?lang=<?= htmlspecialchars($lang) ?>"
+                   class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-medium border border-brand-border text-brand-muted hover:border-brand-primary hover:text-brand-primary transition-colors"
+                   data-i18n="fake_cta_back_home">
+                    Zur Übersicht zurück
+                </a>
+            </div>
+
+            <p class="text-xs text-brand-muted/80 max-w-md" data-i18n="fake_hero_hint">
+                Der FakeCheck im Browser arbeitet mit Testdateien und Lese-/Schreibmustern, die du in einem ausgewählten Ordner anlegst. Deine echten Dateien bleiben unangetastet.
+            </p>
+        </div>
+
+        <!-- Right: Explainer -->
+        <div class="flex-1 max-w-md w-full">
+            <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft space-y-4">
+                <h2 class="font-heading text-lg sm:text-xl font-semibold text-white" data-i18n="fake_box_title">
+                    Was der Browser-Test leisten kann
+                </h2>
+                <ul class="space-y-3 text-sm text-brand-muted">
+                    <li class="flex gap-2">
+                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">1</span>
+                        <div>
+                            <p class="font-medium text-brand-text" data-i18n="fake_box_point1_title">Schreib-/Lesetest mit Testdateien</p>
+                            <p data-i18n="fake_box_point1_text">
+                                Der Browser legt Testdateien im gewählten Ordner an, misst Schreib- und Leseraten und prüft, ob gelesene Daten mit den geschriebenen Mustern übereinstimmen.
+                            </p>
+                        </div>
+                    </li>
+                    <li class="flex gap-2">
+                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">2</span>
+                        <div>
+                            <p class="font-medium text-brand-text" data-i18n="fake_box_point2_title">Plausibilitätscheck der Kapazität</p>
+                            <p data-i18n="fake_box_point2_text">
+                                Aus der Menge der erfolgreich geschriebenen und verifizierten Daten ergibt sich ein realistischer Eindruck, wie viel Nutzkapazität tatsächlich stabil ankommt.
+                            </p>
+                        </div>
+                    </li>
+                    <li class="flex gap-2">
+                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">3</span>
+                        <div>
+                            <p class="font-medium text-brand-text" data-i18n="fake_box_point3_title">JSON-Report für deine Dokumentation</p>
+                            <p data-i18n="fake_box_point3_text">
+                                Alle Ergebnisse werden in einem strukturierten JSON-Report gesammelt, den du speichern, hochladen oder für spätere Vergleiche nutzen kannst.
+                            </p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>

partials/landing/fakecheck/webcheck.php

@@ -0,0 +1,36 @@
+<section id="webcheck" class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
+    <div class="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)] items-start">
+        <!-- Links: Test-Steuerung (Platzhalter) -->
+        <div class="space-y-6">
+            <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-6 sm:p-7 shadow-soft">
+                <h2 class="font-heading text-xl sm:text-2xl font-semibold mb-2 text-white" data-i18n="fake_app_title">
+                    Browser-Testoberfläche (Preview)
+                </h2>
+                <p class="text-sm text-brand-muted mb-4" data-i18n="fake_app_intro">
+                    Hier entsteht die eigentliche FakeCheck-Web-App: Auswahl des Testordners, Konfiguration der Testmenge, Fortschrittsanzeige und Ergebnisübersicht. Aktuell zeigt der Button oben nur eine Demo-Ausgabe.
+                </p>
+
+                <ul class="space-y-2 text-xs text-brand-muted">
+                    <li data-i18n="fake_app_point1">• Quick-Test mit kleiner Datenmenge.</li>
+                    <li data-i18n="fake_app_point2">• Light-Benchmark: Schreib-/Lesegeschwindigkeit über begrenzte Zeit.</li>
+                    <li data-i18n="fake_app_point3">• Write/Verify: Testdateien schreiben und direkt wieder verifizieren.</li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- Rechts: Ergebnis / JSON-Report-Preview -->
+        <div class="space-y-4">
+            <div id="resultContainer" class="hidden rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft">
+                <h3 class="font-heading text-lg font-semibold mb-2 text-white" data-i18n="fake_result_title">
+                    Demo-Ausgabe des Browser-Tests
+                </h3>
+                <p class="text-xs text-brand-muted mb-3" data-i18n="fake_result_hint">
+                    Diese Ausgabe dient nur als Vorschau. Später wird hier der echte JSON-Report aus dem Browser-Test angezeigt.
+                </p>
+                <pre id="resultOutput"
+                     class="text-[11px] whitespace-pre-wrap bg-black/40 text-brand-muted rounded-xl p-3 font-mono overflow-x-auto min-h-[140px]">
+                </pre>
+            </div>
+        </div>
+    </div>
+</section>

partials/landing/main/faq.php

@@ -0,0 +1,61 @@
+<section id="faq" class="border-t border-brand-border/70 bg-brand-primarySoft/10">
+    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
+        <div class="max-w-3xl space-y-4">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="faq_kicker">
+                FAQ
+            </p>
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="faq_title">
+                Häufige Fragen zu USBCheck
+            </h2>
+            <p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro">
+                Hier findest du Antworten auf häufig gestellte Fragen. Der FAQ-Bereich kann jederzeit erweitert werden, wenn neue Anwendungsfälle hinzukommen oder du Feedback von Nutzern erhältst.
+            </p>
+        </div>
+
+        <div class="space-y-4 text-sm text-brand-muted">
+            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+                <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
+                    <span class="font-semibold text-brand-text" data-i18n="faq_q1">Ist der Schnelltest wirklich komplett im Browser?</span>
+                    <span class="ml-auto text-brand-muted group-open:hidden">+</span>
+                    <span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
+                </summary>
+                <div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a1">
+                    Ja. Der Schnelltest läuft vollständig im Browser und nutzt moderne Browser-APIs, um Testdateien auf deinem Stick zu schreiben und wieder auszulesen. Es wird nichts ohne deine Zustimmung hochgeladen.
+                </div>
+            </details>
+
+            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+                <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
+                    <span class="font-semibold text-brand-text" data-i18n="faq_q2">Brauche ich ein Konto, um den Schnelltest zu benutzen?</span>
+                    <span class="ml-auto text-brand-muted group-open:hidden">+</span>
+                    <span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
+                </summary>
+                <div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a2">
+                    Nein. Der kostenlose Schnelltest ist ohne Registrierung nutzbar. Ein Login ist nur notwendig, wenn du Testberichte speichern, mehrere Sticks verwalten oder den Pro-Modus nutzen möchtest.
+                </div>
+            </details>
+
+            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+                <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
+                    <span class="font-semibold text-brand-text" data-i18n="faq_q3">Kann USBCheck jeden Fake-Stick sicher erkennen?</span>
+                    <span class="ml-auto text-brand-muted group-open:hidden">+</span>
+                    <span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
+                </summary>
+                <div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a3">
+                    Kein Tool kann eine 100&nbsp;%-Garantie geben. Der Pro-Modus mit Vollscan ist jedoch darauf ausgelegt, typische Fälschungsmuster (Manipulation der gemeldeten Kapazität, instabile Bereiche, Fehler ab einer bestimmten Füllmenge) sehr zuverlässig zu erkennen.
+                </div>
+            </details>
+
+            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+                <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
+                    <span class="font-semibold text-brand-text" data-i18n="faq_q4">Wie fügt sich das Tool in mein bestehendes System ein?</span>
+                    <span class="ml-auto text-brand-muted group-open:hidden">+</span>
+                    <span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
+                </summary>
+                <div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a4">
+                    USBCheck ist von Anfang an für Automatisierung gedacht. Über den Pro-Modus und die geplante API kannst du Tests in bestehende Workflows integrieren – beispielsweise in Wareneingangsprüfungen oder Qualitätskontrollen.
+                </div>
+            </details>
+        </div>
+    </div>
+</section>

partials/landing/main/features.php

@@ -0,0 +1,68 @@
+<section id="features" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
+    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
+        <div class="max-w-3xl space-y-4">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="features_kicker">
+                Free &amp; Pro features
+            </p>
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="features_title">
+                Starte mit dem kostenlosen Schnelltest – wechsle in den Pro-Modus, wenn du mehr brauchst.
+            </h2>
+            <p class="text-sm sm:text-base text-brand-muted" data-i18n="features_intro">
+                USBCheck wächst mit deinen Anforderungen: Private Nutzer brauchen oft nur eine schnelle Einschätzung. Profis möchten tiefer einsteigen, Kapazitäten verifizieren und Reports archivieren. Genau dafür ist der Pro-Modus gedacht.
+            </p>
+        </div>
+
+        <div class="grid gap-6 md:grid-cols-2">
+            <!-- Free -->
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/90 shadow-soft p-6 space-y-4">
+                <div class="flex items-center justify-between">
+                    <h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_free_title">Free Quick Check</h3>
+                    <span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="features_free_badge">
+                        Recommended for most users
+                    </span>
+                </div>
+                <p class="text-sm text-brand-muted" data-i18n="features_free_text">
+                    Ideal für alle, die schnell prüfen möchten, ob ein USB-Stick zumindest grundlegend performant und stabil arbeitet – ganz ohne Installation.
+                </p>
+                <ul class="mt-2 space-y-2 text-sm text-brand-muted">
+                    <li data-i18n="features_free_li1">• Browser-basierter Schnelltest direkt auf deinem Stick</li>
+                    <li data-i18n="features_free_li2">• Schreib- und Lesegeschwindigkeit mit realen Testdaten</li>
+                    <li data-i18n="features_free_li3">• Hash-basierte Integritätsprüfung einer Testmenge</li>
+                    <li data-i18n="features_free_li4">• Auswahl verschiedener Teststufen (z. B. 200&nbsp;MB, 2&nbsp;GB)</li>
+                    <li data-i18n="features_free_li5">• Keine Registrierung erforderlich</li>
+                </ul>
+                <a href="https://usbcheck.it/fakecheck/"
+                   class="inline-flex mt-3 items-center text-sm font-semibold text-brand-primary hover:text-blue-300"
+                   data-i18n="features_free_cta">
+                    Start free quick check
+                    <svg class="ml-1 h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z"/>
+                    </svg>
+                </a>
+            </div>
+
+            <!-- Pro -->
+            <div class="rounded-xl2 border border-brand-primary/60 bg-brand-surface shadow-soft p-6 space-y-4">
+                <div class="flex items-center justify-between">
+                    <h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_pro_title">Pro Mode</h3>
+                    <span class="inline-flex items-center rounded-full bg-brand-primary/10 px-3 py-1 text-xs font-semibold text-brand-primary" data-i18n="features_pro_badge">
+                        For power users &amp; teams
+                    </span>
+                </div>
+                <p class="text-sm text-brand-muted" data-i18n="features_pro_text">
+                    Für alle, die volle Kontrolle brauchen: IT-Abteilungen, Techniker, Refurbisher, Labore oder Unternehmen, die regelmäßig größere Stick-Mengen testen.
+                </p>
+                <ul class="mt-2 space-y-2 text-sm text-brand-muted">
+                    <li data-i18n="features_pro_li1">• Tiefenscan der gesamten Kapazität (ähnlich F3 / badblocks)</li>
+                    <li data-i18n="features_pro_li2">• Erkennung von Kapazitäts-Fakes und defekten Bereichen</li>
+                    <li data-i18n="features_pro_li3">• Detaillierte, speicherbare Testberichte (JSON, PDF)</li>
+                    <li data-i18n="features_pro_li4">• Optional: API-Zugriff für automatisierte Testprozesse</li>
+                    <li data-i18n="features_pro_li5">• Multi-Device- und Multi-User-Support (über Login-Bereich)</li>
+                </ul>
+                <p class="mt-3 text-xs text-brand-muted/80" data-i18n="features_pro_note">
+                    Der Pro-Modus erfordert ein kleines Helfer-Tool auf deinem System. Dieses arbeitet lokal und kann bei Bedarf mit deinem Account auf USBCheck verbunden werden.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>

partials/landing/main/hero.php

@@ -0,0 +1,105 @@
+<section id="hero" class="relative overflow-hidden">
+    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>
+
+    <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
+        <!-- Left: Text -->
+        <div class="flex-1 space-y-7">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
+                Detect fake USB sticks before you lose data
+            </p>
+            <h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white" data-i18n="hero_title">
+                Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
+            </h1>
+            <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
+                USBCheck kombiniert einen schnellen Browser-Test mit einem professionellen Pro-Modus. So erkennst du gefälschte USB-Sticks, zu kleine echte Kapazität und langsame Billig-Controller – bevor deine Dateien verschwinden.
+            </p>
+
+            <!-- CTAs -->
+            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                <a href="https://usbcheck.it/fakecheck/"
+                   class="inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-sm font-semibold text-brand-bg shadow-soft hover:bg-blue-400 transition-colors"
+                   data-i18n="cta_quick">
+                    Start free quick check
+                    <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </a>
+
+                <a href="#features"
+                   class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/40 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
+                   data-i18n="cta_learn">
+                    Learn more about Free &amp; Pro
+                </a>
+            </div>
+
+            <!-- Trust / Highlights -->
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-6 border-t border-brand-border/60">
+                <div class="space-y-1">
+                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust1_title">No install for quick check</p>
+                    <p class="text-sm text-brand-text/90" data-i18n="trust1_text">Browser-basierter Test direkt auf deinem Stick.</p>
+                </div>
+                <div class="space-y-1">
+                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust2_title">Real write &amp; read tests</p>
+                    <p class="text-sm text-brand-text/90" data-i18n="trust2_text">Schreib-/Lesetests mit echten Daten – keine synthetische Theorie.</p>
+                </div>
+                <div class="space-y-1">
+                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust3_title">Privacy first</p>
+                    <p class="text-sm text-brand-text/90" data-i18n="trust3_text">Deine Testdaten bleiben lokal – Reports nur auf Wunsch.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right: Card (Teaser Quickcheck) -->
+        <div class="flex-1 w-full max-w-md lg:max-w-sm">
+            <div class="rounded-xl2 bg-brand-surface/90 border border-brand-border/70 shadow-soft p-5 sm:p-6 space-y-4">
+                <div class="flex items-start justify-between gap-3">
+                    <div>
+                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="quick_label">
+                            QUICK CHECK PREVIEW
+                        </p>
+                        <h2 class="mt-1 font-heading font-semibold text-lg text-white" data-i18n="quick_title">
+                            Test a USB drive in under 2 minutes
+                        </h2>
+                    </div>
+                    <span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="badge_free">
+                        Free
+                    </span>
+                </div>
+
+                <div class="space-y-3 text-sm text-brand-muted">
+                    <p data-i18n="quick_intro">
+                        Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
+                    </p>
+                    <ul class="list-disc list-inside space-y-1">
+                        <li data-i18n="quick_li1">Schreib- und Leserate</li>
+                        <li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
+                        <li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
+                    </ul>
+                </div>
+
+                <div class="flex flex-col gap-2 text-xs text-brand-muted">
+                    <div class="flex justify-between">
+                        <span data-i18n="quick_metric1_label">Write performance</span>
+                        <span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
+                    </div>
+                    <div class="h-1.5 rounded-full bg-brand-primarySoft overflow-hidden">
+                        <div class="h-full w-3/4 bg-brand-primary"></div>
+                    </div>
+                    <div class="flex justify-between">
+                        <span data-i18n="quick_metric2_label">Integrity checks</span>
+                        <span data-i18n="quick_metric2_value">512 MB sample</span>
+                    </div>
+                    <p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote">
+                        *Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
+                    </p>
+                </div>
+
+                <a href="https://usbcheck.it/fakecheck/"
+                   class="block text-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
+                   data-i18n="quick_cta">
+                    Go to free quick check
+                </a>
+            </div>
+        </div>
+    </div>
+</section>

partials/landing/main/how.php

@@ -0,0 +1,72 @@
+<section id="how" class="border-t border-brand-border/70 bg-brand-primarySoft/30">
+    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 grid gap-10 lg:grid-cols-[1.2fr,1fr]">
+        <div class="space-y-6">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="how_kicker">
+                How USBCheck works
+            </p>
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="how_title">
+                Schnelltest im Browser, Pro-Modus mit Tiefenanalyse.
+            </h2>
+            <p class="text-brand-muted text-sm sm:text-base" data-i18n="how_intro">
+                USBCheck wurde entwickelt, um zwei Welten zu verbinden: einen einfachen Schnelltest für alle und einen tiefgehenden Pro-Modus für Power-User, Techniker und Admins. Der Schnelltest läuft direkt im Browser, ohne Installation. Für den Pro-Modus wird ein kleines Helfer-Tool verwendet, das auf Wunsch F3- / badblocks-ähnliche Tests ausführt und damit Kapazitäts-Fakes sicher enttarnt.
+            </p>
+
+            <ol class="space-y-4 text-sm text-brand-muted">
+                <li class="flex gap-3">
+                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">01</span>
+                    <div>
+                        <h3 class="font-semibold text-brand-text" data-i18n="how_step1_title">Browser-Test starten</h3>
+                        <p data-i18n="how_step1_text">
+                            Du öffnest den Schnelltest unter <strong>usbcheck.it/fakecheck/</strong>, wählst deinen USB-Stick bzw. einen Ordner darauf aus und definierst, wie viel Daten getestet werden sollen.
+                        </p>
+                    </div>
+                </li>
+                <li class="flex gap-3">
+                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">02</span>
+                    <div>
+                        <h3 class="font-semibold text-brand-text" data-i18n="how_step2_title">Schreib-, Lese- und Integritätsprüfung</h3>
+                        <p data-i18n="how_step2_text">
+                            Der Browser erstellt Testdateien, misst Schreib- und Leserate und vergleicht Hash-Werte, um Datenfehler zu erkennen – alles lokal und ohne Übertragung deiner Inhalte.
+                        </p>
+                    </div>
+                </li>
+                <li class="flex gap-3">
+                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">03</span>
+                    <div>
+                        <h3 class="font-semibold text-brand-text" data-i18n="how_step3_title">Optional: Pro-Modus für Vollscan</h3>
+                        <p data-i18n="how_step3_text">
+                            Wer mehr wissen will, installiert das optionale Helfer-Tool. Dieses kann die gesamte Kapazität des Sticks prüfen, Fakes identifizieren und detaillierte Reports erzeugen – ideal für Refurbisher, IT-Abteilungen oder Labore.
+                        </p>
+                    </div>
+                </li>
+            </ol>
+        </div>
+
+        <!-- Small feature card -->
+        <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5">
+            <h3 class="font-heading text-lg font-semibold text-white" data-i18n="how_side_title">
+                Free vs Pro at a glance
+            </h3>
+            <ul class="space-y-3 text-sm text-brand-muted">
+                <li class="flex gap-2">
+                    <span class="mt-1 h-5 w-5 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center text-[10px]">F</span>
+                    <p data-i18n="how_side_free">
+                        <strong>Free Quick Check:</strong> Geschwindigkeit &amp; Integritätstest im Browser – ideal für schnelle Einschätzungen.
+                    </p>
+                </li>
+                <li class="flex gap-2">
+                    <span class="mt-1 h-5 w-5 rounded-full bg-sky-500/10 text-sky-400 flex items-center justify-center text-[10px]">P</span>
+                    <p data-i18n="how_side_pro">
+                        <strong>Pro-Modus:</strong> Tiefenscan, Kapazitätsvalidierung, erweiterte Berichte und API-Integration für Unternehmen.
+                    </p>
+                </li>
+                <li class="flex gap-2">
+                    <span class="mt-1 h-5 w-5 rounded-full bg-violet-500/10 text-violet-400 flex items-center justify-center text-[10px]">A</span>
+                    <p data-i18n="how_side_account">
+                        <strong>Account &amp; Login:</strong> Nach dem Login kannst du Tests speichern, Berichte exportieren und mehrere Geräte verwalten.
+                    </p>
+                </li>
+            </ul>
+        </div>
+    </div>
+</section>

partials/landing/main/problem.php

@@ -0,0 +1,39 @@
+<section id="problem" class="border-t border-brand-border/70">
+    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-8">
+        <div class="max-w-3xl space-y-4">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="problem_kicker">
+                Why fake USB sticks are dangerous
+            </p>
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="problem_title">
+                Gefälschte USB-Sticks kosten Geld – und im schlimmsten Fall deine Daten.
+            </h2>
+            <p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p1">
+                Viele Billig-USB-Sticks werben mit unrealistisch hohen Kapazitäten. In Wahrheit wurde der Controller manipuliert: Der Stick meldet z. B. 256&nbsp;GB, obwohl physisch nur 32&nbsp;GB verbaut sind. Die Folge: Daten werden scheinbar korrekt kopiert, später aber stillschweigend überschrieben oder beschädigt.
+            </p>
+            <p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p2">
+                USBCheck hilft dir, solche Fakes zu erkennen, bevor du sie produktiv einsetzt – egal ob du einzelne Sticks privat nutzt oder größere Chargen für dein Unternehmen prüfst.
+            </p>
+        </div>
+
+        <div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted">
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
+                <h3 class="font-semibold text-brand-text" data-i18n="problem_card1_title">Verlust wichtiger Dateien</h3>
+                <p data-i18n="problem_card1_text">
+                    Fotos, Projektdateien, Backups – alles kann betroffen sein, wenn der Stick weniger speichert als behauptet. Defekte Sektoren bleiben oft unbemerkt, bis es zu spät ist.
+                </p>
+            </div>
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
+                <h3 class="font-semibold text-brand-text" data-i18n="problem_card2_title">Kosten durch defekte Chargen</h3>
+                <p data-i18n="problem_card2_text">
+                    Unternehmen, Reseller und Agenturen verteilen USB-Sticks oft in großer Stückzahl. Fakes bedeuten Reklamationen, Imageschaden und erneute Produktionskosten.
+                </p>
+            </div>
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
+                <h3 class="font-semibold text-brand-text" data-i18n="problem_card3_title">Unsichere Performance</h3>
+                <p data-i18n="problem_card3_text">
+                    Langsame Controller, instabile Firmware und schwankende Schreibraten sind typisch für Fake-Sticks. Das erhöht das Risiko von Fehlern – besonders bei großen Dateien.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>

partials/landing/main/security.php

@@ -0,0 +1,36 @@
+<section id="security" class="border-t border-brand-border/70">
+    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-8">
+        <div class="max-w-3xl space-y-4">
+            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="security_kicker">
+                Security &amp; privacy
+            </p>
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="security_title">
+                Privacy-first-Design: Deine Testdaten gehören dir.
+            </h2>
+            <p class="text-sm sm:text-base text-brand-muted" data-i18n="security_intro">
+                USBCheck wurde von Anfang an so konzipiert, dass deine Daten geschützt bleiben. Der Browser-Schnelltest arbeitet ausschließlich mit Testdateien. Deine eigenen Dokumente, Bilder oder Backups werden weder gelesen noch übertragen. Im Pro-Modus hast du volle Kontrolle, ob und welche Reports mit deinem Account synchronisiert werden.
+            </p>
+        </div>
+
+        <div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted">
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
+                <h3 class="font-semibold text-brand-text" data-i18n="security_card1_title">Local-only Tests</h3>
+                <p data-i18n="security_card1_text">
+                    Alle Schreib- und Lesetests erfolgen lokal auf deinem USB-Stick. Der Browser greift nur auf die Testdateien zu – nicht auf deine privaten Inhalte.
+                </p>
+            </div>
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
+                <h3 class="font-semibold text-brand-text" data-i18n="security_card2_title">Transparente Reports</h3>
+                <p data-i18n="security_card2_text">
+                    Wenn du dich einloggst, kannst du Testberichte in deinem Account speichern, exportieren oder wieder löschen. Du entscheidest, welche Daten im System bleiben.
+                </p>
+            </div>
+            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
+                <h3 class="font-semibold text-brand-text" data-i18n="security_card3_title">Schonend für deine Hardware</h3>
+                <p data-i18n="security_card3_text">
+                    Der Schnelltest arbeitet mit moderaten Datenmengen, um unnötigen Verschleiß zu vermeiden. Der Pro-Modus warnt deutlich, wenn ein Vollscan mit hoher Schreiblast ausgeführt wird.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>

partials/structure/layout_end.php

@@ -4,7 +4,9 @@
     </main>
 
     <!-- FOOTER -->
-    <?php include __DIR__ . '/footer.php'; ?>
+    <?php 
+        tpl('footer'); 
+    ?>
 
 </div>
 

partials/structure/layout_start.php

@@ -50,7 +50,9 @@ $host = $_SERVER['HTTP_HOST'] ?? '';
 <div class="min-h-screen flex flex-col">
 
     <!-- HEADER -->
-    <?php include __DIR__ . '/header.php'; ?>
+    <?php 
+        tpl('header');                  // structure/header.php
+    ?>
 
     <!-- MAIN CONTENT -->
     <main class="flex-1">

public/assets/js/fakecheck.js

@@ -0,0 +1,37 @@
+// /public/assets/js/fakecheck.js
+
+document.addEventListener("DOMContentLoaded", () => {
+    // Werte kommen aus globalen Variablen, die wir in PHP setzen:
+    const baseUrl = window.fakecheckBaseUrl || "";
+    const locale  = window.fakecheckLocale || "en";
+
+    const startButton     = document.getElementById("startButton");
+    const resultContainer = document.getElementById("resultContainer");
+    const resultOutput    = document.getElementById("resultOutput");
+
+    if (!startButton || !resultContainer || !resultOutput) return;
+
+    startButton.addEventListener("click", () => {
+        const now = new Date().toISOString();
+
+        const demoReport = {
+            meta: {
+                tool: baseUrl,
+                mode: "browser-demo",
+                timestamp: now,
+                locale: locale
+            },
+            tests: [
+                { id: "quick_test",      label: "Quick-Test (Demo)",      status: "pending" },
+                { id: "light_benchmark", label: "Light-Benchmark (Demo)", status: "pending" },
+                { id: "write_verify",    label: "Write/Verify (Demo)",    status: "pending" }
+            ],
+            note: "Dies ist nur eine Platzhalter-Ausgabe. Die echte Web-Testlogik (File System Access, Fortschritt, realer JSON-Report) implementieren wir im nächsten Schritt."
+        };
+
+        resultOutput.textContent = JSON.stringify(demoReport, null, 2);
+
+        resultContainer.classList.remove("hidden");
+        resultContainer.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+});

public/fakecheck/index.php

@@ -20,159 +20,25 @@ $scheme  = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https'
 $host    = $_SERVER['HTTP_HOST'] ?? 'usbcheck.it';
 $baseUrl = $scheme . '://' . $host;
 
-// Layout-Start einbinden
-require __DIR__ . '/../partials/layout_start.php';
-?>
-
-<!-- HERO / INTRO -->
-<section id="hero" class="relative overflow-hidden border-b border-brand-border/70">
-    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>
-
-    <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-14 sm:py-20 flex flex-col lg:flex-row gap-10 items-center">
-        <!-- Left: Text -->
-        <div class="flex-1 space-y-6">
-            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="fake_hero_kicker">
-                FakeCheck – Browser-Modus
-            </p>
-            <h1 class="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-white" data-i18n="fake_hero_title">
-                Ist mein USB-Stick fake?
-            </h1>
-            <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="fake_hero_lead">
-                Der FakeCheck hilft dir, typische Fake-Sticks aufzuspüren: Browser-basierte Schreib-/Lesetests und Plausibilitätsprüfungen der nutzbaren Kapazität – ohne Installation.
-            </p>
-
-            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
-                <button
-                    id="startButton"
-                    class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold bg-brand-primary text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"
-                    data-i18n="fake_cta_start">
-                    Browser-Test starten (Demo)
-                </button>
-
-                <a href="/?lang=<?= htmlspecialchars($lang) ?>"
-                   class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-medium border border-brand-border text-brand-muted hover:border-brand-primary hover:text-brand-primary transition-colors"
-                   data-i18n="fake_cta_back_home">
-                    Zur Übersicht zurück
-                </a>
-            </div>
-
-            <p class="text-xs text-brand-muted/80 max-w-md" data-i18n="fake_hero_hint">
-                Der FakeCheck im Browser arbeitet mit Testdateien und Lese-/Schreibmustern, die du in einem ausgewählten Ordner anlegst. Deine echten Dateien bleiben unangetastet.
-            </p>
-        </div>
-
-        <!-- Right: Explainer -->
-        <div class="flex-1 max-w-md w-full">
-            <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft space-y-4">
-                <h2 class="font-heading text-lg sm:text-xl font-semibold text-white" data-i18n="fake_box_title">
-                    Was der Browser-Test leisten kann
-                </h2>
-                <ul class="space-y-3 text-sm text-brand-muted">
-                    <li class="flex gap-2">
-                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">1</span>
-                        <div>
-                            <p class="font-medium text-brand-text" data-i18n="fake_box_point1_title">Schreib-/Lesetest mit Testdateien</p>
-                            <p data-i18n="fake_box_point1_text">
-                                Der Browser legt Testdateien im gewählten Ordner an, misst Schreib- und Leseraten und prüft, ob gelesene Daten mit den geschriebenen Mustern übereinstimmen.
-                            </p>
-                        </div>
-                    </li>
-                    <li class="flex gap-2">
-                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">2</span>
-                        <div>
-                            <p class="font-medium text-brand-text" data-i18n="fake_box_point2_title">Plausibilitätscheck der Kapazität</p>
-                            <p data-i18n="fake_box_point2_text">
-                                Aus der Menge der erfolgreich geschriebenen und verifizierten Daten ergibt sich ein realistischer Eindruck, wie viel Nutzkapazität tatsächlich stabil ankommt.
-                            </p>
-                        </div>
-                    </li>
-                    <li class="flex gap-2">
-                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">3</span>
-                        <div>
-                            <p class="font-medium text-brand-text" data-i18n="fake_box_point3_title">JSON-Report für deine Dokumentation</p>
-                            <p data-i18n="fake_box_point3_text">
-                                Alle Ergebnisse werden in einem strukturierten JSON-Report gesammelt, den du speichern, hochladen oder für spätere Vergleiche nutzen kannst.
-                            </p>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- APP / DEMO-BEREICH -->
-<section id="webcheck" class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
-    <div class="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)] items-start">
-        <!-- Links: Test-Steuerung (Platzhalter) -->
-        <div class="space-y-6">
-            <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-6 sm:p-7 shadow-soft">
-                <h2 class="font-heading text-xl sm:text-2xl font-semibold mb-2 text-white" data-i18n="fake_app_title">
-                    Browser-Testoberfläche (Preview)
-                </h2>
-                <p class="text-sm text-brand-muted mb-4" data-i18n="fake_app_intro">
-                    Hier entsteht die eigentliche FakeCheck-Web-App: Auswahl des Testordners, Konfiguration der Testmenge, Fortschrittsanzeige und Ergebnisübersicht. Aktuell zeigt der Button oben nur eine Demo-Ausgabe.
-                </p>
-
-                <ul class="space-y-2 text-xs text-brand-muted">
-                    <li data-i18n="fake_app_point1">• Quick-Test mit kleiner Datenmenge.</li>
-                    <li data-i18n="fake_app_point2">• Light-Benchmark: Schreib-/Lesegeschwindigkeit über begrenzte Zeit.</li>
-                    <li data-i18n="fake_app_point3">• Write/Verify: Testdateien schreiben und direkt wieder verifizieren.</li>
-                </ul>
-            </div>
-        </div>
-
-        <!-- Rechts: Ergebnis / JSON-Report-Preview -->
-        <div class="space-y-4">
-            <div id="resultContainer" class="hidden rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft">
-                <h3 class="font-heading text-lg font-semibold mb-2 text-white" data-i18n="fake_result_title">
-                    Demo-Ausgabe des Browser-Tests
-                </h3>
-                <p class="text-xs text-brand-muted mb-3" data-i18n="fake_result_hint">
-                    Diese Ausgabe dient nur als Vorschau. Später wird hier der echte JSON-Report aus dem Browser-Test angezeigt.
-                </p>
-                <pre id="resultOutput"
-                     class="text-[11px] whitespace-pre-wrap bg-black/40 text-brand-muted rounded-xl p-3 font-mono overflow-x-auto min-h-[140px]">
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>
-
 <?php
-// Layout-Ende (Footer + Scripts)
+require __DIR__ . '/../../src/functions.php';
-require __DIR__ . '/../partials/layout_end.php';
+$lang = $_GET['lang'] ?? 'en';
+$lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';
+
+// Basis-URL für Reports
+$baseUrl = "https://usbcheck.it";
 ?>
 
-<!-- Seiteigener JS-Placeholder für die spätere Web-App-Logik -->
+<?php tpl('layout_start', 'structure'); ?>
+
+<?php tpl('hero',     'landing', 'fakecheck'); ?>
+<?php tpl('webcheck', 'landing', 'fakecheck'); ?>
+
+<!-- JS-Einbindung -->
 <script>
-document.addEventListener("DOMContentLoaded", function () {
+window.fakecheckBaseUrl = "<?= htmlspecialchars($baseUrl . '/fakecheck') ?>";
-    const startButton = document.getElementById("startButton");
+window.fakecheckLocale  = "<?= htmlspecialchars($lang) ?>";
-    const resultContainer = document.getElementById("resultContainer");
-    const resultOutput = document.getElementById("resultOutput");
-
-    if (!startButton || !resultContainer || !resultOutput) return;
-
-    startButton.addEventListener("click", function () {
-        const now = new Date().toISOString();
-        const demoReport = {
-            meta: {
-                tool: "<?= htmlspecialchars($baseUrl . '/fakecheck') ?>",
-                mode: "browser-demo",
-                timestamp: now,
-                locale: "<?= htmlspecialchars($lang) ?>"
-            },
-            tests: [
-                { id: "quick_test",      label: "Quick-Test (Demo)",        status: "pending" },
-                { id: "light_benchmark", label: "Light-Benchmark (Demo)",   status: "pending" },
-                { id: "write_verify",    label: "Write/Verify (Demo)",      status: "pending" }
-            ],
-            note: "Dies ist nur eine Platzhalter-Ausgabe. Die echte Web-Testlogik (File System Access, Fortschritt, realer JSON-Report) implementieren wir im nächsten Schritt."
-        };
-
-        resultOutput.textContent = JSON.stringify(demoReport, null, 2);
-        resultContainer.classList.remove("hidden");
-        resultContainer.scrollIntoView({ behavior: "smooth", block: "start" });
-    });
-});
 </script>
+<script src="/assets/js/fakecheck.js?v=1"></script>
+
+<?php tpl('layout_end', 'structure'); ?>

public/index.php

@@ -1,4 +1,6 @@
 <?php
+require __DIR__ . '/../src/functions.php';
+
 // Sprachlogik:
 $lang = $_GET['lang'] ?? 'en';
 $lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';
@@ -17,6 +19,19 @@ $navAnchors = [
     [ 'href' => '#faq',      'key' => 'nav_faq' ],
 ];
 
+tpl('layout_start');                  // structure/header.php
+?>
+<?php tpl('hero',     'landing', 'main'); ?>
+<?php tpl('how',      'landing', 'main'); ?>
+<?php tpl('problem',  'landing', 'main'); ?>
+<?php tpl('features', 'landing', 'main'); ?>
+<?php tpl('security', 'landing', 'main'); ?>
+<?php tpl('faq',      'landing', 'main'); ?>
+
+tpl('layout_end');                  // structure/footer.php
+
+
+/*
 // Layout-Start (Head, Body, Header, <main>)
 require __DIR__ . '/partials/layout_start.php';
 ?>

public/index2.php

@@ -1,234 +0,0 @@
-<?php
-// public/index.php
-
-// Einfache Sprach-Erkennung
-$supportedLangs = ['de', 'en', 'it', 'fr'];
-$defaultLang    = 'en';
-
-// 1) Direkt per ?lang=de
-if (isset($_GET['lang']) && in_array($_GET['lang'], $supportedLangs, true)) {
-    $currentLang = $_GET['lang'];
-} else {
-    // 2) Grobe Erkennung aus Accept-Language
-    $currentLang = $defaultLang;
-    if (!empty($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
-        $accepted = strtolower(substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2));
-        if (in_array($accepted, $supportedLangs, true)) {
-            $currentLang = $accepted;
-        }
-    }
-}
-?>
-<!DOCTYPE html>
-<html lang="<?php echo htmlspecialchars($currentLang); ?>">
-<head>
-    <meta charset="UTF-8">
-    <title>USBCheck – Test your USB drives</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Fonts: Montserrat + Inter -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
-
-    <!-- Main stylesheet -->
-    <link rel="stylesheet" href="/assets/css/main.css?v=1">
-</head>
-<body data-current-lang="<?php echo htmlspecialchars($currentLang); ?>">
-
-<?php
-// Header-Partial einbinden (benutzt $currentLang)
-include __DIR__ . '/partials/header.php';
-?>
-
-<main>
-    <!-- HERO -->
-    <section class="section hero" id="top">
-        <div class="container hero-grid">
-            <div class="hero-text">
-                <p class="hero-kicker" data-i18n="hero_kicker"></p>
-                <h1 class="hero-title" data-i18n="hero_title"></h1>
-                <p class="hero-subtitle" data-i18n="hero_subtitle"></p>
-
-                <div class="hero-actions">
-                    <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/fakecheck/', $currentLang)); ?>"
-                       class="btn btn-primary"
-                       id="quick-test-btn"
-                       data-i18n="cta_quick_test"></a>
-
-                    <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/', $currentLang)); ?>#how-it-works"
-                       class="btn btn-ghost"
-                       data-i18n="cta_how_it_works"></a>
-                </div>
-
-                <ul class="hero-bullets">
-                    <li data-i18n="hero_bullet_1"></li>
-                    <li data-i18n="hero_bullet_2"></li>
-                    <li data-i18n="hero_bullet_3"></li>
-                </ul>
-            </div>
-
-            <div class="hero-visual">
-                <div class="hero-card">
-                    <img src="/img/logo_slogan.png" alt="usbcheck.it" class="hero-logo">
-                    <p class="hero-card-title" data-i18n="hero_card_title"></p>
-                    <div class="hero-metrics">
-                        <div class="metric">
-                            <span class="metric-label" data-i18n="metric_speed"></span>
-                            <span class="metric-value">125 MB/s</span>
-                        </div>
-                        <div class="metric">
-                            <span class="metric-label" data-i18n="metric_integrity"></span>
-                            <span class="metric-value">99.98%</span>
-                        </div>
-                        <div class="metric">
-                            <span class="metric-label" data-i18n="metric_confidence"></span>
-                            <span class="metric-value">✔</span>
-                        </div>
-                    </div>
-                    <p class="hero-small" data-i18n="hero_small_hint"></p>
-                </div>
-                <div class="hero-stick">
-                    <img src="/img/stick_blank.png" alt="USB Stick Illustration">
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- HOW IT WORKS -->
-    <section class="section" id="how-it-works">
-        <div class="container">
-            <h2 class="section-title" data-i18n="how_title"></h2>
-            <p class="section-lead" data-i18n="how_intro"></p>
-
-            <div class="steps-grid">
-                <article class="step-card">
-                    <div class="step-icon">1</div>
-                    <h3 data-i18n="how_step1_title"></h3>
-                    <p data-i18n="how_step1_text"></p>
-                </article>
-                <article class="step-card">
-                    <div class="step-icon">2</div>
-                    <h3 data-i18n="how_step2_title"></h3>
-                    <p data-i18n="how_step2_text"></p>
-                </article>
-                <article class="step-card">
-                    <div class="step-icon">3</div>
-                    <h3 data-i18n="how_step3_title"></h3>
-                    <p data-i18n="how_step3_text"></p>
-                </article>
-                <article class="step-card">
-                    <div class="step-icon">4</div>
-                    <h3 data-i18n="how_step4_title"></h3>
-                    <p data-i18n="how_step4_text"></p>
-                </article>
-            </div>
-        </div>
-    </section>
-
-    <!-- FEATURES -->
-    <section class="section section-alt" id="features">
-        <div class="container">
-            <h2 class="section-title" data-i18n="features_title"></h2>
-            <p class="section-lead" data-i18n="features_intro"></p>
-
-            <div class="features-grid">
-                <article class="feature-card">
-                    <h3 data-i18n="feature_free_title"></h3>
-                    <ul>
-                        <li data-i18n="feature_free_1"></li>
-                        <li data-i18n="feature_free_2"></li>
-                        <li data-i18n="feature_free_3"></li>
-                    </ul>
-                </article>
-
-                <article class="feature-card feature-card-pro">
-                    <div class="pill" data-i18n="label_coming_soon"></div>
-                    <h3 data-i18n="feature_pro_title"></h3>
-                    <ul>
-                        <li data-i18n="feature_pro_1"></li>
-                        <li data-i18n="feature_pro_2"></li>
-                        <li data-i18n="feature_pro_3"></li>
-                    </ul>
-                </article>
-            </div>
-        </div>
-    </section>
-
-    <!-- PRICING -->
-    <section class="section" id="pricing">
-        <div class="container">
-            <h2 class="section-title" data-i18n="pricing_title"></h2>
-            <p class="section-lead" data-i18n="pricing_intro"></p>
-
-            <div class="pricing-grid">
-                <article class="pricing-card">
-                    <h3 data-i18n="pricing_free_title"></h3>
-                    <p class="price-tag" data-i18n="pricing_free_price"></p>
-                    <ul>
-                        <li data-i18n="pricing_free_1"></li>
-                        <li data-i18n="pricing_free_2"></li>
-                        <li data-i18n="pricing_free_3"></li>
-                    </ul>
-                    <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/fakecheck/', $currentLang)); ?>"
-                       class="btn btn-primary"
-                       data-i18n="pricing_free_cta"></a>
-                </article>
-
-                <article class="pricing-card pricing-card-muted">
-                    <h3 data-i18n="pricing_pro_title"></h3>
-                    <p class="price-tag" data-i18n="pricing_pro_price"></p>
-                    <ul>
-                        <li data-i18n="pricing_pro_1"></li>
-                        <li data-i18n="pricing_pro_2"></li>
-                        <li data-i18n="pricing_pro_3"></li>
-                    </ul>
-                    <button class="btn btn-disabled" disabled data-i18n="pricing_pro_cta"></button>
-                </article>
-            </div>
-        </div>
-    </section>
-
-    <!-- FAQ -->
-    <section class="section section-alt" id="faq">
-        <div class="container">
-            <h2 class="section-title" data-i18n="faq_title"></h2>
-            <p class="section-lead" data-i18n="faq_intro"></p>
-
-            <div class="faq-grid">
-                <details class="faq-item" open>
-                    <summary data-i18n="faq_q1"></summary>
-                    <p data-i18n="faq_a1"></p>
-                </details>
-                <details class="faq-item">
-                    <summary data-i18n="faq_q2"></summary>
-                    <p data-i18n="faq_a2"></p>
-                </details>
-                <details class="faq-item">
-                    <summary data-i18n="faq_q3"></summary>
-                    <p data-i18n="faq_a3"></p>
-                </details>
-                <details class="faq-item">
-                    <summary data-i18n="faq_q4"></summary>
-                    <p data-i18n="faq_a4"></p>
-                </details>
-            </div>
-        </div>
-    </section>
-</main>
-
-<footer class="site-footer">
-    <div class="container footer-inner">
-        <p>&copy; <?php echo date('Y'); ?> usbcheck.it</p>
-        <div class="footer-links">
-            <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/impressum', $currentLang)); ?>"
-               data-i18n="footer_imprint"></a>
-            <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/datenschutz', $currentLang)); ?>"
-               data-i18n="footer_privacy"></a>
-        </div>
-    </div>
-</footer>
-
-<script src="/assets/js/lang.js?v=1"></script>
-</body>
-</html>

src/functions.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Templating Loader
+ *
+ * Beispiel:
+ * tpl('header');                            // structure/header.php
+ * tpl('hero', 'landing', 'main');           // landing/main/hero.php
+ * tpl('faq', 'landing', 'fakecheck');       // landing/fakecheck/faq.php
+ */
+
+function tpl(string $file, string $type = 'structure', string $site = 'main'): void
+{
+    // Basisordner
+    $base = __DIR__ . '/../partials/';
+
+    // Erlaubte Typen & Sites
+    $allowedTypes = ['structure', 'landing'];
+    $allowedSites = ['main', 'fakecheck'];
+
+    // Validierung
+    if (!in_array($type, $allowedTypes)) {
+        $type = 'structure';
+    }
+
+    if (!in_array($site, $allowedSites)) {
+        $site = 'main';
+    }
+
+    // Zielpfad konstruieren
+    if ($type === 'landing') {
+        // landing -> landing/{site}/{file}.php
+        $path = $base . "landing/$site/$file.php";
+    } else {
+        // structure -> structure/{file}.php
+        $path = $base . "structure/$file.php";
+    }
+
+    // Datei laden
+    if (file_exists($path)) {
+        include $path;
+    } else {
+        echo "<!-- tpl(): Datei nicht gefunden: $path -->";
+    }
+}