📱 Add mobile scene adaptations for PortalPresentationMobile

Mobile-optimized versions of all 9 scenes with portrait layout (1080x1920):
- PortalIntroSceneMobile: Smaller logo (280px), text-5xl title
- PortalTitleSceneMobile: Title split into two lines, text-5xl
- DashboardOverviewSceneMobile: Vertical card stacking, no sidebar
- MeetupShowcaseSceneMobile: Vertical layout, 360px featured card
- CountryStatsSceneMobile: Single column, 280px bars, compact sparklines
- TopMeetupsSceneMobile: Narrower rows, 70px sparklines
- ActivityFeedSceneMobile: 400px activity cards
- CallToActionSceneMobile: max-w-md container, 100px logo
- PortalOutroSceneMobile: 450px horizontal logo

Includes 92 tests covering mobile-specific layout adaptations.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

videos/src/PortalPresentationMobile.tsx

@@ -1,13 +1,14 @@
 import { AbsoluteFill, Sequence, useVideoConfig, Img, staticFile } from "remotion";
 import { inconsolataFont } from "./fonts/inconsolata";
-import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
+import { PortalIntroSceneMobile } from "./scenes/portal/mobile/PortalIntroSceneMobile";
-import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
+import { PortalTitleSceneMobile } from "./scenes/portal/mobile/PortalTitleSceneMobile";
-import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
+import { DashboardOverviewSceneMobile } from "./scenes/portal/mobile/DashboardOverviewSceneMobile";
-import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
+import { MeetupShowcaseSceneMobile } from "./scenes/portal/mobile/MeetupShowcaseSceneMobile";
-import { TopMeetupsScene } from "./scenes/portal/TopMeetupsScene";
+import { CountryStatsSceneMobile } from "./scenes/portal/mobile/CountryStatsSceneMobile";
-import { ActivityFeedScene } from "./scenes/portal/ActivityFeedScene";
+import { TopMeetupsSceneMobile } from "./scenes/portal/mobile/TopMeetupsSceneMobile";
-import { CallToActionScene } from "./scenes/portal/CallToActionScene";
+import { ActivityFeedSceneMobile } from "./scenes/portal/mobile/ActivityFeedSceneMobile";
-import { PortalOutroScene } from "./scenes/portal/PortalOutroScene";
+import { CallToActionSceneMobile } from "./scenes/portal/mobile/CallToActionSceneMobile";
+import { PortalOutroSceneMobile } from "./scenes/portal/mobile/PortalOutroSceneMobile";
 import { PortalAudioManager } from "./components/PortalAudioManager";
 
 /**
@@ -138,7 +139,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.logoReveal.duration}
         premountFor={fps}
       >
-        <PortalIntroScene />
+        <PortalIntroSceneMobile />
       </Sequence>
 
       {/* Scene 2: Portal Title (4s) */}
@@ -147,7 +148,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.portalTitle.duration}
         premountFor={fps}
       >
-        <PortalTitleScene />
+        <PortalTitleSceneMobile />
       </Sequence>
 
       {/* Scene 3: Dashboard Overview (12s) */}
@@ -156,7 +157,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.dashboardOverview.duration}
         premountFor={fps}
       >
-        <DashboardOverviewScene />
+        <DashboardOverviewSceneMobile />
       </Sequence>
 
       {/* Scene 4: Meine Meetups (12s) */}
@@ -165,7 +166,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.meineMeetups.duration}
         premountFor={fps}
       >
-        <MeetupShowcaseScene />
+        <MeetupShowcaseSceneMobile />
       </Sequence>
 
       {/* Scene 5: Top Länder (12s) */}
@@ -174,7 +175,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.topLaender.duration}
         premountFor={fps}
       >
-        <PlaceholderScene name="Top Länder" sceneNumber={5} />
+        <CountryStatsSceneMobile />
       </Sequence>
 
       {/* Scene 6: Top Meetups (10s) */}
@@ -183,7 +184,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.topMeetups.duration}
         premountFor={fps}
       >
-        <TopMeetupsScene />
+        <TopMeetupsSceneMobile />
       </Sequence>
 
       {/* Scene 7: Activity Feed (10s) */}
@@ -192,7 +193,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.activityFeed.duration}
         premountFor={fps}
       >
-        <ActivityFeedScene />
+        <ActivityFeedSceneMobile />
       </Sequence>
 
       {/* Scene 8: Call to Action (12s) */}
@@ -201,7 +202,7 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.callToAction.duration}
         premountFor={fps}
       >
-        <CallToActionScene />
+        <CallToActionSceneMobile />
       </Sequence>
 
       {/* Scene 9: Outro (12s) */}
@@ -210,29 +211,8 @@ export const PortalPresentationMobile: React.FC = () => {
         durationInFrames={sceneFrames.outro.duration}
         premountFor={fps}
       >
-        <PortalOutroScene />
+        <PortalOutroSceneMobile />
       </Sequence>
     </AbsoluteFill>
   );
 };
-
-/**
- * Placeholder component for scenes that haven't been implemented yet.
- * Displays a centered scene name with visual indicators.
- */
-const PlaceholderScene: React.FC<{ name: string; sceneNumber: number }> = ({
-  name,
-  sceneNumber,
-}) => {
-  return (
-    <AbsoluteFill className="flex items-center justify-center">
-      <div className="text-center">
-        <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-orange-500/20 border-2 border-orange-500/50 flex items-center justify-center">
-          <span className="text-4xl font-bold text-orange-500">{sceneNumber}</span>
-        </div>
-        <h2 className="text-4xl font-bold text-white mb-2">{name}</h2>
-        <p className="text-lg text-neutral-400">Scene placeholder</p>
-      </div>
-    </AbsoluteFill>
-  );
-};

videos/src/scenes/portal/mobile/ActivityFeedSceneMobile.test.tsx

@@ -0,0 +1,143 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { ActivityFeedSceneMobile } from "./ActivityFeedSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock ActivityItem component
+vi.mock("../../../components/ActivityItem", () => ({
+  ActivityItem: vi.fn(({ eventName, width }) => (
+    <div data-testid="activity-item" data-event={eventName} data-width={width}>
+      {eventName}
+    </div>
+  )),
+}));
+
+describe("ActivityFeedSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the header with mobile-optimized size", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Aktivitäten");
+    // Mobile uses text-4xl vs desktop text-5xl
+    expect(header).toHaveClass("text-4xl");
+  });
+
+  it("renders LIVE indicator badge", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const liveIndicator = container.querySelector('[class*="bg-green-500"]');
+    expect(liveIndicator).toBeInTheDocument();
+  });
+
+  it("renders four activity items", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const activityItems = container.querySelectorAll('[data-testid="activity-item"]');
+    expect(activityItems.length).toBe(4);
+  });
+
+  it("renders activity items with mobile-optimized width (400px)", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const activityItems = container.querySelectorAll('[data-testid="activity-item"]');
+    activityItems.forEach((item) => {
+      // Mobile uses 400px vs desktop 480px
+      expect(item).toHaveAttribute("data-width", "400");
+    });
+  });
+
+  it("renders button-click audio for each activity", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    const audioSequences = Array.from(sequences).filter((seq) => {
+      const audio = seq.querySelector('[data-testid="audio"]');
+      return audio?.getAttribute("src")?.includes("button-click.mp3");
+    });
+    expect(audioSequences.length).toBe(4);
+  });
+
+  it("renders slide-in audio for section entrance", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const slideInAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("slide-in.mp3")
+    );
+    expect(slideInAudio).toBeInTheDocument();
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders subtitle with correct styling", () => {
+    const { container } = render(<ActivityFeedSceneMobile />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Der Puls der Bitcoin-Community");
+    expect(subtitle).toHaveClass("text-lg");
+  });
+});

videos/src/scenes/portal/mobile/ActivityFeedSceneMobile.tsx

@@ -0,0 +1,252 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ActivityItem } from "../../../components/ActivityItem";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+
+// Stagger delay between activity items (in frames)
+const ACTIVITY_STAGGER_DELAY = 18;
+
+// Activity feed data from the screenshot
+const ACTIVITY_FEED_DATA = [
+  {
+    eventName: "EINUNDZWANZIG Kempten",
+    timestamp: "vor 13 Stunden",
+    badgeText: "Neuer Termin",
+  },
+  {
+    eventName: "EINUNDZWANZIG Darmstadt",
+    timestamp: "vor 21 Stunden",
+    badgeText: "Neuer Termin",
+  },
+  {
+    eventName: "EINUNDZWANZIG Vulkaneifel",
+    timestamp: "vor 2 Tagen",
+    badgeText: "Neuer Termin",
+  },
+  {
+    eventName: "BitcoinWalk Würzburg",
+    timestamp: "vor 2 Tagen",
+    badgeText: "Neuer Termin",
+  },
+];
+
+/**
+ * ActivityFeedSceneMobile - Scene 7: Activity Feed for Mobile (10 seconds / 300 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Narrower activity cards (400px vs 480px)
+ * - Adjusted text sizes and spacing
+ * - Centered layout for portrait orientation
+ */
+export const ActivityFeedSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.3 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
+
+  // Subtitle animation (slightly more delayed)
+  const subtitleDelay = Math.floor(0.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Base delay for activity items
+  const activityBaseDelay = Math.floor(1 * fps);
+
+  // Subtle pulse for live indicator
+  const pulseIntensity = interpolate(
+    Math.sin(frame * 0.1),
+    [-1, 1],
+    [0.5, 1]
+  );
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: button-click for each activity entrance */}
+      {ACTIVITY_FEED_DATA.map((_, index) => (
+        <Sequence
+          key={`audio-${index}`}
+          from={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
+          durationInFrames={Math.floor(0.5 * fps)}
+        >
+          <Audio src={staticFile("sfx/button-click.mp3")} volume={0.4} />
+        </Sequence>
+      ))}
+
+      {/* Audio: slide-in for section entrance */}
+      <Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 50% 50%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content - Centered for mobile */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-6">
+          {/* Section Header */}
+          <div
+            className="text-center mb-8"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <div className="flex items-center justify-center gap-3 mb-3">
+              <h1 className="text-4xl font-bold text-white">Aktivitäten</h1>
+              {/* Live indicator dot */}
+              <div
+                className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-500/20 border border-green-500/30"
+                style={{
+                  opacity: pulseIntensity,
+                }}
+              >
+                <div
+                  className="w-2 h-2 rounded-full bg-green-500"
+                  style={{
+                    boxShadow: `0 0 ${8 * pulseIntensity}px rgba(34, 197, 94, 0.8)`,
+                  }}
+                />
+                <span className="text-xs text-green-400 font-medium">LIVE</span>
+              </div>
+            </div>
+            <p
+              className="text-lg text-zinc-400"
+              style={{
+                opacity: subtitleOpacity,
+                transform: `translateY(${subtitleY}px)`,
+              }}
+            >
+              Der Puls der Bitcoin-Community
+            </p>
+          </div>
+
+          {/* Activity Feed List */}
+          <div className="w-full max-w-md">
+            <div className="flex flex-col gap-3">
+              {ACTIVITY_FEED_DATA.map((activity, index) => (
+                <ActivityItemWrapperMobile
+                  key={activity.eventName}
+                  activity={activity}
+                  delay={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Wrapper component for activity items for mobile
+ */
+type ActivityItemWrapperMobileProps = {
+  activity: {
+    eventName: string;
+    timestamp: string;
+    badgeText: string;
+  };
+  delay: number;
+};
+
+const ActivityItemWrapperMobile: React.FC<ActivityItemWrapperMobileProps> = ({
+  activity,
+  delay,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Container spring for the wrapper
+  const containerSpring = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 15, stiffness: 80 },
+  });
+
+  const containerOpacity = interpolate(containerSpring, [0, 1], [0, 1]);
+
+  return (
+    <div
+      style={{
+        opacity: containerOpacity,
+      }}
+    >
+      <ActivityItem
+        eventName={activity.eventName}
+        timestamp={activity.timestamp}
+        badgeText={activity.badgeText}
+        showBadge={true}
+        delay={delay}
+        width={400}
+        accentColor="#f7931a"
+      />
+    </div>
+  );
+};

videos/src/scenes/portal/mobile/CallToActionSceneMobile.test.tsx

@@ -0,0 +1,144 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { CallToActionSceneMobile } from "./CallToActionSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 120),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+describe("CallToActionSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the CTA title with mobile-optimized size", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("Werde Teil der Community");
+    // Mobile uses text-3xl vs desktop text-5xl
+    expect(title).toHaveClass("text-3xl");
+  });
+
+  it("renders the Einundzwanzig logo with mobile-optimized dimensions", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const logo = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-square-inverted.svg")
+    );
+    expect(logo).toBeInTheDocument();
+    // Mobile logo is 100px vs desktop 120px
+    expect(logo).toHaveStyle({ width: "100px", height: "100px" });
+  });
+
+  it("renders the portal URL", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const urlText = container.textContent;
+    expect(urlText).toContain("portal.einundzwanzig.space");
+  });
+
+  it("renders URL container with mobile-optimized text size", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const urlSpan = container.querySelector('[class*="font-mono"]');
+    expect(urlSpan).toBeInTheDocument();
+    // Mobile uses text-xl vs desktop text-3xl
+    expect(urlSpan).toHaveClass("text-xl");
+  });
+
+  it("renders glassmorphism overlay with mobile-optimized width", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const overlay = container.querySelector('[class*="max-w-md"]');
+    expect(overlay).toBeInTheDocument();
+  });
+
+  it("renders success-fanfare audio", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const fanfareAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("success-fanfare.mp3")
+    );
+    expect(fanfareAudio).toBeInTheDocument();
+  });
+
+  it("renders typing audio for URL", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const typingAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("typing.mp3")
+    );
+    expect(typingAudio).toBeInTheDocument();
+  });
+
+  it("renders subtitle with correct styling", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Die deutschsprachige Bitcoin-Community wartet auf dich");
+    // Mobile uses text-base vs desktop text-xl
+    expect(subtitle).toHaveClass("text-base");
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<CallToActionSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+});

