diff --git a/frontend/src/app.css b/frontend/src/app.css
index 70ef2a0..7ca5e2a 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -3159,6 +3159,309 @@ a.analysis-split__nav-item {
   color: var(--accent-text, #fff);
 }
 
+/* ——— Trainings‑Einheit: Übungszeilen schlank + DnD ——— */
+.training-unit-sections-editor--wide .tu-ex-variant-select--wide {
+  max-width: 100%;
+}
+
+.tu-item-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 6px 8px;
+  margin-top: 0.5rem;
+  padding: 0.4rem 6px 0.45rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  min-width: 0;
+  transition: outline 0.1s ease;
+  border-radius: 8px;
+}
+
+.tu-item-row--drop-target {
+  outline: 2px dashed var(--accent);
+  outline-offset: 1px;
+}
+
+.tu-item-row--dragging {
+  opacity: 0.52;
+}
+
+.tu-row-grip {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: flex-start;
+  padding: 4px 2px;
+  margin-top: 2px;
+  border-radius: 6px;
+  color: var(--text3);
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+
+.tu-row-grip:active {
+  cursor: grabbing;
+}
+
+.tu-item-row__nudge {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding-top: 4px;
+}
+
+.tu-item-row__nudge button {
+  padding: 0 5px;
+  line-height: 1.2;
+  font-size: 11px;
+  min-height: 20px;
+  border: none;
+  background: transparent;
+  color: var(--text2);
+  border-radius: 4px;
+}
+
+.tu-item-row__nudge button:disabled {
+  opacity: 0.3;
+}
+
+.tu-item-row__nudge button:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.tu-item-row__mainline {
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: flex-start;
+  min-width: 0;
+  width: 100%;
+}
+
+.tu-item-row--note .tu-icon-btn,
+.tu-item-row--note .tu-item-row__remove {
+  align-self: center;
+}
+
+.tu-item-row--note .tu-item-row__body--note {
+  flex: 1;
+  min-width: 0;
+}
+
+.tu-item-row--note {
+  flex-wrap: nowrap;
+}
+
+.tu-item-row__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.tu-item-row__meta-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text3);
+}
+
+.tu-item-row__preview {
+  margin: 0;
+  font-size: 0.86rem;
+  line-height: 1.35;
+  color: var(--text1);
+  word-break: break-word;
+}
+
+.tu-item-row__preview--clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.tu-item-row__preview--empty {
+  color: var(--text3);
+}
+
+.tu-icon-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 8px;
+  border: 1px solid var(--border2);
+  background: var(--surface);
+  color: var(--text2);
+  cursor: pointer;
+  line-height: 0;
+}
+
+.tu-icon-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent-dark);
+}
+
+.tu-item-row__remove {
+  flex: 0 0 auto;
+  padding: 5px 10px;
+  min-height: 32px;
+  font-size: 12px;
+  background: var(--danger);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.tu-item-row__remove:hover {
+  filter: brightness(1.05);
+}
+
+.tu-item-row__side {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 5px;
+}
+
+.tu-ex-duration {
+  margin: 0;
+  width: 4.75rem;
+  font-size: 0.84rem;
+}
+
+.tu-ex-title-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 12px;
+}
+
+.tu-ex-title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.35;
+  flex: 1 1 220px;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.tu-ex-title-placeholder {
+  font-size: 0.9rem;
+  color: var(--text3);
+  font-style: italic;
+}
+
+.tu-ex-inline-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.tu-ex-meta-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+}
+
+.tu-ex-variant-select {
+  margin: 0;
+  flex: 0 1 min(220px, 100%);
+  font-size: 0.82rem;
+  min-width: 0;
+}
+
+.training-unit-sections-editor--wide .tu-ex-variant-select--wide {
+  flex-basis: min(320px, 100%);
+}
+
+.tu-ex-annot {
+  flex: 1 1 140px;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.tu-ex-annot__text {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.82rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tu-ex-run-block {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  font-size: 0.78rem;
+}
+
+.tu-ex-run-block__controls {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 5px;
+}
+
+.tu-ex-run-block__controls .form-input:first-of-type {
+  max-width: 120px;
+}
+
+.tu-textedit-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10060;
+  background: rgba(15, 23, 42, 0.42);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 8vh 14px 40px;
+}
+
+.tu-textedit-panel {
+  width: 100%;
+  max-width: 480px;
+  background: var(--surface);
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  padding: 1rem 1.15rem 1.1rem;
+  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.22);
+}
+
+.tu-textedit-title {
+  margin: 0 0 0.65rem;
+  font-size: 1.03rem;
+}
+
+.tu-textedit-textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 100px;
+  margin-bottom: 0.85rem;
+}
+
+.tu-textedit-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
 .framework-slot-card__head {
   display: flex;
   flex-direction: row;
diff --git a/frontend/src/components/TrainingUnitSectionsEditor.jsx b/frontend/src/components/TrainingUnitSectionsEditor.jsx
index 5e82b06..3faa629 100644
--- a/frontend/src/components/TrainingUnitSectionsEditor.jsx
+++ b/frontend/src/components/TrainingUnitSectionsEditor.jsx
@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { GripVertical, Pencil } from 'lucide-react'
 import {
   defaultSection,
   exerciseRow,
@@ -6,6 +7,14 @@ import {
   sectionPlannedMinutes,
 } from '../utils/trainingUnitSectionsForm'
 
+const DND_TU_ITEM = 'application/x-shinkan-training-unit-item'
+
+function truncatePreview(text, max = 160) {
+  const t = (text || '').replace(/\s+/g, ' ').trim()
+  if (t.length <= max) return t
+  return `${t.slice(0, max - 1)}…`
+}
+
 /**
  * @param {(updater: (prev: Array) => Array) => void} props.onSectionsChange — wie React setState
  */
@@ -18,6 +27,7 @@ export default function TrainingUnitSectionsEditor({
   heading = 'Abschnitte & Übungen',
   hideHeading = false,
   wideExerciseGrid = false,
+  enableItemDragReorder = true,
 }) {
   const ensure = (prev) =>
     prev && prev.length ? prev : [defaultSection()]
@@ -105,10 +115,142 @@ export default function TrainingUnitSectionsEditor({
     )
   }
 
+  const [textEdit, setTextEdit] = useState(null)
+  const [draggingPos, setDraggingPos] = useState(null)
+  const [dropTargetPos, setDropTargetPos] = useState(null)
+
+  useEffect(() => {
+    if (!textEdit) return
+    const onKey = (e) => {
+      if (e.key === 'Escape') setTextEdit(null)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [textEdit])
+
+  const onItemDragStart = (e, sIdx, iIdx) => {
+    if (!enableItemDragReorder) return
+    e.stopPropagation()
+    try {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.setData(
+        DND_TU_ITEM,
+        JSON.stringify({ sectionIndex: sIdx, itemIndex: iIdx })
+      )
+    } catch {
+      /* ignore */
+    }
+    setDraggingPos({ sIdx, iIdx })
+  }
+
+  const clearDragChrome = () => {
+    setDraggingPos(null)
+    setDropTargetPos(null)
+  }
+
+  const onItemDragOverRow = (e, sIdx, iIdx) => {
+    if (!enableItemDragReorder) return
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      e.dataTransfer.dropEffect = 'move'
+    } catch {
+      /* ignore */
+    }
+    setDropTargetPos({ sIdx, iIdx })
+  }
+
+  const onItemDropRow = (e, toSIdx, toIdx) => {
+    if (!enableItemDragReorder) return
+    e.preventDefault()
+    e.stopPropagation()
+    let raw = ''
+    try {
+      raw = e.dataTransfer.getData(DND_TU_ITEM)
+    } catch {
+      clearDragChrome()
+      return
+    }
+    if (!raw) {
+      clearDragChrome()
+      return
+    }
+    let data
+    try {
+      data = JSON.parse(raw)
+    } catch {
+      clearDragChrome()
+      return
+    }
+    const fromS = data.sectionIndex
+    const fromI = data.itemIndex
+    if (typeof fromS !== 'number' || typeof fromI !== 'number') {
+      clearDragChrome()
+      return
+    }
+    if (fromS === toSIdx && fromI === toIdx) {
+      clearDragChrome()
+      return
+    }
+
+    patch((prev) => {
+      const list = ensure(prev)
+      if (
+        fromS < 0 ||
+        fromS >= list.length ||
+        toSIdx < 0 ||
+        toSIdx >= list.length ||
+        typeof toIdx !== 'number'
+      ) {
+        return prev
+      }
+
+      const fromItems = [...(list[fromS].items || [])]
+      if (fromI < 0 || fromI >= fromItems.length) return prev
+
+      const moved = fromItems[fromI]
+      fromItems.splice(fromI, 1)
+
+      if (fromS === toSIdx) {
+        let insertAt = toIdx
+        if (fromI < toIdx) insertAt = toIdx - 1
+        const bounded = Math.max(0, Math.min(insertAt, fromItems.length))
+        fromItems.splice(bounded, 0, moved)
+        return list.map((sec, i) => (i === fromS ? { ...sec, items: fromItems } : sec))
+      }
+
+      const toItems = [...(list[toSIdx].items || [])]
+      const insertAt = Math.max(0, Math.min(toIdx, toItems.length))
+      toItems.splice(insertAt, 0, moved)
+      return list.map((sec, i) => {
+        if (i === fromS) return { ...sec, items: fromItems }
+        if (i === toSIdx) return { ...sec, items: toItems }
+        return sec
+      })
+    })
+    clearDragChrome()
+  }
+
+  const applyTextEdit = () => {
+    if (!textEdit) return
+    const { kind, sIdx, iIdx, draft } = textEdit
+    if (kind === 'zwischen-note') {
+      updateItem(sIdx, iIdx, 'note_body', draft)
+    } else if (kind === 'exercise-notes') {
+      updateItem(sIdx, iIdx, 'notes', draft)
+    }
+    setTextEdit(null)
+  }
+
   const list = ensure(sections)
 
   return (
-    <div className="training-unit-sections-editor">
+    <div
+      className={
+        'training-unit-sections-editor' +
+        (wideExerciseGrid ? ' training-unit-sections-editor--wide' : '')
+      }
+    >
       {!hideHeading ? (
         <h3 style={{ margin: '0 0 0.75rem', fontSize: '1rem' }}>{heading}</h3>
       ) : null}
@@ -184,136 +326,185 @@ export default function TrainingUnitSectionsEditor({
               </p>
             )}
 
-            {(sec.items || []).map((it, iIdx) =>
-              it.item_type === 'note' ? (
-                <div key={`note-${sIdx}-${iIdx}`} style={{ marginTop: '0.65rem' }}>
-                  <div style={{ fontSize: '0.75rem', color: 'var(--text2)', marginBottom: '4px' }}>
-                    Zwischen-Anmerkung
-                  </div>
-                  <div style={{ display: 'flex', gap: '6px', alignItems: 'start' }}>
-                    <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '4px' }}>
+            {(sec.items || []).map((it, iIdx) => {
+              const dropHere =
+                enableItemDragReorder &&
+                dropTargetPos?.sIdx === sIdx &&
+                dropTargetPos?.iIdx === iIdx
+              const dragHere =
+                enableItemDragReorder &&
+                draggingPos?.sIdx === sIdx &&
+                draggingPos?.iIdx === iIdx
+              const rowCommon =
+                'tu-item-row' +
+                (dropHere ? ' tu-item-row--drop-target' : '') +
+                (dragHere ? ' tu-item-row--dragging' : '')
+
+              const dndRowProps = enableItemDragReorder
+                ? {
+                    onDragOver: (e) => onItemDragOverRow(e, sIdx, iIdx),
+                    onDrop: (e) => onItemDropRow(e, sIdx, iIdx),
+                  }
+                : {}
+
+              if (it.item_type === 'note') {
+                const notePv = truncatePreview(it.note_body || '', 260)
+                const noteHasText = Boolean((it.note_body || '').trim())
+                return (
+                  <div
+                    key={`note-${sIdx}-${iIdx}`}
+                    className={`${rowCommon} tu-item-row--note`}
+                    {...dndRowProps}
+                  >
+                    {enableItemDragReorder ? (
+                      <span
+                        className="tu-row-grip"
+                        draggable
+                        onDragStart={(e) => onItemDragStart(e, sIdx, iIdx)}
+                        onDragEnd={clearDragChrome}
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Eintrag ziehen"
+                      >
+                        <GripVertical size={15} strokeWidth={2} aria-hidden />
+                      </span>
+                    ) : null}
+                    <div className="tu-item-row__nudge">
                       <button
                         type="button"
+                        aria-label="Eintrag nach oben"
                         onClick={() => moveItem(sIdx, iIdx, -1)}
                         disabled={iIdx === 0}
-                        style={{ padding: '2px', opacity: iIdx === 0 ? 0.3 : 1 }}
                       >
                         ▲
                       </button>
                       <button
                         type="button"
+                        aria-label="Eintrag nach unten"
                         onClick={() => moveItem(sIdx, iIdx, 1)}
                         disabled={iIdx === sec.items.length - 1}
-                        style={{
-                          padding: '2px',
-                          opacity: iIdx === sec.items.length - 1 ? 0.3 : 1,
-                        }}
                       >
                         ▼
                       </button>
                     </div>
-                    <textarea
-                      className="form-input"
-                      rows={2}
-                      style={{ flex: 1 }}
-                      value={it.note_body}
-                      onChange={(e) => updateItem(sIdx, iIdx, 'note_body', e.target.value)}
-                      placeholder="Hinweise zwischen Übungen …"
-                    />
+                    <div className="tu-item-row__body tu-item-row__body--note">
+                      <span className="tu-item-row__meta-label">Zwischen-Anmerkung</span>
+                      <p
+                        className={`tu-item-row__preview tu-item-row__preview--clamp${noteHasText ? '' : ' tu-item-row__preview--empty'}`}
+                        title={noteHasText ? (it.note_body || '').trim() : undefined}
+                      >
+                        {noteHasText ? notePv : '—'}
+                      </p>
+                    </div>
                     <button
                       type="button"
-                      style={{ background: 'var(--danger)', color: 'white', border: 'none' }}
+                      className="tu-icon-btn"
+                      title="Zwischen-Anmerkung bearbeiten"
+                      aria-label="Zwischen-Anmerkung bearbeiten"
+                      onClick={() =>
+                        setTextEdit({
+                          kind: 'zwischen-note',
+                          sIdx,
+                          iIdx,
+                          draft: it.note_body || '',
+                        })
+                      }
+                    >
+                      <Pencil size={15} strokeWidth={2} aria-hidden />
+                    </button>
+                    <button
+                      type="button"
+                      className="tu-item-row__remove"
+                      title="Entfernen"
+                      aria-label="Zwischen-Anmerkung entfernen"
                       onClick={() => removeItem(sIdx, iIdx)}
                     >
                       ✗
                     </button>
                   </div>
-                </div>
-              ) : (
+                )
+              }
+
+              const variantOpts = Array.isArray(it.variants) ? it.variants : []
+              const exTitle =
+                it.exercise_title || (it.exercise_id ? `Übung #${it.exercise_id}` : '')
+              const annotPrev = truncatePreview(it.notes || '', 220)
+              const annotHasText = Boolean((it.notes || '').trim())
+
+              return (
                 <div
                   key={`ex-${sIdx}-${iIdx}`}
-                  style={{
-                    display: 'grid',
-                    gridTemplateColumns: wideExerciseGrid
-                      ? '32px minmax(0, 1fr) minmax(96px, 220px) 44px'
-                      : '28px minmax(0, 1fr) minmax(0, 64px) 36px',
-                    gap: '6px',
-                    alignItems: 'start',
-                    marginTop: '0.65rem',
-                    paddingTop: '0.45rem',
-                    borderTop: '1px solid rgba(0,0,0,0.06)',
-                    minWidth: 0,
-                  }}
+                  className={`${rowCommon} tu-item-row--exercise`}
+                  {...dndRowProps}
                 >
-                  <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '6px' }}>
-                    <button
-                      type="button"
-                      onClick={() => moveItem(sIdx, iIdx, -1)}
-                      disabled={iIdx === 0}
-                      style={{ padding: '2px', opacity: iIdx === 0 ? 0.3 : 1 }}
-                    >
-                      ▲
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => moveItem(sIdx, iIdx, 1)}
-                      disabled={iIdx === sec.items.length - 1}
-                      style={{
-                        padding: '2px',
-                        opacity: iIdx === sec.items.length - 1 ? 0.3 : 1,
-                      }}
-                    >
-                      ▼
-                    </button>
-                  </div>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', minWidth: 0 }}>
-                    <div
-                      style={{
-                        display: 'flex',
-                        gap: '6px',
-                        flexWrap: 'wrap',
-                        alignItems: 'center',
-                      }}
-                    >
+                  <div className="tu-item-row__mainline">
+                    {enableItemDragReorder ? (
+                      <span
+                        className="tu-row-grip"
+                        draggable
+                        onDragStart={(e) => onItemDragStart(e, sIdx, iIdx)}
+                        onDragEnd={clearDragChrome}
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Eintrag ziehen"
+                      >
+                        <GripVertical size={15} strokeWidth={2} aria-hidden />
+                      </span>
+                    ) : null}
+                    <div className="tu-item-row__nudge">
                       <button
                         type="button"
-                        className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                        style={{ margin: 0, whiteSpace: 'nowrap' }}
-                        onClick={() =>
-                          onRequestExercisePick?.({ sectionIndex: sIdx, itemIndex: iIdx })
-                        }
+                        aria-label="Eintrag nach oben"
+                        onClick={() => moveItem(sIdx, iIdx, -1)}
+                        disabled={iIdx === 0}
                       >
-                        Übung suchen…
+                        ▲
+                      </button>
+                      <button
+                        type="button"
+                        aria-label="Eintrag nach unten"
+                        onClick={() => moveItem(sIdx, iIdx, 1)}
+                        disabled={iIdx === sec.items.length - 1}
+                      >
+                        ▼
                       </button>
-                      {it.exercise_id && onPeekExercise ? (
-                        <button
-                          type="button"
-                          className="btn btn-secondary framework-ctrl framework-ctrl--xs"
-                          style={{ margin: 0 }}
-                          onClick={() => onPeekExercise(Number(it.exercise_id))}
-                        >
-                          Vorschau
-                        </button>
-                      ) : null}
-                      {(it.exercise_title || it.exercise_id) && (
-                        <span
-                          style={{
-                            fontSize: '0.82rem',
-                            flex: 1,
-                            minWidth: 0,
-                            wordBreak: 'break-word',
-                          }}
-                        >
-                          {it.exercise_title ||
-                            (it.exercise_id ? `Übung #${it.exercise_id}` : '')}
-                        </span>
-                      )}
                     </div>
-                    {(() => {
-                      const variantOpts = Array.isArray(it.variants) ? it.variants : []
-                      return (
+                    <div className="tu-item-row__body tu-item-row__body--exercise">
+                      <div className="tu-ex-title-line">
+                        {exTitle ? (
+                          <strong className="tu-ex-title">{exTitle}</strong>
+                        ) : (
+                          <span className="tu-ex-title-placeholder">Keine Übung gewählt</span>
+                        )}
+                        <span className="tu-ex-inline-actions">
+                          <button
+                            type="button"
+                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                            onClick={() =>
+                              onRequestExercisePick?.({
+                                sectionIndex: sIdx,
+                                itemIndex: iIdx,
+                              })
+                            }
+                          >
+                            {exTitle ? 'Wechseln' : 'Übung suchen…'}
+                          </button>
+                          {it.exercise_id && onPeekExercise ? (
+                            <button
+                              type="button"
+                              className="btn btn-secondary framework-ctrl framework-ctrl--xs"
+                              onClick={() => onPeekExercise(Number(it.exercise_id))}
+                            >
+                              Vorschau
+                            </button>
+                          ) : null}
+                        </span>
+                      </div>
+                      <div className="tu-ex-meta-line">
                         <select
-                          className="form-input"
+                          className={`form-input tu-ex-variant-select${
+                            wideExerciseGrid ? ' tu-ex-variant-select--wide' : ''
+                          }`}
                           value={
                             it.exercise_variant_id === '' || it.exercise_variant_id == null
                               ? ''
@@ -329,7 +520,6 @@ export default function TrainingUnitSectionsEditor({
                             )
                           }}
                           disabled={!it.exercise_id || variantOpts.length === 0}
-                          style={{ margin: 0, fontSize: '0.82rem' }}
                         >
                           <option value="">
                             {variantOpts.length === 0 ? 'Keine Varianten' : 'Stammübung'}
@@ -340,78 +530,85 @@ export default function TrainingUnitSectionsEditor({
                             </option>
                           ))}
                         </select>
-                      )
-                    })()}
-                    <textarea
-                      className="form-input"
-                      rows={2}
-                      value={it.notes || ''}
-                      onChange={(e) => updateItem(sIdx, iIdx, 'notes', e.target.value)}
-                      placeholder="Kurze Anmerkung zur Übung"
-                      style={{ fontSize: '0.82rem' }}
-                    />
-                  </div>
-                  <input
-                    type="number"
-                    className="form-input"
-                    min={1}
-                    value={it.planned_duration_min}
-                    onChange={(e) =>
-                      updateItem(sIdx, iIdx, 'planned_duration_min', e.target.value)
-                    }
-                    placeholder="min"
-                    title="Geplante Dauer (Minuten)"
-                    style={{ margin: 0 }}
-                  />
-                  <button
-                    type="button"
-                    style={{
-                      padding: '0.45rem',
-                      background: 'var(--danger)',
-                      color: 'white',
-                      border: 'none',
-                    }}
-                    onClick={() => removeItem(sIdx, iIdx)}
-                  >
-                    ✗
-                  </button>
-                  {showExecutionExtras ? (
-                    <label
-                      className="form-label"
-                      style={{
-                        gridColumn: '2 / -1',
-                        marginTop: 4,
-                        display: 'block',
-                        fontSize: '0.78rem',
-                      }}
-                    >
-                      Ist-Dauer / Anpassungen
+                        <div className="tu-ex-annot">
+                          <span
+                            className={`tu-item-row__preview tu-ex-annot__text${annotHasText ? '' : ' tu-item-row__preview--empty'}`}
+                            title={annotHasText ? (it.notes || '').trim() : undefined}
+                          >
+                            {annotHasText ? annotPrev : '—'}
+                          </span>
+                          <button
+                            type="button"
+                            className="tu-icon-btn"
+                            title="Anmerkung zur Übung"
+                            aria-label="Anmerkung zur Übung bearbeiten"
+                            onClick={() =>
+                              setTextEdit({
+                                kind: 'exercise-notes',
+                                sIdx,
+                                iIdx,
+                                draft: it.notes || '',
+                              })
+                            }
+                          >
+                            <Pencil size={15} strokeWidth={2} aria-hidden />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="tu-item-row__side">
                       <input
                         type="number"
-                        className="form-input"
+                        className="form-input tu-ex-duration"
                         min={1}
-                        value={it.actual_duration_min}
+                        value={it.planned_duration_min}
                         onChange={(e) =>
-                          updateItem(sIdx, iIdx, 'actual_duration_min', e.target.value)
+                          updateItem(sIdx, iIdx, 'planned_duration_min', e.target.value)
                         }
-                        placeholder="IST min"
-                        style={{ maxWidth: '120px' }}
-                      />
-                      <textarea
-                        className="form-input"
-                        rows={2}
-                        value={it.modifications || ''}
-                        onChange={(e) =>
-                          updateItem(sIdx, iIdx, 'modifications', e.target.value)
-                        }
-                        placeholder="Abweichungen beim Durchführen"
-                        style={{ marginTop: '6px', fontSize: '0.82rem' }}
+                        placeholder="Min"
+                        title="Geplante Dauer (Minuten)"
                       />
+                      <button
+                        type="button"
+                        className="tu-item-row__remove"
+                        title="Übung entfernen"
+                        aria-label="Übung entfernen"
+                        onClick={() => removeItem(sIdx, iIdx)}
+                      >
+                        ✗
+                      </button>
+                    </div>
+                  </div>
+
+                  {showExecutionExtras ? (
+                    <label className="tu-ex-run-block form-label">
+                      Ist-Dauer / Anpassungen
+                      <span className="tu-ex-run-block__controls">
+                        <input
+                          type="number"
+                          className="form-input"
+                          min={1}
+                          value={it.actual_duration_min}
+                          onChange={(e) =>
+                            updateItem(sIdx, iIdx, 'actual_duration_min', e.target.value)
+                          }
+                          placeholder="IST min"
+                        />
+                        <textarea
+                          className="form-input"
+                          rows={2}
+                          value={it.modifications || ''}
+                          onChange={(e) =>
+                            updateItem(sIdx, iIdx, 'modifications', e.target.value)
+                          }
+                          placeholder="Abweichungen beim Durchführen"
+                        />
+                      </span>
                     </label>
                   ) : null}
                 </div>
               )
-            )}
+            })}
 
             <div style={{ marginTop: '0.65rem', display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
               <button
@@ -440,6 +637,55 @@ export default function TrainingUnitSectionsEditor({
       >
         + Abschnitt hinzufügen
       </button>
+
+      {textEdit ? (
+        <div
+          className="tu-textedit-backdrop"
+          role="presentation"
+          onMouseDown={(e) => {
+            if (e.target === e.currentTarget) setTextEdit(null)
+          }}
+        >
+          <div
+            className="tu-textedit-panel"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="tu-textedit-title"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <h4 id="tu-textedit-title" className="tu-textedit-title">
+              {textEdit.kind === 'zwischen-note'
+                ? 'Zwischen-Anmerkung'
+                : 'Anmerkung zur Übung'}
+            </h4>
+            <textarea
+              className="form-input tu-textedit-textarea"
+              rows={5}
+              value={textEdit.draft}
+              onChange={(e) =>
+                setTextEdit((prev) => (prev ? { ...prev, draft: e.target.value } : prev))
+              }
+              placeholder={
+                textEdit.kind === 'zwischen-note'
+                  ? 'Hinweise zwischen Übungen …'
+                  : 'Kurze Anmerkung zur Übung'
+              }
+            />
+            <div className="tu-textedit-actions">
+              <button type="button" className="btn btn-primary" onClick={applyTextEdit}>
+                Übernehmen
+              </button>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={() => setTextEdit(null)}
+              >
+                Abbrechen
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }