feat(pitch-deck): solution text fixes + USP bridge 3 variants

- Solution: 30k → 15k+ EUR per year per application
- Solution: DE oder FR → Deutschland
- USP title: Unser USP → USP
- USP bridge: 3 switchable variants (A: circular loop,
  B: infinity loop, C: hexagonal hub) with toggle buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pitch-deck/components/slides/USPSlide.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { Language } from '@/lib/types'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
@@ -17,10 +18,13 @@ interface USPSlideProps {
   lang: Language
 }
 
+type BridgeVariant = 'A' | 'B' | 'C'
+
 export default function USPSlide({ lang }: USPSlideProps) {
   const de = lang === 'de'
+  const [bridgeVariant, setBridgeVariant] = useState<BridgeVariant>('A')
 
-  const title = de ? 'Unser USP' : 'Our USP'
+  const title = 'USP'
   const subtitle = de
     ? 'Die erste Plattform, die Compliance-Dokumente und tatsächliche Code-Umsetzung verbindet'
     : 'The first platform that connects compliance documents with actual code implementation'
@@ -112,14 +116,69 @@ export default function USPSlide({ lang }: USPSlideProps) {
             </GlassCard>
           </div>
 
-          {/* Center: Bridge */}
+          {/* Center: Bridge — 3 variants to choose from */}
           <div className="col-span-1 flex flex-col items-center justify-center">
-            <div className="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30 mb-2">
-              <ArrowLeftRight className="w-6 h-6 text-white" />
+            {bridgeVariant === 'A' && (
+              /* Variant A: Circular Loop with BreakPilot in center */
+              <div className="relative w-24 h-24">
+                {/* Rotating ring */}
+                <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/30 animate-[spin_12s_linear_infinite]" />
+                {/* Arrows on ring */}
+                <div className="absolute -top-1 left-1/2 -translate-x-1/2 text-indigo-400 text-xs">&#x25B2;</div>
+                <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 text-purple-400 text-xs">&#x25BC;</div>
+                <div className="absolute top-1/2 -left-1 -translate-y-1/2 text-indigo-400 text-xs">&#x25C0;</div>
+                <div className="absolute top-1/2 -right-1 -translate-y-1/2 text-purple-400 text-xs">&#x25B6;</div>
+                {/* Center hub */}
+                <div className="absolute inset-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
+                  <span className="text-[9px] font-black text-white leading-tight text-center">Break<br/>Pilot</span>
+                </div>
+              </div>
+            )}
+            {bridgeVariant === 'B' && (
+              /* Variant B: Infinity Loop */
+              <div className="relative w-28 h-16 flex items-center justify-center">
+                <svg viewBox="0 0 120 50" className="w-full h-full">
+                  <path d="M60,25 C60,10 40,0 25,10 C10,20 10,30 25,40 C40,50 60,40 60,25 C60,10 80,0 95,10 C110,20 110,30 95,40 C80,50 60,40 60,25" fill="none" stroke="url(#inf-grad)" strokeWidth="2" strokeDasharray="4 2" className="animate-[dash_3s_linear_infinite]" />
+                  <defs>
+                    <linearGradient id="inf-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+                      <stop offset="0%" stopColor="#6366f1" />
+                      <stop offset="100%" stopColor="#a855f7" />
+                    </linearGradient>
+                  </defs>
+                  <circle cx="60" cy="25" r="14" fill="url(#inf-grad)" />
+                  <text x="60" y="23" textAnchor="middle" fill="white" fontSize="6" fontWeight="bold">Break</text>
+                  <text x="60" y="30" textAnchor="middle" fill="white" fontSize="6" fontWeight="bold">Pilot</text>
+                </svg>
+              </div>
+            )}
+            {bridgeVariant === 'C' && (
+              /* Variant C: Hexagonal Hub with arrows */
+              <div className="relative">
+                <div className="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30" style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}>
+                  <div className="text-center">
+                    <span className="text-[8px] font-black text-white block leading-tight">Break</span>
+                    <span className="text-[8px] font-black text-white block leading-tight">Pilot</span>
+                    <span className="text-[6px] text-white/60 block mt-0.5">COMPLAI</span>
+                  </div>
+                </div>
+                {/* Left arrow */}
+                <div className="absolute top-1/2 -left-3 -translate-y-1/2 text-indigo-400">&#x25C0;</div>
+                {/* Right arrow */}
+                <div className="absolute top-1/2 -right-3 -translate-y-1/2 text-purple-400">&#x25B6;</div>
+              </div>
+            )}
+            {/* Variant toggle — small buttons below */}
+            <div className="flex gap-1 mt-2">
+              {(['A', 'B', 'C'] as BridgeVariant[]).map(v => (
+                <button
+                  key={v}
+                  onClick={() => setBridgeVariant(v)}
+                  className={`w-5 h-5 rounded text-[9px] font-bold transition-all ${bridgeVariant === v ? 'bg-indigo-500 text-white' : 'bg-white/10 text-white/30 hover:text-white/60'}`}
+                >
+                  {v}
+                </button>
+              ))}
             </div>
-            <p className="text-[10px] font-bold text-white/40 uppercase tracking-wider text-center">
-              {de ? 'Brücke' : 'Bridge'}
-            </p>
           </div>
 
           {/* Right: Code */}