videos/src/scenes/portal/mobile/CallToActionSceneMobile.tsx

@@ -0,0 +1,306 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+
+// Spring configurations
+const SMOOTH = { damping: 200 };
+const SNAPPY = { damping: 15, stiffness: 80 };
+const BOUNCY = { damping: 12 };
+
+// URL to display
+const PORTAL_URL = "portal.einundzwanzig.space";
+
+/**
+ * CallToActionSceneMobile - Scene 8: Call to Action for Mobile (12 seconds / 360 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Smaller container width (max-w-md vs max-w-2xl)
+ * - Reduced text sizes for portrait orientation
+ * - Smaller logo (100px vs 120px)
+ * - Adjusted URL text size
+ */
+export const CallToActionSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Background blur and zoom out animation (0-60 frames)
+  const blurSpring = spring({
+    frame,
+    fps,
+    config: SMOOTH,
+  });
+
+  const backgroundBlur = interpolate(blurSpring, [0, 1], [0, 8]);
+  const backgroundScale = interpolate(blurSpring, [0, 1], [1, 0.95]);
+  const backgroundOpacity = interpolate(blurSpring, [0, 1], [0.3, 0.15]);
+
+  // Glassmorphism overlay entrance (delayed 15 frames)
+  const overlayDelay = 15;
+  const overlaySpring = spring({
+    frame: frame - overlayDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const overlayOpacity = interpolate(overlaySpring, [0, 1], [0, 1]);
+
+  // Title entrance (delayed 30 frames)
+  const titleDelay = Math.floor(1 * fps);
+  const titleSpring = spring({
+    frame: frame - titleDelay,
+    fps,
+    config: BOUNCY,
+  });
+  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
+  const titleY = interpolate(titleSpring, [0, 1], [50, 0]);
+  const titleScale = interpolate(titleSpring, [0, 1], [0.8, 1]);
+
+  // Logo entrance (delayed 45 frames)
+  const logoDelay = Math.floor(1.5 * fps);
+  const logoSpring = spring({
+    frame: frame - logoDelay,
+    fps,
+    config: BOUNCY,
+  });
+  const logoOpacity = interpolate(logoSpring, [0, 1], [0, 1]);
+  const logoScale = interpolate(logoSpring, [0, 1], [0.5, 1]);
+
+  // Logo glow pulse
+  const glowIntensity = interpolate(
+    Math.sin((frame - logoDelay) * 0.08),
+    [-1, 1],
+    [0.4, 1]
+  );
+
+  // URL typing animation (delayed 2.5 seconds)
+  const urlDelay = Math.floor(2.5 * fps);
+  const urlTypingProgress = Math.max(
+    0,
+    Math.min(1, (frame - urlDelay) / (1.5 * fps))
+  );
+  const displayedUrlLength = Math.floor(urlTypingProgress * PORTAL_URL.length);
+  const displayedUrl = PORTAL_URL.slice(0, displayedUrlLength);
+  const showCursor = frame >= urlDelay && urlTypingProgress < 1;
+
+  // URL container entrance
+  const urlContainerSpring = spring({
+    frame: frame - Math.floor(2.3 * fps),
+    fps,
+    config: SNAPPY,
+  });
+  const urlContainerOpacity = interpolate(urlContainerSpring, [0, 1], [0, 1]);
+  const urlContainerY = interpolate(urlContainerSpring, [0, 1], [30, 0]);
+
+  // URL pulse after typing complete
+  const urlPulseActive = frame > urlDelay + 1.5 * fps;
+  const urlPulseIntensity = urlPulseActive
+    ? interpolate(Math.sin((frame - urlDelay - 1.5 * fps) * 0.1), [-1, 1], [0.6, 1])
+    : 0;
+
+  // Subtitle entrance
+  const subtitleDelay = Math.floor(3.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: success-fanfare */}
+      <Sequence from={titleDelay} durationInFrames={Math.floor(4 * fps)}>
+        <Audio src={staticFile("sfx/success-fanfare.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Audio: typing for URL */}
+      <Sequence from={urlDelay} durationInFrames={Math.floor(1.5 * fps)}>
+        <Audio src={staticFile("sfx/typing.mp3")} volume={0.3} />
+      </Sequence>
+
+      {/* Audio: url-emphasis when typing complete */}
+      <Sequence
+        from={urlDelay + Math.floor(1.6 * fps)}
+        durationInFrames={Math.floor(1 * fps)}
+      >
+        <Audio src={staticFile("sfx/url-emphasis.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Audio: logo reveal */}
+      <Sequence from={logoDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/logo-reveal.mp3")} volume={0.4} />
+      </Sequence>
+
+      {/* Blurred Wallpaper Background */}
+      <div
+        className="absolute inset-0"
+        style={{
+          filter: `blur(${backgroundBlur}px)`,
+          transform: `scale(${backgroundScale})`,
+        }}
+      >
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: backgroundOpacity }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 50% 50%, rgba(24, 24, 27, 0.7) 0%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* Glassmorphism Overlay */}
+      <div
+        className="absolute inset-0 flex items-center justify-center px-6"
+        style={{
+          opacity: overlayOpacity,
+        }}
+      >
+        <div
+          className="relative w-full max-w-md rounded-2xl p-8 text-center"
+          style={{
+            backgroundColor: "rgba(39, 39, 42, 0.4)",
+            backdropFilter: "blur(20px)",
+            border: "1px solid rgba(247, 147, 26, 0.2)",
+            boxShadow: `
+              0 0 ${60 * glowIntensity}px rgba(247, 147, 26, 0.15),
+              0 25px 50px -12px rgba(0, 0, 0, 0.5),
+              inset 0 0 60px rgba(247, 147, 26, 0.05)
+            `,
+          }}
+        >
+          {/* Title - smaller for mobile */}
+          <h1
+            className="text-3xl font-bold text-white mb-6"
+            style={{
+              opacity: titleOpacity,
+              transform: `translateY(${titleY}px) scale(${titleScale})`,
+              textShadow: "0 2px 20px rgba(0, 0, 0, 0.5)",
+            }}
+          >
+            Werde Teil der Community
+          </h1>
+
+          {/* EINUNDZWANZIG Logo - smaller for mobile */}
+          <div
+            className="flex justify-center mb-8"
+            style={{
+              opacity: logoOpacity,
+              transform: `scale(${logoScale})`,
+            }}
+          >
+            <div
+              className="relative"
+              style={{
+                filter: `drop-shadow(0 0 ${25 * glowIntensity}px rgba(247, 147, 26, 0.6))`,
+              }}
+            >
+              <Img
+                src={staticFile("einundzwanzig-square-inverted.svg")}
+                style={{
+                  width: 100,
+                  height: 100,
+                }}
+              />
+              {/* Glow ring */}
+              <div
+                className="absolute inset-0 rounded-full"
+                style={{
+                  background: `radial-gradient(circle, rgba(247, 147, 26, ${0.3 * glowIntensity}) 0%, transparent 70%)`,
+                  transform: "scale(1.5)",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* URL Container - adjusted for mobile */}
+          <div
+            className="mb-5"
+            style={{
+              opacity: urlContainerOpacity,
+              transform: `translateY(${urlContainerY}px)`,
+            }}
+          >
+            <div
+              className="inline-block px-5 py-3 rounded-xl"
+              style={{
+                backgroundColor: "rgba(24, 24, 27, 0.8)",
+                border: urlPulseActive
+                  ? `2px solid rgba(247, 147, 26, ${0.5 + urlPulseIntensity * 0.5})`
+                  : "2px solid rgba(63, 63, 70, 0.5)",
+                boxShadow: urlPulseActive
+                  ? `0 0 ${25 * urlPulseIntensity}px rgba(247, 147, 26, 0.4), inset 0 0 ${15 * urlPulseIntensity}px rgba(247, 147, 26, 0.1)`
+                  : "none",
+              }}
+            >
+              <span
+                className="text-xl font-mono font-bold"
+                style={{
+                  color: urlPulseActive ? "#f7931a" : "#a1a1aa",
+                  textShadow: urlPulseActive
+                    ? `0 0 ${12 * urlPulseIntensity}px rgba(247, 147, 26, 0.6)`
+                    : "none",
+                }}
+              >
+                {displayedUrl}
+                {showCursor && (
+                  <span
+                    className="inline-block ml-1"
+                    style={{
+                      width: 2,
+                      height: "1em",
+                      backgroundColor: "#f7931a",
+                      animation: "none",
+                      opacity: Math.floor(frame * 0.15) % 2 === 0 ? 1 : 0,
+                    }}
+                  />
+                )}
+              </span>
+            </div>
+          </div>
+
+          {/* Subtitle - smaller for mobile */}
+          <p
+            className="text-base text-zinc-400"
+            style={{
+              opacity: subtitleOpacity,
+              transform: `translateY(${subtitleY}px)`,
+            }}
+          >
+            Die deutschsprachige Bitcoin-Community wartet auf dich
+          </p>
+        </div>
+      </div>
+
+      {/* Ambient glow effects */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background: `radial-gradient(ellipse at 50% 30%, rgba(247, 147, 26, ${0.08 * glowIntensity}) 0%, transparent 50%)`,
+        }}
+      />
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 80px rgba(0, 0, 0, 0.7)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};

videos/src/scenes/portal/mobile/CountryStatsSceneMobile.test.tsx

@@ -0,0 +1,151 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { CountryStatsSceneMobile } from "./CountryStatsSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock CountryBar component
+vi.mock("../../../components/CountryBar", () => ({
+  CountryBar: vi.fn(({ countryName, userCount, width }) => (
+    <div data-testid="country-bar" data-country={countryName} data-count={userCount} data-width={width}>
+      {countryName}: {userCount}
+    </div>
+  )),
+}));
+
+// Mock SparklineChart component
+vi.mock("../../../components/SparklineChart", () => ({
+  SparklineChart: vi.fn(({ width, height }) => (
+    <div data-testid="sparkline-chart" data-width={width} data-height={height}>
+      Sparkline
+    </div>
+  )),
+}));
+
+describe("CountryStatsSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the header with mobile-optimized size", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Community nach Ländern");
+    // Mobile uses text-4xl vs desktop text-5xl
+    expect(header).toHaveClass("text-4xl");
+  });
+
+  it("renders six country bars", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
+    expect(countryBars.length).toBe(6);
+  });
+
+  it("renders country bars with mobile-optimized width (280px)", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
+    countryBars.forEach((bar) => {
+      // Mobile uses 280px vs desktop 380px
+      expect(bar).toHaveAttribute("data-width", "280");
+    });
+  });
+
+  it("renders sparkline charts for each country", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
+    expect(sparklines.length).toBe(6);
+  });
+
+  it("renders sparklines with mobile-optimized dimensions", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
+    sparklines.forEach((sparkline) => {
+      // Mobile uses 80px width vs desktop 120px
+      expect(sparkline).toHaveAttribute("data-width", "80");
+      expect(sparkline).toHaveAttribute("data-height", "32");
+    });
+  });
+
+  it("renders total users badge", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const badge = container.querySelector('[class*="rounded-xl"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  it("renders success-chime audio for each country", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    const audioSequences = Array.from(sequences).filter((seq) => {
+      const audio = seq.querySelector('[data-testid="audio"]');
+      return audio?.getAttribute("src")?.includes("success-chime.mp3");
+    });
+    expect(audioSequences.length).toBe(6);
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<CountryStatsSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+});

