frontend/src/pages/ExerciseDetailPage.jsx

@@ -4,6 +4,7 @@ import api from '../utils/api'
 import ExerciseRichTextBlock from '../components/ExerciseRichTextBlock'
 import ExerciseAttachmentMediaStrip from '../components/ExerciseAttachmentMediaStrip'
 import CombinationPlanBracket from '../components/CombinationPlanBracket'
+import ExercisePeekModal from '../components/ExercisePeekModal'
 import { formatSkillLevelSlug } from '../constants/skillLevels'
 
 function TagRow({ exercise }) {
@@ -58,6 +59,8 @@ function ExerciseDetailPage() {
   const [exercise, setExercise] = useState(null)
   const [error, setError] = useState(null)
   const [loading, setLoading] = useState(true)
+  /** Schnellansicht für eingebettete Einzelübungen (Kombination) — ohne Route zu verlassen */
+  const [embeddedPeekExerciseId, setEmbeddedPeekExerciseId] = useState(null)
 
   useEffect(() => {
     let cancelled = false
@@ -121,6 +124,12 @@ function ExerciseDetailPage() {
 
   return (
     <div className="exercise-detail-shell" style={{ padding: '12px 12px 24px' }}>
+      <ExercisePeekModal
+        key={embeddedPeekExerciseId != null ? String(embeddedPeekExerciseId) : 'exercise-detail-peek'}
+        open={embeddedPeekExerciseId != null}
+        exerciseId={embeddedPeekExerciseId}
+        onClose={() => setEmbeddedPeekExerciseId(null)}
+      />
       <div style={{ marginBottom: '12px', display: 'flex', justifyContent: 'space-between', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
         <button type="button" className="btn btn-secondary" onClick={() => navigate('/exercises')}>
           ← Übersicht
@@ -152,7 +161,9 @@ function ExerciseDetailPage() {
         <section className="card exercise-detail-section">
           <h2>Ablauf und Stationen</h2>
           <p style={{ marginTop: 0, fontSize: '0.88rem', color: 'var(--text2)', lineHeight: 1.45 }}>
-            Katalog‑Ablauf mit Archetyp, Zeiten und Stationen — dieselbe Darstellung wie in der Planung und Vorschau.
+            Katalog‑Ablauf mit Archetyp, Zeiten und Stationen. Station bzw. Einzelübung antippen öffnet eine
+            Schnellansicht mit Kurztext und Ablauf, ohne diese Seite zu verlassen. Die vollständige Übungsseite
+            liegt im Popup unten als Link.
           </p>
           <div className="training-run-combo-embed">
             <CombinationPlanBracket
@@ -160,7 +171,8 @@ function ExerciseDetailPage() {
               methodProfile={catalogMethodProfileForBracket}
               combinationSlots={exercise.combination_slots}
               planningAdjusted={false}
-              candidateInteraction="link"
+              candidateInteraction="button"
+              onCandidatePeek={(exerciseId) => setEmbeddedPeekExerciseId(Number(exerciseId))}
             />
           </div>
         </section>