From 20358eea6c07cf9e1f10554ce590c126d0ce07fa Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Sat, 25 Apr 2026 20:52:25 +0200
Subject: [PATCH] redeisng to match osq

---
 app/pages/copilot.vue          | 1852 +++++++++++++++++++++++++++-----
 shared/data/a320SopTimeline.ts |  321 ++++--
 2 files changed, 1803 insertions(+), 370 deletions(-)

diff --git a/app/pages/copilot.vue b/app/pages/copilot.vue
index 32a89d2..5894e8e 100644
--- a/app/pages/copilot.vue
+++ b/app/pages/copilot.vue
@@ -1,6 +1,48 @@
 <script setup lang="ts">
-import {computed, nextTick, onMounted, onUnmounted, ref, watch} from 'vue'
-import {a320Profile, scratchFields, sopProfiles, type SopPhase, type SopStep} from '~~/shared/data/a320SopTimeline'
+import {computed, defineComponent, h, nextTick, onMounted, onUnmounted, ref, watch} from 'vue'
+import {VMenu} from 'vuetify/components'
+import {a320Profile, glossary, scratchFields, type SopPhase, type SopStep} from '~~/shared/data/a320SopTimeline'
+
+// Inline-Komponente für Rich-Text (Glossar-Pills + Scratchpad-Placeholder)
+const RichText = defineComponent({
+    name: 'RichText',
+    props: {
+        tokens: {type: Array as () => any[], required: true},
+        resolve: {type: Function as any, required: true},
+        glossary: {type: Object as any, required: true},
+    },
+    setup(props) {
+        return () => h('span', {class: 'rt'},
+            (props.tokens as any[]).map((seg, i) => {
+                if (seg.type === 'placeholder') {
+                    const v = props.resolve(seg.placeholderKey)
+                    if (v) return h('span', {key: i, class: 'rt-placeholder filled'}, v)
+                    return h('span', {key: i, class: 'rt-placeholder'}, seg.value)
+                }
+                if (seg.type === 'term') {
+                    const entry = (props.glossary as Map<string, any>).get(seg.term)
+                    if (!entry) return h('span', {key: i}, seg.value)
+                    return h(VMenu as any, {
+                        key: i,
+                        openOnHover: true,
+                        openOnClick: true,
+                        location: 'top',
+                        offset: 6,
+                        closeOnContentClick: false,
+                    }, {
+                        activator: ({props: a}: any) => h('span', {...a, class: 'rt-term'}, seg.value),
+                        default: () => h('div', {class: 'rt-term-popover'}, [
+                            h('div', {class: 'rt-term-head'}, entry.term),
+                            h('div', {class: 'rt-term-short'}, entry.short),
+                            entry.long ? h('div', {class: 'rt-term-long'}, entry.long) : null,
+                        ]),
+                    })
+                }
+                return h('span', {key: i}, seg.value)
+            }),
+        )
+    },
+})
 
 useHead({
     title: 'Copilot · A320 SOP – OpenSquawk',
@@ -8,37 +50,102 @@ useHead({
         {name: 'apple-mobile-web-app-capable', content: 'yes'},
         {name: 'mobile-web-app-capable', content: 'yes'},
         {name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'},
-        {name: 'theme-color', content: '#050910'},
+        {name: 'theme-color', content: '#0b1020'},
         {name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no'},
     ],
     link: [{rel: 'manifest', href: '/copilot.webmanifest'}],
 })
 
-const STORAGE_KEY = 'opensquawk.copilot.v1'
-
-// Statische Tailwind-Klassen pro Phase (dynamic interp wird nicht von JIT erkannt)
-const phaseChrome: Record<string, { bar: string; label: string }> = {
-    cyan: {bar: 'bg-cyan-500/10 border-cyan-400/20', label: 'text-cyan-300'},
-    sky: {bar: 'bg-sky-500/10 border-sky-400/20', label: 'text-sky-300'},
-    indigo: {bar: 'bg-indigo-500/10 border-indigo-400/20', label: 'text-indigo-300'},
-    emerald: {bar: 'bg-emerald-500/10 border-emerald-400/20', label: 'text-emerald-300'},
-    amber: {bar: 'bg-amber-500/10 border-amber-400/20', label: 'text-amber-300'},
-    rose: {bar: 'bg-rose-500/10 border-rose-400/20', label: 'text-rose-300'},
-}
+const STORAGE_KEY = 'opensquawk.copilot.v2'
 
 const activeProfile = ref(a320Profile)
 const phases = computed<SopPhase[]>(() => activeProfile.value.phases)
 
-// Scratchpad-State
+// State
 const scratch = ref<Record<string, string>>({})
-const variantSel = ref<Record<string, string>>({})       // stepId → variantId
+const variantSel = ref<Record<string, string>>({})
 const completed = ref<Record<string, boolean>>({})
+const expanded = ref<Record<string, boolean>>({})       // step.id → why-Toggle
 const activeStepId = ref<string | null>(null)
 const simbriefUser = ref('')
 const simbriefLoading = ref(false)
 const simbriefError = ref('')
+const showScratchpadMobile = ref(false)
+const rightTab = ref<'scratch' | 'canvas'>('scratch')
 
-// SimBrief import
+// Glossary lookup (lange Terms zuerst → "TRANS ALT" vor "ALT")
+const glossaryByTerm = new Map(glossary.map(g => [g.term.toUpperCase(), g]))
+const glossaryRegex = (() => {
+    const sorted = [...glossary].sort((a, b) => b.term.length - a.term.length)
+    const escaped = sorted.map(g => g.term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    return new RegExp(`\\b(${escaped.join('|')})\\b`, 'g')
+})()
+
+interface Segment {
+    type: 'text' | 'term' | 'placeholder'
+    value: string
+    term?: string
+    placeholderKey?: string
+}
+
+function tokenize(input: string): Segment[] {
+    if (!input) return []
+    // 1. Placeholder [KEY] aufsplitten
+    const out: Segment[] = []
+    const placeholderRx = /\[([A-Z0-9_ +/-]+)\]/g
+    let last = 0
+    let m: RegExpExecArray | null
+    while ((m = placeholderRx.exec(input)) !== null) {
+        if (m.index > last) out.push(...splitGlossary(input.slice(last, m.index)))
+        const key = m[1].trim()
+        out.push({type: 'placeholder', value: m[0], placeholderKey: key})
+        last = m.index + m[0].length
+    }
+    if (last < input.length) out.push(...splitGlossary(input.slice(last)))
+    return out
+}
+
+function splitGlossary(text: string): Segment[] {
+    const out: Segment[] = []
+    let last = 0
+    let m: RegExpExecArray | null
+    glossaryRegex.lastIndex = 0
+    while ((m = glossaryRegex.exec(text)) !== null) {
+        if (m.index > last) out.push({type: 'text', value: text.slice(last, m.index)})
+        out.push({type: 'term', value: m[0], term: m[0].toUpperCase()})
+        last = m.index + m[0].length
+    }
+    if (last < text.length) out.push({type: 'text', value: text.slice(last)})
+    return out
+}
+
+function placeholderValue(key: string): string {
+    const map: Record<string, string> = {
+        Callsign: 'callsign', CALLSIGN: 'callsign',
+        DEST: 'destination',
+        SID: 'sid',
+        RWY: 'rwy',
+        STAND: 'stand',
+        ATIS: 'atisLetter',
+        SQK: 'squawk',
+        INIT_ALT: 'initialClimb',
+        PASSING_ALT: 'initialClimb',
+        TWR_FREQ: 'twrFreq',
+        DEP_FREQ: 'depFreq',
+        FREQ: 'depFreq',
+        WIND: 'wind',
+        FLEX_TEMP: 'flexTemp',
+        TAXI_ROUTE: 'taxiRoute',
+        HOLDING: 'holdingPoint',
+        DIRECTION: '',
+        Station: '',
+    }
+    const fieldKey = map[key]
+    if (fieldKey) return scratch.value[fieldKey] || ''
+    return ''
+}
+
+// SimBrief Import
 async function importSimbrief() {
     if (!simbriefUser.value.trim()) return
     simbriefLoading.value = true
@@ -78,43 +185,15 @@ async function importSimbrief() {
     }
 }
 
-// Template-Interpolation für Callouts
-function interp(t?: string): string {
-    if (!t) return ''
-    return t.replace(/\[([^\]]+)\]/g, (_, key) => {
-        const k = String(key).trim()
-        const map: Record<string, string> = {
-            'Callsign': scratch.value.callsign,
-            'CALLSIGN': scratch.value.callsign,
-            'DEST': scratch.value.destination,
-            'SID': scratch.value.sid,
-            'RWY': scratch.value.rwy,
-            'ALT': scratch.value.initialClimb,
-            'CLEARED ALT': scratch.value.initialClimb,
-            'SQK': scratch.value.squawk,
-            'ATIS': scratch.value.atisLetter,
-            'XX': scratch.value.stand,
-            'FREQ': scratch.value.depFreq,
-            'TEMP': scratch.value.flexTemp,
-            'TWY': scratch.value.taxiRoute,
-            'TWY A, B, C': scratch.value.taxiRoute,
-        }
-        const val = map[k]
-        return val ? val : `[${k}]`
-    })
-}
-
-// Visible steps (mit Variant-Substitution)
+// Steps inkl. Variants flach
 function stepsForPhase(phase: SopPhase): SopStep[] {
     const out: SopStep[] = []
     for (const s of phase.steps) {
+        out.push(s)
         if (s.variants?.length) {
             const sel = variantSel.value[s.id] || s.variants[0].id
-            out.push(s)
             const variant = s.variants.find(v => v.id === sel)
             if (variant) out.push(...variant.steps)
-        } else {
-            out.push(s)
         }
     }
     return out
@@ -126,18 +205,34 @@ const allSteps = computed(() => {
     return out
 })
 
-const progressPct = computed(() => {
+const phaseProgress = computed(() => {
+    const out: Record<string, { done: number; total: number; pct: number }> = {}
+    for (const p of phases.value) {
+        const steps = stepsForPhase(p)
+        const done = steps.filter(s => completed.value[s.id]).length
+        out[p.id] = {done, total: steps.length, pct: steps.length ? Math.round(done / steps.length * 100) : 0}
+    }
+    return out
+})
+
+const totalProgress = computed(() => {
     const total = allSteps.value.length
     if (!total) return 0
     const done = allSteps.value.filter(({step}) => completed.value[step.id]).length
     return Math.round((done / total) * 100)
 })
 
+const activeStep = computed(() => allSteps.value.find(s => s.step.id === activeStepId.value))
+
 function toggleDone(id: string) {
     completed.value[id] = !completed.value[id]
     persist()
 }
 
+function toggleWhy(id: string) {
+    expanded.value[id] = !expanded.value[id]
+}
+
 function setActive(id: string) {
     activeStepId.value = id
 }
@@ -155,17 +250,31 @@ function nextStep() {
     persist()
 }
 
+function prevStep() {
+    const list = allSteps.value
+    const idx = list.findIndex(({step}) => step.id === activeStepId.value)
+    if (idx <= 0) return
+    activeStepId.value = list[idx - 1].step.id
+    nextTick(() => scrollToStep(activeStepId.value!))
+}
+
 function scrollToStep(id: string) {
     const el = document.querySelector(`[data-step-id="${id}"]`) as HTMLElement | null
     if (el) el.scrollIntoView({behavior: 'smooth', block: 'center'})
 }
 
+function jumpToPhase(id: string) {
+    const el = document.querySelector(`[data-phase-id="${id}"]`) as HTMLElement | null
+    if (el) el.scrollIntoView({behavior: 'smooth', block: 'start'})
+}
+
 function resetAll() {
     if (!confirm('Alle Eingaben & Fortschritt löschen?')) return
     scratch.value = {}
     completed.value = {}
     variantSel.value = {}
-    activeStepId.value = null
+    expanded.value = {}
+    activeStepId.value = phases.value[0]?.steps[0]?.id || null
     persist()
 }
 
@@ -201,19 +310,21 @@ onMounted(() => {
     if (!activeStepId.value && allSteps.value.length) activeStepId.value = allSteps.value[0].step.id
 })
 
-// Aktive Step-Beobachtung beim Scrollen
 let observer: IntersectionObserver | null = null
 
 function setupActiveObserver() {
     if (typeof IntersectionObserver === 'undefined') return
     observer = new IntersectionObserver((entries) => {
+        let best: { id: string; ratio: number } | null = null
         for (const e of entries) {
-            if (e.isIntersecting && e.intersectionRatio > 0.6) {
+            if (e.isIntersecting) {
                 const id = (e.target as HTMLElement).dataset.stepId
-                if (id) activeStepId.value = id
+                if (!id) continue
+                if (!best || e.intersectionRatio > best.ratio) best = {id, ratio: e.intersectionRatio}
             }
         }
-    }, {threshold: [0.6]})
+        if (best && best.ratio > 0.55) activeStepId.value = best.id
+    }, {threshold: [0.55, 0.8]})
     nextTick(() => {
         document.querySelectorAll('[data-step-id]').forEach(el => observer?.observe(el))
     })
@@ -230,9 +341,7 @@ onUnmounted(() => {
     observer?.disconnect()
 })
 
-// Right Panel Tabs
-const rightTab = ref<'scratch' | 'canvas'>('scratch')
-
+// Scratchpad-Felder
 const groupedFields = computed(() => {
     const groups: Record<string, typeof scratchFields> = {}
     for (const f of scratchFields) {
@@ -250,10 +359,10 @@ const groupTitles: Record<string, string> = {
     fuel: 'Fuel & Weights',
 }
 
-// Canvas (Apple Pencil)
+// Canvas
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const drawColor = ref('#fde68a')
-const lineWidth = ref(2.4)
+const lineWidth = ref(2.6)
 
 function setupCanvas() {
     const cv = canvasRef.value
@@ -264,6 +373,7 @@ function setupCanvas() {
         cv.width = rect.width * dpr
         cv.height = rect.height * dpr
         const ctx = cv.getContext('2d')!
+        ctx.setTransform(1, 0, 0, 1, 0, 0)
         ctx.scale(dpr, dpr)
         ctx.lineCap = 'round'
         ctx.lineJoin = 'round'
@@ -273,14 +383,11 @@ function setupCanvas() {
 
     let drawing = false
     let last: { x: number; y: number; p: number } | null = null
-
-    function pos(e: PointerEvent) {
-        const r = cv!.getBoundingClientRect()
+    const pos = (e: PointerEvent) => {
+        const r = cv.getBoundingClientRect()
         return {x: e.clientX - r.left, y: e.clientY - r.top, p: e.pressure || 0.5}
     }
-
     cv.addEventListener('pointerdown', (e) => {
-        if (e.pointerType === 'touch' && (e as any).isPrimary === false) return
         cv.setPointerCapture(e.pointerId)
         drawing = true
         last = pos(e)
@@ -310,211 +417,281 @@ function clearCanvas() {
     const cv = canvasRef.value
     if (!cv) return
     const ctx = cv.getContext('2d')!
+    const dpr = window.devicePixelRatio || 1
+    ctx.save()
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
     ctx.clearRect(0, 0, cv.width, cv.height)
+    ctx.restore()
+    ctx.scale(dpr, dpr)
 }
 
 const actorMeta: Record<string, { label: string; cls: string }> = {
-    pilot: {label: 'PILOT → ATC', cls: 'bg-cyan-500/15 text-cyan-200 border-cyan-400/30'},
-    pf: {label: 'PF', cls: 'bg-emerald-500/15 text-emerald-200 border-emerald-400/30'},
-    pm: {label: 'PM', cls: 'bg-violet-500/15 text-violet-200 border-violet-400/30'},
-    atc: {label: 'ATC', cls: 'bg-amber-500/15 text-amber-200 border-amber-400/30'},
-    cabin: {label: 'CABIN', cls: 'bg-rose-500/15 text-rose-200 border-rose-400/30'},
-    system: {label: 'SYSTEM', cls: 'bg-white/10 text-white/80 border-white/15'},
+    pilot: {label: 'Sagen', cls: 'tag-pilot'},
+    pf: {label: 'PF', cls: 'tag-pf'},
+    pm: {label: 'PM', cls: 'tag-pm'},
+    atc: {label: 'ATC sagt', cls: 'tag-atc'},
+    cabin: {label: 'Cabin', cls: 'tag-cabin'},
+    system: {label: 'Flugzeug', cls: 'tag-system'},
 }
 </script>
 
 <template>
-    <div class="copilot-root min-h-screen bg-[#050910] text-white">
-        <!-- Top Bar -->
-        <header class="sticky top-0 z-30 border-b border-white/10 bg-[#050910]/85 backdrop-blur">
-            <div class="mx-auto flex w-full max-w-[1600px] flex-wrap items-center gap-2 px-3 py-2 sm:px-5 sm:py-3">
-                <NuxtLink to="/" class="flex items-center gap-2 font-semibold tracking-tight">
-                    <v-icon icon="mdi-airplane-takeoff" size="22" class="text-cyan-400"/>
-                    <span class="text-sm sm:text-base">Copilot</span>
-                </NuxtLink>
-                <span class="hidden sm:inline rounded-full border border-cyan-400/30 bg-cyan-400/10 px-2 py-0.5 text-[11px] uppercase tracking-wider text-cyan-300">
-                    {{ activeProfile.name }}
-                </span>
+    <div class="copilot scene">
+        <!-- HUD / Top Bar -->
+        <header class="hud">
+            <div class="hud-inner">
+                <div class="hud-left">
+                    <NuxtLink to="/" class="hud-logo" title="Zurück zur Startseite">
+                        <v-icon size="22">mdi-radar</v-icon>
+                    </NuxtLink>
+                    <div class="hud-divider"/>
+                    <div class="hud-brand">
+                        <div class="brand-name">OpenSquawk</div>
+                        <div class="brand-mode">
+                            <v-icon size="14">mdi-airplane-cog</v-icon>
+                            Copilot · {{ activeProfile.name }}
+                        </div>
+                    </div>
+                </div>
 
-                <div class="ml-auto flex flex-wrap items-center gap-2">
-                    <div class="flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2 py-1">
+                <div class="hud-right">
+                    <div class="simbrief-box">
+                        <v-icon size="16" class="simbrief-icon">mdi-cloud-download-outline</v-icon>
                         <input
                             v-model="simbriefUser"
                             placeholder="SimBrief User / ID"
-                            class="w-32 sm:w-44 bg-transparent text-sm placeholder-white/40 focus:outline-none"
+                            class="simbrief-input"
                             @keyup.enter="importSimbrief"
                         />
                         <button
-                            class="rounded-md bg-cyan-500/90 px-2.5 py-1 text-xs font-medium text-black hover:bg-cyan-400 disabled:opacity-50"
+                            class="simbrief-btn"
                             :disabled="simbriefLoading || !simbriefUser.trim()"
                             @click="importSimbrief"
                         >
-                            <v-icon v-if="simbriefLoading" icon="mdi-loading mdi-spin" size="14"/>
+                            <v-icon v-if="simbriefLoading" size="14">mdi-loading mdi-spin</v-icon>
                             <span v-else>Import</span>
                         </button>
                     </div>
-                    <button class="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-white/80 hover:bg-white/10" @click="resetAll">
-                        <v-icon icon="mdi-refresh" size="14" class="mr-1"/>
-                        Reset
+                    <button class="icon-btn" :title="showScratchpadMobile ? 'Schließen' : 'Scratchpad'"
+                            @click="showScratchpadMobile = !showScratchpadMobile">
+                        <v-icon size="20">{{ showScratchpadMobile ? 'mdi-close' : 'mdi-notebook-edit-outline' }}</v-icon>
+                    </button>
+                    <button class="icon-btn" title="Reset" @click="resetAll">
+                        <v-icon size="20">mdi-refresh</v-icon>
                     </button>
                 </div>
             </div>
-            <!-- Progress Bar -->
-            <div class="h-1 w-full bg-white/5">
-                <div class="h-full bg-gradient-to-r from-cyan-400 via-sky-400 to-violet-400 transition-all" :style="{width: progressPct + '%'}"/>
+            <!-- Phase Pills -->
+            <div class="phase-bar">
+                <button
+                    v-for="p in phases"
+                    :key="p.id"
+                    class="phase-pill"
+                    :class="['accent-' + p.accent, {active: activeStep?.phase.id === p.id}]"
+                    @click="jumpToPhase(p.id)"
+                >
+                    <span class="phase-pill-label">{{ p.title }}</span>
+                    <span class="phase-pill-progress">{{ phaseProgress[p.id]?.done }}/{{ phaseProgress[p.id]?.total }}</span>
+                </button>
             </div>
-            <div v-if="simbriefError" class="bg-rose-500/15 px-4 py-1 text-xs text-rose-200">
-                {{ simbriefError }}
+            <div class="progress-track">
+                <div class="progress-fill" :style="{width: totalProgress + '%'}"/>
             </div>
+            <div v-if="simbriefError" class="error-banner">{{ simbriefError }}</div>
         </header>
 
-        <!-- Main Grid -->
-        <main class="mx-auto grid w-full max-w-[1600px] gap-3 px-2 py-3 sm:px-4 sm:py-4 lg:grid-cols-[minmax(0,1fr)_minmax(320px,460px)]">
-            <!-- Timeline Column -->
-            <section class="relative">
-                <div
-                    class="timeline-scroll snap-y snap-mandatory overflow-y-auto rounded-2xl border border-white/10 bg-white/[0.02] shadow-inner"
-                    style="max-height: calc(100dvh - 180px); min-height: 60vh;"
-                >
+        <!-- Body -->
+        <main class="body">
+            <!-- Timeline -->
+            <section class="timeline-col">
+                <div class="timeline">
                     <div
                         v-for="phase in phases"
                         :key="phase.id"
-                        class="snap-start scroll-mt-2"
+                        :data-phase-id="phase.id"
+                        :class="['phase', 'accent-' + phase.accent]"
                     >
-                        <div :class="['sticky top-0 z-10 border-b px-4 py-2.5 backdrop-blur', phaseChrome[phase.color]?.bar || 'bg-white/5 border-white/10']">
-                            <div class="flex items-center justify-between gap-3">
-                                <div>
-                                    <div :class="['text-[11px] font-semibold uppercase tracking-[0.18em]', phaseChrome[phase.color]?.label || 'text-white/70']">
-                                        Phase
-                                    </div>
-                                    <h2 class="text-base font-semibold sm:text-lg">{{ phase.title }}</h2>
-                                    <div v-if="phase.subtitle" class="text-xs text-white/55">{{ phase.subtitle }}</div>
+                        <header class="phase-header">
+                            <div>
+                                <div class="phase-eyebrow">Phase</div>
+                                <h2 class="phase-title">{{ phase.title }}</h2>
+                                <div v-if="phase.subtitle" class="phase-sub">{{ phase.subtitle }}</div>
+                            </div>
+                            <div class="phase-progress">
+                                <div class="phase-progress-track">
+                                    <div class="phase-progress-fill" :style="{width: phaseProgress[phase.id]?.pct + '%'}"/>
                                 </div>
-                                <div class="text-xs text-white/50">
-                                    {{ stepsForPhase(phase).filter(s => completed[s.id]).length }} / {{ stepsForPhase(phase).length }}
+                                <div class="phase-progress-label">
+                                    {{ phaseProgress[phase.id]?.done }} / {{ phaseProgress[phase.id]?.total }}
                                 </div>
                             </div>
-                        </div>
+                        </header>
 
-                        <ol class="space-y-2.5 px-3 py-3 sm:px-5 sm:py-4">
+                        <ol class="steps">
                             <template v-for="step in phase.steps" :key="step.id">
-                                <!-- Step ohne Variants -->
+                                <!-- Reguläre Step-Karte -->
                                 <li
                                     v-if="!step.variants"
                                     :data-step-id="step.id"
-                                    class="snap-start scroll-mt-20"
+                                    class="step-card"
+                                    :class="{
+                                        active: activeStepId === step.id,
+                                        done: completed[step.id]
+                                    }"
                                     @click="setActive(step.id)"
                                 >
-                                    <div :class="['group rounded-xl border bg-white/[0.03] p-3 transition sm:p-4',
-                                        activeStepId === step.id ? 'border-cyan-400/60 ring-1 ring-cyan-400/40' : 'border-white/10 hover:border-white/20',
-                                        completed[step.id] ? 'opacity-60' : '']">
-                                        <div class="flex items-start gap-3">
-                                            <button
-                                                class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-white/20"
-                                                :class="completed[step.id] ? 'bg-emerald-500/80 border-emerald-400 text-black' : 'bg-white/5'"
-                                                @click.stop="toggleDone(step.id)"
-                                            >
-                                                <v-icon v-if="completed[step.id]" icon="mdi-check" size="14"/>
-                                            </button>
-                                            <div class="min-w-0 flex-1">
-                                                <div class="flex flex-wrap items-center gap-2">
-                                                    <span :class="['rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider', actorMeta[step.actor]?.cls]">
-                                                        {{ actorMeta[step.actor]?.label || step.actor }}
-                                                    </span>
-                                                    <span class="text-sm font-medium sm:text-base">{{ step.label }}</span>
-                                                </div>
-                                                <p v-if="step.callout" class="mt-2 rounded-lg bg-black/40 px-3 py-2 font-mono text-[13px] leading-relaxed text-cyan-100/90 ring-1 ring-cyan-400/15">
-                                                    {{ interp(step.callout) }}
-                                                </p>
-                                                <p v-if="step.detail" class="mt-2 text-sm text-white/70">{{ step.detail }}</p>
-                                                <div v-if="step.look" class="mt-1.5 inline-flex items-center gap-1 text-xs text-white/50">
-                                                    <v-icon icon="mdi-eye-outline" size="13"/>
-                                                    {{ step.look }}
-                                                </div>
-                                                <div v-if="step.inputKeys?.length" class="mt-2 flex flex-wrap gap-1.5">
-                                                    <span
-                                                        v-for="k in step.inputKeys"
-                                                        :key="k"
-                                                        :class="['rounded-md border px-2 py-0.5 text-[11px]',
-                                                            scratch[k] ? 'border-cyan-400/40 bg-cyan-400/10 text-cyan-200' : 'border-white/15 bg-white/5 text-white/55']"
-                                                    >
-                                                        {{ scratchFields.find(f => f.key === k)?.label || k }}{{ scratch[k] ? `: ${scratch[k]}` : '' }}
-                                                    </span>
-                                                </div>
-                                            </div>
+                                    <div class="step-head">
+                                        <span :class="['actor-tag', actorMeta[step.actor]?.cls]">
+                                            {{ actorMeta[step.actor]?.label }}
+                                        </span>
+                                        <h3 class="step-title">
+                                            <RichText :text="step.label" :tokens="tokenize(step.label)" :resolve="placeholderValue"
+                                                      :glossary="glossaryByTerm"/>
+                                        </h3>
+                                        <button
+                                            v-if="step.why"
+                                            class="why-btn"
+                                            :class="{open: expanded[step.id]}"
+                                            :title="expanded[step.id] ? 'Hintergrund ausblenden' : 'Warum?'"
+                                            @click.stop="toggleWhy(step.id)"
+                                        >
+                                            <v-icon size="18">{{ expanded[step.id] ? 'mdi-information' : 'mdi-information-outline' }}</v-icon>
+                                        </button>
+                                    </div>
+
+                                    <div v-if="step.callout" class="callout">
+                                        <v-icon size="16" class="callout-icon">mdi-radio-handheld</v-icon>
+                                        <div class="callout-text">
+                                            <RichText :text="step.callout" :tokens="tokenize(step.callout)" :resolve="placeholderValue"
+                                                      :glossary="glossaryByTerm"/>
                                         </div>
                                     </div>
+
+                                    <p v-if="step.detail" class="step-detail">
+                                        <RichText :text="step.detail" :tokens="tokenize(step.detail)" :resolve="placeholderValue"
+                                                  :glossary="glossaryByTerm"/>
+                                    </p>
+
+                                    <Transition name="why">
+                                        <div v-if="expanded[step.id] && step.why" class="why-block">
+                                            <div class="why-label">
+                                                <v-icon size="14">mdi-lightbulb-on-outline</v-icon>
+                                                Warum?
+                                            </div>
+                                            <p>
+                                                <RichText :text="step.why" :tokens="tokenize(step.why)" :resolve="placeholderValue"
+                                                          :glossary="glossaryByTerm"/>
+                                            </p>
+                                        </div>
+                                    </Transition>
+
+                                    <div v-if="step.look || step.simNote" class="meta-row">
+                                        <div v-if="step.look" class="meta-chip">
+                                            <v-icon size="14">mdi-eye-outline</v-icon>
+                                            {{ step.look }}
+                                        </div>
+                                        <div v-if="step.simNote" class="meta-chip sim">
+                                            <v-icon size="14">mdi-monitor</v-icon>
+                                            {{ step.simNote }}
+                                        </div>
+                                    </div>
+
+                                    <div v-if="step.inputKeys?.length" class="input-row">
+                                        <span
+                                            v-for="k in step.inputKeys"
+                                            :key="k"
+                                            class="input-chip"
+                                            :class="{filled: !!scratch[k]}"
+                                        >
+                                            <span class="input-chip-label">{{ scratchFields.find(f => f.key === k)?.label || k }}</span>
+                                            <span class="input-chip-value">{{ scratch[k] || '—' }}</span>
+                                        </span>
+                                    </div>
                                 </li>
 
-                                <!-- Step mit Variants: horizontaler Slider -->
+                                <!-- Step mit Variants -->
                                 <li
                                     v-else
                                     :data-step-id="step.id"
-                                    class="snap-start scroll-mt-20"
+                                    class="step-card variant"
+                                    :class="{active: activeStepId === step.id, done: completed[step.id]}"
                                     @click="setActive(step.id)"
                                 >
-                                    <div :class="['rounded-xl border bg-white/[0.03] p-3 sm:p-4',
-                                        activeStepId === step.id ? 'border-cyan-400/60 ring-1 ring-cyan-400/40' : 'border-white/10']">
-                                        <div class="flex items-start gap-3">
-                                            <button
-                                                class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-white/20"
-                                                :class="completed[step.id] ? 'bg-emerald-500/80 border-emerald-400 text-black' : 'bg-white/5'"
-                                                @click.stop="toggleDone(step.id)"
-                                            >
-                                                <v-icon v-if="completed[step.id]" icon="mdi-check" size="14"/>
-                                            </button>
-                                            <div class="min-w-0 flex-1">
-                                                <div class="flex flex-wrap items-center gap-2">
-                                                    <span :class="['rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider', actorMeta[step.actor]?.cls]">
-                                                        {{ actorMeta[step.actor]?.label }}
-                                                    </span>
-                                                    <span class="text-sm font-medium sm:text-base">{{ step.label }}</span>
-                                                </div>
-                                                <p v-if="step.detail" class="mt-1.5 text-sm text-white/70">{{ step.detail }}</p>
+                                    <div class="step-head">
+                                        <span :class="['actor-tag', actorMeta[step.actor]?.cls]">
+                                            {{ actorMeta[step.actor]?.label }}
+                                        </span>
+                                        <h3 class="step-title">{{ step.label }}</h3>
+                                        <button
+                                            v-if="step.why"
+                                            class="why-btn"
+                                            :class="{open: expanded[step.id]}"
+                                            @click.stop="toggleWhy(step.id)"
+                                        >
+                                            <v-icon size="18">{{ expanded[step.id] ? 'mdi-information' : 'mdi-information-outline' }}</v-icon>
+                                        </button>
+                                    </div>
+                                    <p v-if="step.detail" class="step-detail">{{ step.detail }}</p>
 
-                                                <!-- Variant Tabs -->
-                                                <div class="mt-3 flex flex-wrap gap-1.5">
-                                                    <button
-                                                        v-for="v in step.variants"
-                                                        :key="v.id"
-                                                        :class="['rounded-md px-2.5 py-1 text-xs transition',
-                                                            (variantSel[step.id] || step.variants![0].id) === v.id
-                                                                ? 'bg-cyan-500/80 text-black'
-                                                                : 'bg-white/5 text-white/70 hover:bg-white/10']"
-                                                        @click.stop="variantSel[step.id] = v.id"
-                                                    >
-                                                        {{ v.title }}
-                                                    </button>
-                                                </div>
-
-                                                <!-- Variant-Steps -->
-                                                <div class="mt-3 space-y-2">
-                                                    <div
-                                                        v-for="vstep in (step.variants.find(v => v.id === (variantSel[step.id] || step.variants![0].id))?.steps || [])"
-                                                        :key="vstep.id"
-                                                        :data-step-id="vstep.id"
-                                                        class="rounded-lg border border-white/10 bg-black/30 p-2.5 sm:p-3"
-                                                        :class="[completed[vstep.id] ? 'opacity-60' : '']"
-                                                    >
-                                                        <div class="flex items-start gap-2">
-                                                            <button
-                                                                class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border border-white/20"
-                                                                :class="completed[vstep.id] ? 'bg-emerald-500/80 border-emerald-400 text-black' : 'bg-white/5'"
-                                                                @click.stop="toggleDone(vstep.id)"
-                                                            >
-                                                                <v-icon v-if="completed[vstep.id]" icon="mdi-check" size="11"/>
-                                                            </button>
-                                                            <div class="min-w-0 flex-1">
-                                                                <div class="text-sm font-medium">{{ vstep.label }}</div>
-                                                                <p v-if="vstep.callout" class="mt-1.5 rounded bg-black/40 px-2 py-1.5 font-mono text-xs text-cyan-100/90 ring-1 ring-cyan-400/15">
-                                                                    {{ interp(vstep.callout) }}
-                                                                </p>
-                                                                <p v-if="vstep.detail" class="mt-1 text-xs text-white/65">{{ vstep.detail }}</p>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
+                                    <Transition name="why">
+                                        <div v-if="expanded[step.id] && step.why" class="why-block">
+                                            <div class="why-label">
+                                                <v-icon size="14">mdi-lightbulb-on-outline</v-icon>
+                                                Warum?
                                             </div>
+                                            <p>{{ step.why }}</p>
+                                        </div>
+                                    </Transition>
+
+                                    <div class="variant-tabs">
+                                        <button
+                                            v-for="v in step.variants"
+                                            :key="v.id"
+                                            class="variant-tab"
+                                            :class="{active: (variantSel[step.id] || step.variants![0].id) === v.id}"
+                                            @click.stop="variantSel[step.id] = v.id"
+                                        >
+                                            {{ v.title }}
+                                        </button>
+                                    </div>
+
+                                    <div class="variant-steps">
+                                        <div
+                                            v-for="vstep in (step.variants.find(v => v.id === (variantSel[step.id] || step.variants![0].id))?.steps || [])"
+                                            :key="vstep.id"
+                                            :data-step-id="vstep.id"
+                                            class="vstep"
+                                            :class="{active: activeStepId === vstep.id, done: completed[vstep.id]}"
+                                            @click.stop="setActive(vstep.id)"
+                                        >
+                                            <div class="vstep-head">
+                                                <h4>{{ vstep.label }}</h4>
+                                                <button
+                                                    v-if="vstep.why"
+                                                    class="why-btn small"
+                                                    :class="{open: expanded[vstep.id]}"
+                                                    @click.stop="toggleWhy(vstep.id)"
+                                                >
+                                                    <v-icon size="16">mdi-information-outline</v-icon>
+                                                </button>
+                                            </div>
+                                            <p v-if="vstep.detail" class="step-detail small">{{ vstep.detail }}</p>
+                                            <p v-if="vstep.callout" class="callout small">
+                                                <v-icon size="14" class="callout-icon">mdi-radio-handheld</v-icon>
+                                                <span class="callout-text">
+                                                    <RichText :text="vstep.callout" :tokens="tokenize(vstep.callout)" :resolve="placeholderValue"
+                                                              :glossary="glossaryByTerm"/>
+                                                </span>
+                                            </p>
+                                            <Transition name="why">
+                                                <div v-if="expanded[vstep.id] && vstep.why" class="why-block">
+                                                    <div class="why-label">
+                                                        <v-icon size="14">mdi-lightbulb-on-outline</v-icon>
+                                                        Warum?
+                                                    </div>
+                                                    <p>{{ vstep.why }}</p>
+                                                </div>
+                                            </Transition>
                                         </div>
                                     </div>
                                 </li>
@@ -523,92 +700,80 @@ const actorMeta: Record<string, { label: string; cls: string }> = {
                     </div>
                 </div>
 
-                <!-- Sticky Action Bar -->
-                <div class="mt-2 flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">
-                    <div class="text-xs text-white/60">
-                        Aktiv: <span class="text-white/90">{{ allSteps.find(s => s.step.id === activeStepId)?.step.label || '–' }}</span>
-                    </div>
-                    <div class="ml-auto flex gap-2">
-                        <button class="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs hover:bg-white/10"
-                                @click="activeStepId && toggleDone(activeStepId)">
-                            <v-icon icon="mdi-check-circle-outline" size="14" class="mr-1"/>
-                            Mark done
-                        </button>
-                        <button class="rounded-md bg-cyan-500/90 px-4 py-1.5 text-xs font-semibold text-black hover:bg-cyan-400" @click="nextStep">
-                            Next →
-                        </button>
+                <!-- Action Bar -->
+                <div class="action-bar">
+                    <button class="action-prev" :disabled="!activeStepId" @click="prevStep">
+                        <v-icon size="22">mdi-chevron-left</v-icon>
+                    </button>
+                    <div class="action-center">
+                        <div class="action-eyebrow">{{ activeStep?.phase.title || '—' }}</div>
+                        <div class="action-step">{{ activeStep?.step.label || 'Bereit' }}</div>
                     </div>
+                    <button
+                        class="action-done"
+                        :class="{checked: activeStepId && completed[activeStepId]}"
+                        :disabled="!activeStepId"
+                        :title="activeStepId && completed[activeStepId] ? 'Erledigt – nochmal öffnen' : 'Erledigt markieren'"
+                        @click="activeStepId && toggleDone(activeStepId)"
+                    >
+                        <v-icon size="22">{{ activeStepId && completed[activeStepId] ? 'mdi-check-circle' : 'mdi-check-circle-outline' }}</v-icon>
+                    </button>
+                    <button class="action-next" :disabled="!activeStepId" @click="nextStep">
+                        <span>Done & Next</span>
+                        <v-icon size="20">mdi-arrow-right</v-icon>
+                    </button>
                 </div>
             </section>
 
             <!-- Right Panel -->
-            <aside class="space-y-3">
-                <div class="flex gap-1 rounded-xl border border-white/10 bg-white/[0.03] p-1">
-                    <button
-                        :class="['flex-1 rounded-lg px-3 py-1.5 text-sm transition',
-                            rightTab === 'scratch' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white/90']"
-                        @click="rightTab = 'scratch'"
-                    >
-                        <v-icon icon="mdi-notebook-edit-outline" size="16" class="mr-1"/>
+            <aside class="aside" :class="{'mobile-open': showScratchpadMobile}">
+                <div class="aside-tabs">
+                    <button :class="['aside-tab', {active: rightTab === 'scratch'}]" @click="rightTab = 'scratch'">
+                        <v-icon size="18">mdi-notebook-edit-outline</v-icon>
                         Scratchpad
                     </button>
-                    <button
-                        :class="['flex-1 rounded-lg px-3 py-1.5 text-sm transition',
-                            rightTab === 'canvas' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white/90']"
-                        @click="rightTab = 'canvas'"
-                    >
-                        <v-icon icon="mdi-draw-pen" size="16" class="mr-1"/>
+                    <button :class="['aside-tab', {active: rightTab === 'canvas'}]" @click="rightTab = 'canvas'">
+                        <v-icon size="18">mdi-draw-pen</v-icon>
                         Canvas
                     </button>
                 </div>
 
-                <!-- Scratchpad -->
-                <div v-if="rightTab === 'scratch'"
-                     class="space-y-3 overflow-y-auto rounded-2xl border border-white/10 bg-white/[0.02] p-3 sm:p-4"
-                     style="max-height: calc(100dvh - 220px);">
-                    <div v-for="(fields, group) in groupedFields" :key="group">
-                        <div class="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-300/80">
-                            {{ groupTitles[group] || group }}
-                        </div>
-                        <div class="grid grid-cols-2 gap-1.5">
-                            <label v-for="f in fields" :key="f.key" class="block">
-                                <div class="text-[10px] uppercase tracking-wider text-white/45">{{ f.label }}</div>
+                <div v-if="rightTab === 'scratch'" class="scratchpad">
+                    <div v-for="(fields, group) in groupedFields" :key="group" class="field-group">
+                        <div class="field-group-title">{{ groupTitles[group] || group }}</div>
+                        <div class="field-grid">
+                            <label v-for="f in fields" :key="f.key" class="field">
+                                <span class="field-label">{{ f.label }}</span>
                                 <input
                                     v-model="scratch[f.key]"
                                     :placeholder="f.placeholder"
-                                    class="w-full rounded-md border border-white/10 bg-black/30 px-2 py-1.5 text-sm placeholder-white/30 focus:border-cyan-400/60 focus:outline-none"
+                                    class="field-input"
                                 />
                             </label>
                         </div>
                     </div>
                 </div>
 
-                <!-- Canvas -->
-                <div v-else
-                     class="rounded-2xl border border-white/10 bg-white/[0.02] p-2 sm:p-3"
-                     style="max-height: calc(100dvh - 220px);">
-                    <div class="mb-2 flex flex-wrap items-center gap-2">
-                        <div class="flex gap-1">
+                <div v-else class="canvas-wrap">
+                    <div class="canvas-toolbar">
+                        <div class="color-row">
                             <button
                                 v-for="c in ['#fde68a','#22d3ee','#a78bfa','#f472b6','#ffffff']"
                                 :key="c"
-                                class="h-6 w-6 rounded-full ring-2 ring-transparent transition"
+                                class="color-dot"
                                 :style="{background: c}"
-                                :class="drawColor === c ? 'ring-white' : ''"
+                                :class="{active: drawColor === c}"
                                 @click="drawColor = c"
                             />
                         </div>
-                        <input v-model.number="lineWidth" type="range" min="1" max="6" step="0.5" class="w-24"/>
-                        <button class="ml-auto rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-xs hover:bg-white/10" @click="clearCanvas">
-                            <v-icon icon="mdi-eraser" size="14" class="mr-1"/>
+                        <input v-model.number="lineWidth" type="range" min="1" max="6" step="0.5" class="line-slider"/>
+                        <button class="canvas-clear" @click="clearCanvas">
+                            <v-icon size="14">mdi-eraser</v-icon>
                             Clear
                         </button>
                     </div>
-                    <canvas
-                        ref="canvasRef"
-                        class="block h-[60vh] w-full cursor-crosshair touch-none rounded-xl bg-[#0a0f1c] ring-1 ring-white/10"
-                    />
-                    <div class="mt-1 text-[11px] text-white/45">Apple Pencil / Pen wird druckempfindlich erfasst.</div>
+                    <canvas ref="canvasRef" class="canvas"/>
+                    <div class="canvas-hint">Apple Pencil / Stylus wird druckempfindlich erkannt.</div>
                 </div>
             </aside>
         </main>
@@ -616,23 +781,1152 @@ const actorMeta: Record<string, { label: string; cls: string }> = {
 </template>
 
 <style scoped>
-.copilot-root {
-    /* iOS Safe Areas im Standalone-Mode */
+.copilot {
+    --bg: #0b1020;
+    --bg2: #0a0f1c;
+    --accent: #22d3ee;
+    --accent2: #0ea5e9;
+    --text: #ffffff;
+    --t2: rgba(255, 255, 255, .80);
+    --t3: rgba(255, 255, 255, .60);
+    --t4: rgba(255, 255, 255, .40);
+    --border: rgba(255, 255, 255, .10);
+    --border-strong: rgba(255, 255, 255, .18);
+    --surface: rgba(255, 255, 255, .03);
+    --surface-2: rgba(255, 255, 255, .06);
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
     padding-top: env(safe-area-inset-top);
     padding-bottom: env(safe-area-inset-bottom);
+    background-image:
+        radial-gradient(900px 480px at 80% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
+        radial-gradient(680px 360px at 8% -6%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 60%);
 }
 
-.timeline-scroll {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+/* Phase accents */
+.accent-cyan {
+    --pa: #22d3ee;
 }
 
-.timeline-scroll::-webkit-scrollbar {
+.accent-sky {
+    --pa: #38bdf8;
+}
+
+.accent-indigo {
+    --pa: #818cf8;
+}
+
+.accent-emerald {
+    --pa: #34d399;
+}
+
+.accent-amber {
+    --pa: #fbbf24;
+}
+
+.accent-rose {
+    --pa: #fb7185;
+}
+
+/* HUD */
+.hud {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    border-bottom: 1px solid var(--border);
+    background: color-mix(in srgb, var(--bg) 86%, transparent);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+}
+
+.hud-inner {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 10px 14px;
+    max-width: 1600px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.hud-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.hud-logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+    background: color-mix(in srgb, var(--accent) 14%, transparent);
+    color: var(--accent);
+    transition: all .2s ease;
+    flex-shrink: 0;
+}
+
+.hud-logo:hover {
+    border-color: color-mix(in srgb, var(--accent) 54%, transparent);
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.hud-divider {
+    width: 1px;
+    height: 36px;
+    background: var(--border);
+    border-radius: 999px;
+}
+
+.hud-brand {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.15;
+    min-width: 0;
+}
+
+.brand-name {
+    font-weight: 600;
+    font-size: 15px;
+}
+
+.brand-mode {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--accent);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.hud-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: nowrap;
+}
+
+.simbrief-box {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px 6px 12px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    height: 44px;
+}
+
+.simbrief-icon {
+    color: var(--t3);
+}
+
+.simbrief-input {
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text);
+    width: 160px;
+    font-size: 14px;
+}
+
+.simbrief-input::placeholder {
+    color: var(--t4);
+}
+
+.simbrief-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    border-radius: 9px;
+    background: var(--accent);
+    color: #001218;
+    border: none;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background .2s;
+}
+
+.simbrief-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--accent) 80%, white 20%);
+}
+
+.simbrief-btn:disabled {
+    opacity: .4;
+    cursor: not-allowed;
+}
+
+.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--t2);
+    cursor: pointer;
+    transition: all .2s;
+    flex-shrink: 0;
+}
+
+.icon-btn:hover {
+    background: var(--surface-2);
+    color: var(--text);
+}
+
+.phase-bar {
+    display: flex;
+    gap: 6px;
+    overflow-x: auto;
+    padding: 8px 14px 10px;
+    max-width: 1600px;
+    margin: 0 auto;
+    scrollbar-width: none;
+}
+
+.phase-bar::-webkit-scrollbar {
+    display: none;
+}
+
+.phase-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 14px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--t2);
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all .2s;
+    flex-shrink: 0;
+}
+
+.phase-pill:hover {
+    color: var(--text);
+    background: var(--surface-2);
+}
+
+.phase-pill.active {
+    color: #001218;
+    background: var(--pa);
+    border-color: var(--pa);
+}
+
+.phase-pill-progress {
+    font-size: 11px;
+    opacity: .8;
+    font-variant-numeric: tabular-nums;
+}
+
+.progress-track {
+    height: 2px;
+    background: var(--surface);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #22d3ee, #818cf8, #fb7185);
+    transition: width .3s ease;
+}
+
+.error-banner {
+    background: color-mix(in srgb, #ef4444 14%, transparent);
+    color: #fecaca;
+    padding: 6px 14px;
+    font-size: 12.5px;
+    text-align: center;
+}
+
+/* Body Layout */
+.body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+    padding: 14px;
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+@media (min-width: 1100px) {
+    .body {
+        grid-template-columns: minmax(0, 1fr) 440px;
+    }
+}
+
+.timeline-col {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+}
+
+.timeline {
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-snap-type: y mandatory;
+    max-height: calc(100dvh - 240px);
+    min-height: 60vh;
+}
+
+.timeline::-webkit-scrollbar {
     width: 6px;
 }
 
-.timeline-scroll::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.18);
+.timeline::-webkit-scrollbar-thumb {
+    background: var(--border-strong);
     border-radius: 3px;
 }
+
+.phase {
+    scroll-snap-align: start;
+}
+
+.phase-header {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 14px 18px 12px;
+    backdrop-filter: blur(10px);
+    background: linear-gradient(180deg,
+        color-mix(in srgb, var(--pa) 18%, var(--bg) 82%) 0%,
+        color-mix(in srgb, var(--pa) 6%, var(--bg) 94%) 100%);
+    border-bottom: 1px solid color-mix(in srgb, var(--pa) 30%, transparent);
+}
+
+.phase-eyebrow {
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: .22em;
+    text-transform: uppercase;
+    color: var(--pa);
+    margin-bottom: 2px;
+}
+
+.phase-title {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.15;
+}
+
+.phase-sub {
+    font-size: 13px;
+    color: var(--t3);
+    margin-top: 2px;
+}
+
+.phase-progress {
+    text-align: right;
+    flex-shrink: 0;
+}
+
+.phase-progress-track {
+    width: 100px;
+    height: 4px;
+    background: var(--surface-2);
+    border-radius: 999px;
+    overflow: hidden;
+    margin-bottom: 4px;
+}
+
+.phase-progress-fill {
+    height: 100%;
+    background: var(--pa);
+    transition: width .3s;
+}
+
+.phase-progress-label {
+    font-size: 11px;
+    color: var(--t3);
+    font-variant-numeric: tabular-nums;
+}
+
+.steps {
+    list-style: none;
+    margin: 0;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.step-card {
+    scroll-snap-align: start;
+    scroll-margin-top: 80px;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    background: linear-gradient(180deg, var(--surface-2), var(--surface));
+    padding: 16px 18px;
+    cursor: pointer;
+    transition: border-color .2s, transform .15s, box-shadow .2s, opacity .2s;
+    position: relative;
+}
+
+.step-card:hover {
+    border-color: var(--border-strong);
+}
+
+.step-card.active {
+    border-color: var(--pa);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa) 50%, transparent),
+        0 18px 38px -22px color-mix(in srgb, var(--pa) 80%, transparent);
+}
+
+.step-card.done {
+    opacity: .6;
+}
+
+.step-card.done .step-title {
+    text-decoration: line-through;
+    text-decoration-color: var(--t4);
+}
+
+.step-card.done::after {
+    content: '';
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #34d399;
+    background-image: linear-gradient(135deg, #34d399, #10b981);
+    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') center/14px no-repeat,
+        linear-gradient(black, black);
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+}
+
+.step-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.actor-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: .14em;
+    text-transform: uppercase;
+    border: 1px solid;
+    flex-shrink: 0;
+}
+
+.tag-pilot {
+    background: color-mix(in srgb, #22d3ee 18%, transparent);
+    border-color: color-mix(in srgb, #22d3ee 40%, transparent);
+    color: #67e8f9;
+}
+
+.tag-pf {
+    background: color-mix(in srgb, #34d399 18%, transparent);
+    border-color: color-mix(in srgb, #34d399 40%, transparent);
+    color: #6ee7b7;
+}
+
+.tag-pm {
+    background: color-mix(in srgb, #a78bfa 18%, transparent);
+    border-color: color-mix(in srgb, #a78bfa 40%, transparent);
+    color: #c4b5fd;
+}
+
+.tag-atc {
+    background: color-mix(in srgb, #fbbf24 18%, transparent);
+    border-color: color-mix(in srgb, #fbbf24 40%, transparent);
+    color: #fcd34d;
+}
+
+.tag-cabin {
+    background: color-mix(in srgb, #fb7185 18%, transparent);
+    border-color: color-mix(in srgb, #fb7185 40%, transparent);
+    color: #fda4af;
+}
+
+.tag-system {
+    background: var(--surface-2);
+    border-color: var(--border-strong);
+    color: var(--t2);
+}
+
+.step-title {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.3;
+    min-width: 0;
+}
+
+.why-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--t3);
+    cursor: pointer;
+    transition: all .2s;
+    flex-shrink: 0;
+}
+
+.why-btn:hover {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
+    color: var(--accent);
+}
+
+.why-btn.open {
+    background: color-mix(in srgb, var(--accent) 18%, transparent);
+    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+    color: var(--accent);
+}
+
+.why-btn.small {
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+}
+
+.callout {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+    margin-top: 12px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: linear-gradient(180deg, rgba(34, 211, 238, .12), rgba(34, 211, 238, .05));
+    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: #cffafe;
+}
+
+.callout.small {
+    padding: 8px 10px;
+    font-size: 12.5px;
+    margin-top: 8px;
+}
+
+.callout-icon {
+    color: var(--accent);
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.callout-text {
+    flex: 1;
+    min-width: 0;
+}
+
+.step-detail {
+    margin-top: 10px;
+    color: var(--t2);
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.step-detail.small {
+    font-size: 13px;
+    margin-top: 6px;
+}
+
+.why-block {
+    margin-top: 12px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: color-mix(in srgb, #fbbf24 8%, transparent);
+    border: 1px solid color-mix(in srgb, #fbbf24 24%, transparent);
+}
+
+.why-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 10.5px;
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #fcd34d;
+    margin-bottom: 4px;
+}
+
+.why-block p {
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--t2);
+}
+
+.why-enter-active, .why-leave-active {
+    transition: opacity .2s, max-height .25s ease;
+    overflow: hidden;
+}
+
+.why-enter-from, .why-leave-to {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-width: 0;
+}
+
+.why-enter-to, .why-leave-from {
+    opacity: 1;
+    max-height: 400px;
+}
+
+.meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.meta-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border-radius: 8px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--t3);
+    font-size: 12px;
+}
+
+.meta-chip.sim {
+    color: #c4b5fd;
+    border-color: color-mix(in srgb, #a78bfa 30%, transparent);
+    background: color-mix(in srgb, #a78bfa 10%, transparent);
+}
+
+.input-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 12px;
+}
+
+.input-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 8px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    font-size: 12px;
+}
+
+.input-chip-label {
+    color: var(--t3);
+    font-weight: 600;
+    font-size: 10.5px;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+}
+
+.input-chip-value {
+    color: var(--t4);
+    font-variant-numeric: tabular-nums;
+}
+
+.input-chip.filled {
+    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.input-chip.filled .input-chip-label {
+    color: var(--accent);
+}
+
+.input-chip.filled .input-chip-value {
+    color: #cffafe;
+}
+
+/* Variants */
+.variant-tabs {
+    display: flex;
+    gap: 6px;
+    margin-top: 14px;
+    padding: 4px;
+    border-radius: 12px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    overflow-x: auto;
+}
+
+.variant-tab {
+    flex: 1;
+    min-width: max-content;
+    padding: 8px 14px;
+    border-radius: 9px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--t3);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all .2s;
+    white-space: nowrap;
+}
+
+.variant-tab:hover {
+    color: var(--text);
+    background: var(--surface-2);
+}
+
+.variant-tab.active {
+    background: color-mix(in srgb, var(--accent) 18%, transparent);
+    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
+    color: var(--accent);
+}
+
+.variant-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.vstep {
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: rgba(0, 0, 0, .25);
+    cursor: pointer;
+    transition: border-color .2s;
+}
+
+.vstep:hover {
+    border-color: var(--border-strong);
+}
+
+.vstep.active {
+    border-color: var(--pa);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa) 40%, transparent);
+}
+
+.vstep.done {
+    opacity: .55;
+}
+
+.vstep-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.vstep-head h4 {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+    flex: 1;
+}
+
+/* Action Bar */
+.action-bar {
+    position: sticky;
+    bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    background: color-mix(in srgb, var(--bg) 92%, transparent);
+    backdrop-filter: blur(14px);
+    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
+}
+
+.action-prev, .action-done {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--t2);
+    cursor: pointer;
+    transition: all .2s;
+    flex-shrink: 0;
+}
+
+.action-prev:hover, .action-done:hover {
+    background: var(--surface-2);
+    color: var(--text);
+}
+
+.action-done.checked {
+    background: color-mix(in srgb, #34d399 22%, transparent);
+    border-color: color-mix(in srgb, #34d399 50%, transparent);
+    color: #6ee7b7;
+}
+
+.action-prev:disabled, .action-done:disabled, .action-next:disabled {
+    opacity: .4;
+    cursor: not-allowed;
+}
+
+.action-center {
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+    padding: 0 8px;
+}
+
+.action-eyebrow {
+    font-size: 10.5px;
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    color: var(--t3);
+    margin-bottom: 1px;
+}
+
+.action-step {
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.action-next {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 48px;
+    padding: 0 18px;
+    border-radius: 14px;
+    border: none;
+    background: linear-gradient(135deg, var(--accent), var(--accent2));
+    color: #001218;
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    transition: transform .15s, box-shadow .2s;
+    box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--accent) 50%, transparent);
+    flex-shrink: 0;
+}
+
+.action-next:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 18px 32px -8px color-mix(in srgb, var(--accent) 60%, transparent);
+}
+
+@media (max-width: 640px) {
+    .action-next span {
+        display: none;
+    }
+
+    .action-next {
+        padding: 0 14px;
+    }
+}
+
+/* Aside */
+.aside {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+.aside-tabs {
+    display: flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 14px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+}
+
+.aside-tab {
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    border: none;
+    background: transparent;
+    color: var(--t3);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all .2s;
+}
+
+.aside-tab:hover {
+    color: var(--text);
+}
+
+.aside-tab.active {
+    background: var(--surface-2);
+    color: var(--accent);
+}
+
+.scratchpad {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding: 16px;
+    border-radius: 18px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    overflow-y: auto;
+    max-height: calc(100dvh - 280px);
+}
+
+.field-group-title {
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: .22em;
+    text-transform: uppercase;
+    color: var(--accent);
+    opacity: .85;
+    margin-bottom: 8px;
+}
+
+.field-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.field-label {
+    font-size: 10.5px;
+    color: var(--t4);
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.field-input {
+    height: 40px;
+    padding: 0 12px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: rgba(0, 0, 0, .25);
+    color: var(--text);
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+    transition: border-color .2s, background .2s;
+}
+
+.field-input::placeholder {
+    color: var(--t4);
+}
+
+.field-input:focus {
+    outline: none;
+    border-color: color-mix(in srgb, var(--accent) 56%, transparent);
+    background: rgba(0, 0, 0, .35);
+}
+
+.canvas-wrap {
+    padding: 12px;
+    border-radius: 18px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+}
+
+.canvas-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+}
+
+.color-row {
+    display: flex;
+    gap: 6px;
+}
+
+.color-dot {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: none;
+    box-shadow: 0 0 0 2px transparent;
+    cursor: pointer;
+    transition: box-shadow .2s, transform .15s;
+}
+
+.color-dot.active {
+    box-shadow: 0 0 0 2px var(--text);
+    transform: scale(1.06);
+}
+
+.line-slider {
+    flex: 1;
+    accent-color: var(--accent);
+}
+
+.canvas-clear {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    border-radius: 9px;
+    border: 1px solid var(--border);
+    background: var(--surface-2);
+    color: var(--t2);
+    font-size: 12.5px;
+    cursor: pointer;
+}
+
+.canvas-clear:hover {
+    color: var(--text);
+}
+
+.canvas {
+    display: block;
+    width: 100%;
+    height: 60vh;
+    border-radius: 14px;
+    background: rgba(0, 0, 0, .35);
+    border: 1px solid var(--border);
+    cursor: crosshair;
+    touch-action: none;
+}
+
+.canvas-hint {
+    margin-top: 6px;
+    font-size: 11.5px;
+    color: var(--t4);
+}
+
+/* Mobile Aside Drawer */
+@media (max-width: 1099px) {
+    .aside {
+        position: fixed;
+        inset: 0;
+        z-index: 60;
+        background: var(--bg);
+        padding: 16px;
+        padding-top: calc(env(safe-area-inset-top) + 16px);
+        transform: translateY(100%);
+        transition: transform .25s ease;
+        overflow-y: auto;
+    }
+
+    .aside.mobile-open {
+        transform: translateY(0);
+    }
+
+    .scratchpad {
+        max-height: none;
+    }
+}
+
+/* RichText – Glossar & Placeholder */
+:deep(.rt-term) {
+    display: inline-block;
+    padding: 0 5px;
+    border-radius: 5px;
+    background: color-mix(in srgb, #fbbf24 14%, transparent);
+    border-bottom: 1px dashed color-mix(in srgb, #fbbf24 50%, transparent);
+    color: #fde68a;
+    cursor: help;
+    font-weight: 600;
+    transition: background .15s;
+}
+
+:deep(.rt-term:hover) {
+    background: color-mix(in srgb, #fbbf24 22%, transparent);
+}
+
+:deep(.rt-placeholder) {
+    display: inline-block;
+    padding: 0 6px;
+    margin: 0 1px;
+    border-radius: 5px;
+    background: var(--surface);
+    border: 1px dashed var(--border-strong);
+    color: var(--t4);
+    font-style: italic;
+    font-size: .92em;
+}
+
+:deep(.rt-placeholder.filled) {
+    background: color-mix(in srgb, #22d3ee 14%, transparent);
+    border: 1px solid color-mix(in srgb, #22d3ee 38%, transparent);
+    color: #cffafe;
+    font-style: normal;
+}
+
+:deep(.rt-term-popover) {
+    max-width: 320px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1px solid color-mix(in srgb, #fbbf24 30%, transparent);
+    background: color-mix(in srgb, #0b1020 95%, transparent);
+    color: var(--text);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
+}
+
+:deep(.rt-term-head) {
+    font-weight: 700;
+    font-size: 13px;
+    letter-spacing: .08em;
+    color: #fde68a;
+    margin-bottom: 4px;
+}
+
+:deep(.rt-term-short) {
+    font-size: 13px;
+    color: var(--t2);
+    line-height: 1.45;
+}
+
+:deep(.rt-term-long) {
+    margin-top: 6px;
+    padding-top: 6px;
+    border-top: 1px solid var(--border);
+    font-size: 12px;
+    color: var(--t3);
+    line-height: 1.5;
+}
 </style>
diff --git a/shared/data/a320SopTimeline.ts b/shared/data/a320SopTimeline.ts
index d33d739..46f0787 100644
--- a/shared/data/a320SopTimeline.ts
+++ b/shared/data/a320SopTimeline.ts
@@ -1,17 +1,19 @@
 // A320 SOP Timeline – Cold & Dark bis Handoff nach Takeoff
 // Quellen: Airbus A320 FCOM/FCTM Standard Procedures + VATSIM/IRL ATC Phraseology
-// Hinweis: Vereinfacht für Sim-/VATSIM-Nutzung. Immer aktuelle FCOM/Charts checken.
+// Fokus: Flugsimulator-Nutzung (VATSIM, MSFS / X-Plane / Fenix / FlyByWire / ToLiss).
 
 export type Actor = 'pf' | 'pm' | 'atc' | 'pilot' | 'system' | 'cabin'
 
 export interface SopStep {
     id: string
     actor: Actor
-    label: string            // kurz – wird im Timeline-Card oben angezeigt
-    callout?: string         // wörtlicher Funkspruch / Callout
-    detail?: string          // Erläuterung / wo hinschauen
-    look?: string            // Wo der Blick hingeht (für Eyeflow-Hinweis)
+    label: string            // Kurztitel
+    callout?: string         // Wörtlicher Funkspruch / Callout (mit [PLACEHOLDER])
+    detail?: string          // Erklärung was zu tun ist
+    why?: string             // Warum macht man das (Hintergrund / Lerneffekt)
+    look?: string            // Wo schauen / welches Panel
     inputKeys?: string[]     // Felder im Scratchpad, die hier relevant sind
+    simNote?: string         // Sim-spezifischer Hinweis (z. B. Tastatur-Shortcut, Add-on)
     /** Variant-Branches (horizontale Slides), z. B. "External Power" vs "APU"  */
     variants?: { id: string; title: string; steps: SopStep[] }[]
 }
@@ -20,7 +22,7 @@ export interface SopPhase {
     id: string
     title: string
     subtitle?: string
-    color: string            // Tailwind-Farbtoken
+    accent: 'cyan' | 'sky' | 'indigo' | 'emerald' | 'amber' | 'rose'
     steps: SopStep[]
 }
 
@@ -34,35 +36,65 @@ const a320Phases: SopPhase[] = [
     {
         id: 'cockpit-prep',
         title: 'Cockpit Preparation',
-        subtitle: 'Cold & Dark → Pre-Flight ready',
-        color: 'cyan',
+        subtitle: 'Cold & Dark → flugbereit',
+        accent: 'cyan',
         steps: [
             {
                 id: 'safety-exterior',
                 actor: 'pf',
-                label: 'Safety Exterior / Receive Aircraft',
-                detail: 'Gear pins, chocks in place, GPU/APU plan klären.',
-                look: 'Außenbereich · Fahrwerk · GPU-Status',
+                label: 'Safety Exterior · Gear Pins / Chocks',
+                detail: 'Sicherstellen, dass Gear Pins gezogen, Chocks und GPU-Status klar sind.',
+                why: 'Im Sim oft per Ground-Service-Menü (EFB / FlyByWire Ground Services). Gear Pins müssen vor Pushback raus, sonst Warnungen beim Gear-Up.',
+                look: 'EFB · Ground Services',
+                simNote: 'FlyByWire/Fenix EFB → Ground Services → Gear Pins · Wheel Chocks',
             },
             {
                 id: 'batteries',
                 actor: 'pf',
                 label: 'Batteries → ON',
-                detail: 'BAT 1 + BAT 2 ON. Voltage check >25.5V.',
+                detail: 'BAT 1 + BAT 2 ON. Voltage check ≥ 25.5 V.',
+                why: 'Erste Stromversorgung der Bus-Bars. Unter 25.5 V deutet das auf eine schwache Batterie – im Sim selten kritisch, IRL Bodencheck nötig.',
                 look: 'Overhead · ELEC Panel',
+            },
+            {
+                id: 'power-source',
+                actor: 'pf',
+                label: 'Strom-Quelle wählen',
+                detail: 'Entweder External Power (GPU) oder APU.',
+                why: 'GPU spart APU-Kraftstoff und schont das Triebwerk. Auf Gates mit verfügbarer GPU bevorzugt.',
                 variants: [
                     {
                         id: 'gpu',
-                        title: 'External Power verfügbar',
+                        title: 'External Power (GPU)',
                         steps: [
-                            {id: 'ext-pwr', actor: 'pf', label: 'EXT PWR → ON', detail: 'AVAIL Light grün, dann ON drücken.'},
+                            {
+                                id: 'ext-pwr',
+                                actor: 'pf',
+                                label: 'EXT PWR → ON',
+                                detail: 'Wenn AVAIL leuchtet (grün), Knopf drücken bis ON.',
+                                why: 'Versorgt alle AC-Busse vom Boden. APU bleibt aus → leiser, sparsamer.',
+                                simNote: 'Im EFB/Ground Services GPU connecten, dann im Cockpit ON.',
+                            },
                         ],
                     },
                     {
                         id: 'apu-only',
-                        title: 'Nur APU',
+                        title: 'APU Start',
                         steps: [
-                            {id: 'apu-master', actor: 'pf', label: 'APU MASTER → ON, dann START', detail: 'AVAIL nach ~50 s. APU GEN auto.'},
+                            {
+                                id: 'apu-master',
+                                actor: 'pf',
+                                label: 'APU MASTER SW → ON',
+                                detail: 'Anschließend APU START drücken. AVAIL nach ~50 s.',
+                                why: 'APU liefert elektrischen Strom und Bleed Air zum Klimatisieren und für den Engine Start (Crossbleed-Start).',
+                                look: 'Overhead · APU Panel',
+                            },
+                            {
+                                id: 'apu-bleed',
+                                actor: 'pf',
+                                label: 'APU BLEED → ON (sobald AVAIL)',
+                                detail: 'Erlaubt Klimatisierung der Kabine und späteren Engine Start.',
+                            },
                         ],
                     },
                 ],
@@ -71,54 +103,63 @@ const a320Phases: SopPhase[] = [
                 id: 'ext-lts',
                 actor: 'pf',
                 label: 'NAV & LOGO Lights → ON',
-                detail: 'Signal nach außen: cockpit besetzt.',
+                detail: 'Tagsüber NAV ON, nachts zusätzlich LOGO ON.',
+                why: 'Signal nach außen: Cockpit ist besetzt, Flugzeug "im Dienst". Hilft Bodenpersonal & VATSIM-Controllern beim Visuell-Identifizieren.',
                 look: 'Overhead · EXT LT',
             },
             {
                 id: 'cockpit-prep-flow',
                 actor: 'pf',
-                label: 'Cockpit Preparation Flow',
-                detail: 'Overhead von links oben nach rechts unten: ADIRS NAV (3x), Fuel Pumps ON, Anti-ICE OFF, Probes auto, Cabin Press auto, Air Cond auto.',
-                look: 'Overhead Panel · Flow',
+                label: 'Overhead Flow (oben links → unten rechts)',
+                detail: 'ADIRS 1/2/3 → NAV · Fuel Pumps → ON · Anti-Ice → OFF · Probes → AUTO · Cabin Press → AUTO · Air Cond → AUTO.',
+                why: 'Standardisierter Eyeflow verhindert vergessene Schalter. ADIRS brauchen ~10 min für volle Alignment, deshalb sehr früh starten.',
+                look: 'Overhead Panel · von links oben nach rechts unten',
             },
             {
-                id: 'fmgs-init',
+                id: 'fmgs-init-a',
                 actor: 'pf',
-                label: 'FMGS · INIT A',
-                detail: 'CO RTE laden ODER FROM/TO + ALTN, FLT NBR, COST INDEX, CRZ FL setzen.',
-                look: 'MCDU · INIT A',
+                label: 'MCDU · INIT A',
+                detail: 'CO RTE laden ODER FROM/TO setzen, ALTN, FLT NBR, COST INDEX, CRZ FL, TROPO eintragen.',
+                why: 'INIT A definiert den Flug für das FMGS – ohne diese Daten keine Performance- und Treibstoffberechnung.',
+                look: 'MCDU · INIT-Page',
                 inputKeys: ['departure', 'destination', 'altn', 'flightNumber', 'costIndex', 'crzFL'],
+                simNote: 'Bei SimBrief: oben links "INIT REQUEST*" drücken um Wind/Zeiten automatisch zu laden.',
             },
             {
                 id: 'fmgs-fpln',
                 actor: 'pf',
-                label: 'FMGS · F-PLN',
-                detail: 'SID, Enroute, STAR/Approach. Discontinuities clearen.',
+                label: 'MCDU · F-PLN',
+                detail: 'SID auswählen, Enroute prüfen, STAR/Approach setzen. Discontinuities clearen.',
+                why: 'Discontinuities = Lücken in der Lateral Navigation. NAV Mode würde dort aussteigen.',
                 look: 'MCDU · F-PLN',
                 inputKeys: ['sid', 'route'],
             },
             {
                 id: 'fmgs-init-b',
                 actor: 'pf',
-                label: 'FMGS · INIT B (Fuel Pred)',
-                detail: 'ZFW/ZFWCG aus Loadsheet, BLOCK fuel.',
-                look: 'MCDU · INIT B',
+                label: 'MCDU · INIT B (Fuel Prediction)',
+                detail: 'ZFW/ZFWCG aus Loadsheet eintragen, dann BLOCK Fuel.',
+                why: 'Die FMGS braucht Gewicht & Schwerpunkt für korrekte V-Speeds und Reichweiten-Prognose. INIT B ist nur vor Engine Start zugänglich.',
+                look: 'MCDU · INIT B (vor Engine Start)',
                 inputKeys: ['zfw', 'zfwcg', 'blockFuel'],
             },
             {
                 id: 'fmgs-perf',
                 actor: 'pf',
-                label: 'FMGS · PERF TAKEOFF',
-                detail: 'V1 / VR / V2, FLEX TEMP, THR RED / ACC ALT, TRANS ALT.',
+                label: 'MCDU · PERF TAKEOFF',
+                detail: 'V1 / VR / V2, FLEX TEMP, THR RED / ACC ALT, TRANS ALT setzen.',
+                why: 'V-Speeds werden vom FMGS aus Gewicht/Config nicht automatisch errechnet – kommen aus FlySmart/Loadsheet/SimBrief. THR RED ist die Höhe, an der der Schub von TOGA/FLEX auf CLB zurückgenommen wird.',
                 look: 'MCDU · PERF · TAKEOFF',
                 inputKeys: ['v1', 'vr', 'v2', 'flexTemp', 'thrRed', 'accAlt'],
             },
             {
                 id: 'atis',
                 actor: 'pilot',
-                label: 'ATIS holen (D-ATIS / Voice)',
-                detail: 'Letter, Wind, Vis, RWY, QNH, Trans Level notieren.',
+                label: 'ATIS abrufen',
+                detail: 'Letter, Wind, Vis, RWY, QNH, TRANS LEVEL, Bemerkungen mitschreiben.',
+                why: 'ATIS-Letter musst du der Clearance-Stelle mitteilen, damit der Controller weiß, dass du die aktuelle Info hast.',
                 inputKeys: ['atisLetter', 'wind', 'qnh', 'rwy', 'transLevel'],
+                simNote: 'VATSIM: D-ATIS in vPilot/SwiftLive Tab oder über AFV-Frequenz.',
             },
         ],
     },
@@ -126,217 +167,260 @@ const a320Phases: SopPhase[] = [
         id: 'clearance',
         title: 'Clearance Delivery',
         subtitle: 'IFR-Freigabe einholen',
-        color: 'sky',
+        accent: 'sky',
         steps: [
             {
                 id: 'init-call',
                 actor: 'pilot',
-                label: 'Initial Call',
-                callout: '«[Station] Delivery, [Callsign], stand [XX], request IFR clearance to [DEST], information [ATIS], ready to copy.»',
+                label: 'Initial Call Delivery',
+                callout: '[Station] Delivery, [Callsign], stand [STAND], request IFR clearance to [DEST], information [ATIS].',
+                why: 'Sender-Empfänger-Reihenfolge: Wer wird gerufen → Wer ruft → Position → Anliegen. Standardisiertes ICAO-Format.',
                 inputKeys: ['callsign', 'stand', 'destination', 'atisLetter'],
             },
             {
                 id: 'clearance-rx',
                 actor: 'atc',
-                label: 'Clearance erhalten',
-                callout: '«[Callsign], cleared to [DEST] via [SID], runway [RWY], climb initially [ALT], squawk [SQK].»',
-                detail: 'CRAFT-Schema mitschreiben.',
+                label: 'Clearance entgegennehmen (CRAFT)',
+                callout: '[Callsign], cleared to [DEST] via [SID], runway [RWY], climb initially [INIT_ALT], squawk [SQK].',
+                detail: 'CRAFT-Schema mitschreiben: Clearance limit · Route · Altitude · Frequency · Transponder.',
+                why: 'CRAFT ist eine Eselsbrücke: alle 5 Pflicht-Bestandteile einer IFR-Clearance. Wenn etwas fehlt → nachfragen.',
                 inputKeys: ['sid', 'initialClimb', 'squawk'],
             },
             {
                 id: 'readback',
                 actor: 'pilot',
                 label: 'Readback',
-                callout: '«Cleared to [DEST] via [SID], runway [RWY], climb [ALT], squawk [SQK], [Callsign].»',
+                callout: 'Cleared to [DEST] via [SID], runway [RWY], climb [INIT_ALT], squawk [SQK], [Callsign].',
+                why: 'Vollständiger Readback ist Pflicht für Clearance-, Runway- und Höhenitems. Fehler hier = häufige Quelle für Loss-of-Separation.',
             },
             {
                 id: 'xpdr-set',
                 actor: 'pf',
-                label: 'XPDR Code setzen, FCU ALT prüfen',
+                label: 'XPDR Code & FCU ALT setzen',
+                detail: 'Squawk in ATC-Panel eintragen, Initial Climb in FCU ALT.',
+                why: 'Falsche FCU-ALT = Bust nach Takeoff (Zahlen-Dreher!). Doppelt prüfen lassen vom anderen Piloten / Cross-Check.',
                 look: 'Pedestal · ATC · FCU',
+                inputKeys: ['squawk', 'initialClimb'],
             },
         ],
     },
     {
         id: 'pushback-start',
         title: 'Pushback & Engine Start',
-        color: 'indigo',
+        subtitle: 'Triebwerke anlassen, Cabin secure',
+        accent: 'indigo',
         steps: [
             {
                 id: 'before-start-flow',
                 actor: 'pf',
                 label: 'Before Start Flow',
-                detail: 'Windows/Doors closed, Beacon ON, Park Brake set, Thrust Levers IDLE, ENG MODE selector NORM.',
+                detail: 'Windows/Doors closed · Beacon ON · Park Brake SET · Thrust Levers IDLE · ENG MODE selector NORM.',
+                why: 'Beacon ON ist das Signal für Bodenpersonal "Triebwerke gleich an" – jet blast Gefahr.',
             },
             {
                 id: 'request-start',
                 actor: 'pilot',
                 label: 'Pushback & Startup anfordern',
-                callout: '«[Station] Ground, [Callsign], stand [XX], request pushback and startup.»',
+                callout: '[Station] Ground, [Callsign], stand [STAND], request pushback and startup.',
                 inputKeys: ['callsign', 'stand'],
+                simNote: 'Auf VATSIM oft auch nur "Push and Start" – manche Controller verlangen vorher Startup, dann Pushback separat.',
             },
             {
                 id: 'pushback-clr',
                 actor: 'atc',
                 label: 'Push & Start approved',
-                callout: '«[Callsign], pushback and startup approved, face [direction].»',
+                callout: '[Callsign], pushback and startup approved, face [DIRECTION].',
+                why: '"Face" gibt die Endausrichtung des Flugzeugs nach dem Push an (z. B. "facing south") – wichtig fürs Bodenpersonal/Tug.',
             },
             {
                 id: 'cabin-secure',
                 actor: 'cabin',
-                label: 'Cabin secure / Doors closed',
-                detail: 'PA: «Cabin crew, doors on automatic, cross-check.»',
+                label: 'Cabin secure / Doors automatic',
+                detail: 'PA/Callout: «Cabin crew, doors on automatic, cross-check.»',
+                why: 'Bei "automatic" wird der Notrutsch-Mechanismus aktiviert, damit beim Öffnen im Notfall die Slide ausfährt.',
+                simNote: 'Im Sim ohne FA optional – aber für Realismus (PMDG/Fenix haben FA-Soundsets) sinnvoll.',
             },
             {
                 id: 'beacon-on',
                 actor: 'pf',
                 label: 'BEACON → ON',
                 look: 'Overhead · EXT LT',
+                why: 'Letzte Warnung an Ground: gleich startet ein Triebwerk.',
             },
             {
                 id: 'eng-start',
                 actor: 'pf',
-                label: 'Engine Start',
-                detail: 'ENG MODE selector → IGN/START. ENG MASTER 2 → ON, abwarten bis stabil, dann ENG MASTER 1 → ON. N1, EGT, N2, FF überwachen.',
+                label: 'Engine Start (2 → 1)',
+                detail: 'ENG MODE → IGN/START · ENG MASTER 2 → ON · abwarten bis stabil · ENG MASTER 1 → ON.',
+                why: 'ENG 2 zuerst, weil diese hydraulisch das gelbe System & Park Brake versorgt – und beim Crossbleed Start aus APU näher dran ist.',
                 look: 'ECAM ENG · Pedestal',
             },
             {
                 id: 'after-start-flow',
                 actor: 'pf',
                 label: 'After Start Flow',
-                detail: 'ENG MODE → NORM, APU BLEED OFF (wenn Pack ON kommt), Anti-ICE wie nötig, Pitch Trim setzen, RUDDER Trim 0, Flaps CONF 1+F oder 2 (perf-abhängig), Spoilers ARM, ECAM Status check.',
+                detail: 'ENG MODE → NORM · APU BLEED → OFF · Anti-ICE wie nötig · Pitch Trim setzen · Rudder Trim 0 · Flaps CONF 1+F oder 2 · Spoilers ARM · ECAM Status.',
+                why: 'APU Bleed off, sobald Pack-Versorgung über Engines möglich – verlängert APU-Lebensdauer und reduziert Lärm.',
                 inputKeys: ['flapsConfig', 'pitchTrim'],
             },
             {
                 id: 'flight-controls',
                 actor: 'pf',
                 label: 'Flight Controls Check',
-                callout: '«Full left … full right … neutral … full forward … full back … neutral.»',
-                detail: 'PM bestätigt jede Bewegung über ECAM F/CTL Page.',
+                callout: 'Full left … full right … neutral … full forward … full back … neutral.',
+                detail: 'PM bestätigt jede Bewegung über ECAM F/CTL-Page.',
+                why: 'Stellt sicher, dass alle drei Hydrauliksysteme arbeiten und keine FCU/PRIM/SEC-Computer ausgefallen sind.',
+                look: 'ECAM · F/CTL Page',
             },
         ],
     },
     {
         id: 'taxi',
         title: 'Taxi',
-        color: 'emerald',
+        subtitle: 'Rollen zur Runway',
+        accent: 'emerald',
         steps: [
             {
                 id: 'request-taxi',
                 actor: 'pilot',
                 label: 'Taxi request',
-                callout: '«[Station] Ground, [Callsign], request taxi.»',
+                callout: '[Station] Ground, [Callsign], request taxi.',
             },
             {
                 id: 'taxi-clr',
                 actor: 'atc',
                 label: 'Taxi clearance',
-                callout: '«[Callsign], taxi to holding point [RWY] via [TWY A, B, C].»',
+                callout: '[Callsign], taxi to holding point [HOLDING], runway [RWY], via [TAXI_ROUTE].',
+                detail: 'Taxi-Route auf Chart mitstreichen.',
+                why: 'Holding Point ist die Position kurz vor der Runway. "Hold short" = nicht überfahren ohne Freigabe.',
                 inputKeys: ['taxiRoute', 'holdingPoint'],
             },
             {
                 id: 'taxi-readback',
                 actor: 'pilot',
                 label: 'Readback',
-                callout: '«Taxi to holding point [RWY] via [TWY], [Callsign].»',
+                callout: 'Taxi to holding point [HOLDING] runway [RWY] via [TAXI_ROUTE], [Callsign].',
             },
             {
                 id: 'taxi-lights',
                 actor: 'pf',
-                label: 'NOSE Light → TAXI, Brakes check',
-                detail: 'PM: «Brakes checked.» max 30 kts gerade, max 10 kts in Kurven.',
+                label: 'NOSE Light → TAXI · Brakes Check',
+                detail: 'Beim ersten Anrollen: kurz Bremse antippen. PM: «Brakes checked.»',
+                why: 'Brake Check früh erkennt verstopfte Bremsleitungen oder fehlerhafte Antiskid – besser jetzt als bei 140 kts auf der Bahn.',
+                look: 'BRK PRESS Indicator',
+            },
+            {
+                id: 'taxi-speed',
+                actor: 'pf',
+                label: 'Taxi Speed Management',
+                detail: 'Geradeaus max ~30 kts, in Kurven max ~10 kts.',
+                why: 'Höhere Kurvengeschwindigkeit überlastet die Bug-Fahrwerks-Strebe und ist unangenehm für die Kabine.',
             },
             {
                 id: 'before-tko-checklist',
                 actor: 'pm',
-                label: 'Before Takeoff Checklist (down to the line)',
-                detail: 'Flaps · Pitch Trim · Flight Controls · ECAM Memo: T.O. NO BLUE.',
+                label: 'Before Takeoff Checklist (above the line)',
+                detail: 'Flaps · Pitch Trim · Flight Controls · Briefing · ECAM Memo (T.O. NO BLUE).',
+                why: '"Above the line" = alles was vor Line-up erledigt sein muss. "Below the line" sind nur Strobes/Cabin Crew kurz vor Takeoff.',
             },
             {
                 id: 'takeoff-briefing',
                 actor: 'pf',
                 label: 'Takeoff Briefing',
-                detail: 'Standard: dep RWY [XX], SID [..], engine failure plan, return gates, MSA, weather.',
+                detail: 'Departure RWY · SID · Engine-Failure-Plan · Return Gates · MSA · Wetter / NOTAMs.',
+                why: 'Mentale Vorbereitung auf Engine-Failure ist der wichtigste Teil. Bei single-pilot Sim-Flügen sich selbst kurz "vorlesen".',
             },
         ],
     },
     {
         id: 'lineup-tko',
         title: 'Line-Up & Takeoff',
-        color: 'amber',
+        subtitle: 'Auf die Bahn, Power set',
+        accent: 'amber',
         steps: [
             {
                 id: 'handoff-twr',
                 actor: 'atc',
                 label: 'Handoff Tower',
-                callout: '«[Callsign], contact Tower [FREQ].»',
+                callout: '[Callsign], contact Tower [TWR_FREQ].',
                 inputKeys: ['twrFreq'],
             },
             {
                 id: 'twr-call',
                 actor: 'pilot',
                 label: 'Tower Call',
-                callout: '«[Station] Tower, [Callsign], holding short [RWY].»',
+                callout: '[Station] Tower, [Callsign], holding short [RWY].',
+                why: 'Position-Report beim ersten Call, damit der Controller dich auf seinem Strip / EuroScope wiederfindet.',
             },
             {
                 id: 'lineup',
                 actor: 'atc',
                 label: 'Line-up clearance',
-                callout: '«[Callsign], line up runway [RWY] and wait.»',
+                callout: '[Callsign], line up runway [RWY] and wait.',
+                why: '"Line up and wait" ist nicht "Cleared for takeoff". Kein Schub setzen!',
             },
             {
                 id: 'before-tko-line',
                 actor: 'pf',
-                label: 'Below-the-line Items',
-                detail: 'Cabin Crew advised, Packs/Anti-Ice per perf, T.O. CONFIG TEST gedrückt, Strobes ON, TCAS TA/RA, Landing Lights ON, NOSE Light → T.O.',
+                label: 'Below-the-line Items (Line-up Flow)',
+                detail: 'PACKs (perf-abhängig) · T.O. CONFIG TEST · Strobes ON · TCAS TA/RA · Landing Lights ON · NOSE Light → T.O. · Cabin notify.',
                 callout: 'Cabin: «Cabin crew, takeoff.»',
+                why: 'T.O. CONFIG TEST simuliert TOGA-Schub und prüft, ob alle Konfigurations-Warnungen ausbleiben würden – sicherer als später ein Config Warning beim Roll.',
             },
             {
                 id: 'cleared-tko',
                 actor: 'atc',
                 label: 'Cleared for Takeoff',
-                callout: '«[Callsign], wind [..], runway [RWY], cleared for takeoff.»',
+                callout: '[Callsign], wind [WIND], runway [RWY], cleared for takeoff.',
             },
             {
                 id: 'tko-roll',
                 actor: 'pf',
-                label: 'Takeoff Roll',
-                detail: 'Thrust Levers 50 % N1, stabil, dann FLEX/TOGA. PF hand auf Thrust bis V1.',
+                label: 'Takeoff Roll · Thrust Set',
+                detail: 'Thrust Levers auf 50 % N1 stabil, dann FLEX/TOGA. Hand auf Thrust bis V1.',
+                why: 'Stabilisierung bei 50 % stellt sicher, dass beide Triebwerke gleich hochlaufen. Asymmetrie früh erkennen!',
             },
             {
                 id: 'thrust-set',
                 actor: 'pm',
-                label: 'Callout: «Thrust set»',
-                callout: '«Thrust set, FMA: MAN FLEX [TEMP] / SRS / RWY.»',
-                look: 'PFD · FMA',
+                label: '«Thrust set, FMA checked»',
+                callout: 'Thrust set, FMA: MAN FLEX [FLEX_TEMP] / SRS / RWY.',
+                detail: 'FMA-Modes ablesen und ansagen.',
+                why: 'FMA-Verifikation = "weiß das Flugzeug, was es tun soll?" – Modefehler hier ist die häufigste Ursache für Takeoff-Anomalien.',
+                look: 'PFD · FMA Top-Line',
             },
             {
                 id: 'kts-100',
                 actor: 'pm',
                 label: '«100 knots»',
-                callout: '«100 knots.»',
+                callout: 'PM: 100 knots. — PF: checked.',
+                detail: 'Speedtape kreuzt 100 kt.',
+                why: 'Cross-Check der Speed-Anzeige zwischen beiden Seiten. Bei Diskrepanz → Reject Takeoff.',
                 look: 'PFD · Speed Tape',
-                detail: 'PF antwortet «checked».',
             },
             {
                 id: 'v1',
                 actor: 'pm',
                 label: '«V1»',
-                callout: '«V1.»',
-                detail: 'PF nimmt Hand vom Thrust Lever.',
+                callout: 'V1.',
+                detail: 'PF nimmt die Hand vom Thrust Lever.',
+                why: 'Ab V1 wird der Takeoff fortgesetzt – nicht mehr abbrechen. Hand weg = mentale & physische Bestätigung.',
             },
             {
                 id: 'rotate',
                 actor: 'pm',
                 label: '«Rotate»',
-                callout: '«Rotate.»',
-                detail: 'PF: smooth pitch up zu 12.5° → ca. 15° Initial.',
+                callout: 'Rotate.',
+                detail: 'PF: smooth pitch up zu ~12.5°, danach ~15° initial.',
+                why: 'Zu schnelles Rotieren → Tail Strike. Zu langsam → längerer Rollweg, evtl. Hindernis.',
+                look: 'PFD · Pitch / Bird',
             },
             {
                 id: 'positive-climb',
                 actor: 'pm',
-                label: '«Positive climb»',
-                callout: 'PM: «Positive climb.» — PF: «Gear up.»',
+                label: '«Positive climb» → «Gear up»',
+                callout: 'PM: Positive climb. — PF: Gear up.',
+                why: 'Erst wenn V/S positiv UND Höhenmesser steigt, das Fahrwerk einfahren – um bei sofortigem Sink (Windshear) noch Boden-Kontakt zu haben.',
                 look: 'PFD · V/S, Altitude',
             },
         ],
@@ -344,59 +428,66 @@ const a320Phases: SopPhase[] = [
     {
         id: 'after-tko',
         title: 'After Takeoff & Handoff',
-        color: 'rose',
+        subtitle: 'Clean-up, Frequenzwechsel',
+        accent: 'rose',
         steps: [
             {
                 id: 'thr-red',
                 actor: 'system',
                 label: 'THR RED ALT erreicht',
-                detail: 'FMA: CLB. Thrust Levers in CL detent.',
-                look: 'PFD · FMA',
+                detail: 'FMA wechselt von SRS zu CLB. Thrust Levers in CL Detent setzen.',
+                why: 'CL Detent = Auto-Thrust übernimmt. Wenn man FLEX/TOGA stehen lässt, übernimmt A/THR nicht und Triebwerke bleiben am Limit.',
+                look: 'PFD · FMA / Thrust Levers',
                 inputKeys: ['thrRed'],
             },
             {
                 id: 'acc-alt',
                 actor: 'system',
                 label: 'ACC ALT erreicht',
-                detail: 'Auto-Beschleunigung auf Green-Dot. Flap-Retraction-Schedule beginnt.',
+                detail: 'Auto-Beschleunigung Richtung Green-Dot. Flap-Retraction-Schedule beginnt.',
+                why: 'Bis ACC ALT wird mit V2+10 geklettert (Steep Climb für Hindernisse). Danach beschleunigen, weil Flaps belastet sind.',
                 inputKeys: ['accAlt'],
             },
             {
                 id: 'flap-1',
                 actor: 'pf',
                 label: '«Flaps 1» bei F-Speed',
-                callout: 'PF: «Flaps 1.» PM: «Speed checked, flaps 1.»',
+                callout: 'PF: Flaps 1. — PM: Speed checked, flaps 1.',
+                why: 'F-Speed = Mindestgeschwindigkeit für nächste Stufe. PM verifiziert, dass die Speed wirklich passt – Schutz vor Stall.',
             },
             {
                 id: 'flap-0',
                 actor: 'pf',
                 label: '«Flaps 0» bei S-Speed',
-                callout: 'PF: «Flaps 0.» PM: «Speed checked, flaps 0.»',
+                callout: 'PF: Flaps 0. — PM: Speed checked, flaps 0.',
             },
             {
                 id: 'after-tko-flow',
                 actor: 'pf',
                 label: 'After Takeoff Flow',
-                detail: 'Gear UP & off, Spoilers disarm, Flaps 0, Packs ON falls vorher off, APU MASTER OFF wenn nicht mehr benötigt, Anti-ICE wie nötig, Landing Lts AUTO/OFF (>10.000 ft), NOSE Light OFF, Seatbelts wie nötig.',
+                detail: 'Gear UP & off · Spoilers disarm · Flaps 0 · Packs ON falls vorher off · APU MASTER OFF · Anti-ICE wie nötig · Landing Lts > FL100 OFF · NOSE Light OFF · Seatbelts wie nötig.',
+                why: 'Konfiguration zurück auf Reise-Setup. APU aus spart Treibstoff. Landing Lights ab 10.000 ft aus = ICAO-Empfehlung.',
             },
             {
                 id: 'after-tko-checklist',
                 actor: 'pm',
                 label: 'After Takeoff / Climb Checklist',
                 detail: 'Landing Gear UP · Flaps 0 · Packs ON · Baro: bei TRANS ALT auf STD.',
+                why: 'STD = Standard-Druck 1013 hPa. Über TRANS ALT fliegt jeder mit gleichem Referenzdruck → konsistente Flugflächen.',
             },
             {
                 id: 'handoff-dep',
                 actor: 'atc',
                 label: 'Handoff Departure / Center',
-                callout: '«[Callsign], contact Departure [FREQ], good day.»',
+                callout: '[Callsign], contact Departure [DEP_FREQ], good day.',
                 inputKeys: ['depFreq'],
             },
             {
                 id: 'dep-call',
                 actor: 'pilot',
                 label: 'Initial Call Departure',
-                callout: '«[Station] Departure, [Callsign], passing [ALT] for [CLEARED ALT], [SID].»',
+                callout: '[Station] Departure, [Callsign], passing [PASSING_ALT] for [INIT_ALT], [SID] departure.',
+                why: '"Passing X for Y" gibt aktuelle und freigegebene Höhe – Standard für Initial Calls auf neuer Frequenz.',
             },
         ],
     },
@@ -438,7 +529,7 @@ export const scratchFields: ScratchField[] = [
     {key: 'transAlt', label: 'Trans Alt', placeholder: '5000', group: 'env'},
 
     {key: 'sid', label: 'SID', placeholder: 'OBOKA1L', group: 'atc'},
-    {key: 'initialClimb', label: 'Initial Climb', placeholder: '5000 ft', group: 'atc'},
+    {key: 'initialClimb', label: 'Initial Climb', placeholder: '5000', group: 'atc'},
     {key: 'squawk', label: 'Squawk', placeholder: '1000', group: 'atc'},
     {key: 'taxiRoute', label: 'Taxi Route', placeholder: 'N, L, M', group: 'atc'},
     {key: 'holdingPoint', label: 'Holding Point', placeholder: 'S4', group: 'atc'},
@@ -459,3 +550,51 @@ export const scratchFields: ScratchField[] = [
     {key: 'accAlt', label: 'ACC ALT', placeholder: '1500', group: 'perf'},
     {key: 'pitchTrim', label: 'Pitch Trim', placeholder: 'DN 1.2', group: 'perf'},
 ]
+
+/** Glossar – Begriffe, die im Text als Pill markiert werden. */
+export interface GlossaryEntry {
+    term: string
+    short: string             // 1-Zeilen-Erklärung
+    long?: string             // detailliertere Erklärung
+}
+
+export const glossary: GlossaryEntry[] = [
+    {term: 'V1', short: 'Decision Speed – ab hier wird der Start nicht mehr abgebrochen.'},
+    {term: 'VR', short: 'Rotation Speed – Pitch-Up beginnt bei dieser Geschwindigkeit.'},
+    {term: 'V2', short: 'Takeoff Safety Speed – Mindestgeschwindigkeit nach Engine Failure bis 35 ft.'},
+    {term: 'THR RED', short: 'Thrust Reduction Altitude – ab hier von TOGA/FLEX auf CLB-Schub.', long: 'Schalter-Höhe (AGL) im FMGS, an der die Auto-Thrust den Schub von Takeoff-Power auf Climb-Power zurücknimmt. Standard: 1500 ft AGL.'},
+    {term: 'ACC ALT', short: 'Acceleration Altitude – ab hier beschleunigen & Flaps einfahren.', long: 'Höhe, an der die SRS-Mode (Speed Reference System) endet und das Flugzeug auf Green-Dot beschleunigt. Meist gleich THR RED, in Noise-Abatement-Procedures höher.'},
+    {term: 'TRANS ALT', short: 'Transition Altitude – Wechsel von QNH auf STD (1013) beim Steigen.'},
+    {term: 'TRANS LEVEL', short: 'Transition Level – Wechsel zurück von STD auf QNH beim Sinken.'},
+    {term: 'FMA', short: 'Flight Mode Annunciator – die Modus-Zeile oben am PFD.', long: 'Zeigt aktive und armed Modes für A/THR, Vertikal-Mode, Lateral-Mode, Approach und A/P/FD-Status. Cross-Check ist Pflicht bei jedem Mode-Wechsel.'},
+    {term: 'FCU', short: 'Flight Control Unit – Glareshield-Panel mit Speed/Heading/Altitude-Knöpfen.'},
+    {term: 'MCDU', short: 'Multipurpose Control Display Unit – das FMS-Tastatur-Display zwischen den Piloten.'},
+    {term: 'FMGS', short: 'Flight Management & Guidance System – das "Hirn" der A320: Navigation + Performance + Auto-Pilot-Logik.'},
+    {term: 'ECAM', short: 'Electronic Centralised Aircraft Monitor – Systeme & Warnungen, mittlere Bildschirme.'},
+    {term: 'SID', short: 'Standard Instrument Departure – vorgeschriebene Abflugroute.'},
+    {term: 'STAR', short: 'Standard Terminal Arrival Route – vorgeschriebene Anflugroute.'},
+    {term: 'CRAFT', short: 'Eselsbrücke: Clearance limit · Route · Altitude · Frequency · Transponder.'},
+    {term: 'QNH', short: 'Druck auf Meeresspiegelhöhe – setzt den Höhenmesser im unteren Bereich.'},
+    {term: 'STD', short: 'Standard-Druck 1013.25 hPa – über TRANS ALT immer eingestellt.'},
+    {term: 'ZFW', short: 'Zero Fuel Weight – Leergewicht inkl. Pax & Cargo, ohne Treibstoff.'},
+    {term: 'ZFWCG', short: 'Zero Fuel Weight CG – Schwerpunkt in % MAC ohne Treibstoff.'},
+    {term: 'CG', short: 'Center of Gravity – Schwerpunkt, beeinflusst Trim & Stabilität.'},
+    {term: 'MAC', short: 'Mean Aerodynamic Chord – Referenz-Profilsehne des Flügels.'},
+    {term: 'ADIRS', short: 'Air Data / Inertial Reference System – Lage- und Geschwindigkeitsdaten.', long: 'Drei redundante Einheiten. Brauchen ~10 Minuten Alignment im NAV-Modus, daher früh anschalten.'},
+    {term: 'APU', short: 'Auxiliary Power Unit – Hilfstriebwerk im Heck für Strom & Bleed Air.'},
+    {term: 'GPU', short: 'Ground Power Unit – externer Strom-Wagen am Gate.'},
+    {term: 'FLEX', short: 'Flexible Takeoff – reduzierter Schub via fiktiver Außentemperatur, schont das Triebwerk.'},
+    {term: 'TOGA', short: 'Takeoff/Go-Around – maximaler Schub.'},
+    {term: 'CL', short: 'Climb Detent – Auto-Thrust-Position der Thrust Lever im Steigflug & Reise.'},
+    {term: 'SRS', short: 'Speed Reference System – Pitch-Mode beim Takeoff/Go-Around, hält V2+10.'},
+    {term: 'PF', short: 'Pilot Flying – steuert das Flugzeug aktiv.'},
+    {term: 'PM', short: 'Pilot Monitoring – überwacht, callouts, Funk, Checkliste.'},
+    {term: 'TCAS', short: 'Traffic Collision Avoidance System – Verkehrswarnsystem.'},
+    {term: 'TA/RA', short: 'Traffic Advisory / Resolution Advisory – TCAS-Warnstufen.'},
+    {term: 'FL', short: 'Flight Level – Höhe in 100 ft auf STD (z. B. FL360 = 36.000 ft auf 1013 hPa).'},
+    {term: 'AGL', short: 'Above Ground Level – Höhe über Grund.'},
+    {term: 'MSA', short: 'Minimum Safe Altitude – Sicherheitshöhe, garantiert Hindernisfreiheit.'},
+    {term: 'NOTAM', short: 'Notice to Airmen – aktuelle Hinweise (geschlossene Bahnen, etc.).'},
+    {term: 'ATIS', short: 'Automatic Terminal Information Service – aktuelle Wetter-/Bahn-/QNH-Info per Funk.'},
+    {term: 'F-PLN', short: 'Flight Plan Page der MCDU – Lateral Route mit Wegpunkten.'},
+]