videos/src/scenes/portal/mobile/CountryStatsSceneMobile.tsx

@@ -0,0 +1,391 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { CountryBar } from "../../../components/CountryBar";
+import { SparklineChart } from "../../../components/SparklineChart";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+const BOUNCY = { damping: 12 };
+
+// Stagger delay between country items (in frames)
+const COUNTRY_STAGGER_DELAY = 10;
+
+// Country statistics data
+const COUNTRY_DATA = [
+  {
+    name: "Germany",
+    flagEmoji: "🇩🇪",
+    userCount: 458,
+    sparklineData: [80, 120, 180, 220, 280, 320, 350, 390, 420, 445, 455, 458],
+  },
+  {
+    name: "Austria",
+    flagEmoji: "🇦🇹",
+    userCount: 59,
+    sparklineData: [10, 15, 22, 28, 35, 40, 45, 50, 54, 57, 58, 59],
+  },
+  {
+    name: "Switzerland",
+    flagEmoji: "🇨🇭",
+    userCount: 34,
+    sparklineData: [5, 8, 12, 15, 18, 22, 25, 28, 30, 32, 33, 34],
+  },
+  {
+    name: "Luxembourg",
+    flagEmoji: "🇱🇺",
+    userCount: 8,
+    sparklineData: [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8],
+  },
+  {
+    name: "Bulgaria",
+    flagEmoji: "🇧🇬",
+    userCount: 7,
+    sparklineData: [1, 1, 2, 2, 3, 4, 4, 5, 5, 6, 7, 7],
+  },
+  {
+    name: "Spain",
+    flagEmoji: "🇪🇸",
+    userCount: 3,
+    sparklineData: [0, 0, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3],
+  },
+];
+
+// Maximum count for calculating relative bar widths
+const MAX_USER_COUNT = Math.max(...COUNTRY_DATA.map((c) => c.userCount));
+
+/**
+ * CountryStatsSceneMobile - Scene 5: Top Länder for Mobile (12 seconds / 360 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Single column layout instead of 2-column grid
+ * - Smaller bar widths optimized for 1080px width
+ * - Sparkline placed below each country bar
+ * - Reduced spacing and text sizes
+ */
+export const CountryStatsSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.3 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
+
+  // Subtitle animation (slightly more delayed)
+  const subtitleDelay = Math.floor(0.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Base delay for country items
+  const countryBaseDelay = Math.floor(1 * fps);
+
+  // Subtle glow pulse
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.05),
+    [-1, 1],
+    [0.3, 0.6]
+  );
+
+  // Total users count animation
+  const totalUsers = COUNTRY_DATA.reduce((sum, c) => sum + c.userCount, 0);
+  const totalDelay = Math.floor(0.8 * fps);
+  const totalSpring = spring({
+    frame: frame - totalDelay,
+    fps,
+    config: { damping: 18, stiffness: 70 },
+    durationInFrames: 60,
+  });
+  const displayTotal = Math.round(totalSpring * totalUsers);
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: success-chime for each country entrance */}
+      {COUNTRY_DATA.map((_, index) => (
+        <Sequence
+          key={`audio-${index}`}
+          from={countryBaseDelay + index * COUNTRY_STAGGER_DELAY}
+          durationInFrames={Math.floor(0.5 * fps)}
+        >
+          <Audio src={staticFile("sfx/success-chime.mp3")} volume={0.3} />
+        </Sequence>
+      ))}
+
+      {/* Audio: slide-in for section entrance */}
+      <Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 50% 50%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content - Centered for mobile */}
+        <div className="absolute inset-0 flex flex-col items-center px-8 pt-12">
+          {/* Section Header */}
+          <div
+            className="text-center mb-6"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <h1 className="text-4xl font-bold text-white mb-2">
+              Community nach Ländern
+            </h1>
+            <p
+              className="text-lg text-zinc-400"
+              style={{
+                opacity: subtitleOpacity,
+                transform: `translateY(${subtitleY}px)`,
+              }}
+            >
+              Die deutschsprachige Bitcoin-Community wächst
+            </p>
+          </div>
+
+          {/* Total Users Badge */}
+          <TotalUsersBadgeMobile
+            totalUsers={displayTotal}
+            delay={totalDelay}
+            glowIntensity={glowIntensity}
+          />
+
+          {/* Countries List - Single column for mobile */}
+          <div className="w-full max-w-md mt-6">
+            <div className="flex flex-col gap-3">
+              {COUNTRY_DATA.map((country, index) => (
+                <CountryRowMobile
+                  key={country.name}
+                  country={country}
+                  maxCount={MAX_USER_COUNT}
+                  delay={countryBaseDelay + index * COUNTRY_STAGGER_DELAY}
+                  glowIntensity={glowIntensity}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Total users badge component for mobile
+ */
+type TotalUsersBadgeMobileProps = {
+  totalUsers: number;
+  delay: number;
+  glowIntensity: number;
+};
+
+const TotalUsersBadgeMobile: React.FC<TotalUsersBadgeMobileProps> = ({
+  totalUsers,
+  delay,
+  glowIntensity,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  const badgeSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: BOUNCY,
+  });
+
+  const badgeScale = interpolate(badgeSpring, [0, 1], [0.8, 1]);
+  const badgeOpacity = interpolate(badgeSpring, [0, 1], [0, 1]);
+
+  return (
+    <div
+      className="flex items-center gap-3 px-6 py-3 rounded-xl"
+      style={{
+        backgroundColor: "rgba(247, 147, 26, 0.15)",
+        border: "1px solid rgba(247, 147, 26, 0.3)",
+        boxShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
+        transform: `scale(${badgeScale})`,
+        opacity: badgeOpacity,
+      }}
+    >
+      <GlobeIcon />
+      <div className="flex items-baseline gap-2">
+        <span
+          className="text-3xl font-bold tabular-nums"
+          style={{
+            color: "#f7931a",
+            fontFamily: "Inconsolata, monospace",
+            textShadow: `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.5)`,
+          }}
+        >
+          {totalUsers}
+        </span>
+        <span className="text-lg text-zinc-300">Nutzer weltweit</span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Country row with bar and sparkline for mobile
+ */
+type CountryRowMobileProps = {
+  country: {
+    name: string;
+    flagEmoji: string;
+    userCount: number;
+    sparklineData: number[];
+  };
+  maxCount: number;
+  delay: number;
+  glowIntensity: number;
+};
+
+const CountryRowMobile: React.FC<CountryRowMobileProps> = ({
+  country,
+  maxCount,
+  delay,
+  glowIntensity,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  const rowSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: SNAPPY,
+  });
+
+  const rowOpacity = interpolate(rowSpring, [0, 1], [0, 1]);
+  const rowX = interpolate(rowSpring, [0, 1], [-50, 0]);
+
+  // Sparkline delay (appears slightly after the bar)
+  const sparklineDelay = delay + 15;
+
+  return (
+    <div
+      className="flex items-center gap-3 p-3 rounded-xl bg-zinc-800/50"
+      style={{
+        opacity: rowOpacity,
+        transform: `translateX(${rowX}px)`,
+      }}
+    >
+      {/* Country Bar - Compact for mobile */}
+      <div className="flex-1">
+        <CountryBar
+          countryName={country.name}
+          flagEmoji={country.flagEmoji}
+          userCount={country.userCount}
+          maxCount={maxCount}
+          width={280}
+          delay={delay}
+          accentColor="#f7931a"
+          showCount={true}
+        />
+      </div>
+
+      {/* Sparkline Chart - Smaller for mobile */}
+      <div
+        className="rounded-lg bg-zinc-800/50 p-2 flex-shrink-0"
+        style={{
+          boxShadow: `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.1)`,
+        }}
+      >
+        <SparklineChart
+          data={country.sparklineData}
+          width={80}
+          height={32}
+          delay={sparklineDelay}
+          color="#f7931a"
+          strokeWidth={2}
+          showFill={true}
+          fillOpacity={0.2}
+          showGlow={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Globe icon SVG
+ */
+const GlobeIcon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#f7931a"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ width: 28, height: 28 }}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M2 12h20" />
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+);

videos/src/scenes/portal/mobile/DashboardOverviewSceneMobile.test.tsx

@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { DashboardOverviewSceneMobile } from "./DashboardOverviewSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock StatsCounter component
+vi.mock("../../../components/StatsCounter", () => ({
+  StatsCounter: vi.fn(({ targetNumber, label, fontSize }) => (
+    <div data-testid="stats-counter" data-target={targetNumber} data-label={label} data-fontsize={fontSize}>
+      {targetNumber}
+    </div>
+  )),
+}));
+
+// Mock SparklineChart component
+vi.mock("../../../components/SparklineChart", () => ({
+  SparklineChart: vi.fn(({ width, height }) => (
+    <div data-testid="sparkline-chart" data-width={width} data-height={height}>
+      Sparkline
+    </div>
+  )),
+}));
+
+describe("DashboardOverviewSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the Dashboard header with mobile-optimized size", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Dashboard");
+    // Mobile uses text-4xl vs desktop text-5xl
+    expect(header).toHaveClass("text-4xl");
+  });
+
+  it("renders three stats cards (Meetups, Benutzer, Events)", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const statsCounters = container.querySelectorAll('[data-testid="stats-counter"]');
+    expect(statsCounters.length).toBe(3);
+  });
+
+  it("renders stats counters with mobile-optimized font size (56px)", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const statsCounters = container.querySelectorAll('[data-testid="stats-counter"]');
+    statsCounters.forEach((counter) => {
+      // Mobile uses fontSize 56 vs desktop 72
+      expect(counter).toHaveAttribute("data-fontsize", "56");
+    });
+  });
+
+  it("renders sparkline charts for each stat", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
+    expect(sparklines.length).toBe(3);
+  });
+
+  it("does not render sidebar (mobile has no sidebar)", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const sidebar = container.querySelector('[data-testid="dashboard-sidebar"]');
+    expect(sidebar).not.toBeInTheDocument();
+  });
+
+  it("renders card-slide audio", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const cardSlideAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("card-slide.mp3")
+    );
+    expect(cardSlideAudio).toBeInTheDocument();
+  });
+
+  it("renders ui-appear audio", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const uiAppearAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("ui-appear.mp3")
+    );
+    expect(uiAppearAudio).toBeInTheDocument();
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<DashboardOverviewSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+});

