layout

partials/landing/main/faq.php

@@ -1,10 +1,11 @@
-<section id="faq" class="border-t border-brand-border/70 bg-brand-primarySoft/10">
+<section id="faq" class="border-t border-brand-border/60 bg-brand-primarySoft/10 py-16 sm:py-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="px-4 sm:px-6 lg:px-8">
+        <div class="section-shell 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">
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" data-i18n="faq_title">
                 Häufige Fragen zu USBCheck
             </h2>
             <p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro">
@@ -13,7 +14,7 @@
         </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">
+            <details class="group card-frame">
                 <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>
@@ -24,7 +25,7 @@
                 </div>
             </details>
 
-            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+            <details class="group card-frame">
                 <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>
@@ -35,7 +36,7 @@
                 </div>
             </details>
 
-            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+            <details class="group card-frame">
                 <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>
@@ -46,7 +47,7 @@
                 </div>
             </details>
 
-            <details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
+            <details class="group card-frame">
                 <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>
@@ -58,4 +59,5 @@
             </details>
         </div>
         </div>
+    </div>
 </section>

partials/landing/main/features.php

@@ -1,10 +1,11 @@
-<section id="features" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
+<section id="features" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-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="px-4 sm:px-6 lg:px-8">
+        <div class="section-shell 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">
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -14,9 +15,9 @@
 
         <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="card-frame card-frame--soft 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>
+                    <h3 class="font-heading text-xl font-semibold text-brand-text" 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>
@@ -42,9 +43,9 @@
             </div>
 
             <!-- Pro -->
-            <div class="rounded-xl2 border border-brand-primary/60 bg-brand-surface shadow-soft p-6 space-y-4">
+            <div class="card-frame card-frame--accent 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>
+                    <h3 class="font-heading text-xl font-semibold text-brand-text" 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>
@@ -65,4 +66,5 @@
             </div>
         </div>
         </div>
+    </div>
 </section>

partials/landing/main/how.php

@@ -1,10 +1,11 @@
-<section id="how" class="border-t border-brand-border/70 bg-brand-primarySoft/30">
+<section id="how" class="border-t border-brand-border/60 bg-brand-primarySoft/30 py-16 sm:py-20">
-    <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="px-4 sm:px-6 lg:px-8">
+        <div class="section-shell 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">
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -43,8 +44,8 @@
         </div>
 
             <!-- Small feature card -->
-        <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5">
+            <div class="card-frame card-frame--soft space-y-5">
-            <h3 class="font-heading text-lg font-semibold text-white" data-i18n="how_side_title">
+                <h3 class="font-heading text-lg font-semibold text-brand-text" data-i18n="how_side_title">
                     Free vs Pro at a glance
                 </h3>
                 <ul class="space-y-3 text-sm text-brand-muted">
@@ -69,4 +70,5 @@
                 </ul>
             </div>
         </div>
+    </div>
 </section>

partials/landing/main/problem.php

@@ -1,10 +1,11 @@
-<section id="problem" class="border-t border-brand-border/70">
+<section id="problem" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
-    <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="px-4 sm:px-6 lg:px-8">
+        <div class="section-shell 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">
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -16,19 +17,19 @@
         </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">
+            <div class="card-frame 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">
+            <div class="card-frame 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">
+            <div class="card-frame 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.
@@ -37,4 +38,3 @@
         </div>
     </div>
 </section>
-

partials/landing/main/security.php

@@ -1,10 +1,11 @@
-<section id="security" class="border-t border-brand-border/70">
+<section id="security" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
-    <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="px-4 sm:px-6 lg:px-8">
+        <div class="section-shell 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">
+            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -13,19 +14,19 @@
         </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">
+            <div class="card-frame 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">
+            <div class="card-frame 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">
+            <div class="card-frame 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.
@@ -33,4 +34,5 @@
             </div>
         </div>
         </div>
+    </div>
 </section>

public/assets/css/main.css

@@ -529,6 +529,46 @@ body {
   color: #7a86a8;
 }
 
+.section-shell {
+  position: relative;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: clamp(1.75rem, 3.5vw, 3.25rem);
+  border-radius: 36px;
+  background: linear-gradient(155deg, #ffffff 0%, #f4f7ff 100%);
+  border: 1px solid rgba(58, 111, 248, 0.14);
+  box-shadow: 0 30px 60px rgba(15, 33, 66, 0.08);
+  backdrop-filter: blur(6px);
+  overflow: hidden;
+}
+
+.section-shell::after {
+  content: "";
+  position: absolute;
+  inset: 12% 8% auto auto;
+  width: 160px;
+  height: 160px;
+  background: radial-gradient(circle, rgba(255, 215, 166, 0.18), transparent 65%);
+  pointer-events: none;
+}
+
+.card-frame {
+  border-radius: 26px;
+  padding: 1.5rem;
+  background: linear-gradient(140deg, #ffffff 0%, #f5f7ff 100%);
+  border: 1px solid rgba(58, 111, 248, 0.14);
+  box-shadow: 0 18px 40px rgba(15, 33, 66, 0.08);
+}
+
+.card-frame--accent {
+  border-color: rgba(58, 111, 248, 0.3);
+  box-shadow: 0 22px 45px rgba(58, 111, 248, 0.15);
+}
+
+.card-frame--soft {
+  background: linear-gradient(140deg, #fbfcff 0%, #f2f6ff 100%);
+}
+
 /* Steps / Features / Pricing */
 
 .steps-grid,