Merge remote-tracking branch 'gitea/main'

# Conflicts:
#	pitch-deck/components/slides/MilestonesSlide.tsx
#	pitch-deck/lib/finanzplan/engine.ts

pitch-deck/components/slides/MilestonesSlide.tsx

@@ -1,137 +1,15 @@
 'use client'
 
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { Language } from '@/lib/types'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
-
-import { type Milestone, MILESTONES, STATS } from './MilestonesSlide.data'
-import { THEMES } from './MilestonesSlide.themes'
-import { StarField, SoftGrid, Timeline, StatCard, DetailModal } from './MilestonesSlide.parts'
+import { type Milestone } from './MilestonesSlide.data'
+import { THEMES, CSS_KF, useIsLight } from './MilestonesSlide.themes'
+import { MilestonesInner } from './MilestonesSlide.parts'
 
 interface MilestonesSlideProps { lang: Language }
 
-const MONO: React.CSSProperties = {
-  fontFamily: '"JetBrains Mono","SF Mono",ui-monospace,monospace',
-  fontVariantNumeric: 'tabular-nums',
-}
-
-const CSS_KF = `
-  @keyframes msFlow { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-18} }
-  @keyframes msFadeIn { from{opacity:0} to{opacity:1} }
-  @keyframes msScaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
-  @keyframes msHeadingDark {
-    0%,100%{text-shadow:0 0 22px rgba(167,139,250,.3)}
-    50%    {text-shadow:0 0 40px rgba(167,139,250,.6)}
-  }
-  @keyframes msHeadingLight {
-    0%,100%{text-shadow:0 0 22px rgba(124,58,237,.15)}
-    50%    {text-shadow:0 0 36px rgba(124,58,237,.30)}
-  }
-  @keyframes msPulse {
-    0%,100%{r:9;opacity:.4}
-    50%    {r:14;opacity:.05}
-  }
-`
-
-// ── Light mode hook ───────────────────────────────────────────────────────────
-function useIsLight() {
-  const [isLight, setIsLight] = useState(false)
-  useEffect(() => {
-    const check = () => setIsLight(document.documentElement.classList.contains('theme-light'))
-    check()
-    const obs = new MutationObserver(check)
-    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
-    return () => obs.disconnect()
-  }, [])
-  return isLight
-}
-
-// ── Inner slide (fixed 1280×680) ──────────────────────────────────────────────
-function MilestonesInner({ t, de, sel, setSel }: {
-  t: typeof THEMES.dark; de: boolean
-  sel: Milestone | null
-  setSel: (m: Milestone | null) => void
-}) {
-  const doneCnt = useMemo(() => MILESTONES.filter(m => m.done).length, [])
-  const total = MILESTONES.length
-
-  return (
-    <div style={{
-      position: 'relative', width: 1280, height: 600, overflow: 'hidden',
-      background: t.bg, color: t.fg,
-      fontFamily: '"Inter", system-ui, sans-serif', WebkitFontSmoothing: 'antialiased',
-    }}>
-      {/* Ambient glow */}
-      <div style={{
-        position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
-        width: 800, height: 500, borderRadius: '50%',
-        background: t.ambient, filter: 'blur(50px)', pointerEvents: 'none',
-      }} />
-
-      {t.stars ? <StarField /> : <SoftGrid t={t} />}
-
-      {/* Progress indicator */}
-      <div style={{
-        position: 'absolute', top: 36, right: 52, display: 'flex', alignItems: 'center', gap: 10, zIndex: 3,
-      }}>
-        <div style={{ ...MONO, fontSize: 10, letterSpacing: 2, color: t.fgMuted, textTransform: 'uppercase' as const, fontWeight: 700 }}>
-          {de ? 'Fortschritt' : 'Progress'}
-        </div>
-        <div style={{
-          width: 120, height: 6, background: t.progressTrackBg, borderRadius: 3, overflow: 'hidden',
-          border: `1px solid ${t.progressTrackBorder}`,
-        }}>
-          <div style={{
-            width: `${(doneCnt / total) * 100}%`, height: '100%',
-            background: `linear-gradient(90deg, ${t.done}, ${t.accent})`,
-            boxShadow: `0 0 12px ${t.done}99`,
-          }} />
-        </div>
-        <div style={{ ...MONO, fontSize: 11, color: t.fg, fontWeight: 700 }}>
-          <span style={{ color: t.done }}>{doneCnt}</span>
-          <span style={{ color: t.fgWhisper }}> / {total}</span>
-        </div>
-      </div>
-
-      {/* Tip */}
-      <div style={{
-        position: 'absolute', top: 36, left: 52, ...MONO, fontSize: 10,
-        letterSpacing: 2, color: t.fgGhost, textTransform: 'uppercase' as const, fontWeight: 700,
-        display: 'flex', alignItems: 'center', gap: 8, zIndex: 3,
-      }}>
-        <span>{de ? 'Tipp:' : 'Tip:'}</span>
-        <span style={{ color: t.accent70 }}>{de ? 'Klick auf einen Meilenstein' : 'Click any milestone'}</span>
-      </div>
-
-      {/* Timeline */}
-      <div style={{ position: 'relative', marginTop: 68 }}>
-        <Timeline onSelect={setSel} selectedId={sel?.id ?? null} t={t} de={de} />
-      </div>
-
-      {/* Stats */}
-      <div style={{
-        position: 'absolute', left: 40, right: 40, bottom: 36,
-        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14,
-      }}>
-        {STATS.map(s => <StatCard key={s.tint} item={s} t={t} de={de} />)}
-      </div>
-
-      {/* Footer */}
-      <div style={{
-        position: 'absolute', left: 0, right: 0, bottom: 14, textAlign: 'center',
-        ...MONO, fontSize: 9, letterSpacing: 3, color: t.accent40,
-        textTransform: 'uppercase' as const, fontWeight: 700,
-      }}>
-        {de ? 'Stand heute · live-Metriken aus der Plattform' : 'As of today · live metrics from the platform'}
-      </div>
-
-      <DetailModal item={sel} onClose={() => setSel(null)} t={t} de={de} />
-    </div>
-  )
-}
-
-// ── Main slide ────────────────────────────────────────────────────────────────
 const INNER_W = 1280
 const INNER_H = 600