diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 0000000..5155206
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,32 @@
+name: Deploy Prototype to Pages
+
+on:
+  push:
+    branches:
+      - claude/fitness-app-styling-7giJD
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: fabio-antunes-app/prototype
+      - id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/fabio-antunes-app/prototype/README.md b/fabio-antunes-app/prototype/README.md
new file mode 100644
index 0000000..1530908
--- /dev/null
+++ b/fabio-antunes-app/prototype/README.md
@@ -0,0 +1,43 @@
+# Fabio Antunes — Prime Coaching · Prototyp
+
+Erste Design-Vorschau im "Dark & Athletic / Premium Gold"-Stil.
+
+## Ansehen
+
+```bash
+# Im Browser direkt öffnen:
+open fabio-antunes-app/prototype/index.html
+
+# Oder mit Live-Server (Auto-Reload):
+cd fabio-antunes-app/prototype && python3 -m http.server 8080
+# Dann http://localhost:8080 öffnen
+```
+
+Auf dem Handy: einfach die `index.html` im mobilen Browser öffnen, sieht in der Realität noch besser aus.
+
+## Stand
+
+- ✅ **Heute-Screen** (`index.html`) — Greeting, Workout-Hero, Tagesziele, Schnellzugriff, Coach-Chat-Preview, Bottom-Nav
+- ⏳ Workout-Detail (kommt nach Freigabe)
+- ⏳ Übungs-Tracking (kommt nach Freigabe)
+- ⏳ Fortschritt mit Charts (kommt nach Freigabe)
+
+## Design-Tokens
+
+- **Akzent**: Gold `#DAAC2F` (mit `#F5C75A` als Highlight, `#CFA847` als Subtle)
+- **Hintergrund**: Tiefschwarz `#0A0A0A` → Surface `#141414`
+- **Typo**: Inter (300–800)
+
+Alle Farben sind als CSS-Variablen in `assets/styles.css` definiert (oben unter `:root`).
+
+## Logo austauschen
+
+Aktuell ist ein **SVG-Platzhalter** in `assets/logo.svg`. So tauschst du dein PNG ein:
+
+1. PNG (transparent, mind. 256×256) in `assets/logo.png` ablegen
+2. In `index.html` ersetzen:
+   ```html
+   <img src="assets/logo.svg" ...>
+   <!-- → -->
+   <img src="assets/logo.png" ...>
+   ```
diff --git a/fabio-antunes-app/prototype/assets/logo.png b/fabio-antunes-app/prototype/assets/logo.png
new file mode 100644
index 0000000..7b5c736
Binary files /dev/null and b/fabio-antunes-app/prototype/assets/logo.png differ
diff --git a/fabio-antunes-app/prototype/assets/logo.svg b/fabio-antunes-app/prototype/assets/logo.svg
new file mode 100644
index 0000000..468ecc6
--- /dev/null
+++ b/fabio-antunes-app/prototype/assets/logo.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <defs>
+    <linearGradient id="goldFace" x1="0" y1="0" x2="0.3" y2="1">
+      <stop offset="0%" stop-color="#FBE090"/>
+      <stop offset="35%" stop-color="#F5C75A"/>
+      <stop offset="70%" stop-color="#DAAC2F"/>
+      <stop offset="100%" stop-color="#A57E1A"/>
+    </linearGradient>
+    <linearGradient id="goldEdge" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#F5C75A"/>
+      <stop offset="100%" stop-color="#8C7028"/>
+    </linearGradient>
+    <linearGradient id="goldShadow" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#A57E1A"/>
+      <stop offset="100%" stop-color="#5A4310"/>
+    </linearGradient>
+  </defs>
+
+  <!-- F: stylized angular -->
+  <!-- Vertical stroke with diagonal cut -->
+  <polygon points="38,30 78,30 92,42 92,170 60,170 60,118 80,118 80,98 60,98 60,52 38,52" fill="url(#goldFace)"/>
+  <polygon points="60,170 60,118 80,118 80,128 70,128 70,170" fill="url(#goldShadow)" opacity="0.55"/>
+
+  <!-- A: stylized angular with sharp slant -->
+  <polygon points="118,170 138,30 162,30 184,170 162,170 158,138 122,138 118,170" fill="url(#goldFace)"/>
+  <!-- A inner cut -->
+  <polygon points="128,118 152,118 145,72 138,72" fill="#0A0A0A"/>
+  <!-- A right shadow -->
+  <polygon points="184,170 162,170 158,138 178,138" fill="url(#goldShadow)" opacity="0.55"/>
+
+  <!-- Connecting blade between F and A -->
+  <polygon points="80,98 138,72 152,72 92,108" fill="url(#goldEdge)" opacity="0.75"/>
+  <polygon points="92,108 152,72 152,82 92,118" fill="#0A0A0A" opacity="0.35"/>
+
+  <!-- Highlight strokes -->
+  <polygon points="38,30 60,30 60,52 38,52" fill="#FBE090" opacity="0.35"/>
+  <polygon points="138,30 144,30 138,72 132,72" fill="#FBE090" opacity="0.3"/>
+</svg>
diff --git a/fabio-antunes-app/prototype/assets/styles.css b/fabio-antunes-app/prototype/assets/styles.css
new file mode 100644
index 0000000..7b8cbb7
--- /dev/null
+++ b/fabio-antunes-app/prototype/assets/styles.css
@@ -0,0 +1,1381 @@
+/* ============================================
+   FABIO ANTUNES — PRIME COACHING
+   Design System v0.1
+   ============================================ */
+
+:root {
+  /* Backgrounds */
+  --bg-primary: #0A0A0A;
+  --bg-secondary: #1A1A1A;
+  --bg-elevated: #1C1C1C;
+  --bg-overlay: rgba(20, 20, 20, 0.85);
+
+  /* Borders */
+  --border-subtle: #1F1F1F;
+  --border: #2A2A2A;
+  --border-strong: #3A3A3A;
+
+  /* Brand — Gold */
+  --gold: #D4AF37;
+  --gold-light: #F4C430;
+  --gold-dark: #8B6914;
+  --gold-muted: #8C7028;
+  --gold-glow: rgba(212, 175, 55, 0.18);
+
+  /* Text */
+  --text-primary: #FFFFFF;
+  --text-secondary: #B8B8B8;
+  --text-tertiary: #6E6E6E;
+  --text-quaternary: #4A4A4A;
+  --text-on-gold: #0A0A0A;
+
+  /* Semantic */
+  --success: #4ADE80;
+  --warning: #F59E0B;
+  --danger: #EF4444;
+
+  /* Spacing */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* Radius */
+  --radius-sm: 8px;
+  --radius: 14px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+  --radius-full: 999px;
+
+  /* Type */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+
+  /* Shadows */
+  --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.6);
+  --shadow-gold: 0 8px 32px -12px rgba(212, 175, 55, 0.4);
+}
+
+/* Reset */
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  -webkit-tap-highlight-color: transparent;
+  overscroll-behavior: none;
+}
+
+img, svg { display: block; max-width: 100%; }
+button, input, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; border: none; background: none; }
+a { color: inherit; text-decoration: none; }
+
+/* ============================================
+   Phone Frame (Desktop preview)
+   ============================================ */
+.viewport {
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background:
+    radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
+    radial-gradient(circle at 80% 100%, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
+    var(--bg-primary);
+  padding: var(--space-6) var(--space-4);
+}
+
+.phone {
+  width: 100%;
+  max-width: 412px;
+  min-height: 100dvh;
+  background: var(--bg-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .phone {
+    min-height: 880px;
+    max-height: 880px;
+    border-radius: 44px;
+    border: 1px solid var(--border);
+    box-shadow:
+      0 0 0 8px #050505,
+      0 0 0 9px #1a1a1a,
+      0 40px 80px -20px rgba(0,0,0,0.8),
+      0 0 120px rgba(212, 175, 55, 0.05);
+    overflow: hidden;
+  }
+}
+
+.screen {
+  height: 100%;
+  min-height: 100dvh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 96px; /* nav space */
+}
+
+@media (min-width: 768px) {
+  .screen { min-height: 880px; max-height: 880px; }
+}
+
+.screen::-webkit-scrollbar { width: 0; }
+
+/* iOS-style status bar */
+.statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-6) var(--space-2);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--text-primary);
+}
+.statusbar-icons { display: flex; gap: 6px; align-items: center; opacity: 0.95; }
+.statusbar-icons svg { width: 18px; height: 12px; }
+
+/* ============================================
+   Layout
+   ============================================ */
+.container {
+  padding: 0 var(--space-5);
+}
+
+/* ============================================
+   Header (greeting)
+   ============================================ */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5) var(--space-6);
+}
+
+.greeting-label {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.greeting-name {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-top: 2px;
+}
+.greeting-name .accent { color: var(--gold); }
+
+.avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+  border: 1px solid var(--border);
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--gold);
+  position: relative;
+}
+.avatar::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 11px;
+  height: 11px;
+  background: var(--success);
+  border: 2px solid var(--bg-primary);
+  border-radius: var(--radius-full);
+}
+
+/* ============================================
+   Brand bar
+   ============================================ */
+.brandbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) 0 var(--space-3);
+  border-bottom: 1px solid var(--border-subtle);
+  margin: 0 var(--space-5) var(--space-4);
+}
+.brandbar-logo {
+  height: 44px;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+}
+.brandbar-text {
+  font-size: 11px;
+  letter-spacing: 0.24em;
+  color: var(--gold-dark);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+/* ============================================
+   Hero Workout Card
+   ============================================ */
+.hero-card {
+  position: relative;
+  margin: 0 var(--space-5) var(--space-6);
+  padding: var(--space-6);
+  border-radius: var(--radius-lg);
+  background:
+    linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
+    var(--bg-secondary);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.hero-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold), transparent);
+  opacity: 0.5;
+}
+
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--gold);
+  padding: 6px 10px;
+  border: 1px solid var(--gold-muted);
+  border-radius: var(--radius-full);
+  background: var(--gold-glow);
+}
+.hero-eyebrow .pulse {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--gold);
+  box-shadow: 0 0 8px var(--gold);
+  animation: pulse 1.6s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.3); }
+}
+
+.hero-title {
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  margin-top: var(--space-4);
+}
+.hero-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-top: var(--space-2);
+}
+
+.hero-meta {
+  display: flex;
+  gap: var(--space-5);
+  margin-top: var(--space-5);
+  padding-top: var(--space-5);
+  border-top: 1px solid var(--border-subtle);
+}
+.hero-meta-item { flex: 1; }
+.hero-meta-value {
+  font-size: 18px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.hero-meta-value .unit {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  margin-left: 2px;
+}
+.hero-meta-label {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-top: 2px;
+}
+
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  margin-top: var(--space-5);
+  padding: 16px;
+  background: var(--gold);
+  color: var(--text-on-gold);
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: 0.02em;
+  border-radius: var(--radius);
+  transition: transform 0.1s ease, box-shadow 0.2s ease;
+  box-shadow: var(--shadow-gold);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -10px rgba(212, 175, 55, 0.6); }
+.btn-primary:active { transform: translateY(0); }
+.btn-primary svg { width: 18px; height: 18px; }
+
+/* ============================================
+   Section
+   ============================================ */
+.section {
+  padding: 0 var(--space-5);
+  margin-bottom: var(--space-6);
+}
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+.section-action {
+  font-size: 13px;
+  color: var(--gold);
+  font-weight: 600;
+}
+
+/* ============================================
+   Goals (rings)
+   ============================================ */
+.goals {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+}
+.goal-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  transition: border-color 0.2s ease;
+}
+.goal-card:hover { border-color: var(--border-strong); }
+
+.ring {
+  --pct: 60;
+  --size: 44px;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  background:
+    conic-gradient(var(--gold) calc(var(--pct) * 1%), #232323 0);
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+.ring::before {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  background: var(--bg-secondary);
+  border-radius: 50%;
+}
+.ring svg {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  z-index: 1;
+  color: var(--gold);
+}
+
+.goal-value {
+  font-size: 17px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+.goal-value .small {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+.goal-label {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: -8px;
+}
+
+/* ============================================
+   Quick Actions
+   ============================================ */
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+.action {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  padding: var(--space-4);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  text-align: left;
+  transition: all 0.15s ease;
+}
+.action:hover { border-color: var(--gold-muted); transform: translateY(-1px); }
+
+.action-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  display: grid;
+  place-items: center;
+  color: var(--gold);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.action-icon svg { width: 18px; height: 18px; }
+
+.action-label {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.action-sub {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+}
+.action-badge {
+  margin-left: auto;
+  background: var(--gold);
+  color: var(--text-on-gold);
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: var(--radius-full);
+  min-width: 20px;
+  text-align: center;
+}
+
+/* ============================================
+   Coach card
+   ============================================ */
+.coach-card {
+  margin: 0 var(--space-5) var(--space-6);
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.coach-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3a2f0e, #1a1a1a);
+  border: 1.5px solid var(--gold-muted);
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 14px;
+  color: var(--gold);
+  flex-shrink: 0;
+}
+.coach-text { flex: 1; min-width: 0; }
+.coach-name {
+  font-size: 14px;
+  font-weight: 600;
+}
+.coach-msg {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+.coach-time {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  align-self: flex-start;
+}
+
+/* ============================================
+   Bottom Nav
+   ============================================ */
+.nav {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(10, 10, 10, 0.92);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--space-3) var(--space-2) calc(var(--space-3) + 8px);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  color: var(--text-quaternary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  flex: 1;
+  transition: color 0.15s ease;
+}
+.nav-item svg { width: 22px; height: 22px; }
+.nav-item.active { color: var(--gold); }
+.nav-item:hover { color: var(--text-secondary); }
+.nav-item.active:hover { color: var(--gold-light); }
+
+/* ============================================
+   Top bar (back / title / action)
+   ============================================ */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4) var(--space-4);
+}
+.iconbtn {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  display: grid;
+  place-items: center;
+  color: var(--text-primary);
+  flex-shrink: 0;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.iconbtn:hover { border-color: var(--gold-muted); color: var(--gold); }
+.iconbtn svg { width: 20px; height: 20px; }
+.topbar-title { flex: 1; min-width: 0; text-align: center; }
+.topbar-eyebrow {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+}
+.topbar-name {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin-top: 2px;
+}
+
+/* ============================================
+   Banner (workout summary)
+   ============================================ */
+.banner {
+  position: relative;
+  margin: 0 var(--space-5) var(--space-6);
+  padding: var(--space-6);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+}
+.banner-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(212, 175, 55, 0.18), transparent 60%),
+    radial-gradient(circle at 0% 100%, rgba(212, 175, 55, 0.08), transparent 50%);
+  pointer-events: none;
+}
+.banner::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold), transparent);
+  opacity: 0.6;
+}
+.banner-content { position: relative; }
+.muscle-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: var(--space-4);
+}
+.muscle-tag {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 5px 10px;
+  border-radius: var(--radius-full);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+}
+.muscle-tag.primary {
+  background: var(--gold-glow);
+  border-color: var(--gold-muted);
+  color: var(--gold);
+}
+.banner-title {
+  font-size: 30px;
+  font-weight: 800;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+}
+.banner-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+  margin-top: var(--space-5);
+  padding-top: var(--space-5);
+  border-top: 1px solid var(--border-subtle);
+}
+.banner-stats > div { display: flex; flex-direction: column; gap: 2px; }
+.banner-stats strong {
+  font-size: 16px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.banner-stats span {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+}
+
+/* ============================================
+   Coach Note
+   ============================================ */
+.coach-note {
+  display: flex;
+  gap: var(--space-3);
+  margin: 0 var(--space-5) var(--space-6);
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-left: 3px solid var(--gold);
+  border-radius: var(--radius);
+}
+.coach-note-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--gold-glow);
+  color: var(--gold);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.coach-note-icon svg { width: 16px; height: 16px; }
+.coach-note-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--gold);
+  font-weight: 700;
+}
+.coach-note-text {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+  line-height: 1.5;
+}
+
+/* ============================================
+   Exercise list
+   ============================================ */
+.exercise-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.exercise {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+.exercise:hover { border-color: var(--gold-muted); transform: translateX(2px); }
+.exercise.superset { border-left: 3px solid var(--gold); }
+
+.exercise-num {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+.exercise-img {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-sm);
+  display: grid;
+  place-items: center;
+  color: var(--gold);
+  flex-shrink: 0;
+  border: 1px solid var(--border-subtle);
+}
+.exercise-img svg { width: 22px; height: 22px; }
+.exercise-body { flex: 1; min-width: 0; }
+.exercise-name {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.exercise-meta {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  font-variant-numeric: tabular-nums;
+}
+.exercise-tag {
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  background: var(--gold-glow);
+  color: var(--gold);
+}
+.exercise-tag.finisher { background: rgba(239, 68, 68, 0.12); color: #FCA5A5; }
+
+.exercise-status {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  color: var(--text-quaternary);
+  flex-shrink: 0;
+}
+.exercise-status svg { width: 18px; height: 18px; }
+
+.superset-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin: var(--space-3) 0 var(--space-1);
+  font-size: 10px;
+  color: var(--gold);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-weight: 700;
+}
+.superset-label span {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
+}
+
+/* ============================================
+   Sticky CTA bar
+   ============================================ */
+.sticky-cta {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: var(--space-4) var(--space-5) calc(var(--space-4) + 8px);
+  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.95) 30%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* ============================================
+   Workout progress bar
+   ============================================ */
+.workout-progress {
+  height: 3px;
+  background: var(--border-subtle);
+  margin: 0 var(--space-5) var(--space-5);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.workout-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
+  border-radius: 2px;
+  box-shadow: 0 0 8px var(--gold-glow);
+  transition: width 0.4s ease;
+}
+
+/* ============================================
+   Exercise hero (media + targets)
+   ============================================ */
+.exercise-hero {
+  margin: 0 var(--space-5) var(--space-5);
+}
+.exercise-media {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, #1a1409 0%, #0a0a0a 100%);
+  margin-bottom: var(--space-3);
+}
+.exercise-media-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.12), transparent 60%);
+}
+.exercise-media-icon {
+  width: 60%;
+  height: auto;
+  color: var(--gold-dark);
+  position: relative;
+  opacity: 0.7;
+}
+.play-btn {
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--gold);
+  color: var(--text-on-gold);
+  display: grid;
+  place-items: center;
+  box-shadow: var(--shadow-gold);
+  transition: transform 0.15s ease;
+}
+.play-btn:hover { transform: scale(1.05); }
+.play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
+
+.exercise-targets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* ============================================
+   Last performance
+   ============================================ */
+.lastperf {
+  margin: 0 var(--space-5) var(--space-6);
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+}
+.lastperf-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-tertiary);
+  font-weight: 600;
+  margin-bottom: var(--space-3);
+}
+.lastperf-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--space-3);
+}
+.lastperf-item {
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+}
+.lastperf-item.target {
+  border-color: var(--gold-muted);
+  background: var(--gold-glow);
+}
+.lastperf-value {
+  font-size: 22px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+.lastperf-value .unit {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  margin-left: 2px;
+}
+.lastperf-item.target .lastperf-value { color: var(--gold-light); }
+.lastperf-item.target .lastperf-value .unit { color: var(--gold); }
+.lastperf-meta {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  font-variant-numeric: tabular-nums;
+}
+.lastperf-arrow {
+  color: var(--text-quaternary);
+}
+.lastperf-arrow svg { width: 18px; height: 18px; }
+
+/* ============================================
+   Sets tracker
+   ============================================ */
+.sets {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  padding: var(--space-3);
+}
+.sets-header,
+.set {
+  display: grid;
+  grid-template-columns: 32px 1fr 70px 70px 40px;
+  gap: var(--space-2);
+  align-items: center;
+}
+.sets-header {
+  padding: 0 var(--space-2) var(--space-2);
+  font-size: 10px;
+  color: var(--text-tertiary);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: var(--space-2);
+}
+.sets-header > div:nth-child(3),
+.sets-header > div:nth-child(4) { text-align: center; }
+
+.set {
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  transition: background 0.15s ease;
+}
+.set + .set { border-top: 1px solid var(--border-subtle); margin-top: var(--space-1); padding-top: var(--space-3); }
+.set.active { background: var(--gold-glow); border: 1px solid var(--gold-muted); }
+.set.done { opacity: 0.6; }
+
+.set-num {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.set.active .set-num { color: var(--gold); }
+.set-prev {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+.set-input {
+  width: 100%;
+  height: 38px;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.set-input:focus { border-color: var(--gold); background: var(--bg-primary); }
+.set.active .set-input { border-color: var(--gold-muted); }
+.set-input::placeholder { color: var(--text-quaternary); }
+
+.set-check {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  display: grid;
+  place-items: center;
+  color: var(--text-quaternary);
+  transition: all 0.15s ease;
+}
+.set-check:hover { border-color: var(--gold-muted); color: var(--gold); }
+.set-check svg { width: 18px; height: 18px; }
+.set-check.checked {
+  background: var(--gold);
+  border-color: var(--gold);
+  color: var(--text-on-gold);
+}
+
+.add-set {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  margin-top: var(--space-3);
+  padding: var(--space-3);
+  background: transparent;
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.15s ease;
+}
+.add-set:hover { border-color: var(--gold-muted); color: var(--gold); }
+.add-set svg { width: 16px; height: 16px; }
+
+/* ============================================
+   Rest timer overlay
+   ============================================ */
+.rest-timer {
+  position: absolute;
+  left: var(--space-5);
+  right: var(--space-5);
+  bottom: 90px;
+  background: linear-gradient(135deg, #1a1409 0%, #0e0e0e 100%);
+  border: 1px solid var(--gold-muted);
+  border-radius: var(--radius);
+  padding: var(--space-4);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.7), 0 0 24px var(--gold-glow);
+}
+.rest-timer-label {
+  font-size: 10px;
+  color: var(--gold);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+.rest-timer-time {
+  font-size: 28px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin-top: 2px;
+  flex: 1;
+}
+.rest-timer-actions {
+  display: flex;
+  gap: 6px;
+}
+.timer-btn {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  position: relative;
+  transition: all 0.15s ease;
+}
+.timer-btn:hover { border-color: var(--gold-muted); color: var(--gold); }
+.timer-btn svg { width: 12px; height: 12px; }
+.timer-btn span {
+  font-size: 9px;
+  margin-top: 1px;
+}
+.timer-btn.skip {
+  background: var(--gold);
+  border-color: var(--gold);
+  color: var(--text-on-gold);
+  font-size: 12px;
+  width: auto;
+  padding: 0 var(--space-3);
+}
+
+/* ============================================
+   Tabs
+   ============================================ */
+.tabs {
+  display: flex;
+  gap: 4px;
+  padding: 0 var(--space-5);
+  margin-bottom: var(--space-5);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.tabs::-webkit-scrollbar { display: none; }
+.tab {
+  flex-shrink: 0;
+  padding: 8px var(--space-4);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  border-radius: var(--radius-full);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  transition: all 0.15s ease;
+}
+.tab:hover { color: var(--text-primary); }
+.tab.active {
+  background: var(--gold-glow);
+  border-color: var(--gold-muted);
+  color: var(--gold);
+}
+
+/* ============================================
+   Metric card with chart
+   ============================================ */
+.metric-card {
+  margin: 0 var(--space-5) var(--space-6);
+  padding: var(--space-5);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+}
+.metric-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.metric-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-tertiary);
+  font-weight: 600;
+}
+.metric-value {
+  font-size: 38px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.03em;
+  margin-top: 2px;
+  line-height: 1;
+}
+.metric-value .unit {
+  font-size: 16px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  margin-left: 4px;
+  letter-spacing: 0;
+}
+.metric-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border-radius: var(--radius-full);
+  font-size: 12px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.metric-delta.positive {
+  background: rgba(74, 222, 128, 0.12);
+  color: var(--success);
+}
+.metric-delta svg { width: 14px; height: 14px; }
+
+.chart {
+  margin-top: var(--space-5);
+}
+.chart svg {
+  width: 100%;
+  height: 140px;
+}
+.chart-x {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--space-2);
+  font-size: 10px;
+  color: var(--text-quaternary);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.chart-x .active { color: var(--gold); }
+
+.metric-footer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+  margin-top: var(--space-5);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border-subtle);
+}
+.metric-foot-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-tertiary);
+  font-weight: 600;
+}
+.metric-foot-value {
+  font-size: 14px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  margin-top: 2px;
+}
+
+/* ============================================
+   Personal Records
+   ============================================ */
+.pr-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.pr-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  transition: border-color 0.15s ease;
+}
+.pr-card:hover { border-color: var(--gold-muted); }
+.pr-card.new {
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent 60%), var(--bg-secondary);
+  border-color: var(--gold-muted);
+}
+.pr-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--gold-glow);
+  color: var(--gold);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.pr-icon svg { width: 18px; height: 18px; }
+.pr-body { flex: 1; min-width: 0; }
+.pr-name { font-size: 14px; font-weight: 600; }
+.pr-meta {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  font-variant-numeric: tabular-nums;
+}
+.pr-badge {
+  background: var(--gold);
+  color: var(--text-on-gold);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  padding: 4px 8px;
+  border-radius: var(--radius-full);
+}
+.pr-delta {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--success);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================
+   Health grid
+   ============================================ */
+.health-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+.health-card {
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+}
+.health-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-tertiary);
+  font-weight: 600;
+  margin-bottom: var(--space-2);
+}
+.health-head svg { width: 14px; height: 14px; color: var(--gold); }
+.health-value {
+  font-size: 22px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+.health-value .unit {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  margin-left: 2px;
+}
+.health-trend {
+  font-size: 11px;
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+}
+.health-trend.up { color: var(--success); }
+.health-trend.down { color: var(--success); }
+
+/* ============================================
+   Utilities
+   ============================================ */
+.spacer-sm { height: var(--space-4); }
+.spacer { height: var(--space-6); }
diff --git a/fabio-antunes-app/prototype/exercise.html b/fabio-antunes-app/prototype/exercise.html
new file mode 100644
index 0000000..133d346
--- /dev/null
+++ b/fabio-antunes-app/prototype/exercise.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+<meta name="theme-color" content="#0A0A0A"/>
+<title>Bankdrücken — Fabio Antunes</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="assets/styles.css"/>
+</head>
+<body>
+<div class="viewport">
+  <div class="phone">
+    <div class="screen">
+
+      <div class="statusbar">
+        <span>9:43</span>
+        <div class="statusbar-icons">
+          <svg viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="7" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
+          <svg viewBox="0 0 18 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="6" rx="1.5"/><rect x="3" y="5" width="9" height="2" fill="currentColor"/><path d="M16 5v2"/></svg>
+        </div>
+      </div>
+
+      <div class="topbar">
+        <a href="workout.html" class="iconbtn" aria-label="Zurück">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </a>
+        <div class="topbar-title">
+          <div class="topbar-eyebrow">Übung 1 von 7</div>
+          <div class="topbar-name">Bankdrücken</div>
+        </div>
+        <button class="iconbtn" aria-label="Info">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
+        </button>
+      </div>
+
+      <!-- Progress bar workout -->
+      <div class="workout-progress">
+        <div class="workout-progress-bar" style="width: 14%"></div>
+      </div>
+
+      <!-- Exercise hero -->
+      <section class="exercise-hero">
+        <div class="exercise-media">
+          <div class="exercise-media-bg"></div>
+          <svg class="exercise-media-icon" viewBox="0 0 120 80" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <rect x="2" y="35" width="6" height="10" rx="1.5" fill="currentColor"/>
+            <rect x="112" y="35" width="6" height="10" rx="1.5" fill="currentColor"/>
+            <rect x="8" y="38" width="104" height="4" rx="1" fill="currentColor"/>
+            <circle cx="60" cy="40" r="3" fill="currentColor"/>
+          </svg>
+          <button class="play-btn" aria-label="Demo-Video">
+            <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="7 4 20 12 7 20 7 4"/></svg>
+          </button>
+        </div>
+
+        <div class="exercise-targets">
+          <span class="muscle-tag primary">Brust</span>
+          <span class="muscle-tag">Schulter (front)</span>
+          <span class="muscle-tag">Trizeps</span>
+        </div>
+      </section>
+
+      <!-- Last performance -->
+      <section class="lastperf">
+        <div class="lastperf-label">Letzte Leistung · 7 Tage</div>
+        <div class="lastperf-grid">
+          <div class="lastperf-item">
+            <div class="lastperf-value">75<span class="unit">kg</span></div>
+            <div class="lastperf-meta">×10, 10, 9, 8</div>
+          </div>
+          <div class="lastperf-arrow">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+          </div>
+          <div class="lastperf-item target">
+            <div class="lastperf-value">80<span class="unit">kg</span></div>
+            <div class="lastperf-meta">Ziel heute · 8-10</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Sets -->
+      <section class="section">
+        <div class="section-header">
+          <h3 class="section-title">Sätze</h3>
+          <span class="section-action" style="color: var(--text-tertiary);">4 × 8-10</span>
+        </div>
+
+        <div class="sets">
+          <!-- Header -->
+          <div class="sets-header">
+            <div>SATZ</div>
+            <div>VORHER</div>
+            <div>KG</div>
+            <div>WDH</div>
+            <div></div>
+          </div>
+
+          <!-- Completed set -->
+          <div class="set done">
+            <div class="set-num">1</div>
+            <div class="set-prev">75 × 10</div>
+            <input class="set-input" value="80" inputmode="decimal"/>
+            <input class="set-input" value="10" inputmode="numeric"/>
+            <button class="set-check checked" aria-label="Satz erledigt">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 12 10 17 19 7"/></svg>
+            </button>
+          </div>
+
+          <!-- Active / current set -->
+          <div class="set active">
+            <div class="set-num">2</div>
+            <div class="set-prev">75 × 10</div>
+            <input class="set-input" value="80" inputmode="decimal"/>
+            <input class="set-input" placeholder="—" inputmode="numeric"/>
+            <button class="set-check" aria-label="Satz erledigt">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 12 10 17 19 7"/></svg>
+            </button>
+          </div>
+
+          <div class="set">
+            <div class="set-num">3</div>
+            <div class="set-prev">75 × 9</div>
+            <input class="set-input" value="80" inputmode="decimal"/>
+            <input class="set-input" placeholder="—" inputmode="numeric"/>
+            <button class="set-check" aria-label="Satz erledigt">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 12 10 17 19 7"/></svg>
+            </button>
+          </div>
+
+          <div class="set">
+            <div class="set-num">4</div>
+            <div class="set-prev">75 × 8</div>
+            <input class="set-input" value="80" inputmode="decimal"/>
+            <input class="set-input" placeholder="—" inputmode="numeric"/>
+            <button class="set-check" aria-label="Satz erledigt">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 12 10 17 19 7"/></svg>
+            </button>
+          </div>
+
+          <button class="add-set">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            Satz hinzufügen
+          </button>
+        </div>
+      </section>
+
+      <!-- Coach tip -->
+      <div class="coach-note" style="margin-top: var(--space-6);">
+        <div class="coach-note-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+        </div>
+        <div>
+          <div class="coach-note-label">Form-Cue</div>
+          <div class="coach-note-text">Schulterblätter zusammen, Po bleibt auf der Bank, Hantel kontrolliert zur Brust unter den Brustwarzen.</div>
+        </div>
+      </div>
+
+      <div class="spacer"></div>
+    </div>
+
+    <!-- Rest timer overlay (sticky) -->
+    <div class="rest-timer" id="restTimer">
+      <div class="rest-timer-label">PAUSE</div>
+      <div class="rest-timer-time">01:23</div>
+      <div class="rest-timer-actions">
+        <button class="timer-btn" aria-label="Minus 15s">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
+          <span>15</span>
+        </button>
+        <button class="timer-btn skip">Skip</button>
+        <button class="timer-btn" aria-label="Plus 15s">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+          <span>15</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Sticky next CTA -->
+    <div class="sticky-cta">
+      <a href="progress.html" class="btn-primary" style="margin: 0;">
+        Nächste Übung
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      </a>
+    </div>
+
+  </div>
+</div>
+</body>
+</html>
diff --git a/fabio-antunes-app/prototype/index.html b/fabio-antunes-app/prototype/index.html
new file mode 100644
index 0000000..693cb0c
--- /dev/null
+++ b/fabio-antunes-app/prototype/index.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+<meta name="theme-color" content="#0A0A0A"/>
+<title>Fabio Antunes — Heute</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="assets/styles.css"/>
+</head>
+<body>
+<div class="viewport">
+  <div class="phone">
+    <div class="screen">
+
+      <!-- Status bar -->
+      <div class="statusbar">
+        <span>9:41</span>
+        <div class="statusbar-icons">
+          <svg viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="7" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
+          <svg viewBox="0 0 18 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="6" rx="1.5"/><rect x="3" y="5" width="9" height="2" fill="currentColor"/><path d="M16 5v2"/></svg>
+        </div>
+      </div>
+
+      <!-- Header -->
+      <header class="header">
+        <div>
+          <div class="greeting-label">Montag · 14. Apr</div>
+          <h1 class="greeting-name">Servus, <span class="accent">Fabio</span></h1>
+        </div>
+        <div class="avatar">FA</div>
+      </header>
+
+      <!-- Brand bar -->
+      <div class="brandbar">
+        <img src="assets/logo.png" class="brandbar-logo" alt="Fabio Antunes — Prime Coaching"/>
+      </div>
+
+      <!-- Hero workout card -->
+      <section class="hero-card">
+        <span class="hero-eyebrow"><span class="pulse"></span>Heute · Push Day A</span>
+        <h2 class="hero-title">Brust, Schulter,<br/>Trizeps</h2>
+        <p class="hero-subtitle">7 Übungen · ~58 Min · Mittlere Intensität</p>
+
+        <div class="hero-meta">
+          <div class="hero-meta-item">
+            <div class="hero-meta-value">12.480<span class="unit">kg</span></div>
+            <div class="hero-meta-label">Volumen Ziel</div>
+          </div>
+          <div class="hero-meta-item">
+            <div class="hero-meta-value">28<span class="unit">×</span></div>
+            <div class="hero-meta-label">Sätze</div>
+          </div>
+          <div class="hero-meta-item">
+            <div class="hero-meta-value">RPE 7-8</div>
+            <div class="hero-meta-label">Intensität</div>
+          </div>
+        </div>
+
+        <a href="workout.html" class="btn-primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor"/></svg>
+          Workout starten
+        </a>
+      </section>
+
+      <!-- Daily Goals -->
+      <section class="section">
+        <div class="section-header">
+          <h3 class="section-title">Tagesziele</h3>
+          <button class="section-action">Mehr</button>
+        </div>
+        <div class="goals">
+          <div class="goal-card">
+            <div class="ring" style="--pct: 72;">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
+            </div>
+            <div>
+              <div class="goal-value">128<span class="small">/180</span></div>
+              <div class="goal-label">Protein</div>
+            </div>
+          </div>
+          <div class="goal-card">
+            <div class="ring" style="--pct: 45;">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6m0 0c-3 3-5 5-5 8a5 5 0 0 0 10 0c0-3-2-5-5-8Z"/></svg>
+            </div>
+            <div>
+              <div class="goal-value">1,4<span class="small">/3 L</span></div>
+              <div class="goal-label">Wasser</div>
+            </div>
+          </div>
+          <div class="goal-card">
+            <div class="ring" style="--pct: 88;">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 16 4-8 4 4 4-7"/></svg>
+            </div>
+            <div>
+              <div class="goal-value">8.840<span class="small">/10k</span></div>
+              <div class="goal-label">Schritte</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Quick Actions -->
+      <section class="section">
+        <div class="section-header">
+          <h3 class="section-title">Schnellzugriff</h3>
+        </div>
+        <div class="actions">
+          <button class="action">
+            <div class="action-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4Z"/></svg>
+            </div>
+            <div>
+              <div class="action-label">Plan ansehen</div>
+              <div class="action-sub">Woche 3 von 8</div>
+            </div>
+          </button>
+          <button class="action">
+            <div class="action-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z"/></svg>
+            </div>
+            <div>
+              <div class="action-label">Chat</div>
+              <div class="action-sub">Mit deinem Coach</div>
+            </div>
+            <span class="action-badge">2</span>
+          </button>
+          <button class="action">
+            <div class="action-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>
+            </div>
+            <div>
+              <div class="action-label">Mahlzeit loggen</div>
+              <div class="action-sub">3 von 5 erfasst</div>
+            </div>
+          </button>
+          <button class="action">
+            <div class="action-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-5"/></svg>
+            </div>
+            <div>
+              <div class="action-label">Fortschritt</div>
+              <div class="action-sub">+1,2 kg diese Woche</div>
+            </div>
+          </button>
+        </div>
+      </section>
+
+      <!-- Coach card -->
+      <div class="coach-card">
+        <div class="coach-avatar">F</div>
+        <div class="coach-text">
+          <div class="coach-name">Fabio · Coach</div>
+          <div class="coach-msg">Stark gestern! Heute volle Power 💪</div>
+        </div>
+        <div class="coach-time">07:42</div>
+      </div>
+
+      <div class="spacer"></div>
+    </div>
+
+    <!-- Bottom Nav -->
+    <nav class="nav">
+      <a href="index.html" class="nav-item active">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3 3 10v11h6v-7h6v7h6V10z"/></svg>
+        Heute
+      </a>
+      <a href="workout.html" class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+        Plan
+      </a>
+      <button class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2c1.5 0 3 1 3 3 0 2-3 3-3 6m0 0c0-3-3-4-3-6 0-2 1.5-3 3-3M5 14a7 7 0 1 0 14 0c0-2-1-4-3-5H8c-2 1-3 3-3 5Z"/></svg>
+        Ernährung
+      </button>
+      <a href="progress.html" class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-5"/></svg>
+        Fortschritt
+      </a>
+      <button class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 22a8 8 0 0 1 16 0"/></svg>
+        Profil
+      </button>
+    </nav>
+  </div>
+</div>
+</body>
+</html>
diff --git a/fabio-antunes-app/prototype/progress.html b/fabio-antunes-app/prototype/progress.html
new file mode 100644
index 0000000..df50343
--- /dev/null
+++ b/fabio-antunes-app/prototype/progress.html
@@ -0,0 +1,223 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+<meta name="theme-color" content="#0A0A0A"/>
+<title>Fortschritt — Fabio Antunes</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="assets/styles.css"/>
+</head>
+<body>
+<div class="viewport">
+  <div class="phone">
+    <div class="screen">
+
+      <div class="statusbar">
+        <span>9:45</span>
+        <div class="statusbar-icons">
+          <svg viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="7" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
+          <svg viewBox="0 0 18 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="6" rx="1.5"/><rect x="3" y="5" width="9" height="2" fill="currentColor"/><path d="M16 5v2"/></svg>
+        </div>
+      </div>
+
+      <header class="header">
+        <div>
+          <div class="greeting-label">Dein Fortschritt</div>
+          <h1 class="greeting-name">8 Wochen <span class="accent">stark</span></h1>
+        </div>
+        <button class="iconbtn" aria-label="Filter">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
+        </button>
+      </header>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button class="tab active">Gewicht</button>
+        <button class="tab">Volumen</button>
+        <button class="tab">Maße</button>
+        <button class="tab">Fotos</button>
+      </div>
+
+      <!-- Big metric + chart -->
+      <section class="metric-card">
+        <div class="metric-row">
+          <div>
+            <div class="metric-label">Aktuell · Gewicht</div>
+            <div class="metric-value">82,4<span class="unit">kg</span></div>
+          </div>
+          <div class="metric-delta positive">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>
+            <span>+1,8 kg</span>
+          </div>
+        </div>
+
+        <!-- Chart -->
+        <div class="chart">
+          <svg viewBox="0 0 320 140" preserveAspectRatio="none">
+            <defs>
+              <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#DAAC2F" stop-opacity="0.35"/>
+                <stop offset="100%" stop-color="#DAAC2F" stop-opacity="0"/>
+              </linearGradient>
+              <linearGradient id="chartLine" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%" stop-color="#CFA847"/>
+                <stop offset="100%" stop-color="#F5C75A"/>
+              </linearGradient>
+            </defs>
+
+            <!-- Gridlines -->
+            <line x1="0" y1="35" x2="320" y2="35" stroke="#1F1F1F" stroke-dasharray="2 4"/>
+            <line x1="0" y1="70" x2="320" y2="70" stroke="#1F1F1F" stroke-dasharray="2 4"/>
+            <line x1="0" y1="105" x2="320" y2="105" stroke="#1F1F1F" stroke-dasharray="2 4"/>
+
+            <!-- Area fill -->
+            <path d="M0,110 L40,100 L80,95 L120,80 L160,72 L200,60 L240,55 L280,42 L320,30 L320,140 L0,140 Z" fill="url(#chartFill)"/>
+            <!-- Line -->
+            <path d="M0,110 L40,100 L80,95 L120,80 L160,72 L200,60 L240,55 L280,42 L320,30" fill="none" stroke="url(#chartLine)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+
+            <!-- Points -->
+            <circle cx="320" cy="30" r="5" fill="#0A0A0A" stroke="#DAAC2F" stroke-width="2.5"/>
+            <circle cx="320" cy="30" r="2" fill="#DAAC2F"/>
+          </svg>
+
+          <div class="chart-x">
+            <span>Wo 1</span><span>Wo 2</span><span>Wo 3</span><span>Wo 4</span><span>Wo 5</span><span>Wo 6</span><span>Wo 7</span><span class="active">Wo 8</span>
+          </div>
+        </div>
+
+        <div class="metric-footer">
+          <div>
+            <div class="metric-foot-label">Start</div>
+            <div class="metric-foot-value">80,6 kg</div>
+          </div>
+          <div>
+            <div class="metric-foot-label">Ziel</div>
+            <div class="metric-foot-value">85,0 kg</div>
+          </div>
+          <div>
+            <div class="metric-foot-label">Ø/Woche</div>
+            <div class="metric-foot-value">+0,23 kg</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Personal Records -->
+      <section class="section">
+        <div class="section-header">
+          <h3 class="section-title">Persönliche Rekorde</h3>
+          <button class="section-action">Alle</button>
+        </div>
+
+        <div class="pr-list">
+          <div class="pr-card new">
+            <div class="pr-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V3h12v6M6 9c0 4 3 7 6 7s6-3 6-7M12 16v3M8 22h8"/></svg>
+            </div>
+            <div class="pr-body">
+              <div class="pr-name">Bankdrücken</div>
+              <div class="pr-meta">82,5 kg × 8 · vor 2 Tagen</div>
+            </div>
+            <div class="pr-badge">NEU</div>
+          </div>
+
+          <div class="pr-card">
+            <div class="pr-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V3h12v6M6 9c0 4 3 7 6 7s6-3 6-7M12 16v3M8 22h8"/></svg>
+            </div>
+            <div class="pr-body">
+              <div class="pr-name">Kniebeuge</div>
+              <div class="pr-meta">120 kg × 5 · vor 1 Woche</div>
+            </div>
+            <div class="pr-delta">+5kg</div>
+          </div>
+
+          <div class="pr-card">
+            <div class="pr-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V3h12v6M6 9c0 4 3 7 6 7s6-3 6-7M12 16v3M8 22h8"/></svg>
+            </div>
+            <div class="pr-body">
+              <div class="pr-name">Kreuzheben</div>
+              <div class="pr-meta">140 kg × 5 · vor 2 Wochen</div>
+            </div>
+            <div class="pr-delta">+2,5kg</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Health sync card -->
+      <section class="section">
+        <div class="section-header">
+          <h3 class="section-title">Health-Sync</h3>
+          <span class="section-action" style="color: var(--success);">Aktiv</span>
+        </div>
+
+        <div class="health-grid">
+          <div class="health-card">
+            <div class="health-head">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
+              <span>Ruhe-Puls</span>
+            </div>
+            <div class="health-value">58<span class="unit">bpm</span></div>
+            <div class="health-trend down">−3 bpm · 30 Tage</div>
+          </div>
+          <div class="health-card">
+            <div class="health-head">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
+              <span>Schlaf Ø</span>
+            </div>
+            <div class="health-value">7,2<span class="unit">h</span></div>
+            <div class="health-trend up">+0,4 h · 7 Tage</div>
+          </div>
+          <div class="health-card">
+            <div class="health-head">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
+              <span>HRV</span>
+            </div>
+            <div class="health-value">68<span class="unit">ms</span></div>
+            <div class="health-trend up">+5 ms · 30 Tage</div>
+          </div>
+          <div class="health-card">
+            <div class="health-head">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-5"/></svg>
+              <span>Schritte Ø</span>
+            </div>
+            <div class="health-value">9,4<span class="unit">k</span></div>
+            <div class="health-trend up">+820 · 7 Tage</div>
+          </div>
+        </div>
+      </section>
+
+      <div class="spacer"></div>
+    </div>
+
+    <!-- Bottom Nav -->
+    <nav class="nav">
+      <a href="index.html" class="nav-item">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3 3 10v11h6v-7h6v7h6V10z"/></svg>
+        Heute
+      </a>
+      <a href="workout.html" class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+        Plan
+      </a>
+      <button class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2c1.5 0 3 1 3 3 0 2-3 3-3 6m0 0c0-3-3-4-3-6 0-2 1.5-3 3-3M5 14a7 7 0 1 0 14 0c0-2-1-4-3-5H8c-2 1-3 3-3 5Z"/></svg>
+        Ernährung
+      </button>
+      <button class="nav-item active">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-5"/></svg>
+        Fortschritt
+      </button>
+      <button class="nav-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 22a8 8 0 0 1 16 0"/></svg>
+        Profil
+      </button>
+    </nav>
+
+  </div>
+</div>
+</body>
+</html>
diff --git a/fabio-antunes-app/prototype/workout.html b/fabio-antunes-app/prototype/workout.html
new file mode 100644
index 0000000..fc29c1f
--- /dev/null
+++ b/fabio-antunes-app/prototype/workout.html
@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+<meta name="theme-color" content="#0A0A0A"/>
+<title>Push Day A — Fabio Antunes</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="assets/styles.css"/>
+</head>
+<body>
+<div class="viewport">
+  <div class="phone">
+    <div class="screen">
+
+      <div class="statusbar">
+        <span>9:42</span>
+        <div class="statusbar-icons">
+          <svg viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="7" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
+          <svg viewBox="0 0 18 12" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="6" rx="1.5"/><rect x="3" y="5" width="9" height="2" fill="currentColor"/><path d="M16 5v2"/></svg>
+        </div>
+      </div>
+
+      <!-- Top bar with back -->
+      <div class="topbar">
+        <a href="index.html" class="iconbtn" aria-label="Zurück">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </a>
+        <div class="topbar-title">
+          <div class="topbar-eyebrow">Woche 3 · Tag 2</div>
+          <div class="topbar-name">Push Day A</div>
+        </div>
+        <button class="iconbtn" aria-label="Mehr">
+          <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="12" cy="19" r="1.6"/></svg>
+        </button>
+      </div>
+
+      <!-- Workout summary banner -->
+      <section class="banner">
+        <div class="banner-bg"></div>
+        <div class="banner-content">
+          <div class="muscle-tags">
+            <span class="muscle-tag">Brust</span>
+            <span class="muscle-tag">Schulter</span>
+            <span class="muscle-tag">Trizeps</span>
+          </div>
+          <h1 class="banner-title">Brust, Schulter,<br/>Trizeps</h1>
+          <div class="banner-stats">
+            <div><strong>7</strong><span>Übungen</span></div>
+            <div><strong>~58</strong><span>Min</span></div>
+            <div><strong>28</strong><span>Sätze</span></div>
+            <div><strong>RPE 7-8</strong><span>Intensität</span></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Coach note -->
+      <div class="coach-note">
+        <div class="coach-note-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z"/></svg>
+        </div>
+        <div>
+          <div class="coach-note-label">Notiz von Fabio</div>
+          <div class="coach-note-text">Heute auf saubere Form bei Schulterdrücken achten — lieber 2,5kg weniger als zucken. Letzte Woche war stark!</div>
+        </div>
+      </div>
+
+      <!-- Exercise list -->
+      <section class="section">
+        <div class="section-header">
+          <h3 class="section-title">Übungen</h3>
+          <span class="section-action" style="color: var(--text-tertiary);">7 gesamt</span>
+        </div>
+
+        <div class="exercise-list">
+
+          <a href="exercise.html" class="exercise">
+            <div class="exercise-num">1</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #2a1a08, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="10" width="2" height="4" rx="0.5" fill="currentColor"/><rect x="19" y="10" width="2" height="4" rx="0.5" fill="currentColor"/><rect x="5" y="11" width="14" height="2" rx="0.5" fill="currentColor"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Bankdrücken</div>
+              <div class="exercise-meta">4 × 8-10  ·  80kg  ·  90s Pause</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </a>
+
+          <div class="exercise">
+            <div class="exercise-num">2</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #1f1a2a, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="6" cy="12" r="2.2" fill="currentColor"/><circle cx="18" cy="12" r="2.2" fill="currentColor"/><path d="M8 12h8"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Kurzhantel-Schrägbankdrücken</div>
+              <div class="exercise-meta">3 × 10-12  ·  26kg  ·  75s Pause</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </div>
+
+          <div class="exercise">
+            <div class="exercise-num">3</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #2a1a08, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="6" r="2" fill="currentColor"/><path d="M12 8v8M9 12h6"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Schulterdrücken (KH)</div>
+              <div class="exercise-meta">4 × 8-10  ·  18kg  ·  90s Pause</div>
+              <div class="exercise-tag">Form-Fokus</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </div>
+
+          <div class="exercise">
+            <div class="exercise-num">4</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #1a2a1f, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 12h16M8 8v8M16 8v8" stroke-linecap="round"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Seitheben (Maschine)</div>
+              <div class="exercise-meta">3 × 12-15  ·  20kg  ·  60s Pause</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </div>
+
+          <!-- Superset divider -->
+          <div class="superset-label">
+            <span></span>
+            <div>SUPERSATZ</div>
+            <span></span>
+          </div>
+
+          <div class="exercise superset">
+            <div class="exercise-num">5a</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #2a1620, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 9v6M19 9v6M5 12h14"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Trizeps-Pushdown (Seil)</div>
+              <div class="exercise-meta">3 × 12  ·  35kg  ·  0s Pause</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </div>
+
+          <div class="exercise superset">
+            <div class="exercise-num">5b</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #2a1620, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M7 6v12M17 6v12M10 8l4 8M14 8l-4 8"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Overhead Trizeps (KH)</div>
+              <div class="exercise-meta">3 × 12  ·  15kg  ·  90s Pause</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </div>
+
+          <div class="exercise">
+            <div class="exercise-num">6</div>
+            <div class="exercise-img" style="background: linear-gradient(135deg, #2a1a08, #0a0a0a);">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="6"/><path d="M12 6v12"/></svg>
+            </div>
+            <div class="exercise-body">
+              <div class="exercise-name">Cable Fly</div>
+              <div class="exercise-meta">3 × 15  ·  12kg  ·  60s Pause</div>
+              <div class="exercise-tag finisher">Finisher</div>
+            </div>
+            <div class="exercise-status pending">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      <div class="spacer"></div>
+    </div>
+
+    <!-- Sticky Start CTA -->
+    <div class="sticky-cta">
+      <a href="exercise.html" class="btn-primary" style="margin: 0;">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor"/></svg>
+        Workout starten
+      </a>
+    </div>
+
+  </div>
+</div>
+</body>
+</html>