From c6a634b7de3432f766ca8212643c8bd751ebcedc Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Fri, 20 Feb 2026 23:01:29 +0100
Subject: [PATCH] feat(medienstationen): add medienstationen index page and
 link from flightlab

New index page at /flightlab/medienstationen with PFD learning card
and coming-soon placeholder. Adds medienstationen section link to
the main flightlab index page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/pages/flightlab/index.vue                 |  18 +++
 app/pages/flightlab/medienstationen/index.vue | 128 ++++++++++++++++++
 2 files changed, 146 insertions(+)
 create mode 100644 app/pages/flightlab/medienstationen/index.vue

diff --git a/app/pages/flightlab/index.vue b/app/pages/flightlab/index.vue
index 06ebab8..a204e89 100644
--- a/app/pages/flightlab/index.vue
+++ b/app/pages/flightlab/index.vue
@@ -113,6 +113,24 @@
           </div>
         </div>
       </section>
+
+      <!-- Medienstationen -->
+      <section class="mx-auto w-full max-w-screen-xl px-4 py-12 sm:px-6 md:px-8">
+        <h2 class="mb-8 text-xl font-semibold text-white/90">Medienstationen</h2>
+
+        <NuxtLink to="/flightlab/medienstationen" class="group block max-w-md">
+          <div class="flex items-center gap-4 rounded-2xl border border-white/10 bg-[#0b1328]/60 p-5 transition hover:border-cyan-400/30 hover:bg-[#0b1328]/90">
+            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-cyan-400/30 bg-cyan-500/10">
+              <v-icon icon="mdi-monitor-dashboard" size="24" class="text-cyan-300" />
+            </div>
+            <div>
+              <p class="text-sm font-semibold text-white/90 group-hover:text-white">Instrumente interaktiv lernen</p>
+              <p class="text-xs text-white/50">PFD, Navigation und mehr entdecken</p>
+            </div>
+            <v-icon icon="mdi-chevron-right" size="20" class="ml-auto text-white/30 transition group-hover:text-cyan-300" />
+          </div>
+        </NuxtLink>
+      </section>
     </main>
   </div>
 </template>
diff --git a/app/pages/flightlab/medienstationen/index.vue b/app/pages/flightlab/medienstationen/index.vue
new file mode 100644
index 0000000..9ad626e
--- /dev/null
+++ b/app/pages/flightlab/medienstationen/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="min-h-screen bg-[#070d1a] text-white">
+    <!-- Header -->
+    <header class="border-b border-white/5 bg-[#070d1a]/80 backdrop-blur">
+      <div class="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-4 px-4 py-6 sm:px-6 md:px-8">
+        <div class="flex items-center gap-3">
+          <div class="flex h-12 w-12 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
+            <v-icon icon="mdi-airplane" size="26" class="text-cyan-300" />
+          </div>
+          <div>
+            <p class="text-lg font-semibold tracking-tight">FlightLab</p>
+            <p class="text-sm text-white/60">Guided cockpit experiences</p>
+          </div>
+        </div>
+        <NuxtLink to="/flightlab" class="text-sm text-white/50 transition hover:text-white/80">
+          <v-icon icon="mdi-arrow-left" size="16" class="mr-1" />
+          Zurück
+        </NuxtLink>
+      </div>
+    </header>
+
+    <main>
+      <!-- Hero -->
+      <section class="relative border-b border-white/5">
+        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/15 via-transparent to-indigo-500/25" />
+        <div class="relative z-10 mx-auto w-full max-w-screen-xl px-4 py-16 sm:px-6 md:px-8">
+          <div class="max-w-3xl space-y-6">
+            <span
+              class="inline-flex items-center gap-2 rounded-full border border-cyan-300/40 bg-cyan-400/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200/80"
+            >
+              <v-icon icon="mdi-monitor-dashboard" size="14" />
+              Medienstationen
+            </span>
+            <h1 class="text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">
+              Instrumente verstehen.<br />
+              <span class="text-cyan-300">Interaktiv lernen.</span>
+            </h1>
+            <p class="max-w-2xl text-base text-white/80 sm:text-lg">
+              Entdecke die wichtigsten Cockpit-Instrumente Schritt für Schritt -
+              interaktiv, visuell und in deinem eigenen Tempo.
+              Verstehe, was Piloten auf ihren Anzeigen sehen und warum.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Cards Grid -->
+      <section class="mx-auto w-full max-w-screen-xl px-4 py-12 sm:px-6 md:px-8">
+        <h2 class="mb-8 text-xl font-semibold text-white/90">Verfügbare Stationen</h2>
+
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <!-- PFD verstehen Card -->
+          <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b1328]/90 shadow-xl shadow-cyan-500/5 transition hover:border-cyan-400/30 hover:shadow-cyan-500/15">
+            <!-- Card glow -->
+            <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-transparent opacity-0 transition group-hover:opacity-100" />
+
+            <div class="relative z-10 p-6">
+              <!-- Icon + Badge -->
+              <div class="mb-5 flex items-start justify-between">
+                <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
+                  <v-icon icon="mdi-gauge" size="30" class="text-cyan-300" />
+                </div>
+                <span class="rounded-full border border-emerald-400/40 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-300">
+                  Bereit
+                </span>
+              </div>
+
+              <!-- Title + Info -->
+              <h3 class="mb-2 text-xl font-semibold">PFD verstehen</h3>
+              <p class="mb-4 text-sm text-white/60 leading-relaxed">
+                Lerne Schritt für Schritt das Primary Flight Display des Airbus A320
+                zu lesen — mit echtem Sidestick-Input.
+              </p>
+
+              <!-- Meta -->
+              <div class="mb-6 flex flex-wrap gap-3 text-xs text-white/50">
+                <span class="flex items-center gap-1.5">
+                  <v-icon icon="mdi-airplane" size="14" class="text-cyan-400/60" />
+                  Airbus A320
+                </span>
+                <span class="flex items-center gap-1.5">
+                  <v-icon icon="mdi-gesture-tap" size="14" class="text-cyan-400/60" />
+                  Interaktiv
+                </span>
+              </div>
+
+              <!-- Actions -->
+              <div class="flex flex-col gap-3">
+                <NuxtLink to="/flightlab/medienstationen/learn-pfd">
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    size="large"
+                    block
+                    class="rounded-xl font-semibold"
+                    prepend-icon="mdi-play-circle"
+                  >
+                    Starten
+                  </v-btn>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+
+          <!-- Coming Soon Card -->
+          <div class="flex items-center justify-center rounded-3xl border border-dashed border-white/10 bg-[#0b1328]/40 p-6">
+            <div class="text-center">
+              <v-icon icon="mdi-monitor-dashboard" size="40" class="mb-3 text-white/20" />
+              <p class="text-sm font-medium text-white/30">Weitere Stationen</p>
+              <p class="text-xs text-white/20">Demnächst verfügbar</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+  middleware: ['require-auth'],
+})
+
+useHead({
+  title: 'FlightLab - Medienstationen',
+})
+</script>