videos/src/scenes/portal/mobile/DashboardOverviewSceneMobile.tsx

@@ -0,0 +1,272 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { StatsCounter } from "../../../components/StatsCounter";
+import { SparklineChart } from "../../../components/SparklineChart";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+
+// Stagger delay between content cards
+const CARD_STAGGER_DELAY = 8;
+
+// Sample sparkline data
+const MEETUP_TREND_DATA = [12, 15, 18, 14, 22, 25, 28, 32, 35, 42, 48, 55];
+const USER_TREND_DATA = [100, 145, 180, 220, 280, 350, 420, 510, 620, 780, 950, 1100];
+const EVENT_TREND_DATA = [5, 8, 12, 15, 18, 22, 28, 35, 42, 55, 68, 89];
+
+/**
+ * DashboardOverviewSceneMobile - Scene 3: Dashboard Overview for Mobile (12 seconds / 360 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - No sidebar (removed for portrait orientation)
+ * - Vertical card stacking instead of horizontal row
+ * - Smaller card widths optimized for 1080px width
+ * - Reduced padding and spacing
+ */
+export const DashboardOverviewSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [25, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.88, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.5 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-30, 0]);
+
+  // Subtle background glow pulse
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.04),
+    [-1, 1],
+    [0.3, 0.5]
+  );
+
+  // Mobile card width
+  const cardWidth = 420;
+
+  // Card entrance delays (staggered)
+  const cardBaseDelay = Math.floor(1 * fps);
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: card-slide for initial entrance */}
+      <Sequence from={cardBaseDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/card-slide.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Audio: ui-appear for stats */}
+      <Sequence from={cardBaseDelay + Math.floor(0.5 * fps)} durationInFrames={Math.floor(0.5 * fps)}>
+        <Audio src={staticFile("sfx/ui-appear.mp3")} volume={0.4} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.6) 50%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content - Centered for mobile */}
+        <div className="absolute inset-0 flex flex-col items-center px-8 pt-16">
+          {/* Header */}
+          <div
+            className="mb-8 text-center"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <h1 className="text-4xl font-bold text-white mb-2">Dashboard</h1>
+            <p className="text-lg text-zinc-400">
+              Willkommen im Einundzwanzig Portal
+            </p>
+          </div>
+
+          {/* Stats Cards - Vertical stack for mobile */}
+          <div className="flex flex-col gap-5 w-full items-center">
+            {/* Meetups Card */}
+            <StatsCardMobile
+              title="Meetups"
+              delay={cardBaseDelay}
+              width={cardWidth}
+              glowIntensity={glowIntensity}
+            >
+              <StatsCounter
+                targetNumber={204}
+                delay={cardBaseDelay + 15}
+                duration={60}
+                label="Aktive Gruppen"
+                fontSize={56}
+                color="#f7931a"
+              />
+              <div className="mt-3">
+                <SparklineChart
+                  data={MEETUP_TREND_DATA}
+                  width={cardWidth - 48}
+                  height={50}
+                  delay={cardBaseDelay + 30}
+                  showFill={true}
+                  fillOpacity={0.15}
+                />
+              </div>
+            </StatsCardMobile>
+
+            {/* Users Card */}
+            <StatsCardMobile
+              title="Benutzer"
+              delay={cardBaseDelay + CARD_STAGGER_DELAY}
+              width={cardWidth}
+              glowIntensity={glowIntensity}
+            >
+              <StatsCounter
+                targetNumber={1247}
+                delay={cardBaseDelay + CARD_STAGGER_DELAY + 15}
+                duration={60}
+                label="Registrierte Nutzer"
+                fontSize={56}
+                color="#f7931a"
+              />
+              <div className="mt-3">
+                <SparklineChart
+                  data={USER_TREND_DATA}
+                  width={cardWidth - 48}
+                  height={50}
+                  delay={cardBaseDelay + CARD_STAGGER_DELAY + 30}
+                  showFill={true}
+                  fillOpacity={0.15}
+                />
+              </div>
+            </StatsCardMobile>
+
+            {/* Events Card */}
+            <StatsCardMobile
+              title="Events"
+              delay={cardBaseDelay + CARD_STAGGER_DELAY * 2}
+              width={cardWidth}
+              glowIntensity={glowIntensity}
+            >
+              <StatsCounter
+                targetNumber={89}
+                delay={cardBaseDelay + CARD_STAGGER_DELAY * 2 + 15}
+                duration={60}
+                label="Diese Woche"
+                fontSize={56}
+                color="#f7931a"
+              />
+              <div className="mt-3">
+                <SparklineChart
+                  data={EVENT_TREND_DATA}
+                  width={cardWidth - 48}
+                  height={50}
+                  delay={cardBaseDelay + CARD_STAGGER_DELAY * 2 + 30}
+                  showFill={true}
+                  fillOpacity={0.15}
+                />
+              </div>
+            </StatsCardMobile>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Stats Card container with animated entrance for mobile
+ */
+type StatsCardMobileProps = {
+  title: string;
+  delay: number;
+  width: number;
+  glowIntensity: number;
+  children: React.ReactNode;
+};
+
+const StatsCardMobile: React.FC<StatsCardMobileProps> = ({
+  title,
+  delay,
+  width,
+  glowIntensity,
+  children,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  const cardSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: SNAPPY,
+  });
+
+  const cardScale = interpolate(cardSpring, [0, 1], [0.85, 1]);
+  const cardOpacity = interpolate(cardSpring, [0, 1], [0, 1]);
+  const cardY = interpolate(cardSpring, [0, 1], [30, 0]);
+
+  return (
+    <div
+      className="rounded-2xl bg-zinc-800/80 backdrop-blur-md border border-zinc-700/50 p-5"
+      style={{
+        width,
+        transform: `translateY(${cardY}px) scale(${cardScale})`,
+        opacity: cardOpacity,
+        boxShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4)`,
+      }}
+    >
+      <h3 className="text-base font-semibold text-zinc-300 mb-3">{title}</h3>
+      {children}
+    </div>
+  );
+};

videos/src/scenes/portal/mobile/MeetupShowcaseSceneMobile.test.tsx

@@ -0,0 +1,151 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { MeetupShowcaseSceneMobile } from "./MeetupShowcaseSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock MeetupCard component
+vi.mock("../../../components/MeetupCard", () => ({
+  MeetupCard: vi.fn(({ name, width }) => (
+    <div data-testid="meetup-card" data-name={name} data-width={width}>
+      {name}
+    </div>
+  )),
+}));
+
+describe("MeetupShowcaseSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the header with mobile-optimized size", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Meine nächsten Meetups");
+    // Mobile uses text-3xl vs desktop text-5xl
+    expect(header).toHaveClass("text-3xl");
+  });
+
+  it("renders the featured MeetupCard with mobile-optimized width", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const meetupCard = container.querySelector('[data-testid="meetup-card"]');
+    expect(meetupCard).toBeInTheDocument();
+    // Mobile uses 360px width vs desktop 450px
+    expect(meetupCard).toHaveAttribute("data-width", "360");
+  });
+
+  it("renders three meetup items total (1 featured + 2 upcoming)", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const meetupLogos = container.querySelectorAll('[data-testid="remotion-img"]');
+    // 3 meetup logos + 1 wallpaper = 4 images total
+    // But MeetupCard is mocked, so we count the upcoming meetup logos
+    expect(meetupLogos.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("renders slide-in audio for section entrance", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const slideInAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("slide-in.mp3")
+    );
+    expect(slideInAudio).toBeInTheDocument();
+  });
+
+  it("renders card-slide audio for featured card", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const cardSlideAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("card-slide.mp3")
+    );
+    expect(cardSlideAudio).toBeInTheDocument();
+  });
+
+  it("renders badge-appear audio for list items", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const badgeAppearAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("badge-appear.mp3")
+    );
+    expect(badgeAppearAudio).toBeInTheDocument();
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders 'Weitere Termine' section header", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const sectionHeader = container.querySelector("h3");
+    expect(sectionHeader).toBeInTheDocument();
+    expect(sectionHeader).toHaveTextContent("Weitere Termine");
+  });
+
+  it("renders 'Nächster Termin' badge", () => {
+    const { container } = render(<MeetupShowcaseSceneMobile />);
+    const badge = container.textContent;
+    expect(badge).toContain("Nächster Termin");
+  });
+});

videos/src/scenes/portal/mobile/MeetupShowcaseSceneMobile.tsx

@@ -0,0 +1,422 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { MeetupCard } from "../../../components/MeetupCard";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+
+// Stagger delay between meetup list items
+const LIST_ITEM_STAGGER = 10;
+
+// Upcoming meetup data
+const UPCOMING_MEETUPS = [
+  {
+    name: "EINUNDZWANZIG Kempten",
+    location: "Kempten im Allgäu",
+    date: "Di, 28. Jan 2025",
+    time: "19:00 Uhr",
+    logoPath: "logos/EinundzwanzigKempten.png",
+    isFeatured: true,
+  },
+  {
+    name: "EINUNDZWANZIG Memmingen",
+    location: "Memmingen",
+    date: "Mi, 29. Jan 2025",
+    time: "19:30 Uhr",
+    logoPath: "logos/EinundzwanzigMemmingen.png",
+    isFeatured: false,
+  },
+  {
+    name: "EINUNDZWANZIG Friedrichshafen",
+    location: "Friedrichshafen",
+    date: "Do, 30. Jan 2025",
+    time: "20:00 Uhr",
+    logoPath: "logos/EinundzwanzigFriedrichshafen.png",
+    isFeatured: false,
+  },
+];
+
+/**
+ * MeetupShowcaseSceneMobile - Scene 4: Meine nächsten Meetup Termine for Mobile (12 seconds / 360 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Vertical layout for featured meetup card (stacked info)
+ * - Smaller card widths optimized for 1080px width
+ * - Reduced text sizes and spacing
+ * - Action buttons stacked vertically
+ */
+export const MeetupShowcaseSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.3 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
+
+  // Featured card entrance delay
+  const featuredCardDelay = Math.floor(0.8 * fps);
+
+  // Featured card 3D shadow animation
+  const featuredSpring = spring({
+    frame: frame - featuredCardDelay,
+    fps,
+    config: { damping: 18, stiffness: 70 },
+  });
+  const featuredScale = interpolate(featuredSpring, [0, 1], [0.85, 1]);
+  const featuredOpacity = interpolate(featuredSpring, [0, 1], [0, 1]);
+  const featuredRotateX = interpolate(featuredSpring, [0, 1], [15, 0]);
+  const featuredShadowY = interpolate(featuredSpring, [0, 1], [20, 40]);
+  const featuredShadowBlur = interpolate(featuredSpring, [0, 1], [10, 60]);
+
+  // Date/time info animation (after featured card)
+  const dateDelay = featuredCardDelay + Math.floor(0.4 * fps);
+  const dateSpring = spring({
+    frame: frame - dateDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const dateOpacity = interpolate(dateSpring, [0, 1], [0, 1]);
+  const dateY = interpolate(dateSpring, [0, 1], [20, 0]);
+
+  // Upcoming list header delay
+  const listHeaderDelay = featuredCardDelay + Math.floor(1 * fps);
+  const listHeaderSpring = spring({
+    frame: frame - listHeaderDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const listHeaderOpacity = interpolate(listHeaderSpring, [0, 1], [0, 1]);
+  const listHeaderX = interpolate(listHeaderSpring, [0, 1], [-30, 0]);
+
+  // Subtle glow pulse
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.05),
+    [-1, 1],
+    [0.3, 0.6]
+  );
+
+  // Featured meetup data
+  const featuredMeetup = UPCOMING_MEETUPS[0];
+  const upcomingMeetups = UPCOMING_MEETUPS.slice(1);
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: slide-in for section entrance */}
+      <Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Audio: card-slide for featured card */}
+      <Sequence from={featuredCardDelay} durationInFrames={Math.floor(0.8 * fps)}>
+        <Audio src={staticFile("sfx/card-slide.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Audio: badge-appear for list items */}
+      <Sequence from={listHeaderDelay + LIST_ITEM_STAGGER} durationInFrames={Math.floor(0.5 * fps)}>
+        <Audio src={staticFile("sfx/badge-appear.mp3")} volume={0.4} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 50% 40%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content - Centered for mobile */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-8">
+          {/* Section Header */}
+          <div
+            className="text-center mb-8"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <h1 className="text-3xl font-bold text-white mb-2">
+              Meine nächsten Meetups
+            </h1>
+            <p className="text-base text-zinc-400">
+              Kommende Bitcoin-Treffen in deiner Region
+            </p>
+          </div>
+
+          {/* Featured Meetup Card with 3D Shadow - Mobile optimized */}
+          <div
+            className="relative mb-6 w-full max-w-md"
+            style={{
+              opacity: featuredOpacity,
+              transform: `perspective(800px) rotateX(${featuredRotateX}deg) scale(${featuredScale})`,
+              transformOrigin: "center bottom",
+            }}
+          >
+            {/* 3D Shadow beneath card */}
+            <div
+              className="absolute left-1/2 -translate-x-1/2 rounded-full"
+              style={{
+                bottom: -15,
+                width: "80%",
+                height: 15,
+                background: `radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%)`,
+                transform: `translateY(${featuredShadowY * 0.7}px)`,
+                filter: `blur(${featuredShadowBlur / 4}px)`,
+              }}
+            />
+
+            {/* Featured Meetup Card - Vertical layout for mobile */}
+            <div
+              className="rounded-2xl bg-zinc-800/90 backdrop-blur-md border border-zinc-700/50 p-6"
+              style={{
+                boxShadow: `0 ${featuredShadowY}px ${featuredShadowBlur}px rgba(0, 0, 0, 0.5),
+                            0 0 ${40 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
+              }}
+            >
+              {/* Meetup Card Component */}
+              <MeetupCard
+                logoSrc={staticFile(featuredMeetup.logoPath)}
+                name={featuredMeetup.name}
+                location={featuredMeetup.location}
+                delay={featuredCardDelay + 5}
+                width={360}
+                accentColor="#f7931a"
+              />
+
+              {/* Date/Time Info - Below card for mobile */}
+              <div
+                className="flex flex-col gap-3 pt-5 mt-5 border-t border-zinc-600/50"
+                style={{
+                  opacity: dateOpacity,
+                  transform: `translateY(${dateY}px)`,
+                }}
+              >
+                {/* Date */}
+                <div className="flex items-center gap-3">
+                  <CalendarIcon />
+                  <span className="text-xl font-semibold text-white">
+                    {featuredMeetup.date}
+                  </span>
+                </div>
+                {/* Time */}
+                <div className="flex items-center gap-3">
+                  <ClockIcon />
+                  <span className="text-lg text-zinc-300">
+                    {featuredMeetup.time}
+                  </span>
+                </div>
+                {/* Badge */}
+                <div
+                  className="mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold self-start"
+                  style={{
+                    backgroundColor: "rgba(247, 147, 26, 0.2)",
+                    color: "#f7931a",
+                    border: "1px solid rgba(247, 147, 26, 0.3)",
+                    boxShadow: `0 0 ${20 * glowIntensity}px rgba(247, 147, 26, 0.3)`,
+                  }}
+                >
+                  <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+                  Nächster Termin
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Upcoming Meetups Section */}
+          <div className="w-full max-w-md">
+            {/* Section Header */}
+            <h3
+              className="text-sm font-semibold text-zinc-400 mb-3 uppercase tracking-wider"
+              style={{
+                opacity: listHeaderOpacity,
+                transform: `translateX(${listHeaderX}px)`,
+              }}
+            >
+              Weitere Termine
+            </h3>
+
+            {/* Upcoming Meetups List - Vertical for mobile */}
+            <div className="flex flex-col gap-3">
+              {upcomingMeetups.map((meetup, index) => (
+                <UpcomingMeetupItemMobile
+                  key={meetup.name}
+                  meetup={meetup}
+                  delay={listHeaderDelay + (index + 1) * LIST_ITEM_STAGGER}
+                  glowIntensity={glowIntensity}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Upcoming meetup list item for mobile
+ */
+type UpcomingMeetupItemMobileProps = {
+  meetup: {
+    name: string;
+    location: string;
+    date: string;
+    time: string;
+    logoPath: string;
+  };
+  delay: number;
+  glowIntensity: number;
+};
+
+const UpcomingMeetupItemMobile: React.FC<UpcomingMeetupItemMobileProps> = ({
+  meetup,
+  delay,
+  glowIntensity,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  const itemSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: SNAPPY,
+  });
+
+  const itemOpacity = interpolate(itemSpring, [0, 1], [0, 1]);
+  const itemY = interpolate(itemSpring, [0, 1], [30, 0]);
+  const itemScale = interpolate(itemSpring, [0, 1], [0.9, 1]);
+
+  return (
+    <div
+      className="rounded-xl bg-zinc-800/70 backdrop-blur-sm border border-zinc-700/40 p-4"
+      style={{
+        opacity: itemOpacity,
+        transform: `translateY(${itemY}px) scale(${itemScale})`,
+        boxShadow: `0 4px 20px rgba(0, 0, 0, 0.3), 0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.1)`,
+      }}
+    >
+      <div className="flex items-center gap-4">
+        {/* Mini Logo */}
+        <div
+          className="w-12 h-12 rounded-lg bg-zinc-700/50 flex items-center justify-center overflow-hidden flex-shrink-0"
+          style={{
+            boxShadow: `0 0 ${10 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
+          }}
+        >
+          <Img
+            src={staticFile(meetup.logoPath)}
+            style={{
+              width: 36,
+              height: 36,
+              objectFit: "contain",
+            }}
+          />
+        </div>
+
+        {/* Meetup Info */}
+        <div className="flex-1 min-w-0">
+          <div className="font-semibold text-white text-base truncate">
+            {meetup.name}
+          </div>
+          <div className="text-sm text-zinc-400 flex items-center gap-2 mt-1">
+            <span>{meetup.date}</span>
+            <span className="text-zinc-600">•</span>
+            <span>{meetup.time}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Calendar icon SVG
+ */
+const CalendarIcon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#f7931a"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ width: 22, height: 22 }}
+  >
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+    <line x1="16" y1="2" x2="16" y2="6" />
+    <line x1="8" y1="2" x2="8" y2="6" />
+    <line x1="3" y1="10" x2="21" y2="10" />
+  </svg>
+);
+
+/**
+ * Clock icon SVG
+ */
+const ClockIcon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#a1a1aa"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ width: 20, height: 20 }}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <polyline points="12 6 12 12 16 14" />
+  </svg>
+);

videos/src/scenes/portal/mobile/PortalIntroSceneMobile.test.tsx

@@ -0,0 +1,163 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { PortalIntroSceneMobile } from "./PortalIntroSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+  Easing: {
+    out: vi.fn((fn) => fn),
+    cubic: vi.fn((t: number) => t),
+  },
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock AnimatedLogo component
+vi.mock("../../../components/AnimatedLogo", () => ({
+  AnimatedLogo: vi.fn(({ size, delay }) => (
+    <div data-testid="animated-logo" data-size={size} data-delay={delay}>
+      AnimatedLogo
+    </div>
+  )),
+}));
+
+// Mock BitcoinEffect component
+vi.mock("../../../components/BitcoinEffect", () => ({
+  BitcoinEffect: vi.fn(() => (
+    <div data-testid="bitcoin-effect">BitcoinEffect</div>
+  )),
+}));
+
+describe("PortalIntroSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+    expect(absoluteFill).toHaveClass("overflow-hidden");
+  });
+
+  it("renders the wallpaper background image", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders the AnimatedLogo with mobile-optimized size (280px)", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const logo = container.querySelector('[data-testid="animated-logo"]');
+    expect(logo).toBeInTheDocument();
+    // Mobile uses 280px vs desktop 350px
+    expect(logo).toHaveAttribute("data-size", "280");
+    // delay is 0.5 * fps = 0.5 * 30 = 15 frames
+    expect(logo).toHaveAttribute("data-delay", "15");
+  });
+
+  it("renders the BitcoinEffect component", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const bitcoinEffect = container.querySelector('[data-testid="bitcoin-effect"]');
+    expect(bitcoinEffect).toBeInTheDocument();
+  });
+
+  it("renders the EINUNDZWANZIG title with mobile-appropriate sizing", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("EINUNDZWANZIG");
+    // Mobile uses text-5xl vs desktop text-6xl
+    expect(title).toHaveClass("text-5xl");
+    expect(title).toHaveClass("font-bold");
+    expect(title).toHaveClass("text-white");
+  });
+
+  it("renders the subtitle with orange color", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Das Portal");
+    expect(subtitle).toHaveClass("text-orange-500");
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    expect(sequences.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("includes logo-whoosh audio", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const whooshAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("logo-whoosh.mp3")
+    );
+    expect(whooshAudio).toBeInTheDocument();
+  });
+
+  it("includes logo-reveal audio", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const revealAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("logo-reveal.mp3")
+    );
+    expect(revealAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<PortalIntroSceneMobile />);
+    const vignette = container.querySelector('[class*="pointer-events-none"]');
+    expect(vignette).toBeInTheDocument();
+  });
+});

videos/src/scenes/portal/mobile/PortalIntroSceneMobile.tsx

@@ -0,0 +1,189 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { AnimatedLogo } from "../../../components/AnimatedLogo";
+import { BitcoinEffect } from "../../../components/BitcoinEffect";
+
+// Spring configurations from PRD
+const SMOOTH = { damping: 200 };
+
+/**
+ * PortalIntroSceneMobile - Scene 1: Logo Reveal for Mobile (6 seconds / 180 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Smaller logo (280px vs 350px)
+ * - Adjusted text sizes for portrait orientation
+ * - Vertical centering optimized for 1080x1920
+ */
+export const PortalIntroSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Background zoom animation - starts zoomed in, zooms out
+  const backgroundZoom = interpolate(frame, [0, 3 * fps], [1.2, 1.0], {
+    extrapolateRight: "clamp",
+  });
+
+  // Logo entrance spring animation - delayed slightly for dramatic effect
+  const logoEntranceDelay = Math.floor(0.5 * fps);
+  const logoSpring = spring({
+    frame: frame - logoEntranceDelay,
+    fps,
+    config: { damping: 15, stiffness: 80 },
+  });
+  const logoScale = interpolate(logoSpring, [0, 1], [0, 1]);
+  const logoOpacity = interpolate(logoSpring, [0, 0.5], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  // Outer glow pulse effect
+  const glowIntensity = interpolate(
+    Math.sin((frame - logoEntranceDelay) * 0.08),
+    [-1, 1],
+    [0.4, 0.8]
+  );
+  const glowScale = interpolate(
+    Math.sin((frame - logoEntranceDelay) * 0.06),
+    [-1, 1],
+    [1.0, 1.15]
+  );
+
+  // Title text entrance - appears after logo
+  const titleDelay = Math.floor(2 * fps);
+  const titleSpring = spring({
+    frame: frame - titleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
+  const titleY = interpolate(titleSpring, [0, 1], [30, 0]);
+
+  // Subtitle entrance
+  const subtitleDelay = Math.floor(2.8 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+
+  // Center position for logo (adjusts as text appears)
+  const contentY = interpolate(frame, [titleDelay, titleDelay + fps], [0, -40], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: logo-whoosh at start */}
+      <Sequence durationInFrames={Math.floor(2 * fps)}>
+        <Audio src={staticFile("sfx/logo-whoosh.mp3")} volume={0.7} />
+      </Sequence>
+
+      {/* Audio: logo-reveal when logo appears */}
+      <Sequence from={logoEntranceDelay} durationInFrames={Math.floor(2 * fps)}>
+        <Audio src={staticFile("sfx/logo-reveal.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Wallpaper Background with zoom effect */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `scale(${backgroundZoom})`,
+          transformOrigin: "center center",
+        }}
+      >
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.25 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay for depth */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.7) 70%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* Bitcoin particle effect in background */}
+      <BitcoinEffect />
+
+      {/* Content container with vertical centering */}
+      <div
+        className="absolute inset-0 flex flex-col items-center justify-center"
+        style={{
+          transform: `translateY(${contentY}px)`,
+        }}
+      >
+        {/* Outer glow effect behind logo */}
+        <div
+          className="absolute"
+          style={{
+            width: 400,
+            height: 400,
+            background:
+              "radial-gradient(circle, rgba(247, 147, 26, 0.4) 0%, transparent 60%)",
+            opacity: glowIntensity * logoSpring,
+            transform: `scale(${glowScale * logoScale})`,
+            filter: "blur(40px)",
+          }}
+        />
+
+        {/* AnimatedLogo with entrance animation - smaller for mobile */}
+        <div
+          style={{
+            opacity: logoOpacity,
+            transform: `scale(${logoScale})`,
+          }}
+        >
+          <AnimatedLogo size={280} delay={logoEntranceDelay} />
+        </div>
+
+        {/* Title text - smaller for mobile */}
+        <div
+          className="mt-8 text-center px-8"
+          style={{
+            opacity: titleOpacity,
+            transform: `translateY(${titleY}px)`,
+          }}
+        >
+          <h1 className="text-5xl font-bold text-white tracking-wider">
+            EINUNDZWANZIG
+          </h1>
+        </div>
+
+        {/* Subtitle */}
+        <div
+          className="mt-4 text-center"
+          style={{
+            opacity: subtitleOpacity,
+          }}
+        >
+          <p className="text-xl text-orange-500 font-medium tracking-wide">
+            Das Portal
+          </p>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.7)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};

videos/src/scenes/portal/mobile/PortalOutroSceneMobile.test.tsx

@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { PortalOutroSceneMobile } from "./PortalOutroSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock BitcoinEffect component
+vi.mock("../../../components/BitcoinEffect", () => ({
+  BitcoinEffect: vi.fn(() => (
+    <div data-testid="bitcoin-effect">BitcoinEffect</div>
+  )),
+}));
+
+describe("PortalOutroSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the horizontal logo with mobile-optimized width", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const logo = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-horizontal-inverted.svg")
+    );
+    expect(logo).toBeInTheDocument();
+    // Mobile uses 450px width vs desktop 600px
+    expect(logo).toHaveStyle({ width: "450px" });
+  });
+
+  it("renders EINUNDZWANZIG text with mobile-optimized size", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("EINUNDZWANZIG");
+    // Mobile uses text-4xl vs desktop text-5xl
+    expect(title).toHaveClass("text-4xl");
+  });
+
+  it("renders subtitle with mobile-optimized size", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Die deutschsprachige Bitcoin-Community");
+    // Mobile uses text-xl vs desktop text-2xl
+    expect(subtitle).toHaveClass("text-xl");
+  });
+
+  it("renders BitcoinEffect component", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const bitcoinEffect = container.querySelector('[data-testid="bitcoin-effect"]');
+    expect(bitcoinEffect).toBeInTheDocument();
+  });
+
+  it("renders final-chime audio", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const finalChimeAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("final-chime.mp3")
+    );
+    expect(finalChimeAudio).toBeInTheDocument();
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    const vignette = container.querySelector('[class*="pointer-events-none"]');
+    expect(vignette).toBeInTheDocument();
+  });
+
+  it("renders glow effect element with mobile-optimized dimensions", () => {
+    const { container } = render(<PortalOutroSceneMobile />);
+    // Look for the glow element with blur filter
+    const elements = container.querySelectorAll('[style*="blur(50px)"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+});

videos/src/scenes/portal/mobile/PortalOutroSceneMobile.tsx

@@ -0,0 +1,214 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { BitcoinEffect } from "../../../components/BitcoinEffect";
+
+// Spring configurations
+const SMOOTH = { damping: 200 };
+const SNAPPY = { damping: 15, stiffness: 80 };
+
+/**
+ * PortalOutroSceneMobile - Scene 9: Outro for Mobile (12 seconds / 360 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Smaller horizontal logo width (450px vs 600px)
+ * - Adjusted text sizes for portrait orientation
+ * - Smaller glow effects
+ */
+export const PortalOutroSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const durationInFrames = 12 * fps; // 360 frames
+
+  // Background fade-in from black (0-30 frames)
+  const backgroundSpring = spring({
+    frame,
+    fps,
+    config: SMOOTH,
+  });
+  const backgroundOpacity = interpolate(backgroundSpring, [0, 1], [0, 0.3]);
+
+  // Logo entrance animation (delayed 1 second)
+  const logoDelay = Math.floor(1 * fps);
+  const logoSpring = spring({
+    frame: frame - logoDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const logoOpacity = interpolate(logoSpring, [0, 1], [0, 1]);
+  const logoScale = interpolate(logoSpring, [0, 1], [0.8, 1]);
+  const logoY = interpolate(logoSpring, [0, 1], [30, 0]);
+
+  // Logo glow pulse effect
+  const glowIntensity = interpolate(
+    Math.sin((frame - logoDelay) * 0.06),
+    [-1, 1],
+    [0.4, 0.9]
+  );
+  const glowScale = interpolate(
+    Math.sin((frame - logoDelay) * 0.04),
+    [-1, 1],
+    [1.0, 1.2]
+  );
+
+  // Text entrance (delayed 2 seconds)
+  const textDelay = Math.floor(2 * fps);
+  const textSpring = spring({
+    frame: frame - textDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const textOpacity = interpolate(textSpring, [0, 1], [0, 1]);
+  const textY = interpolate(textSpring, [0, 1], [20, 0]);
+
+  // Subtitle entrance (delayed 2.5 seconds)
+  const subtitleDelay = Math.floor(2.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+
+  // Final fade out in last 2 seconds (frames 300-360)
+  const fadeOutStart = durationInFrames - 2 * fps;
+  const finalFadeOpacity = interpolate(
+    frame,
+    [fadeOutStart, durationInFrames],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: final-chime when logo appears */}
+      <Sequence from={logoDelay} durationInFrames={Math.floor(3 * fps)}>
+        <Audio src={staticFile("sfx/final-chime.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Content wrapper with final fade */}
+      <div style={{ opacity: finalFadeOpacity }}>
+        {/* Wallpaper Background */}
+        <div
+          className="absolute inset-0"
+          style={{
+            transform: "scale(1.05)",
+            transformOrigin: "center center",
+          }}
+        >
+          <Img
+            src={staticFile("einundzwanzig-wallpaper.png")}
+            className="absolute inset-0 w-full h-full object-cover"
+            style={{ opacity: backgroundOpacity }}
+          />
+        </div>
+
+        {/* Dark gradient overlay */}
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              "radial-gradient(circle at center, rgba(24, 24, 27, 0.6) 0%, rgba(24, 24, 27, 0.9) 70%, rgba(24, 24, 27, 0.98) 100%)",
+          }}
+        />
+
+        {/* Bitcoin particle effect */}
+        <BitcoinEffect />
+
+        {/* Content container */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-6">
+          {/* Outer glow effect behind logo - smaller for mobile */}
+          <div
+            className="absolute"
+            style={{
+              width: 600,
+              height: 350,
+              background:
+                "radial-gradient(ellipse, rgba(247, 147, 26, 0.35) 0%, transparent 60%)",
+              opacity: glowIntensity * logoSpring,
+              transform: `scale(${glowScale * logoScale})`,
+              filter: "blur(50px)",
+            }}
+          />
+
+          {/* Horizontal Logo - smaller for mobile */}
+          <div
+            style={{
+              opacity: logoOpacity,
+              transform: `scale(${logoScale}) translateY(${logoY}px)`,
+            }}
+          >
+            <div
+              style={{
+                filter: `drop-shadow(0 0 ${35 * glowIntensity}px rgba(247, 147, 26, 0.5))`,
+              }}
+            >
+              <Img
+                src={staticFile("einundzwanzig-horizontal-inverted.svg")}
+                style={{
+                  width: 450,
+                  height: "auto",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* EINUNDZWANZIG text - smaller for mobile */}
+          <div
+            className="mt-10 text-center"
+            style={{
+              opacity: textOpacity,
+              transform: `translateY(${textY}px)`,
+            }}
+          >
+            <h1
+              className="text-4xl font-bold text-white tracking-widest"
+              style={{
+                textShadow: `0 0 ${25 * glowIntensity}px rgba(247, 147, 26, 0.4), 0 2px 20px rgba(0, 0, 0, 0.5)`,
+              }}
+            >
+              EINUNDZWANZIG
+            </h1>
+          </div>
+
+          {/* Subtitle - smaller for mobile */}
+          <div
+            className="mt-5 text-center"
+            style={{
+              opacity: subtitleOpacity,
+            }}
+          >
+            <p className="text-xl text-orange-500 font-medium tracking-wide">
+              Die deutschsprachige Bitcoin-Community
+            </p>
+          </div>
+        </div>
+
+        {/* Ambient glow at bottom */}
+        <div
+          className="absolute inset-x-0 bottom-0 h-48 pointer-events-none"
+          style={{
+            background:
+              "linear-gradient(to top, rgba(247, 147, 26, 0.08) 0%, transparent 100%)",
+          }}
+        />
+
+        {/* Vignette overlay */}
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            boxShadow: "inset 0 0 250px 100px rgba(0, 0, 0, 0.8)",
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};

videos/src/scenes/portal/mobile/PortalTitleSceneMobile.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { PortalTitleSceneMobile } from "./PortalTitleSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+describe("PortalTitleSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the title split across two lines for mobile", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const titles = container.querySelectorAll("h1");
+    // Mobile version splits title into two h1 elements
+    expect(titles.length).toBe(2);
+  });
+
+  it("renders titles with mobile-optimized text size (text-5xl)", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const titles = container.querySelectorAll("h1");
+    titles.forEach((title) => {
+      expect(title).toHaveClass("text-5xl");
+      expect(title).toHaveClass("font-bold");
+      expect(title).toHaveClass("text-white");
+    });
+  });
+
+  it("renders the subtitle with correct styling", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Das Herzstück der deutschsprachigen Bitcoin-Community");
+    expect(subtitle).toHaveClass("text-xl");
+    expect(subtitle).toHaveClass("text-zinc-300");
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    expect(sequences.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("includes typing audio", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const typingAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("typing.mp3")
+    );
+    expect(typingAudio).toBeInTheDocument();
+  });
+
+  it("includes ui-appear audio", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const uiAppearAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("ui-appear.mp3")
+    );
+    expect(uiAppearAudio).toBeInTheDocument();
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders decorative line element", () => {
+    const { container } = render(<PortalTitleSceneMobile />);
+    const decorativeLine = container.querySelector('[class*="bg-gradient-to-r"]');
+    expect(decorativeLine).toBeInTheDocument();
+  });
+});

videos/src/scenes/portal/mobile/PortalTitleSceneMobile.tsx

@@ -0,0 +1,206 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+
+// Spring configurations from PRD
+const SMOOTH = { damping: 200 };
+
+// Typing animation configuration
+const CHAR_FRAMES = 2; // Frames per character
+const CURSOR_BLINK_FRAMES = 16;
+
+/**
+ * PortalTitleSceneMobile - Scene 2: Title Card for Mobile (4 seconds / 120 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Smaller title text (text-5xl vs text-7xl)
+ * - Title split across two lines for readability
+ * - Adjusted spacing for portrait orientation
+ */
+export const PortalTitleSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Main title text - split for mobile
+  const titleLine1 = "EINUNDZWANZIG";
+  const titleLine2 = "PORTAL";
+  const fullTitle = titleLine1 + " " + titleLine2;
+  const subtitleText = "Das Herzstück der deutschsprachigen Bitcoin-Community";
+
+  // Calculate typed characters for title
+  const typedTitleChars = Math.min(
+    fullTitle.length,
+    Math.floor(frame / CHAR_FRAMES)
+  );
+  const typedTitle = fullTitle.slice(0, typedTitleChars);
+
+  // Split typed text into two lines
+  const typedLine1 = typedTitle.slice(0, Math.min(titleLine1.length, typedTitleChars));
+  const typedLine2 = typedTitleChars > titleLine1.length + 1
+    ? typedTitle.slice(titleLine1.length + 1)
+    : "";
+
+  // Title typing complete frame
+  const titleCompleteFrame = fullTitle.length * CHAR_FRAMES;
+
+  // Cursor blink effect - only show while typing or shortly after
+  const showCursor = frame < titleCompleteFrame + fps;
+  const cursorOpacity = showCursor
+    ? interpolate(
+        frame % CURSOR_BLINK_FRAMES,
+        [0, CURSOR_BLINK_FRAMES / 2, CURSOR_BLINK_FRAMES],
+        [1, 0, 1],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+      )
+    : 0;
+
+  // Subtitle entrance - after title typing completes
+  const subtitleDelay = titleCompleteFrame + Math.floor(0.3 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Background glow that pulses subtly
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.05),
+    [-1, 1],
+    [0.3, 0.5]
+  );
+
+  // Scene entrance fade from intro scene
+  const entranceFade = interpolate(frame, [0, Math.floor(0.3 * fps)], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  // Determine which line the cursor should be on
+  const cursorOnLine2 = typedTitleChars > titleLine1.length;
+
+  return (
+    <AbsoluteFill
+      className="bg-zinc-900 overflow-hidden"
+      style={{ opacity: entranceFade }}
+    >
+      {/* Audio: typing sound */}
+      <Sequence durationInFrames={titleCompleteFrame + Math.floor(0.5 * fps)}>
+        <Audio src={staticFile("sfx/typing.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Audio: ui-appear for subtitle */}
+      <Sequence from={subtitleDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/ui-appear.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.15 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.8) 60%, rgba(24, 24, 27, 0.98) 100%)",
+        }}
+      />
+
+      {/* Center glow effect */}
+      <div
+        className="absolute inset-0 flex items-center justify-center"
+        style={{ opacity: glowIntensity }}
+      >
+        <div
+          style={{
+            width: 600,
+            height: 400,
+            background:
+              "radial-gradient(ellipse, rgba(247, 147, 26, 0.2) 0%, transparent 70%)",
+            filter: "blur(60px)",
+          }}
+        />
+      </div>
+
+      {/* Content container */}
+      <div className="absolute inset-0 flex flex-col items-center justify-center px-6">
+        {/* Title with typing animation - two lines for mobile */}
+        <div className="text-center">
+          {/* Line 1 */}
+          <h1 className="text-5xl font-bold text-white tracking-wider">
+            <span>{typedLine1}</span>
+            {!cursorOnLine2 && (
+              <span
+                className="text-orange-500"
+                style={{ opacity: cursorOpacity }}
+              >
+                |
+              </span>
+            )}
+          </h1>
+          {/* Line 2 */}
+          <h1 className="text-5xl font-bold text-white tracking-wider mt-2">
+            <span>{typedLine2}</span>
+            {cursorOnLine2 && (
+              <span
+                className="text-orange-500"
+                style={{ opacity: cursorOpacity }}
+              >
+                |
+              </span>
+            )}
+          </h1>
+        </div>
+
+        {/* Subtitle - smaller for mobile */}
+        <div
+          className="mt-8 text-center px-4"
+          style={{
+            opacity: subtitleOpacity,
+            transform: `translateY(${subtitleY}px)`,
+          }}
+        >
+          <p className="text-xl text-zinc-300 font-light tracking-wide">
+            {subtitleText}
+          </p>
+        </div>
+
+        {/* Decorative line under subtitle */}
+        <div
+          className="mt-6"
+          style={{
+            opacity: subtitleOpacity,
+            transform: `scaleX(${subtitleSpring})`,
+          }}
+        >
+          <div
+            className="h-0.5 bg-gradient-to-r from-transparent via-orange-500 to-transparent"
+            style={{ width: 250 }}
+          />
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.7)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};

videos/src/scenes/portal/mobile/TopMeetupsSceneMobile.test.tsx

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { TopMeetupsSceneMobile } from "./TopMeetupsSceneMobile";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1080, height: 1920 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock SparklineChart component
+vi.mock("../../../components/SparklineChart", () => ({
+  SparklineChart: vi.fn(({ width, height }) => (
+    <div data-testid="sparkline-chart" data-width={width} data-height={height}>
+      Sparkline
+    </div>
+  )),
+}));
+
+describe("TopMeetupsSceneMobile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+  });
+
+  it("renders the header with mobile-optimized size", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Top Meetups");
+    // Mobile uses text-4xl vs desktop text-5xl
+    expect(header).toHaveClass("text-4xl");
+  });
+
+  it("renders five meetup rows", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const meetupLogos = container.querySelectorAll('[data-testid="remotion-img"]');
+    // 5 meetup logos + 1 wallpaper = 6 images
+    expect(meetupLogos.length).toBe(6);
+  });
+
+  it("renders sparkline charts with mobile-optimized dimensions", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
+    expect(sparklines.length).toBe(5);
+    sparklines.forEach((sparkline) => {
+      // Mobile uses 70px width vs desktop 100px
+      expect(sparkline).toHaveAttribute("data-width", "70");
+      expect(sparkline).toHaveAttribute("data-height", "28");
+    });
+  });
+
+  it("renders checkmark-pop audio for each meetup", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    const audioSequences = Array.from(sequences).filter((seq) => {
+      const audio = seq.querySelector('[data-testid="audio"]');
+      return audio?.getAttribute("src")?.includes("checkmark-pop.mp3");
+    });
+    expect(audioSequences.length).toBe(5);
+  });
+
+  it("renders slide-in audio for section entrance", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const slideInAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("slide-in.mp3")
+    );
+    expect(slideInAudio).toBeInTheDocument();
+  });
+
+  it("renders wallpaper background", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders rank badges for each meetup", () => {
+    const { container } = render(<TopMeetupsSceneMobile />);
+    // Rank badges are styled as rounded-full circles
+    const rankBadges = container.querySelectorAll('[class*="rounded-full"]');
+    expect(rankBadges.length).toBeGreaterThanOrEqual(5);
+  });
+});

videos/src/scenes/portal/mobile/TopMeetupsSceneMobile.tsx

@@ -0,0 +1,402 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { SparklineChart } from "../../../components/SparklineChart";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+const BOUNCY = { damping: 12 };
+
+// Stagger delay between meetup items (in frames)
+const MEETUP_STAGGER_DELAY = 12;
+
+// Top meetups data with sparkline growth data
+const TOP_MEETUPS_DATA = [
+  {
+    name: "EINUNDZWANZIG Saarland",
+    logoFile: "EinundzwanzigSaarbrucken.png",
+    userCount: 26,
+    location: "Saarbrücken",
+    sparklineData: [5, 8, 10, 12, 14, 16, 18, 20, 22, 24, 25, 26],
+    rank: 1,
+  },
+  {
+    name: "EINUNDZWANZIG Frankfurt am Main",
+    logoFile: "EinundzwanzigFrankfurtAmMain.png",
+    userCount: 26,
+    location: "Frankfurt",
+    sparklineData: [4, 7, 10, 13, 15, 17, 19, 21, 23, 24, 25, 26],
+    rank: 2,
+  },
+  {
+    name: "EINUNDZWANZIG Kempten",
+    logoFile: "EinundzwanzigKempten.png",
+    userCount: 20,
+    location: "Kempten",
+    sparklineData: [3, 5, 7, 9, 11, 13, 15, 16, 17, 18, 19, 20],
+    rank: 3,
+  },
+  {
+    name: "EINUNDZWANZIG Pfalz",
+    logoFile: "EinundzwanzigRheinhessen.png",
+    userCount: 17,
+    location: "Pfalz",
+    sparklineData: [2, 4, 6, 8, 9, 11, 12, 13, 14, 15, 16, 17],
+    rank: 4,
+  },
+  {
+    name: "EINUNDZWANZIG Trier",
+    logoFile: "EinundzwanzigTrier.png",
+    userCount: 15,
+    location: "Trier",
+    sparklineData: [2, 3, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15],
+    rank: 5,
+  },
+];
+
+// Maximum count for calculating relative bar widths
+const MAX_USER_COUNT = Math.max(...TOP_MEETUPS_DATA.map((m) => m.userCount));
+
+/**
+ * TopMeetupsSceneMobile - Scene 6: Top Meetups for Mobile (10 seconds / 300 frames @ 30fps)
+ *
+ * Mobile layout adaptations:
+ * - Narrower row layout optimized for 1080px width
+ * - Smaller text sizes and reduced spacing
+ * - Compact sparkline charts
+ * - Adjusted progress bars
+ */
+export const TopMeetupsSceneMobile: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.3 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
+
+  // Subtitle animation (slightly more delayed)
+  const subtitleDelay = Math.floor(0.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Base delay for meetup items
+  const meetupBaseDelay = Math.floor(1 * fps);
+
+  // Subtle glow pulse for leading meetup
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.05),
+    [-1, 1],
+    [0.4, 0.8]
+  );
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: checkmark-pop for each meetup entrance */}
+      {TOP_MEETUPS_DATA.map((_, index) => (
+        <Sequence
+          key={`audio-${index}`}
+          from={meetupBaseDelay + index * MEETUP_STAGGER_DELAY}
+          durationInFrames={Math.floor(0.5 * fps)}
+        >
+          <Audio src={staticFile("sfx/checkmark-pop.mp3")} volume={0.4} />
+        </Sequence>
+      ))}
+
+      {/* Audio: slide-in for section entrance */}
+      <Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 50% 50%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content - Centered for mobile */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-6">
+          {/* Section Header */}
+          <div
+            className="text-center mb-8"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <h1 className="text-4xl font-bold text-white mb-2">Top Meetups</h1>
+            <p
+              className="text-lg text-zinc-400"
+              style={{
+                opacity: subtitleOpacity,
+                transform: `translateY(${subtitleY}px)`,
+              }}
+            >
+              Die aktivsten lokalen Bitcoin-Communities
+            </p>
+          </div>
+
+          {/* Meetups List */}
+          <div className="w-full max-w-md">
+            <div className="flex flex-col gap-3">
+              {TOP_MEETUPS_DATA.map((meetup, index) => (
+                <MeetupRowMobile
+                  key={meetup.name}
+                  meetup={meetup}
+                  maxCount={MAX_USER_COUNT}
+                  delay={meetupBaseDelay + index * MEETUP_STAGGER_DELAY}
+                  glowIntensity={glowIntensity}
+                  isLeading={index === 0}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Meetup row with rank, logo, info, progress bar, and sparkline for mobile
+ */
+type MeetupRowMobileProps = {
+  meetup: {
+    name: string;
+    logoFile: string;
+    userCount: number;
+    location: string;
+    sparklineData: number[];
+    rank: number;
+  };
+  maxCount: number;
+  delay: number;
+  glowIntensity: number;
+  isLeading: boolean;
+};
+
+const MeetupRowMobile: React.FC<MeetupRowMobileProps> = ({
+  meetup,
+  maxCount,
+  delay,
+  glowIntensity,
+  isLeading,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  // Row entrance spring
+  const rowSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: SNAPPY,
+  });
+
+  const rowOpacity = interpolate(rowSpring, [0, 1], [0, 1]);
+  const rowX = interpolate(rowSpring, [0, 1], [-60, 0]);
+
+  // Rank badge bounce
+  const rankSpring = spring({
+    frame: adjustedFrame - 5,
+    fps,
+    config: BOUNCY,
+  });
+  const rankScale = interpolate(rankSpring, [0, 1], [0, 1]);
+
+  // User count animation
+  const countSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: { damping: 18, stiffness: 70 },
+    durationInFrames: 45,
+  });
+  const displayCount = Math.round(countSpring * meetup.userCount);
+
+  // Progress bar animation
+  const barProgress = interpolate(rowSpring, [0, 1], [0, meetup.userCount / maxCount]);
+
+  // Sparkline delay (appears slightly after the bar)
+  const sparklineDelay = delay + 20;
+
+  // Dynamic glow for leading meetup
+  const leadingGlow = isLeading
+    ? `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.4), 0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.3)`
+    : "none";
+
+  return (
+    <div
+      className="flex items-center gap-3 p-3 rounded-xl"
+      style={{
+        opacity: rowOpacity,
+        transform: `translateX(${rowX}px)`,
+        backgroundColor: isLeading
+          ? "rgba(247, 147, 26, 0.1)"
+          : "rgba(39, 39, 42, 0.6)",
+        border: isLeading
+          ? "1px solid rgba(247, 147, 26, 0.3)"
+          : "1px solid rgba(63, 63, 70, 0.5)",
+        boxShadow: leadingGlow,
+      }}
+    >
+      {/* Rank Badge */}
+      <div
+        className="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
+        style={{
+          backgroundColor: isLeading ? "#f7931a" : "rgba(63, 63, 70, 0.8)",
+          color: isLeading ? "#18181b" : "#a1a1aa",
+          transform: `scale(${rankScale})`,
+          boxShadow: isLeading
+            ? `0 0 ${12 * glowIntensity}px rgba(247, 147, 26, 0.5)`
+            : "none",
+        }}
+      >
+        {meetup.rank}
+      </div>
+
+      {/* Logo */}
+      <div
+        className="flex-shrink-0 w-11 h-11 rounded-lg overflow-hidden bg-zinc-800 flex items-center justify-center"
+        style={{
+          boxShadow: isLeading
+            ? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.3)`
+            : "none",
+        }}
+      >
+        <Img
+          src={staticFile(`logos/${meetup.logoFile}`)}
+          style={{
+            width: 38,
+            height: 38,
+            objectFit: "contain",
+          }}
+        />
+      </div>
+
+      {/* Meetup Info + Progress Bar */}
+      <div className="flex-1 min-w-0">
+        {/* Name only on mobile (no location to save space) */}
+        <div
+          className="font-bold text-base truncate mb-1.5"
+          style={{
+            color: isLeading ? "#f7931a" : "#ffffff",
+          }}
+        >
+          {meetup.name.replace("EINUNDZWANZIG ", "")}
+        </div>
+
+        {/* Progress Bar */}
+        <div className="h-1.5 rounded-full bg-zinc-700/50 overflow-hidden">
+          <div
+            className="h-full rounded-full"
+            style={{
+              width: `${barProgress * 100}%`,
+              backgroundColor: isLeading ? "#f7931a" : "#71717a",
+              boxShadow: isLeading
+                ? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.5)`
+                : "none",
+              transition: "width 0.1s ease-out",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* User Count */}
+      <div
+        className="flex-shrink-0 text-right font-bold tabular-nums"
+        style={{
+          color: isLeading ? "#f7931a" : "#a1a1aa",
+          fontSize: "1.25rem",
+          fontFamily: "Inconsolata, monospace",
+          minWidth: 36,
+          textShadow: isLeading
+            ? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.5)`
+            : "none",
+        }}
+      >
+        {displayCount}
+      </div>
+
+      {/* Sparkline Chart - Compact for mobile */}
+      <div
+        className="flex-shrink-0 rounded-lg bg-zinc-800/50 p-1.5"
+        style={{
+          boxShadow: isLeading
+            ? `0 0 ${8 * glowIntensity}px rgba(247, 147, 26, 0.2)`
+            : "none",
+        }}
+      >
+        <SparklineChart
+          data={meetup.sparklineData}
+          width={70}
+          height={28}
+          delay={sparklineDelay}
+          color={isLeading ? "#f7931a" : "#71717a"}
+          strokeWidth={1.5}
+          showFill={true}
+          fillOpacity={0.2}
+          showGlow={isLeading}
+        />
+      </div>
+    </div>
+  );
+};

videos/src/scenes/portal/mobile/index.ts

@@ -0,0 +1,9 @@
+export { PortalIntroSceneMobile } from "./PortalIntroSceneMobile";
+export { PortalTitleSceneMobile } from "./PortalTitleSceneMobile";
+export { DashboardOverviewSceneMobile } from "./DashboardOverviewSceneMobile";
+export { MeetupShowcaseSceneMobile } from "./MeetupShowcaseSceneMobile";
+export { CountryStatsSceneMobile } from "./CountryStatsSceneMobile";
+export { TopMeetupsSceneMobile } from "./TopMeetupsSceneMobile";
+export { ActivityFeedSceneMobile } from "./ActivityFeedSceneMobile";
+export { CallToActionSceneMobile } from "./CallToActionSceneMobile";
+export { PortalOutroSceneMobile } from "./PortalOutroSceneMobile";