diff --git a/backend/controllers/predefinedActivityController.js b/backend/controllers/predefinedActivityController.js
index 102a2f1..1320a7a 100644
--- a/backend/controllers/predefinedActivityController.js
+++ b/backend/controllers/predefinedActivityController.js
@@ -5,8 +5,8 @@ import fs from 'fs';
 
 export const createPredefinedActivity = async (req, res) => {
     try {
-        const { name, code, description, durationText, duration, imageLink } = req.body;
-        const predefinedActivity = await predefinedActivityService.createPredefinedActivity({ name, code, description, durationText, duration, imageLink });
+        const { name, code, description, durationText, duration, imageLink, drawingData } = req.body;
+        const predefinedActivity = await predefinedActivityService.createPredefinedActivity({ name, code, description, durationText, duration, imageLink, drawingData });
         res.status(201).json(predefinedActivity);
     } catch (error) {
         console.error('[createPredefinedActivity] - Error:', error);
@@ -42,8 +42,8 @@ export const getPredefinedActivityById = async (req, res) => {
 export const updatePredefinedActivity = async (req, res) => {
     try {
         const { id } = req.params;
-        const { name, code, description, durationText, duration, imageLink } = req.body;
-        const updatedActivity = await predefinedActivityService.updatePredefinedActivity(id, { name, code, description, durationText, duration, imageLink });
+        const { name, code, description, durationText, duration, imageLink, drawingData } = req.body;
+        const updatedActivity = await predefinedActivityService.updatePredefinedActivity(id, { name, code, description, durationText, duration, imageLink, drawingData });
         res.status(200).json(updatedActivity);
     } catch (error) {
         console.error('[updatePredefinedActivity] - Error:', error);
diff --git a/backend/controllers/predefinedActivityImageController.js b/backend/controllers/predefinedActivityImageController.js
index 9966af7..80e3e94 100644
--- a/backend/controllers/predefinedActivityImageController.js
+++ b/backend/controllers/predefinedActivityImageController.js
@@ -33,10 +33,15 @@ export const uploadPredefinedActivityImage = async (req, res) => {
       .jpeg({ quality: 85 })
       .toFile(filePath);
 
+    // Extrahiere Zeichnungsdaten aus dem Request
+    const drawingData = req.body.drawingData ? JSON.parse(req.body.drawingData) : null;
+    console.log('[uploadPredefinedActivityImage] - drawingData:', drawingData);
+
     const imageRecord = await PredefinedActivityImage.create({
       predefinedActivityId: id,
       imagePath: filePath,
       mimeType: 'image/jpeg',
+      drawingData: drawingData ? JSON.stringify(drawingData) : null,
     });
 
     // Optional: als imageLink am Activity-Datensatz setzen
diff --git a/backend/migrations/add_drawing_data_to_predefined_activity_images.sql b/backend/migrations/add_drawing_data_to_predefined_activity_images.sql
new file mode 100644
index 0000000..0eadc30
--- /dev/null
+++ b/backend/migrations/add_drawing_data_to_predefined_activity_images.sql
@@ -0,0 +1,11 @@
+-- Migration: Add drawing_data column to predefined_activity_images table
+-- Date: 2025-09-22
+-- Description: Adds drawing_data column to store Court Drawing Tool metadata
+
+ALTER TABLE `predefined_activity_images` 
+ADD COLUMN `drawing_data` TEXT NULL 
+COMMENT 'JSON string containing drawing metadata for Court Drawing Tool' 
+AFTER `mime_type`;
+
+-- Verify the column was added
+DESCRIBE `predefined_activity_images`;
diff --git a/backend/models/PredefinedActivity.js b/backend/models/PredefinedActivity.js
index 749c6a5..63c7d8d 100644
--- a/backend/models/PredefinedActivity.js
+++ b/backend/models/PredefinedActivity.js
@@ -19,6 +19,11 @@ const PredefinedActivity = sequelize.define('PredefinedActivity', {
         type: DataTypes.TEXT,
         allowNull: true,
     },
+    drawingData: {
+        type: DataTypes.TEXT,
+        allowNull: true,
+        comment: 'JSON string with metadata for Court Drawing Tool'
+    },
     durationText: {
         type: DataTypes.STRING,
         allowNull: true,
diff --git a/backend/models/PredefinedActivityImage.js b/backend/models/PredefinedActivityImage.js
index c385931..cc0db92 100644
--- a/backend/models/PredefinedActivityImage.js
+++ b/backend/models/PredefinedActivityImage.js
@@ -19,6 +19,11 @@ const PredefinedActivityImage = sequelize.define('PredefinedActivityImage', {
     type: DataTypes.STRING,
     allowNull: true,
   },
+  drawingData: {
+    type: DataTypes.TEXT,
+    allowNull: true,
+    comment: 'JSON string containing drawing metadata for Court Drawing Tool'
+  },
 }, {
   tableName: 'predefined_activity_images',
   timestamps: true,
diff --git a/backend/routes/predefinedActivityRoutes.js b/backend/routes/predefinedActivityRoutes.js
index 42873a7..ce74def 100644
--- a/backend/routes/predefinedActivityRoutes.js
+++ b/backend/routes/predefinedActivityRoutes.js
@@ -23,6 +23,7 @@ router.get('/', authenticate, getAllPredefinedActivities);
 router.get('/:id', authenticate, getPredefinedActivityById);
 router.put('/:id', authenticate, updatePredefinedActivity);
 router.post('/:id/image', authenticate, upload.single('image'), uploadPredefinedActivityImage);
+router.put('/:id/image', authenticate, upload.single('image'), uploadPredefinedActivityImage);
 router.delete('/:id/image/:imageId', authenticate, deletePredefinedActivityImage);
 router.get('/search/query', authenticate, searchPredefinedActivities);
 router.post('/merge', authenticate, mergePredefinedActivities);
diff --git a/backend/services/authService.js b/backend/services/authService.js
index f5d0f78..a054fa0 100644
--- a/backend/services/authService.js
+++ b/backend/services/authService.js
@@ -33,11 +33,11 @@ const login = async (email, password) => {
   if (!user || !(await bcrypt.compare(password, user.password))) {
     throw { status: 401, message: 'Ungültige Anmeldedaten' };
   }
-  const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, { expiresIn: '1h' });
+  const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, { expiresIn: '3h' });
   await UserToken.create({
     userId: user.id,
     token,
-    expiresAt: new Date(Date.now() + 3600 * 1000),
+    expiresAt: new Date(Date.now() + 3 * 3600 * 1000),
   });
   return { token };
 };
diff --git a/backend/services/diaryDateActivityService.js b/backend/services/diaryDateActivityService.js
index f546a0c..9cff7f6 100644
--- a/backend/services/diaryDateActivityService.js
+++ b/backend/services/diaryDateActivityService.js
@@ -2,6 +2,7 @@ import DiaryDateActivity from '../models/DiaryDateActivity.js';
 import GroupActivity from '../models/GroupActivity.js';
 import Group from '../models/Group.js';
 import PredefinedActivity from '../models/PredefinedActivity.js';
+import PredefinedActivityImage from '../models/PredefinedActivityImage.js';
 import { checkAccess } from '../utils/userUtils.js';
 import { Op } from 'sequelize';
 
@@ -12,15 +13,47 @@ class DiaryDateActivityService {
         await checkAccess(userToken, clubId);
         console.log('[DiaryDateActivityService::createActivity] - add: ', data);
         const { activity, ...restData } = data;
-        let predefinedActivity = await PredefinedActivity.findOne({ where: { name: data.activity } });
+        // Versuche, die PredefinedActivity robust zu finden:
+        // 1) per übergebener ID
+        // 2) per Name ODER Code (das Feld "activity" kann Kürzel oder Name sein)
+        // 3) erst dann neu anlegen
+        let predefinedActivity = null;
+
+        if (data.predefinedActivityId) {
+            predefinedActivity = await PredefinedActivity.findByPk(data.predefinedActivityId);
+        }
+
+        if (!predefinedActivity) {
+            const normalized = (data.activity || '').trim();
+            if (normalized) {
+                predefinedActivity = await PredefinedActivity.findOne({
+                    where: {
+                        [Op.or]: [
+                            { name: normalized },
+                            { code: normalized }
+                        ]
+                    }
+                });
+            }
+        }
+
         if (!predefinedActivity) {
             predefinedActivity = await PredefinedActivity.create({
-                name: data.activity,
-                description: '',
-                duration: data.duration
+                name: data.name || data.activity || '',
+                code: data.code || (data.activity || ''),
+                description: data.description || '',
+                duration: data.duration && data.duration !== '' ? parseInt(data.duration) : null
             });
         }
         restData.predefinedActivityId = predefinedActivity.id; 
+        
+        // Bereinige duration-Feld für DiaryDateActivity
+        if (restData.duration === '' || restData.duration === undefined) {
+            restData.duration = null;
+        } else if (typeof restData.duration === 'string') {
+            restData.duration = parseInt(restData.duration);
+        }
+        
         const maxOrderId = await DiaryDateActivity.max('orderId', {
             where: { diaryDateId: data.diaryDateId } 
         });
@@ -54,8 +87,8 @@ class DiaryDateActivityService {
                 console.log('[DiaryDateActivityService::updateActivity] - creating new PredefinedActivity');
                 predefinedActivity = await PredefinedActivity.create({
                     name: data.customActivityName,
-                    description: '',
-                    duration: data.duration || activity.duration
+                    description: data.description || '',
+                    duration: data.duration && data.duration !== '' ? parseInt(data.duration) : (activity.duration || null)
                 });
             }
             
@@ -131,9 +164,7 @@ class DiaryDateActivityService {
     }
 
     async getActivities(userToken, clubId, diaryDateId) {
-        console.log('[DiaryDateActivityService::getActivities] - check user access');
         await checkAccess(userToken, clubId);
-        console.log(`[DiaryDateActivityService::getActivities] - fetch activities for diaryDateId: ${diaryDateId}`);
         const activities = await DiaryDateActivity.findAll({
             where: { diaryDateId },
             order: [['orderId', 'ASC']],
@@ -141,6 +172,12 @@ class DiaryDateActivityService {
                 {
                     model: PredefinedActivity,
                     as: 'predefinedActivity',
+                    include: [
+                        {
+                            model: PredefinedActivityImage,
+                            as: 'images'
+                        }
+                    ]
                 },
                 {
                     model: GroupActivity, 
@@ -158,8 +195,64 @@ class DiaryDateActivityService {
                 }
             ]
         });
-        console.log(`[DiaryDateActivityService::getActivities] - found ${activities.length} activities`);
-        return activities;
+        
+        // Füge imageUrl zu jeder PredefinedActivity hinzu
+        const activitiesWithImages = await Promise.all(activities.map(async activity => {
+            // Konvertiere zu JSON und zurück, um alle Eigenschaften zu serialisieren
+            const activityData = activity.toJSON();
+            
+            if (activityData.predefinedActivity) {
+                // Hole die erste verfügbare Image-ID direkt aus der Datenbank
+                const allImages = await PredefinedActivityImage.findAll({
+                    where: { predefinedActivityId: activityData.predefinedActivity.id },
+                    order: [['createdAt', 'ASC']]
+                });
+                
+                const firstImage = allImages.length > 0 ? allImages[0] : null;
+                
+                // Füge Zeichnungsdaten hinzu, falls vorhanden
+                if (firstImage && firstImage.drawingData) {
+                    try {
+                        activityData.predefinedActivity.drawingData = JSON.parse(firstImage.drawingData);
+                    } catch (error) {
+                        console.error(`Activity ${activityData.predefinedActivity.id}: Error parsing drawingData:`, error);
+                    }
+                }
+                
+                if (firstImage) {
+                    // Füge sowohl imageUrl als auch imageLink mit Image-ID hinzu
+                    activityData.predefinedActivity.imageUrl = `/api/predefined-activities/${activityData.predefinedActivity.id}/image/${firstImage.id}`;
+                    activityData.predefinedActivity.imageLink = `/api/predefined-activities/${activityData.predefinedActivity.id}/image/${firstImage.id}`;
+                } else {
+                    // Fallback: Verwende den Basis-Pfad ohne Image-ID
+                    activityData.predefinedActivity.imageUrl = `/api/predefined-activities/${activityData.predefinedActivity.id}/image`;
+                    activityData.predefinedActivity.imageLink = `/api/predefined-activities/${activityData.predefinedActivity.id}/image`;
+                }
+            }
+            
+            // Auch für GroupActivities
+            if (activityData.groupActivities && activityData.groupActivities.length > 0) {
+                for (const groupActivity of activityData.groupActivities) {
+                    if (groupActivity.groupPredefinedActivity) {
+                        // Hole die erste verfügbare Image-ID direkt aus der Datenbank
+                        const firstImage = await PredefinedActivityImage.findOne({
+                            where: { predefinedActivityId: groupActivity.groupPredefinedActivity.id },
+                            order: [['createdAt', 'ASC']]
+                        });
+                        
+                        if (firstImage) {
+                            groupActivity.groupPredefinedActivity.imageUrl = `/api/predefined-activities/${groupActivity.groupPredefinedActivity.id}/image/${firstImage.id}`;
+                            groupActivity.groupPredefinedActivity.imageLink = `/api/predefined-activities/${groupActivity.groupPredefinedActivity.id}/image/${firstImage.id}`;
+                        } else {
+                            groupActivity.groupPredefinedActivity.imageUrl = `/api/predefined-activities/${groupActivity.groupPredefinedActivity.id}/image`;
+                            groupActivity.groupPredefinedActivity.imageLink = `/api/predefined-activities/${groupActivity.groupPredefinedActivity.id}/image`;
+                        }
+                    }
+                }
+            }
+            return activityData;
+        }));
+        return activitiesWithImages;
     }
 
     async addGroupActivity(userToken, clubId, diaryDateId, groupId, activity) {
diff --git a/backend/services/predefinedActivityService.js b/backend/services/predefinedActivityService.js
index 8152d3a..2dd9cdd 100644
--- a/backend/services/predefinedActivityService.js
+++ b/backend/services/predefinedActivityService.js
@@ -15,6 +15,7 @@ class PredefinedActivityService {
             durationText: data.durationText,
             duration: data.duration,
             imageLink: data.imageLink,
+            drawingData: data.drawingData ? JSON.stringify(data.drawingData) : null,
         });
     }
 
@@ -32,6 +33,7 @@ class PredefinedActivityService {
             durationText: data.durationText,
             duration: data.duration,
             imageLink: data.imageLink,
+            drawingData: data.drawingData ? JSON.stringify(data.drawingData) : null,
         });
     }
 
diff --git a/frontend/src/components/CourtDrawingRender.vue b/frontend/src/components/CourtDrawingRender.vue
new file mode 100644
index 0000000..24225b2
--- /dev/null
+++ b/frontend/src/components/CourtDrawingRender.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="render-container">
+    <canvas
+      ref="canvas"
+      :width="config.canvas.width"
+      :height="config.canvas.height"
+      style="margin:0 auto;"
+    ></canvas>
+  </div>
+  
+</template>
+
+<script>
+export default {
+  name: 'CourtDrawingRender',
+  props: {
+    drawingData: {
+      type: Object,
+      required: true
+    },
+    width: {
+      type: Number,
+      default: 600
+    },
+    height: {
+      type: Number,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      canvas: null,
+      ctx: null,
+      config: {
+        // Mehr Platz links für die drei Startkreise (Rand außerhalb des Tisches)
+        canvas: { width: 640, height: 400 },
+        table: {
+          // Tabelle etwas schmaler und weiter rechts platzieren
+          width: 500,
+          height: 300,
+          color: '#2d5a2d',
+          borderWidth: 2,
+          borderColor: '#000000',
+          outerFrameWidth: 5,
+          outerFrameColor: '#ffffff',
+          outerFrameBorderWidth: 0.5,
+          outerFrameBorderColor: '#000000'
+        },
+        horizontalLine: { color: '#cfd8dc', width: 2, gap: 10, edgeMargin: 10 },
+        net: { color: '#ffffff', width: 4, overhang: 14, borderColor: '#000000', borderWidth: 0.5 },
+        serviceLine: { color: 'rgba(255,255,255,0.0)', width: 0 },
+        startCircles: {
+          radius: 10,
+          // Abstand vom linken Canvas-Rand (größer = weiter links, da wir von tableX abziehen)
+          x: 20,
+          topYOffset: 35,
+          bottomYOffset: 35,
+          selectedColor: '#ff4444',
+          unselectedColor: '#9e9e9e',
+          selectedBorderColor: '#ffffff',
+          unselectedBorderColor: '#555555',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1
+        },
+        arrows: {
+          primaryColor: '#d32f2f', // rechts -> target (rot)
+          secondaryColor: '#1565c0', // zurück (blau)
+          width: 6,
+          headLength: 24,
+          vhOffsetX: 5,
+          vhOffsetY: 8,
+          rhOffsetX: 10,
+          rhOffsetY: 0
+        },
+        targetCircles: {
+          radius: 13,
+          rightXOffset: 20,
+          middleXOffset: 40,
+          topYOffset: 45,
+          bottomYOffset: 45,
+          transparency: 0.25
+        },
+        leftTargetCircles: {
+          radius: 10,
+          leftXOffset: 20,
+          rightXOffset: 40,
+          topYOffset: 40,
+          bottomYOffset: 40
+        },
+        hitMarker: {
+          radius: 10.5,
+          fill: '#ffffff',
+          stroke: '#000000',
+          lineWidth: 1
+        }
+      }
+    };
+  },
+  watch: {
+    drawingData: {
+      handler() {
+        this.redraw();
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    // apply custom dimensions if provided
+    this.config.canvas.width = this.width || 600;
+    this.config.canvas.height = this.height || 400;
+    this.$nextTick(() => {
+      console.log('CourtDrawingRender: mounted with drawingData =', this.drawingData);
+      this.init();
+      this.redraw();
+    });
+  },
+  methods: {
+    init() {
+      this.canvas = this.$refs.canvas;
+      if (this.canvas) {
+        this.ctx = this.canvas.getContext('2d');
+        console.log('CourtDrawingRender: canvas/context initialized');
+      }
+    },
+    redraw() {
+      console.log('CourtDrawingRender: redraw called with data =', this.drawingData);
+      if (!this.ctx) return;
+      const { width, height } = this.config.canvas;
+      // clear and background
+      this.ctx.clearRect(0, 0, width, height);
+      this.ctx.fillStyle = '#f0f0f0';
+      this.ctx.fillRect(0, 0, width, height);
+      this.drawTable();
+      this.drawStartCircles();
+      this.drawArrowsAndLabels();
+    },
+    drawTable() {
+      const ctx = this.ctx;
+      const { table, horizontalLine, net, outerFrameWidth } = {
+        ...this.config,
+        outerFrameWidth: this.config.table.outerFrameWidth
+      };
+      const tableWidth = this.config.table.width;
+      const tableHeight = this.config.table.height;
+      const tableX = (this.config.canvas.width - tableWidth) / 2;
+      const tableY = (this.config.canvas.height - tableHeight) / 2;
+
+      // table fill
+      ctx.fillStyle = table.color;
+      ctx.fillRect(tableX, tableY, tableWidth, tableHeight);
+
+      // table stroke
+      ctx.strokeStyle = table.borderColor;
+      ctx.lineWidth = table.borderWidth;
+      ctx.strokeRect(tableX, tableY, tableWidth, tableHeight);
+
+      // outer white frame
+      ctx.strokeStyle = table.outerFrameColor;
+      ctx.lineWidth = table.outerFrameWidth;
+      ctx.strokeRect(
+        tableX - table.outerFrameWidth,
+        tableY - table.outerFrameWidth,
+        tableWidth + table.outerFrameWidth * 2,
+        tableHeight + table.outerFrameWidth * 2
+      );
+
+      // black thin frame around white
+      ctx.strokeStyle = table.outerFrameBorderColor;
+      ctx.lineWidth = table.outerFrameBorderWidth;
+      ctx.strokeRect(
+        tableX - table.outerFrameWidth - table.outerFrameBorderWidth,
+        tableY - table.outerFrameWidth - table.outerFrameBorderWidth,
+        tableWidth + (table.outerFrameWidth + table.outerFrameBorderWidth) * 2,
+        tableHeight + (table.outerFrameWidth + table.outerFrameBorderWidth) * 2
+      );
+
+      // horizontal split line (two segments)
+      ctx.strokeStyle = horizontalLine.color;
+      ctx.lineWidth = horizontalLine.width;
+      const centerY = tableY + tableHeight / 2;
+      const centerX = tableX + tableWidth / 2;
+      const gap = horizontalLine.gap;
+      const edge = horizontalLine.edgeMargin;
+      ctx.beginPath();
+      ctx.moveTo(tableX + edge, centerY);
+      ctx.lineTo(centerX - gap, centerY);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(centerX + gap, centerY);
+      ctx.lineTo(tableX + tableWidth - edge, centerY);
+      ctx.stroke();
+
+      // net vertical
+      ctx.strokeStyle = net.color;
+      ctx.lineWidth = net.width;
+      ctx.beginPath();
+      ctx.moveTo(centerX, tableY - net.overhang);
+      ctx.lineTo(centerX, tableY + tableHeight + net.overhang);
+      ctx.stroke();
+
+      ctx.strokeStyle = net.borderColor;
+      ctx.lineWidth = net.borderWidth;
+      ctx.beginPath();
+      ctx.moveTo(centerX, tableY - net.overhang);
+      ctx.lineTo(centerX, tableY + tableHeight + net.overhang);
+      ctx.stroke();
+    },
+    drawStartCircles() {
+      const ctx = this.ctx;
+      const cfg = this.config.startCircles;
+      const tableWidth = this.config.table.width;
+      const tableHeight = this.config.table.height;
+      const tableX = (this.config.canvas.width - tableWidth) / 2;
+      const tableY = (this.config.canvas.height - tableHeight) / 2;
+
+      // Startkreis links VOR dem Tisch positionieren – nur den Kreis zeichnen,
+      // von dem auch der rote Pfeil startet
+      const circleX = tableX - cfg.x; // Links vom Tisch
+      const topY = tableY + cfg.topYOffset;
+      const midY = tableY + tableHeight / 2;
+      const botY = tableY + tableHeight - cfg.bottomYOffset;
+
+      // Mapping und Fallback: bei "AS" auf 'middle'
+      const map = { AS1: 'top', AS2: 'middle', AS3: 'bottom', AS: 'middle' };
+      const selKey = this.drawingData?.selectedStartPosition || 'AS';
+      const selectedPos = map[selKey] || 'middle';
+      const y = selectedPos === 'top' ? topY : selectedPos === 'bottom' ? botY : midY;
+
+      ctx.fillStyle = cfg.selectedColor;
+      ctx.beginPath();
+      ctx.arc(circleX, y, cfg.radius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.strokeStyle = cfg.selectedBorderColor;
+      ctx.lineWidth = cfg.selectedBorderWidth;
+      ctx.stroke();
+    },
+    computeRightTargetPosition(number) {
+      // Geometrie wie im Tool: nutzt rightXOffset/middleXOffset
+      const tableWidth = this.config.table.width;
+      const tableHeight = this.config.table.height;
+      const tableX = (this.config.canvas.width - tableWidth) / 2;
+      const tableY = (this.config.canvas.height - tableHeight) / 2;
+      const cfg = this.config.targetCircles;
+
+      const x1 = tableX + tableWidth - cfg.rightXOffset; // (1,2,3)
+      const x3 = tableX + tableWidth / 2 + cfg.middleXOffset; // (7,8,9)
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff / 2; // (4,5,6)
+
+      const positions = {
+        1: { x: x1, y: tableY + cfg.topYOffset },
+        2: { x: x1, y: tableY + tableHeight / 2 },
+        3: { x: x1, y: tableY + tableHeight - cfg.bottomYOffset },
+        4: { x: x2, y: tableY + cfg.topYOffset },
+        5: { x: x2, y: tableY + tableHeight / 2 },
+        6: { x: x2, y: tableY + tableHeight - cfg.bottomYOffset },
+        7: { x: x3, y: tableY + cfg.topYOffset },
+        8: { x: x3, y: tableY + tableHeight / 2 },
+        9: { x: x3, y: tableY + tableHeight - cfg.bottomYOffset }
+      };
+      return positions[number] || null;
+    },
+    getStartPoint() {
+      // Startpunkt wie im Tool abhängig von Schlagseite (VH/RH)
+      const sc = this.config.startCircles;
+      const ar = this.config.arrows;
+      const tblW = this.config.table.width;
+      const tblH = this.config.table.height;
+      const tableX = (this.config.canvas.width - tblW) / 2;
+      const tableY = (this.config.canvas.height - tblH) / 2;
+      const circleX = tableX - sc.x; // Kreis links vor dem Tisch
+      const map = { AS1: 'top', AS2: 'middle', AS3: 'bottom', AS: 'middle' };
+      const pos = map[this.drawingData?.selectedStartPosition] || 'middle';
+      const y = pos === 'top' ? tableY + sc.topYOffset : pos === 'bottom' ? tableY + tblH - sc.bottomYOffset : tableY + tblH / 2;
+      const isVH = (this.drawingData?.strokeType || 'VH') === 'VH';
+      const startX = isVH
+        ? circleX + sc.radius + ar.vhOffsetX
+        : circleX + sc.radius + ar.rhOffsetX;
+      // VH: unterhalb seitlich (circleRadius + vhOffsetY), RH: rechts (rhOffsetY = 0)
+      const startYOffset = isVH ? (sc.radius + ar.vhOffsetY) : ar.rhOffsetY;
+      return { x: startX, y: y + startYOffset };
+    },
+    drawArrow(ctx, from, to, color, label) {
+      const { width, headLength } = this.config.arrows;
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
+      ctx.lineWidth = width;
+      // line
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(to.x, to.y);
+      ctx.stroke();
+      // arrow head
+      const angle = Math.atan2(to.y - from.y, to.x - from.x);
+      ctx.beginPath();
+      ctx.moveTo(to.x, to.y);
+      ctx.lineTo(to.x - headLength * Math.cos(angle - Math.PI / 6), to.y - headLength * Math.sin(angle - Math.PI / 6));
+      ctx.lineTo(to.x - headLength * Math.cos(angle + Math.PI / 6), to.y - headLength * Math.sin(angle + Math.PI / 6));
+      ctx.closePath();
+      ctx.fill();
+    },
+    drawLabelBelow(ctx, text, anchor) {
+      if (!text) return;
+      ctx.font = 'bold 13px Helvetica';
+      const padding = 6;
+      const yOffset = 23; // 5px tiefer
+      const metrics = ctx.measureText(text);
+      const textWidth = metrics.width;
+      let x = anchor.x - textWidth / 2; // zentriert unter dem Punkt
+      let y = anchor.y + yOffset;
+      // clamp innerhalb Canvas
+      x = Math.max(4, Math.min(this.config.canvas.width - textWidth - 4, x));
+      y = Math.max(14, Math.min(this.config.canvas.height - 4, y));
+      ctx.fillStyle = '#ffffff';
+      ctx.strokeStyle = '#000000';
+      ctx.lineWidth = 2;
+      ctx.strokeText(text, x, y);
+      ctx.fillText(text, x, y);
+    },
+    drawArrowsAndLabels() {
+      if (!this.drawingData) return;
+      const ctx = this.ctx;
+      const from = this.getStartPoint();
+
+      // First arrow: to right target
+      const tp = Number(this.drawingData.targetPosition);
+      if (tp) {
+        const to = this.computeRightTargetPosition(tp);
+        // Zielmarkierung (unter dem Pfeilkopf)
+        this.drawHitMarker(ctx, to);
+        const strokeSide = this.drawingData.strokeType || '';
+        const spinAbbrev = this.abbrevSpin(this.drawingData.spinType);
+        // Text gehört an die Quelle (ohne "target")
+        const sourceLabel = `${strokeSide} ${spinAbbrev}`.trim();
+        const toEnd = { x: to.x - this.config.targetCircles.radius, y: to.y };
+        this.drawArrow(ctx, from, toEnd, this.config.arrows.primaryColor);
+        // Unter dem Startkreis beschriften
+        const startCenter = this.getStartCircleCenter();
+        this.drawLabelBelow(ctx, sourceLabel, startCenter);
+      }
+
+      // Second arrow (optional): from right source to left target
+      const leftTarget = this.drawingData.nextStrokeTargetPosition ? Number(this.drawingData.nextStrokeTargetPosition) : null;
+      if (tp && leftTarget) {
+        // source near previous right target
+        const sourceRightCenter = this.computeRightTargetPosition(tp);
+        // left target mapping: mirror scheme to left half
+        const toLeftCenter = this.computeLeftTargetPosition(leftTarget);
+        // Zielmarkierung links
+        this.drawHitMarker(ctx, toLeftCenter);
+        const side = this.drawingData.nextStrokeSide || '';
+        const type = this.drawingData.nextStrokeType || '';
+        // Text gehört ans Ziel (ohne "extra target")
+        const targetLabel = `${side} ${type}`.trim();
+        const sourceRight = { x: sourceRightCenter.x - this.config.targetCircles.radius, y: sourceRightCenter.y };
+        const toLeft = { x: toLeftCenter.x + this.config.leftTargetCircles.radius, y: toLeftCenter.y };
+        this.drawArrow(ctx, sourceRight, toLeft, this.config.arrows.secondaryColor);
+        // Unter dem rechten Ziel (target der ersten Linie) beschriften
+        this.drawLabelBelow(ctx, targetLabel, sourceRightCenter);
+      }
+    },
+    getStartCircleCenter() {
+      const cfg = this.config.startCircles;
+      const tableWidth = this.config.table.width;
+      const tableHeight = this.config.table.height;
+      const tableX = (this.config.canvas.width - tableWidth) / 2;
+      const tableY = (this.config.canvas.height - tableHeight) / 2;
+      const circleX = tableX - cfg.x;
+      const map = { AS1: 'top', AS2: 'middle', AS3: 'bottom', AS: 'middle' };
+      const selKey = this.drawingData?.selectedStartPosition || 'AS';
+      const selectedPos = map[selKey] || 'middle';
+      const topY = tableY + cfg.topYOffset;
+      const midY = tableY + tableHeight / 2;
+      const botY = tableY + tableHeight - cfg.bottomYOffset;
+      const y = selectedPos === 'top' ? topY : selectedPos === 'bottom' ? botY : midY;
+      return { x: circleX, y };
+    },
+    drawHitMarker(ctx, pos) {
+      if (!pos) return;
+      const mk = this.config.hitMarker;
+      ctx.beginPath();
+      ctx.arc(pos.x, pos.y, mk.radius, 0, Math.PI * 2);
+      ctx.fillStyle = mk.fill;
+      ctx.fill();
+      ctx.lineWidth = mk.lineWidth;
+      ctx.strokeStyle = mk.stroke;
+      ctx.stroke();
+    },
+    computeLeftTargetPosition(number) {
+      // Spiegelung wie im Tool: nutzt leftTargetCircles Offsets
+      const tableWidth = this.config.table.width;
+      const tableHeight = this.config.table.height;
+      const tableX = (this.config.canvas.width - tableWidth) / 2;
+      const tableY = (this.config.canvas.height - tableHeight) / 2;
+      const cfg = this.config.leftTargetCircles;
+
+      const x1 = tableX + cfg.leftXOffset; // linke Spalte (Lang)
+      const x3 = tableX + tableWidth / 2 - cfg.rightXOffset; // nah am Netz (Kurz)
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff / 2;
+
+      // Gespiegelte Y-Zuordnung wie im Tool:
+      // 1,4,7 = unten (VH gespiegelt)
+      // 2,5,8 = mitte
+      // 3,6,9 = oben (RH gespiegelt)
+      const positions = {
+        1: { x: x1, y: tableY + tableHeight - cfg.bottomYOffset },
+        2: { x: x1, y: tableY + tableHeight / 2 },
+        3: { x: x1, y: tableY + cfg.topYOffset },
+        4: { x: x2, y: tableY + tableHeight - cfg.bottomYOffset },
+        5: { x: x2, y: tableY + tableHeight / 2 },
+        6: { x: x2, y: tableY + cfg.topYOffset },
+        7: { x: x3, y: tableY + tableHeight - cfg.bottomYOffset },
+        8: { x: x3, y: tableY + tableHeight / 2 },
+        9: { x: x3, y: tableY + cfg.topYOffset }
+      };
+      return positions[number] || null;
+    },
+    abbrevSpin(spin) {
+      if (!spin) return '';
+      const map = {
+        Unterschnitt: 'US',
+        Überschnitt: 'OS',
+        Seitschnitt: 'SR',
+        Seitunterschnitt: 'SU',
+        Gegenläufer: 'GL'
+      };
+      return map[spin] || spin;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.render-container {
+  width: 100%;
+}
+canvas { display: block; max-width: 100%; height: auto; }
+</style>
+
+
diff --git a/frontend/src/components/CourtDrawingTool.vue b/frontend/src/components/CourtDrawingTool.vue
new file mode 100644
index 0000000..76cdafb
--- /dev/null
+++ b/frontend/src/components/CourtDrawingTool.vue
@@ -0,0 +1,1618 @@
+<template>
+  <div class="court-drawing-tool">
+    <div class="tool-header">
+      <h4>Tischtennis-Übungszeichnung</h4>
+  </div>
+  
+  <div class="canvas-container">
+      <canvas 
+        ref="drawingCanvas" 
+        @mousedown="startDrawing"
+        @mousemove="draw"
+        @mouseup="stopDrawing"
+        @mouseleave="stopDrawing"
+        :width="config.canvas.width"
+        :height="config.canvas.height"
+      ></canvas>
+  </div>
+    
+  <!-- Startposition und Schlagart Auswahl -->
+          <div class="exercise-selection" v-if="selectedStartPosition">
+            <h5>Übung konfigurieren</h5>
+            <div class="selection-group">
+              <!-- Schlagart Auswahl -->
+              <div class="stroke-selection">
+                <span>Aufschlag:</span>
+                <div class="stroke-buttons">
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke', { 'btn-primary': strokeType === 'VH', 'btn-secondary': strokeType !== 'VH' }]"
+                    @click="strokeType = 'VH'"
+                    title="Vorhand"
+                  >
+                    VH
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke', { 'btn-primary': strokeType === 'RH', 'btn-secondary': strokeType !== 'RH' }]"
+                    @click="strokeType = 'RH'"
+                    title="Rückhand"
+                  >
+                    RH
+                  </button>
+                </div>
+              
+              <!-- Schnittoption Auswahl -->
+              <div class="spin-selection">
+                <div class="spin-buttons">
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke-type', { 'btn-primary': spinType === 'Unterschnitt', 'btn-secondary': spinType !== 'Unterschnitt' }]"
+                    @click="spinType = 'Unterschnitt'"
+                    title="Unterschnitt"
+                  >
+                    US
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke-type', { 'btn-primary': spinType === 'Überschnitt', 'btn-secondary': spinType !== 'Überschnitt' }]"
+                    @click="spinType = 'Überschnitt'"
+                    title="Überschnitt"
+                  >
+                    OS
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke-type', { 'btn-primary': spinType === 'Seitschnitt', 'btn-secondary': spinType !== 'Seitschnitt' }]"
+                    @click="spinType = 'Seitschnitt'"
+                    title="Seitschnitt"
+                  >
+                    SR
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke-type', { 'btn-primary': spinType === 'Seitunterschnitt', 'btn-secondary': spinType !== 'Seitunterschnitt' }]"
+                    @click="spinType = 'Seitunterschnitt'"
+                    title="Seitunterschnitt"
+                  >
+                    SU
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', 'btn-stroke-type', { 'btn-primary': spinType === 'Gegenläufer', 'btn-secondary': spinType !== 'Gegenläufer' }]"
+                    @click="spinType = 'Gegenläufer'"
+                    title="Gegenläufer"
+                  >
+                    GL
+                  </button>
+                </div>
+              </div>
+            </div>
+
+              
+              <!-- Zusätzliche Schläge hinzufügen -->
+              <div class="additional-strokes" v-if="strokeType && spinType && targetPosition">
+                <div class="next-stroke-selection">
+                  <!-- Schlagart für zusätzlichen Schlag -->
+                  <div class="next-stroke-type">
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke', { 'btn-primary': nextStrokeSide === 'VH', 'btn-secondary': nextStrokeSide !== 'VH' }]"
+                      @click="nextStrokeSide = 'VH'"
+                      title="Vorhand"
+                    >
+                      VH
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke', { 'btn-primary': nextStrokeSide === 'RH', 'btn-secondary': nextStrokeSide !== 'RH' }]"
+                      @click="nextStrokeSide = 'RH'"
+                      title="Rückhand"
+                    >
+                      RH
+                    </button>
+                  </div>
+                  
+                  <div class="next-stroke-buttons">
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke-type', { 'btn-primary': nextStrokeType === 'US', 'btn-secondary': nextStrokeType !== 'US' }]"
+                      @click="nextStrokeType = 'US'"
+                      title="Schupf"
+                    >
+                      US
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke-type', { 'btn-primary': nextStrokeType === 'OS', 'btn-secondary': nextStrokeType !== 'OS' }]"
+                      @click="nextStrokeType = 'OS'"
+                      title="Konter"
+                    >
+                      OS
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke-type', { 'btn-primary': nextStrokeType === 'TS', 'btn-secondary': nextStrokeType !== 'TS' }]"
+                      @click="nextStrokeType = 'TS'"
+                      title="Topspin"
+                    >
+                      TS
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke-type', { 'btn-primary': nextStrokeType === 'FL', 'btn-secondary': nextStrokeType !== 'FL' }]"
+                      @click="nextStrokeType = 'FL'"
+                      title="Flip"
+                    >
+                      FL
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', 'btn-stroke-type', { 'btn-primary': nextStrokeType === 'BL', 'btn-secondary': nextStrokeType !== 'BL' }]"
+                      @click="nextStrokeType = 'BL'"
+                      title="Block"
+                    >
+                      BL
+                    </button>
+                  </div>
+                  <button 
+                    type="button"
+                    class="btn-primary btn-small"
+                    @click="addNextStroke"
+                  >
+                    Schlag hinzufügen
+                  </button>
+                </div>
+              </div>
+              
+              <div class="exercise-info" v-if="strokeType && spinType">
+                <p><strong>Kürzel:</strong> {{ getFullCode() }}</p>
+                <p><strong>Titel:</strong> {{ getFullTitle() }}</p>
+              </div>
+            </div>
+          </div>
+          
+      <!-- Buttons entfernt: automatische Speicherung aktiv -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CourtDrawingTool',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    activityId: {
+      type: [String, Number],
+      default: null
+    },
+    drawingData: { // Added for loading saved drawing data
+      type: Object,
+      default: null
+    },
+    allowImageUpload: { // Neu: steuert, ob das Tool ein Bild erzeugt/hochlädt
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      // Canvas-Konfiguration
+      config: {
+        canvas: {
+          width: 600,
+          height: 400
+        },
+        table: {
+          width: 500,
+          height: 300,
+          color: '#2d5a2d',
+          borderWidth: 2,
+          borderColor: '#000000',
+          outerFrameWidth: 5,
+          outerFrameColor: '#ffffff',
+          outerFrameBorderWidth: 0.5,
+          outerFrameBorderColor: '#000000'
+        },
+        net: {
+          width: 4,
+          color: '#ffffff',
+          borderWidth: 1,
+          borderColor: '#000000',
+          overhang: 15
+        },
+        horizontalLine: {
+          width: 1,
+          color: '#ffffff',
+          gap: 10,
+          edgeMargin: 10
+        },
+        serviceLine: {
+          width: 1,
+          color: '#ffffff'
+        },
+        startCircles: {
+          radius: 12,
+          x: 10,
+          topYOffset: 30,
+          bottomYOffset: 30,
+          selectedColor: '#ff0000',
+          unselectedColor: '#808080',
+          selectedBorderColor: '#ffffff',
+          unselectedBorderColor: '#000000',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1
+        },
+        targetCircles: {
+          radius: 10,
+          rightXOffset: 20,
+          middleXOffset: 40,
+          topYOffset: 40,
+          bottomYOffset: 40,
+          selectedColor: '#00ff00',
+          unselectedColor: '#ffffff',
+          selectedBorderColor: '#ffffff',
+          unselectedBorderColor: '#000000',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1,
+          font: '12px Arial',
+          textColor: '#000000',
+          transparency: 0.3
+        },
+        leftTargetCircles: {
+          radius: 10,
+          leftXOffset: 20,
+          rightXOffset: 40,
+          topYOffset: 40,
+          bottomYOffset: 40,
+          selectedColor: '#00ff00',
+          unselectedColor: '#ffffff',
+          selectedBorderColor: '#00ff00',
+          unselectedBorderColor: '#000000',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1,
+          font: '12px Arial',
+          textColor: '#000000'
+        },
+        arrow: {
+          color: '#ff0000',
+          width: 6,
+          cap: 'round',
+          headSize: 8,
+          vhOffsetX: 5,
+          vhOffsetY: 8,
+          rhOffsetX: 10,
+          rhOffsetY: 0,
+          counterFont: 'bold 14px Arial',
+          counterOffset: 15
+        },
+        pen: {
+          color: '#ff0000',
+          width: 3,
+          cap: 'round',
+          join: 'round'
+        }
+      },
+      // Canvas-Instanzen
+      canvas: null,
+      ctx: null,
+      // Zeichen-Status
+      isDrawing: false,
+      startX: 0,
+      startY: 0,
+      lastX: 0,
+      lastY: 0,
+      // Übungs-Konfiguration
+      selectedStartPosition: null,
+      selectedCirclePosition: null,
+      strokeType: 'VH',
+      spinType: '',
+      targetPosition: '',
+      exerciseCounter: 1,
+      additionalStrokes: [],
+      nextStrokeType: 'US',
+      nextStrokeSide: 'VH',
+      nextStrokeTargetPosition: ''
+    }
+  },
+  watch: {
+    strokeType() {
+      this.emitDrawingData();
+      this.updateTextFields();
+    },
+    spinType() {
+      this.drawCourt(); // Neu zeichnen wenn sich Schnittoption ändert
+      this.emitDrawingData();
+      this.updateTextFields();
+    },
+    targetPosition() {
+      this.emitDrawingData();
+      this.updateTextFields();
+    },
+    selectedStartPosition() {
+      // Neu zeichnen wenn sich die Auswahl ändert
+      if (this.canvas && this.ctx) {
+        this.drawCourt();
+      }
+      this.emitDrawingData();
+    },
+    drawingData: {
+      handler(newVal, oldVal) {
+        if (this.drawingData) {
+          this.loadDrawingFromMetadata();
+        } else if (oldVal && !newVal) {
+          // drawingData wurde auf null gesetzt - reset alle Werte und zeichne leeres Canvas
+          console.log('CourtDrawingTool: drawingData set to null, resetting all values');
+          this.resetAllValues();
+          this.clearCanvas();
+          this.drawCourt(true); // forceRedraw = true
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    console.log('CourtDrawingTool: mounted');
+    this.$nextTick(() => {
+      this.initCanvas();
+      this.drawCourt();
+      if (this.value) {
+        this.loadDrawingFromData(this.value);
+      }
+    });
+  },
+  methods: {
+    initCanvas() {
+      console.log('CourtDrawingTool: initCanvas called');
+      this.canvas = this.$refs.drawingCanvas;
+      console.log('CourtDrawingTool: canvas =', this.canvas);
+      if (this.canvas) {
+        this.ctx = this.canvas.getContext('2d');
+        console.log('CourtDrawingTool: ctx =', this.ctx);
+        this.ctx.lineCap = this.config.pen.cap;
+        this.ctx.lineJoin = this.config.pen.join;
+      } else {
+        console.error('CourtDrawingTool: Canvas not found!');
+      }
+    },
+    
+    drawCourt(forceRedraw = false) {
+      console.log('CourtDrawingTool: drawCourt called, forceRedraw:', forceRedraw);
+      const ctx = this.ctx;
+      const canvas = this.canvas;
+      const config = this.config;
+      
+      if (!ctx || !canvas) {
+        console.error('CourtDrawingTool: Canvas or context not available');
+        return;
+      }
+      
+      console.log('CourtDrawingTool: Drawing court...');
+      console.log('Canvas dimensions:', canvas.width, 'x', canvas.height);
+      
+      // Hintergrund immer zeichnen wenn forceRedraw=true, sonst nur wenn Canvas leer ist
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const isEmpty = imageData.data.every(pixel => pixel === 0);
+      
+      if (forceRedraw || isEmpty) {
+        // Hintergrund
+        ctx.fillStyle = '#f0f0f0';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        console.log('Background drawn');
+      } else {
+        console.log('Canvas not empty, skipping background');
+      }
+      
+      // Tischtennis-Tisch
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (canvas.width - tableWidth) / 2;
+      const tableY = (canvas.height - tableHeight) / 2;
+      
+      console.log('Table dimensions:', tableWidth, 'x', tableHeight);
+      console.log('Table position:', tableX, ',', tableY);
+      
+      // Tischtennis-Tisch Hintergrund
+      ctx.fillStyle = config.table.color;
+      ctx.fillRect(tableX, tableY, tableWidth, tableHeight);
+      
+      // Tischtennis-Tisch Rand
+      ctx.strokeStyle = config.table.borderColor;
+      ctx.lineWidth = config.table.borderWidth;
+      ctx.strokeRect(tableX, tableY, tableWidth, tableHeight);
+      
+      // Äußerer Rahmen (weiß für Tischbeine)
+      ctx.strokeStyle = config.table.outerFrameColor;
+      ctx.lineWidth = config.table.outerFrameWidth;
+      ctx.strokeRect(tableX - config.table.outerFrameWidth, tableY - config.table.outerFrameWidth, tableWidth + config.table.outerFrameWidth * 2, tableHeight + config.table.outerFrameWidth * 2);
+      
+      // Schwarzer Rahmen um den äußeren Rahmen
+      ctx.strokeStyle = config.table.outerFrameBorderColor;
+      ctx.lineWidth = config.table.outerFrameBorderWidth;
+      ctx.strokeRect(tableX - config.table.outerFrameWidth - config.table.outerFrameBorderWidth, tableY - config.table.outerFrameWidth - config.table.outerFrameBorderWidth, tableWidth + (config.table.outerFrameWidth + config.table.outerFrameBorderWidth) * 2, tableHeight + (config.table.outerFrameWidth + config.table.outerFrameBorderWidth) * 2);
+      
+      // Mittellinie (dünnere weiße horizontale Linie in der Mitte, geteilt)
+      ctx.strokeStyle = config.horizontalLine.color;
+      ctx.lineWidth = config.horizontalLine.width;
+      const centerX = tableX + tableWidth / 2;
+      const centerY = tableY + tableHeight / 2;
+      const gap = config.horizontalLine.gap;
+      const edgeMargin = config.horizontalLine.edgeMargin;
+      
+      // Linke Hälfte der horizontalen Linie
+      ctx.beginPath();
+      ctx.moveTo(tableX + edgeMargin, centerY);
+      ctx.lineTo(centerX - gap, centerY);
+      ctx.stroke();
+      
+      // Rechte Hälfte der horizontalen Linie
+      ctx.beginPath();
+      ctx.moveTo(centerX + gap, centerY);
+      ctx.lineTo(tableX + tableWidth - edgeMargin, centerY);
+      ctx.stroke();
+      
+      // Netz (dicke weiße vertikale Linie in der Mitte mit Überstand)
+      ctx.strokeStyle = config.net.color;
+      ctx.lineWidth = config.net.width;
+      const verticalOverhang = config.net.overhang;
+      ctx.beginPath();
+      ctx.moveTo(tableX + tableWidth / 2, tableY - verticalOverhang);
+      ctx.lineTo(tableX + tableWidth / 2, tableY + tableHeight + verticalOverhang);
+      ctx.stroke();
+      
+      // Schwarzer Rahmen um das Netz (vertikale Linie)
+      ctx.strokeStyle = config.net.borderColor;
+      ctx.lineWidth = config.net.borderWidth;
+      ctx.beginPath();
+      ctx.moveTo(tableX + tableWidth / 2, tableY - verticalOverhang);
+      ctx.lineTo(tableX + tableWidth / 2, tableY + tableHeight + verticalOverhang);
+      ctx.stroke();
+      
+      // Service-Bereiche (nur vertikale Linien, keine horizontalen)
+      const serviceWidth = tableWidth / 2;
+      
+      // Service-Bereiche zeichnen (nur vertikale Trennlinien)
+      ctx.strokeStyle = config.serviceLine.color;
+      ctx.lineWidth = config.serviceLine.width;
+      
+      // Vertikale Trennlinie zwischen linken und rechten Bereichen
+      ctx.beginPath();
+      ctx.moveTo(tableX + serviceWidth, tableY);
+      ctx.lineTo(tableX + serviceWidth, tableY + tableHeight);
+      ctx.stroke();
+      
+      // Startpositionen (drei Kreise am linken Bildrand)
+      const circleRadius = config.startCircles.radius;
+      const circleX = config.startCircles.x;
+      const topCircleY = tableY + config.startCircles.topYOffset;
+      const middleCircleY = tableY + tableHeight / 2;
+      const bottomCircleY = tableY + tableHeight - config.startCircles.bottomYOffset;
+      
+      const circles = [
+        { x: circleX, y: topCircleY, position: 'top' },
+        { x: circleX, y: middleCircleY, position: 'middle' },
+        { x: circleX, y: bottomCircleY, position: 'bottom' }
+      ];
+      
+      circles.forEach(circle => {
+        const isSelected = this.selectedCirclePosition === circle.position;
+        const hasSelection = this.selectedCirclePosition !== null;
+        
+        // Transparenz setzen für nicht-ausgewählte Kreise
+        if (hasSelection && !isSelected) {
+          ctx.globalAlpha = 0.3; // Teiltransparent für nicht-ausgewählte
+        } else {
+          ctx.globalAlpha = 1.0; // Vollständig sichtbar für ausgewählten
+        }
+        
+        // Kreis füllen
+        ctx.fillStyle = isSelected ? config.startCircles.selectedColor : config.startCircles.unselectedColor;
+        ctx.beginPath();
+        ctx.arc(circle.x, circle.y, circleRadius, 0, 2 * Math.PI);
+        ctx.fill();
+        
+        // Kreis rand
+        ctx.strokeStyle = isSelected ? config.startCircles.selectedBorderColor : config.startCircles.unselectedBorderColor;
+        ctx.lineWidth = isSelected ? config.startCircles.selectedBorderWidth : config.startCircles.unselectedBorderWidth;
+        ctx.stroke();
+        
+        // Transparenz zurücksetzen
+        ctx.globalAlpha = 1.0;
+      });
+      
+      // Zielpositionen (9 Kreise mit Zahlen) - nur anzeigen wenn Schnittoption gewählt
+      if (this.spinType) {
+        this.drawTargetPositions(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+    },
+    
+    drawTargetPositions(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config.targetCircles;
+      const targetRadius = config.radius;
+      const numberFont = config.font;
+      
+      const x1 = tableX + tableWidth - config.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      // Positionen der 9 Kreise
+      const positions = [
+        // Rechts (1, 2, 3) - am rechten Tischrand: L (Lang)
+        { x: x1, y: tableY + config.topYOffset, number: 1, label: 'VHL' }, // Vorhand Lang
+        { x: x1, y: tableY + tableHeight/2, number: 2, label: 'ML' }, // Mitte Lang
+        { x: x1, y: tableY + tableHeight - config.bottomYOffset, number: 3, label: 'RHL' }, // Rückhand Lang
+        // Mitte (4, 5, 6) - zwischen 1-3 und 7-9: H (Halblang)
+        { x: x2, y: tableY + config.topYOffset, number: 4, label: 'VHH' }, // Vorhand Halblang
+        { x: x2, y: tableY + tableHeight/2, number: 5, label: 'MH' }, // Mitte Halblang
+        { x: x2, y: tableY + tableHeight - config.bottomYOffset, number: 6, label: 'RHH' }, // Rückhand Halblang
+        // Zwischen Netz und Mitte (7, 8, 9) - näher am Netz: K (Kurz)
+        { x: x3, y: tableY + config.topYOffset, number: 7, label: 'VHK' }, // Vorhand Kurz
+        { x: x3, y: tableY + tableHeight/2, number: 8, label: 'MK' }, // Mitte Kurz
+        { x: x3, y: tableY + tableHeight - config.bottomYOffset, number: 9, label: 'RHK' } // Rückhand Kurz
+      ];
+      
+      positions.forEach(pos => {
+        const isSelected = this.targetPosition === pos.number.toString();
+        const isTargetSelected = this.targetPosition !== '' && this.targetPosition !== null;
+        
+        // Transparenz für nicht-ausgewählte Kreise wenn ein Target ausgewählt ist
+        if (isTargetSelected && !isSelected) {
+          ctx.globalAlpha = config.transparency;
+        } else {
+          ctx.globalAlpha = 1.0;
+        }
+        
+        // Kreis zeichnen
+        ctx.fillStyle = isSelected ? config.selectedColor : config.unselectedColor;
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, targetRadius, 0, 2 * Math.PI);
+        ctx.fill();
+        
+        // Kreis rand
+        ctx.strokeStyle = isSelected ? config.selectedBorderColor : config.unselectedBorderColor;
+        ctx.lineWidth = isSelected ? config.selectedBorderWidth : config.unselectedBorderWidth;
+        ctx.stroke();
+        
+        // Zahl zeichnen (im Kreis)
+        ctx.fillStyle = config.textColor;
+        ctx.font = numberFont;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(pos.number.toString(), pos.x, pos.y);
+        
+        // Alpha zurücksetzen
+        ctx.globalAlpha = 1.0;
+      });
+      
+      // Roten Pfeil vom Startposition-Kreis zur ausgewählten Zielposition zeichnen
+      if (this.targetPosition && this.selectedCirclePosition) {
+        this.drawArrowToTarget(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+      
+      // Kreise für zusätzliche Schläge auf der linken Seite anzeigen
+      // Sollen bereits erscheinen, sobald rechts alles gewählt ist (Aufschlag-Seite):
+      // also wenn strokeType, spinType und targetPosition gesetzt sind.
+      // Zusätzlich weiterhin, wenn bereits nextStrokeType/Side gewählt wurden.
+      if ((this.strokeType && this.spinType && this.targetPosition) ||
+          (this.nextStrokeType && this.nextStrokeSide && this.targetPosition)) {
+        this.drawLeftSideTargetCircles(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+      
+      // Zusätzlichen Pfeil vom rechten Source zum linken Target zeichnen (wenn linker Target ausgewählt)
+      if (this.nextStrokeTargetPosition && this.targetPosition) {
+        this.drawArrowToLeftTarget(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+    },
+    
+    drawArrowToTarget(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config;
+      // Startposition-Kreis Koordinaten ermitteln
+      const circleRadius = config.startCircles.radius;
+      const circleX = config.startCircles.x;
+      let startY;
+      
+      switch(this.selectedCirclePosition) {
+        case 'top':
+          startY = tableY + config.startCircles.topYOffset;
+          break;
+        case 'middle':
+          startY = tableY + tableHeight / 2;
+          break;
+        case 'bottom':
+          startY = tableY + tableHeight - config.startCircles.bottomYOffset;
+          break;
+        default:
+          return;
+      }
+      
+      // Zielposition-Kreis Koordinaten ermitteln
+      const targetRadius = config.targetCircles.radius;
+      const x1 = tableX + tableWidth - config.targetCircles.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.targetCircles.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      
+      let targetX, targetY;
+      const targetNum = parseInt(this.targetPosition);
+      
+      // X-Koordinate basierend auf Target-Nummer
+      if (targetNum >= 1 && targetNum <= 3) {
+        targetX = x1;
+      } else if (targetNum >= 4 && targetNum <= 6) {
+        targetX = x2;
+      } else if (targetNum >= 7 && targetNum <= 9) {
+        targetX = x3;
+      } else {
+        return;
+      }
+      
+      // Y-Koordinate basierend auf Target-Nummer
+      if (targetNum === 1 || targetNum === 4 || targetNum === 7) {
+        targetY = tableY + config.targetCircles.topYOffset;
+      } else if (targetNum === 2 || targetNum === 5 || targetNum === 8) {
+        targetY = tableY + tableHeight/2;
+      } else if (targetNum === 3 || targetNum === 6 || targetNum === 9) {
+        targetY = tableY + tableHeight - config.targetCircles.bottomYOffset;
+      } else {
+        return;
+      }
+      
+      // Pfeil zeichnen
+      ctx.strokeStyle = config.arrow.color;
+      ctx.fillStyle = config.arrow.color;
+      ctx.lineWidth = config.arrow.width;
+      ctx.lineCap = config.arrow.cap;
+      
+      // Linie vom Start- zum Zielkreis (Position abhängig von Schlagart)
+      let startX, startYOffset;
+      if (this.strokeType === 'VH') {
+        // Vorhand: unterhalb seitlich des Punktes
+        startX = circleX + circleRadius + config.arrow.vhOffsetX;
+        startYOffset = circleRadius + config.arrow.vhOffsetY;
+      } else {
+        // Rückhand: rechts vom Punkt
+        startX = circleX + circleRadius + config.arrow.rhOffsetX;
+        startYOffset = config.arrow.rhOffsetY;
+      }
+      
+      const actualStartY = startY + startYOffset;
+      
+      // Übungsnummer über der Linie zeichnen
+      ctx.fillStyle = config.arrow.color;
+      ctx.font = config.arrow.counterFont;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      
+      // Position für die Nummer (Mitte der Linie, etwas höher)
+      const midX = (startX + targetX - targetRadius) / 2;
+      const midY = (actualStartY + targetY) / 2 - config.arrow.counterOffset;
+      
+      ctx.fillText("1", midX, midY);
+      
+      // Linie zeichnen
+      ctx.beginPath();
+      ctx.moveTo(startX, actualStartY);
+      ctx.lineTo(targetX - targetRadius, targetY);
+      ctx.stroke();
+      
+      // Pfeilspitze zeichnen
+      const arrowSize = config.arrow.headSize;
+      const angle = Math.atan2(targetY - actualStartY, targetX - startX);
+      
+      ctx.beginPath();
+      ctx.moveTo(targetX - targetRadius, targetY);
+      ctx.lineTo(
+        targetX - targetRadius - arrowSize * Math.cos(angle - Math.PI / 6),
+        targetY - arrowSize * Math.sin(angle - Math.PI / 6)
+      );
+      ctx.moveTo(targetX - targetRadius, targetY);
+      ctx.lineTo(
+        targetX - targetRadius - arrowSize * Math.cos(angle + Math.PI / 6),
+        targetY - arrowSize * Math.sin(angle + Math.PI / 6)
+      );
+      ctx.stroke();
+    },
+    
+    drawArrowToLeftTarget(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config;
+      
+      // Rechter Source-Kreis Koordinaten (vom ersten Pfeil)
+      const sourceRadius = config.targetCircles.radius;
+      const x1 = tableX + tableWidth - config.targetCircles.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.targetCircles.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      
+      let sourceX, sourceY;
+      const sourceNum = parseInt(this.targetPosition);
+      
+      // X-Koordinate basierend auf Source-Nummer
+      if (sourceNum >= 1 && sourceNum <= 3) {
+        sourceX = x1;
+      } else if (sourceNum >= 4 && sourceNum <= 6) {
+        sourceX = x2;
+      } else if (sourceNum >= 7 && sourceNum <= 9) {
+        sourceX = x3;
+      } else {
+        return;
+      }
+      
+      // Y-Koordinate basierend auf Source-Nummer
+      if (sourceNum === 1 || sourceNum === 4 || sourceNum === 7) {
+        sourceY = tableY + config.targetCircles.topYOffset;
+      } else if (sourceNum === 2 || sourceNum === 5 || sourceNum === 8) {
+        sourceY = tableY + tableHeight/2;
+      } else if (sourceNum === 3 || sourceNum === 6 || sourceNum === 9) {
+        sourceY = tableY + tableHeight - config.targetCircles.bottomYOffset;
+      } else {
+        return;
+      }
+      
+      // Linker Target-Kreis Koordinaten
+      const targetRadius = config.leftTargetCircles.radius;
+      const leftX1 = tableX + config.leftTargetCircles.leftXOffset;
+      const leftX3 = tableX + tableWidth / 2 - config.leftTargetCircles.rightXOffset;
+      const leftXdiff = leftX3 - leftX1;
+      const leftX2 = leftX3 - leftXdiff / 2;
+      
+      let targetX, targetY;
+      const targetNum = parseInt(this.nextStrokeTargetPosition);
+      
+      // X-Koordinate basierend auf Target-Nummer (gespiegelt)
+      if (targetNum >= 1 && targetNum <= 3) {
+        targetX = leftX1;
+      } else if (targetNum >= 4 && targetNum <= 6) {
+        targetX = leftX2;
+      } else if (targetNum >= 7 && targetNum <= 9) {
+        targetX = leftX3;
+      } else {
+        return;
+      }
+      
+      // Y-Koordinate basierend auf Target-Nummer (gespiegelt)
+      // Auf der linken Seite: 1=unten, 2=mitte, 3=oben (gespiegelt zu rechts)
+      if (targetNum === 1 || targetNum === 4 || targetNum === 7) {
+        targetY = tableY + tableHeight - config.leftTargetCircles.bottomYOffset; // Unten
+      } else if (targetNum === 2 || targetNum === 5 || targetNum === 8) {
+        targetY = tableY + tableHeight/2; // Mitte
+      } else if (targetNum === 3 || targetNum === 6 || targetNum === 9) {
+        targetY = tableY + config.leftTargetCircles.topYOffset; // Oben
+      } else {
+        return;
+      }
+      
+      // Pfeil zeichnen (von rechts nach links = blau)
+      ctx.strokeStyle = '#007bff'; // Blau
+      ctx.fillStyle = '#007bff'; // Blau
+      ctx.lineWidth = config.arrow.width;
+      ctx.lineCap = config.arrow.cap;
+      
+      // Startposition vom rechten Kreis (links vom Kreis)
+      const startX = sourceX - sourceRadius;
+      const startY = sourceY;
+      
+      // Zielposition zum linken Kreis (rechts vom Kreis)
+      const endX = targetX + targetRadius;
+      const endY = targetY;
+      
+      // Übungsnummer über der Linie zeichnen
+      ctx.fillStyle = '#007bff'; // Blau
+      ctx.font = config.arrow.counterFont;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      
+      // Position für die Nummer (Mitte der Linie, etwas höher)
+      const midX = (startX + endX) / 2;
+      const midY = (startY + endY) / 2 - config.arrow.counterOffset;
+      
+      ctx.fillText("2", midX, midY);
+      
+      // Linie zeichnen
+      ctx.beginPath();
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endX, endY);
+      ctx.stroke();
+      
+      // Pfeilspitze zeichnen
+      const arrowSize = config.arrow.headSize;
+      const angle = Math.atan2(endY - startY, endX - startX);
+      
+      ctx.beginPath();
+      ctx.moveTo(endX, endY);
+      ctx.lineTo(
+        endX - arrowSize * Math.cos(angle - Math.PI / 6),
+        endY - arrowSize * Math.sin(angle - Math.PI / 6)
+      );
+      ctx.moveTo(endX, endY);
+      ctx.lineTo(
+        endX - arrowSize * Math.cos(angle + Math.PI / 6),
+        endY - arrowSize * Math.sin(angle + Math.PI / 6)
+      );
+      ctx.stroke();
+    },
+    
+    drawLeftSideTargetCircles(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config.leftTargetCircles;
+      // Kreise auf der linken Tischhälfte (spiegelbildlich zu rechts)
+      const x1 = tableX + config.leftXOffset; // Linker Tischrand (Lang)
+      const x3 = tableX + tableWidth / 2 - config.rightXOffset; // Näher am Netz (Kurz)
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff / 2; // Mitte (Halblang)
+      
+      const positions = [
+        { x: x1, y: tableY + config.topYOffset, num: 3 },    // RH Lang (gespiegelt)
+        { x: x1, y: tableY + tableHeight / 2, num: 2 },    // M Lang
+        { x: x1, y: tableY + tableHeight - config.bottomYOffset, num: 1 }, // VH Lang (gespiegelt)
+        { x: x2, y: tableY + config.topYOffset, num: 6 },    // RH Halblang (gespiegelt)
+        { x: x2, y: tableY + tableHeight / 2, num: 5 },    // M Halblang
+        { x: x2, y: tableY + tableHeight - config.bottomYOffset, num: 4 }, // VH Halblang (gespiegelt)
+        { x: x3, y: tableY + config.topYOffset, num: 9 },    // RH Kurz (gespiegelt)
+        { x: x3, y: tableY + tableHeight / 2, num: 8 },    // M Kurz
+        { x: x3, y: tableY + tableHeight - config.bottomYOffset, num: 7 }  // VH Kurz (gespiegelt)
+      ];
+      
+      positions.forEach(pos => {
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, config.radius, 0, 2 * Math.PI);
+        ctx.fillStyle = config.unselectedColor;
+        ctx.fill();
+        
+        // Hervorhebung wenn ausgewählt
+        if (this.nextStrokeTargetPosition === pos.num.toString()) {
+          ctx.strokeStyle = config.selectedBorderColor;
+          ctx.lineWidth = config.selectedBorderWidth;
+        } else {
+          ctx.strokeStyle = config.unselectedBorderColor;
+          ctx.lineWidth = config.unselectedBorderWidth;
+        }
+        ctx.stroke();
+        
+        // Nummer in den Kreis zeichnen
+        ctx.fillStyle = config.textColor;
+        ctx.font = config.font;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(pos.num.toString(), pos.x, pos.y);
+      });
+    },
+    
+    startDrawing(e) {
+      const rect = this.canvas.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      
+      // Prüfe ob auf eine Startposition geklickt wurde
+      const clickedCircle = this.checkStartPositionClick(clickX, clickY);
+      if (clickedCircle) {
+        this.selectedCirclePosition = clickedCircle.circlePosition;
+        this.selectedStartPosition = clickedCircle.position;
+        this.drawCourt(); // Neu zeichnen für Kreis-Hervorhebung
+        this.emitDrawingData();
+        this.updateTextFields();
+        return;
+      }
+      
+      // Prüfe ob auf eine Zielposition geklickt wurde
+      const clickedTarget = this.checkTargetPositionClick(clickX, clickY);
+      if (clickedTarget) {
+        this.targetPosition = clickedTarget;
+        
+        // Wenn keine Startposition ausgewählt ist, setze standardmäßig die mittlere Startposition (AS2)
+        if (!this.selectedStartPosition) {
+          this.selectedStartPosition = 'AS2';
+          this.selectedCirclePosition = 'middle';
+        }
+        
+        this.drawCourt(); // Neu zeichnen für Zielposition-Hervorhebung
+        this.emitDrawingData();
+        this.updateTextFields();
+        return;
+      }
+      
+      // Prüfe ob auf eine linke Zielposition geklickt wurde (nur wenn Schlag für rechte Seite ausgewählt)
+      if (this.nextStrokeType && this.nextStrokeSide && this.targetPosition) {
+        const clickedLeftTarget = this.checkLeftTargetPositionClick(clickX, clickY);
+        if (clickedLeftTarget) {
+          this.nextStrokeTargetPosition = clickedLeftTarget;
+          this.drawCourt();
+          this.emitDrawingData();
+          this.updateTextFields();
+          return;
+        }
+      }
+      
+      // Nur zeichnen wenn kein Kreis geklickt wurde
+      this.isDrawing = true;
+      this.startX = clickX;
+      this.startY = clickY;
+      this.lastX = this.startX;
+      this.lastY = this.startY;
+    },
+    
+    checkStartPositionClick(x, y) {
+      const config = this.config;
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (this.canvas.width - tableWidth) / 2;
+      const tableY = (this.canvas.height - tableHeight) / 2;
+      
+      const circleRadius = config.startCircles.radius;
+      const circleX = config.startCircles.x;
+      const topCircleY = tableY + config.startCircles.topYOffset;
+      const middleCircleY = tableY + tableHeight / 2;
+      const bottomCircleY = tableY + tableHeight - config.startCircles.bottomYOffset;
+      
+      // Prüfe Abstand zu den Kreisen
+      const circles = [
+        { x: circleX, y: topCircleY, position: 'AS1', circlePosition: 'top' },
+        { x: circleX, y: middleCircleY, position: 'AS2', circlePosition: 'middle' },
+        { x: circleX, y: bottomCircleY, position: 'AS3', circlePosition: 'bottom' }
+      ];
+      
+      for (const circle of circles) {
+        const distance = Math.sqrt((x - circle.x) ** 2 + (y - circle.y) ** 2);
+        if (distance <= circleRadius) {
+          return circle; // Gibt das komplette Circle-Objekt zurück
+        }
+      }
+      
+      return null;
+    },
+    
+    checkTargetPositionClick(x, y) {
+      if (!this.spinType) return null; // Nur wenn Schnittoption gewählt
+      
+      const config = this.config;
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (this.canvas.width - tableWidth) / 2;
+      const tableY = (this.canvas.height - tableHeight) / 2;
+      
+      const targetRadius = config.targetCircles.radius;
+      
+      const x1 = tableX + tableWidth - config.targetCircles.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.targetCircles.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      
+      // Positionen der 9 Kreise (gleiche wie in drawTargetPositions)
+      const positions = [
+        // Rechts (1, 2, 3) - am rechten Tischrand: L (Lang)
+        { x: x1, y: tableY + config.targetCircles.topYOffset, number: 1, label: 'VHL' },
+        { x: x1, y: tableY + tableHeight/2, number: 2, label: 'ML' },
+        { x: x1, y: tableY + tableHeight - config.targetCircles.bottomYOffset, number: 3, label: 'RHL' },
+        // Mitte (4, 5, 6) - zwischen 1-3 und 7-9: H (Halblang)
+        { x: x2, y: tableY + config.targetCircles.topYOffset, number: 4, label: 'VHH' },
+        { x: x2, y: tableY + tableHeight/2, number: 5, label: 'MH' },
+        { x: x2, y: tableY + tableHeight - config.targetCircles.bottomYOffset, number: 6, label: 'RHH' },
+        // Zwischen Netz und Mitte (7, 8, 9) - näher am Netz: K (Kurz)
+        { x: x3, y: tableY + config.targetCircles.topYOffset, number: 7, label: 'VHK' },
+        { x: x3, y: tableY + tableHeight/2, number: 8, label: 'MK' },
+        { x: x3, y: tableY + tableHeight - config.targetCircles.bottomYOffset, number: 9, label: 'RHK' }
+      ];
+      
+      for (const pos of positions) {
+        const distance = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
+        if (distance <= targetRadius) {
+          return pos.number.toString();
+        }
+      }
+      
+      return null;
+    },
+    
+    checkLeftTargetPositionClick(x, y) {
+      const canvas = this.canvas;
+      if (!canvas) return null;
+      
+      const config = this.config;
+      // Verwende dieselben Maße wie rechts (Canvas-Maße, nicht getBoundingClientRect)
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (canvas.width - tableWidth) / 2;
+      const tableY = (canvas.height - tableHeight) / 2;
+      
+      const targetRadius = config.leftTargetCircles.radius;
+      
+      // Spiegelbildliche X-Positionen zur rechten Seite
+      const x1 = tableX + config.leftTargetCircles.leftXOffset; // Linker Tischrand (Lang)
+      const x3 = tableX + tableWidth / 2 - config.leftTargetCircles.rightXOffset; // Näher am Netz (Kurz)
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff / 2; // Mitte (Halblang)
+      
+      const positions = [
+        { x: x1, y: tableY + config.leftTargetCircles.topYOffset, num: 3 },    // RH Lang (gespiegelt)
+        { x: x1, y: tableY + tableHeight / 2, num: 2 },    // M Lang
+        { x: x1, y: tableY + tableHeight - config.leftTargetCircles.bottomYOffset, num: 1 }, // VH Lang (gespiegelt)
+        { x: x2, y: tableY + config.leftTargetCircles.topYOffset, num: 6 },    // RH Halblang (gespiegelt)
+        { x: x2, y: tableY + tableHeight / 2, num: 5 },    // M Halblang
+        { x: x2, y: tableY + tableHeight - config.leftTargetCircles.bottomYOffset, num: 4 }, // VH Halblang (gespiegelt)
+        { x: x3, y: tableY + config.leftTargetCircles.topYOffset, num: 9 },    // RH Kurz (gespiegelt)
+        { x: x3, y: tableY + tableHeight / 2, num: 8 },    // M Kurz
+        { x: x3, y: tableY + tableHeight - config.leftTargetCircles.bottomYOffset, num: 7 }  // VH Kurz (gespiegelt)
+      ];
+      
+      for (const pos of positions) {
+        const distance = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
+        if (distance <= targetRadius) {
+          return pos.num.toString();
+        }
+      }
+      
+      return null;
+    },
+    
+    draw(e) {
+      if (!this.isDrawing) return;
+      
+      const rect = this.canvas.getBoundingClientRect();
+      const currentX = e.clientX - rect.left;
+      const currentY = e.clientY - rect.top;
+      
+      this.ctx.strokeStyle = this.config.pen.color;
+      this.ctx.lineWidth = this.config.pen.width;
+      
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.lastX, this.lastY);
+      this.ctx.lineTo(currentX, currentY);
+      this.ctx.stroke();
+      
+      this.lastX = currentX;
+      this.lastY = currentY;
+    },
+    
+    stopDrawing() {
+      if (!this.isDrawing) return;
+      this.isDrawing = false;
+    },
+    
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.drawCourt();
+    },
+    
+    testDraw() {
+      console.log('CourtDrawingTool: testDraw called');
+      console.log('Canvas:', this.canvas);
+      console.log('Context:', this.ctx);
+      
+      if (!this.canvas || !this.ctx) {
+        console.error('Canvas or context not available, trying to reinitialize...');
+        this.initCanvas();
+      }
+      
+      if (this.canvas && this.ctx) {
+        console.log('Drawing simple test...');
+        
+        // Einfacher Test: Roter Kreis
+        this.ctx.fillStyle = 'red';
+        this.ctx.beginPath();
+        this.ctx.arc(300, 200, 50, 0, 2 * Math.PI);
+        this.ctx.fill();
+        
+        console.log('Red circle drawn');
+      } else {
+        console.error('Still no canvas or context available');
+      }
+    },
+    
+  async saveDrawing() {
+      console.log('CourtDrawingTool: saveDrawing called');
+      
+      try {
+        const dataURL = this.canvas.toDataURL('image/png');
+        console.log('CourtDrawingTool: dataURL created, length:', dataURL.length);
+        
+        this.$emit('input', dataURL);
+        
+        // Erstelle Zeichnungsdaten für Metadaten
+        const drawingData = {
+          selectedStartPosition: this.selectedStartPosition,
+          strokeType: this.strokeType,
+          spinType: this.spinType,
+          targetPosition: this.targetPosition,
+          nextStrokeType: this.nextStrokeType,
+          nextStrokeSide: this.nextStrokeSide,
+          nextStrokeTargetPosition: this.nextStrokeTargetPosition,
+          exerciseCounter: this.exerciseCounter,
+          additionalStrokes: this.additionalStrokes,
+          timestamp: new Date().toISOString()
+        };
+        
+        console.log('CourtDrawingTool: drawingData created:', drawingData);
+      // Immer Metadaten nach oben geben
+      this.$emit('update-drawing-data', drawingData);
+      
+      if (this.allowImageUpload) {
+        // Konvertiere DataURL zu Blob für Upload
+        const response = await fetch(dataURL);
+        const blob = await response.blob();
+        console.log('CourtDrawingTool: blob created, size:', blob.size);
+        
+        // Erstelle File-Objekt
+        const file = new File([blob], `exercise-${Date.now()}.png`, { type: 'image/png' });
+        console.log('CourtDrawingTool: file created:', file);
+        console.log('CourtDrawingTool: file type:', file.type);
+        console.log('CourtDrawingTool: file size:', file.size);
+        
+        // Emittiere das File und die Zeichnungsdaten für Upload
+        console.log('CourtDrawingTool: emitting upload-image event');
+        this.$emit('upload-image', file, drawingData);
+        console.log('CourtDrawingTool: upload-image event emitted');
+      } else {
+        // Kein Bild-Upload mehr: gebe lediglich die Zeichnungsdaten an den Parent weiter,
+        // damit Felder (Kürzel/Name/Beschreibung) gefüllt werden können
+        this.$emit('update-fields', {
+          code: this.getFullCode ? this.getFullCode() : '',
+          name: this.getFullTitle ? this.getFullTitle() : '',
+          description: ''
+        });
+      }
+      } catch (error) {
+        console.error('CourtDrawingTool: Error in saveDrawing:', error);
+      }
+    },
+    
+    loadDrawing() {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            this.loadDrawingFromData(e.target.result);
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      input.click();
+    },
+    
+    resetAllValues() {
+      console.log('CourtDrawingTool: Resetting all values to initial state');
+      this.selectedStartPosition = null;
+      this.selectedCirclePosition = null;
+      this.strokeType = null;
+      this.spinType = null;
+      this.targetPosition = null;
+      this.nextStrokeType = null;
+      this.nextStrokeSide = null;
+      this.nextStrokeTargetPosition = null;
+      this.exerciseCounter = 1;
+      this.additionalStrokes = [];
+      this.updateTextFields();
+    },
+    
+    loadDrawingFromMetadata() {
+      if (this.drawingData) {
+        console.log('CourtDrawingTool: Loading drawing from metadata:', this.drawingData);
+        
+        // Lade alle Zeichnungsdaten
+        this.selectedStartPosition = this.drawingData.selectedStartPosition || null;
+        this.strokeType = this.drawingData.strokeType || null;
+        this.spinType = this.drawingData.spinType || null;
+        this.targetPosition = this.drawingData.targetPosition || null;
+        this.nextStrokeType = this.drawingData.nextStrokeType || null;
+        this.nextStrokeSide = this.drawingData.nextStrokeSide || null;
+        this.nextStrokeTargetPosition = this.drawingData.nextStrokeTargetPosition || null;
+        this.exerciseCounter = this.drawingData.exerciseCounter || 1;
+        this.additionalStrokes = this.drawingData.additionalStrokes || [];
+        
+        // Setze selectedCirclePosition basierend auf selectedStartPosition
+        if (this.selectedStartPosition === 'AS') {
+          this.selectedCirclePosition = 'middle'; // Standard für AS
+        } else if (this.selectedStartPosition === 'AS1') {
+          this.selectedCirclePosition = 'top';
+        } else if (this.selectedStartPosition === 'AS2') {
+          this.selectedCirclePosition = 'middle';
+        } else if (this.selectedStartPosition === 'AS3') {
+          this.selectedCirclePosition = 'bottom';
+        }
+        
+        console.log('CourtDrawingTool: Loaded values:', {
+          selectedStartPosition: this.selectedStartPosition,
+          selectedCirclePosition: this.selectedCirclePosition,
+          strokeType: this.strokeType,
+          spinType: this.spinType,
+          targetPosition: this.targetPosition
+        });
+        
+        // Aktualisiere die Textfelder
+        this.updateTextFields();
+        
+        // Zeichne das Canvas neu
+        this.$nextTick(() => {
+          this.drawCourt();
+        });
+        
+        console.log('CourtDrawingTool: Drawing loaded from metadata');
+      }
+    },
+    
+    loadDrawingFromData(dataURL) {
+      const img = new Image();
+      img.onload = () => {
+        this.clearCanvas();
+        this.ctx.drawImage(img, 0, 0);
+      };
+      img.src = dataURL;
+    },
+    
+    
+    getFullCode() {
+      if (!this.selectedStartPosition || !this.strokeType) return '';
+      
+      // Kürzel-Mapping für Schnittoptionen
+      const spinCodeMap = {
+        'Unterschnitt': 'US',
+        'Überschnitt': 'OS', 
+        'Seitschnitt': 'SR',
+        'Seitunterschnitt': 'SU',
+        'Gegenläufer': 'GL'
+      };
+      
+      // Suffix-Mapping für Startposition (an AS direkt anhängen, ohne Leerzeichen)
+      const startSuffixMap = {
+        'AS1': 'vL',
+        'AS2': 'vM',
+        'AS3': 'vR'
+      };
+      const startSuffix = startSuffixMap[this.selectedStartPosition] || '';
+      const startCode = `AS${startSuffix}`;
+      
+      // Label-Mapping für erstes Ziel (Hauptpfeil): altes Schema
+      const mainTargetLabelMap = {
+        '1': 'VH L', '2': 'M L', '3': 'RH L',
+        '4': 'VH H', '5': 'M H', '6': 'RH H',
+        '7': 'VH K', '8': 'M K', '9': 'RH K'
+      };
+      // Label-Mapping für Zusatzschläge: wie Hauptziel (VH L, M L, RH L ...)
+      const additionalTargetLabelMap = mainTargetLabelMap;
+      
+      let code = `${startCode} ${this.strokeType}`;
+      if (this.spinType) {
+        const spinCode = spinCodeMap[this.spinType] || this.spinType;
+        code += ` ${spinCode}`;
+      }
+      if (this.targetPosition) {
+        const targetLabel = mainTargetLabelMap[this.targetPosition] || this.targetPosition;
+        code += ` → ${targetLabel}`;
+      }
+      
+      // Zusätzliche Schläge hinzufügen
+      if (this.additionalStrokes.length > 0) {
+        this.additionalStrokes.forEach(stroke => {
+          const targetLabel = additionalTargetLabelMap[stroke.targetPosition] || stroke.targetPosition;
+          code += ` / ${stroke.side} ${stroke.type} → ${targetLabel}`;
+        });
+      }
+      
+      return code;
+    },
+    
+    getFullTitle() {
+      if (!this.selectedStartPosition || !this.strokeType) return '';
+      
+      const strokeName = this.strokeType === 'VH' ? 'Vorhand' : 'Rückhand';
+      let title = `Aufschlag ${strokeName}`;
+      if (this.spinType) {
+        title = `Aufschlag ${strokeName} ${this.spinType}`;
+      }
+      if (this.targetPosition) {
+        // Ausgeschriebene Beschreibungen für Zielpositionen
+        const targetDescriptionMap = {
+          '1': 'Vorhand Lang', '2': 'Mitte Lang', '3': 'Rückhand Lang',
+          '4': 'Vorhand Halblang', '5': 'Mitte Halblang', '6': 'Rückhand Halblang',
+          '7': 'Vorhand Kurz', '8': 'Mitte Kurz', '9': 'Rückhand Kurz'
+        };
+        const targetDescription = targetDescriptionMap[this.targetPosition] || this.targetPosition;
+        title += ` → ${targetDescription}`;
+      }
+      
+      // Zusätzliche Schläge hinzufügen
+      if (this.additionalStrokes.length > 0) {
+        this.additionalStrokes.forEach(stroke => {
+          const strokeNameMap = {
+            'US': 'Schupf', 'OS': 'Konter', 'TS': 'Topspin', 'FL': 'Flip', 'BL': 'Block'
+          };
+          const sideNameMap = {
+            'VH': 'Vorhand', 'RH': 'Rückhand'
+          };
+          const targetDescriptionMap = {
+            '1': 'Vorhand Lang', '2': 'Mitte Lang', '3': 'Rückhand Lang',
+            '4': 'Vorhand Halblang', '5': 'Mitte Halblang', '6': 'Rückhand Halblang',
+            '7': 'Vorhand Kurz', '8': 'Mitte Kurz', '9': 'Rückhand Kurz'
+          };
+          const strokeName = strokeNameMap[stroke.type] || stroke.type;
+          const sideName = sideNameMap[stroke.side] || stroke.side;
+          const targetDescription = targetDescriptionMap[stroke.targetPosition] || stroke.targetPosition;
+          title += ` / ${sideName} ${strokeName} → ${targetDescription}`;
+        });
+      }
+      
+      return title;
+    },
+    
+    addNextStroke() {
+      if (!this.nextStrokeTargetPosition) return;
+      
+      // Neuen Schlag zur Liste hinzufügen
+      this.additionalStrokes.push({
+        side: this.nextStrokeSide,
+        type: this.nextStrokeType,
+        targetPosition: this.nextStrokeTargetPosition,
+        counter: this.exerciseCounter + this.additionalStrokes.length + 1
+      });
+      
+      // Counter erhöhen
+      this.exerciseCounter++;
+      
+      // Textfelder aktualisieren
+      this.updateTextFields();
+      
+      // Canvas neu zeichnen
+      this.drawCourt();
+      this.emitDrawingData();
+    },
+    
+    updateTextFields() {
+      if (!this.selectedStartPosition || !this.strokeType) return;
+      
+      const code = this.getFullCode();
+      const title = this.getFullTitle();
+      const description = `Tischtennis-Übung: ${title} von Position ${this.selectedStartPosition}`;
+      
+      // Event an Parent-Komponente senden
+      this.$emit('update-fields', {
+        code: code,
+        name: title,
+        description: description
+      });
+    }
+    ,
+    emitDrawingData() {
+      const drawingData = {
+        selectedStartPosition: this.selectedStartPosition,
+        strokeType: this.strokeType,
+        spinType: this.spinType,
+        targetPosition: this.targetPosition,
+        nextStrokeType: this.nextStrokeType,
+        nextStrokeSide: this.nextStrokeSide,
+        nextStrokeTargetPosition: this.nextStrokeTargetPosition,
+        exerciseCounter: this.exerciseCounter,
+        additionalStrokes: this.additionalStrokes
+      };
+      this.$emit('update-drawing-data', drawingData);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.court-drawing-tool {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 1rem;
+  background: white;
+  margin: 1rem 0;
+}
+
+.tool-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.tool-header h4 {
+  margin: 0;
+  color: #333;
+}
+
+.tool-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.canvas-container {
+  text-align: center;
+  margin: 1rem 0;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  background: #f9f9f9;
+  padding: 0.5rem;
+}
+
+canvas {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: crosshair;
+  background: white;
+}
+
+
+.btn-small {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 2.5rem;
+  text-align: center;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+  border-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+  border-color: #5a6268;
+}
+
+/* Schlagart-Buttons (VH/RH) - Grün */
+.btn-stroke {
+  background-color: #28a745;
+  color: white;
+  border-color: #28a745;
+}
+
+.btn-stroke:hover {
+  background-color: #218838;
+  border-color: #218838;
+}
+
+.btn-stroke.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+  border-color: #6c757d;
+}
+
+.btn-stroke.btn-secondary:hover {
+  background-color: #5a6268;
+  border-color: #5a6268;
+}
+
+/* Schlagtyp-Buttons (US/OS/TS/FL/BL) - Orange Hintergrund */
+.btn-stroke-type {
+  background: #fd7e14;
+  color: white;
+}
+
+.btn-stroke-type:hover {
+  background: #e8650e;
+  border-color: #e8650e;
+}
+
+.btn-stroke-type.btn-secondary {
+  color: white !important;
+  opacity: 0.6;
+}
+
+.btn-stroke-type.btn-secondary:hover {
+  background-color: #e8650e !important;
+  border-color: #e8650e !important;
+  opacity: 0.8;
+}
+
+input[type="color"] {
+  width: 40px;
+  height: 30px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type="range"] {
+  width: 100px;
+}
+
+.exercise-selection {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.exercise-selection h5 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.selection-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.stroke-selection {
+  margin-top: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  vertical-align: middle;
+}
+
+.stroke-selection label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #495057;
+}
+
+.stroke-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.spin-selection {
+  margin-top: 0;
+}
+
+.spin-selection label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #495057;
+}
+
+.spin-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.additional-strokes {
+  margin-top: 1rem;
+}
+
+.next-stroke-selection {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.next-stroke-type {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.next-stroke-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.exercise-info {
+  background: white;
+  padding: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.exercise-info p {
+  margin: 0.25rem 0;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 7d24f50..fb8cc55 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -126,10 +126,11 @@
                                             </span>
                                             <span v-else @click="startActivityEdit(item)" class="clickable activity-label"
                                                  :title="item.predefinedActivity && item.predefinedActivity.name ? item.predefinedActivity.name : ''">
-                                                <span v-if="item.predefinedActivity && item.predefinedActivity.imageLink" 
-                                                      @click.stop="showActivityImage(item.predefinedActivity.imageLink)"
-                                                      class="image-icon" 
-                                                      title="Bild anzeigen">🖼️</span>
+            <!-- Icon öffnet Rendering (falls vorhanden) oder Bild im Modal -->
+            <span v-if="item.predefinedActivity"
+                  @click.stop="openActivityVisual(item.predefinedActivity)"
+                  class="image-icon"
+                  title="Bild/Zeichnung anzeigen">🖼️</span>
                                                 {{ (item.predefinedActivity && item.predefinedActivity.code && item.predefinedActivity.code.trim() !== '')
                                                     ? item.predefinedActivity.code
                                                     : (item.predefinedActivity ? item.predefinedActivity.name : item.activity) }}
@@ -161,10 +162,12 @@
                                             <td></td>
                                             <td>
                                                 <span class="activity-label" :title="(groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.name) ? groupItem.groupPredefinedActivity.name : ''">
-                                                    <span v-if="groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.imageLink" 
-                                                          @click.stop="showActivityImage(groupItem.groupPredefinedActivity.imageLink)"
-                                                          class="image-icon" 
-                                                          title="Bild anzeigen">🖼️</span>
+                <!-- Icon öffnet Rendering (falls vorhanden) oder Bild im Modal -->
+                <span v-if="groupItem.groupPredefinedActivity"
+                      @click.stop="openActivityVisual(groupItem.groupPredefinedActivity)"
+                      class="image-icon"
+                      title="Bild/Zeichnung anzeigen">🖼️</span>
+                
                                                     {{ (groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.code && groupItem.groupPredefinedActivity.code.trim() !== '')
                                                         ? groupItem.groupPredefinedActivity.code
                                                         : groupItem.groupPredefinedActivity.name }}
@@ -319,8 +322,13 @@
                 </div>
             </div>
         </div>
-        <div v-if="showImage" class="memberImage">
-            <img :src="imageUrl" @click="closeImage" />
+        <div v-if="showImage || showRenderModal" class="memberImage" @click="closeImage">
+            <template v-if="showImage">
+                <img :src="imageUrl" />
+            </template>
+            <template v-else>
+                <CourtDrawingRender :drawing-data="renderModalData" :width="560" :height="360" />
+            </template>
         </div>
         <div v-if="showAccidentForm" class="accidentForm">
             <form @submit.prevent="submitAccident">
@@ -345,7 +353,7 @@
                         + accident.accident}}</li>
                 </ul>
             </form>
-        </div>
+        </div> 
 
         <!-- Schnell hinzufügen Dialog -->
         <div v-if="showQuickAddDialog" class="modal-overlay" @click.self="closeQuickAddDialog">
@@ -397,10 +405,11 @@ import apiClient from '../apiClient.js';
 import Multiselect from 'vue-multiselect';
 import Sortable from 'sortablejs';
 import PDFGenerator from '../components/PDFGenerator.js';
+import CourtDrawingRender from '../components/CourtDrawingRender.vue';
 
 export default {
     name: 'DiaryView',
-    components: { Multiselect },
+    components: { Multiselect, CourtDrawingRender },
     data() {
         return {
             date: null,
@@ -436,6 +445,8 @@ export default {
             showDropdown: false,
             showImage: false,
             imageUrl: '',
+            showRenderModal: false,
+            renderModalData: null,
             groups: [],
             currentTimeBlockId: null,
             newGroupName: '',
@@ -526,6 +537,36 @@ export default {
         },
     },
     methods: {
+        drawingDataFor(pa) {
+            // Zeichnungsdaten können bereits als Objekt vorliegen oder als JSON-String
+            try {
+                if (!pa) return null;
+                if (pa.drawingData && typeof pa.drawingData === 'object') {
+                    console.debug('DiaryView: drawingData (object) gefunden für', pa.id);
+                    return pa.drawingData;
+                }
+                if (pa.drawingData && typeof pa.drawingData === 'string') {
+                    const parsed = JSON.parse(pa.drawingData);
+                    console.debug('DiaryView: drawingData (string→parsed) für', pa.id, parsed);
+                    return parsed;
+                }
+                // Fallback: falls über images[0].drawingData geliefert wurde
+                if (pa.images && pa.images.length) {
+                    // Nimm das erste Bild, das drawingData enthält
+                    const withData = pa.images.find(img => !!img.drawingData);
+                    if (withData) {
+                        const parsedImg = typeof withData.drawingData === 'string'
+                            ? JSON.parse(withData.drawingData)
+                            : withData.drawingData;
+                        console.debug('DiaryView: drawingData aus images für', pa.id, 'imageId=', withData.id, parsedImg);
+                        return parsedImg;
+                    }
+                }
+            } catch (e) {
+                console.warn('DiaryView: drawingData parse error:', e);
+            }
+            return null;
+        },
         async init() {
             if (this.isAuthenticated && this.currentClub) {
                 const response = await apiClient.get(`/diary/${this.currentClub}`);
@@ -1119,12 +1160,43 @@ export default {
         },
         closeImage() {
             this.showImage = false;
+            this.showRenderModal = false;
+            this.renderModalData = null;
             this.imageUrl = '';
         },
 
-        showActivityImage(imageLink) {
-            this.imageUrl = imageLink;
-            this.showImage = true;
+        async showActivityImage(imageLink) {
+            try {
+                // Vorherige Object-URL freigeben
+                if (this.imageUrl && this.imageUrl.startsWith('blob:')) {
+                    URL.revokeObjectURL(this.imageUrl);
+                }
+
+                if (imageLink && imageLink.startsWith('/api/')) {
+                    // Über API mit Auth und als Blob laden → vermeidet ORB
+                    const path = imageLink.replace(/^\/api\//, '');
+                    const resp = await apiClient.get(`/${path}`, { responseType: 'blob' });
+                    this.imageUrl = URL.createObjectURL(resp.data);
+                } else {
+                    this.imageUrl = imageLink;
+                }
+                this.showImage = true;
+            } catch (e) {
+                console.error('Bild laden fehlgeschlagen:', e);
+                alert('Bild konnte nicht geladen werden.');
+            }
+        },
+        async openActivityVisual(pa) {
+            // Bevorzugt Rendering, ansonsten Bild
+            const data = this.drawingDataFor(pa);
+            if (data) {
+                // Erzeuge temporär ein PNG im Client: Canvas offscreen rendern über Renderer-Komponente ist aufwändig.
+                // Einfacher: öffne ein kleines Modal mit der Renderer-Komponente statt imageUrl.
+                this.renderModalData = data;
+                this.showRenderModal = true;
+            } else if (pa.imageLink) {
+                await this.showActivityImage(pa.imageLink);
+            }
         },
         async loadMemberImage(member) {
             try {
@@ -1910,6 +1982,12 @@ img {
     margin: 0 auto;
 }
 
+.memberImage > div, .memberImage canvas {
+    /* falls Komponenten-Inhalt (Renderer) da ist, mittig zeigen */
+    display: block;
+    margin: 0 auto;
+}
+
 .groups {
     display: flex;
     flex-direction: row;
diff --git a/frontend/src/views/PredefinedActivities.vue b/frontend/src/views/PredefinedActivities.vue
index 2ceb3b5..8b69b8d 100644
--- a/frontend/src/views/PredefinedActivities.vue
+++ b/frontend/src/views/PredefinedActivities.vue
@@ -56,7 +56,7 @@
           </label>
           <div class="image-section">
             <h4>Bild hinzufügen</h4>
-            <p class="image-help">Du kannst entweder einen Link zu einem Bild eingeben oder ein Bild hochladen:</p>
+            <p class="image-help">Du kannst entweder einen Link zu einem Bild eingeben, ein Bild hochladen oder eine Übungszeichnung erstellen:</p>
             
             <label>Bild-Link (optional)
               <input type="text" v-model="editModel.imageLink" placeholder="z.B. https://example.com/bild.jpg oder /api/predefined-activities/:id/image/:imageId" />
@@ -74,6 +74,18 @@
               </p>
             </div>
 
+            <!-- Zeichen-Tool -->
+            <div class="drawing-section">
+              <h5>Übungszeichnung erstellen</h5>
+           <CourtDrawingTool 
+             :activity-id="editModel.id"
+             :drawing-data="editModel.drawingData"
+             :allow-image-upload="false"
+             @update-fields="onUpdateFields"
+             @update-drawing-data="onUpdateDrawingData"
+           />
+            </div>
+
             <div class="image-list" v-if="images && images.length">
               <h5>Hochgeladene Bilder:</h5>
               <div class="image-grid">
@@ -97,9 +109,13 @@
 
 <script>
 import apiClient from '../apiClient.js';
+import CourtDrawingTool from '../components/CourtDrawingTool.vue';
 
 export default {
   name: 'PredefinedActivities',
+  components: {
+    CourtDrawingTool
+  },
   data() {
     return {
       activities: [],
@@ -107,6 +123,7 @@ export default {
       editModel: null,
       images: [],
       selectedFile: null,
+      selectedDrawingData: null,
       mergeSourceId: '',
       mergeTargetId: '',
     };
@@ -131,6 +148,15 @@ export default {
     }
   },
   methods: {
+    parseDrawingData(value) {
+      if (!value) return null;
+      if (typeof value === 'object') return value;
+      try { return JSON.parse(value); } catch (e) { return null; }
+    },
+    normalizeActivity(activity, images) {
+      const drawingData = this.parseDrawingData(activity && activity.drawingData);
+      return { ...(activity || {}), drawingData };
+    },
     async reload() {
       const r = await apiClient.get('/predefined-activities');
       this.activities = r.data || [];
@@ -140,7 +166,24 @@ export default {
       const r = await apiClient.get(`/predefined-activities/${a.id}`);
       const { images, ...activity } = r.data;
       this.images = images || [];
-      this.editModel = { ...activity };
+      // Server-Daten normalisieren und ggf. image-drawingData fallbacken
+      let model = this.normalizeActivity(activity, images);
+      if (!model.drawingData && images && images.length > 0 && images[0].drawingData) {
+        model.drawingData = this.parseDrawingData(images[0].drawingData);
+      }
+      this.editModel = model;
+    },
+    async reloadImages() {
+      if (this.editModel && this.editModel.id) {
+        try {
+          const r = await apiClient.get(`/predefined-activities/${this.editModel.id}`);
+          const { images } = r.data;
+          this.images = images || [];
+          console.log('Images reloaded:', this.images);
+        } catch (error) {
+          console.error('Error reloading images:', error);
+        }
+      }
     },
     formatItem(a) {
       return `${a.code ? '[' + a.code + '] ' : ''}${a.name}`;
@@ -164,6 +207,7 @@ export default {
         duration: null,
         durationText: '',
         imageLink: '',
+        drawingData: '',
       };
     },
     cancel() {
@@ -173,36 +217,81 @@ export default {
     },
     async save() {
       if (!this.editModel) return;
+      
+      console.log('Save: selectedFile =', this.selectedFile);
+      
       if (this.editModel.id) {
         const { id, ...payload } = this.editModel;
+        if (payload.drawingData && typeof payload.drawingData === 'object') {
+          payload.drawingData = payload.drawingData;
+        }
         const r = await apiClient.put(`/predefined-activities/${id}`, payload);
-        this.editModel = r.data;
+        this.editModel = this.normalizeActivity(r.data);
       } else {
         const r = await apiClient.post('/predefined-activities', this.editModel);
-        this.editModel = r.data;
-        // Nach dem Erstellen einer neuen Aktivität, falls ein Bild ausgewählt wurde, hochladen
-        if (this.selectedFile) {
-          await this.uploadImage();
-        }
+        this.editModel = this.normalizeActivity(r.data);
       }
+      
+      // Nach dem Speichern (sowohl CREATE als auch UPDATE): Bild hochladen falls vorhanden
+      if (this.selectedFile) {
+        console.log('Uploading image after save...');
+        await this.uploadImage();
+      } else {
+        console.log('No selectedFile to upload');
+      }
+      
       await this.reload();
     },
     onFileChange(e) {
       this.selectedFile = e.target.files && e.target.files[0] ? e.target.files[0] : null;
     },
     imageUrl(img) {
-      return `/api/predefined-activities/${this.editModel.id}/image/${img.id}`;
+      return `http://localhost:3000/api/predefined-activities/${this.editModel.id}/image/${img.id}`;
     },
     async uploadImage() {
-      if (!this.editModel || !this.editModel.id || !this.selectedFile) return;
+      if (!this.editModel || !this.editModel.id || !this.selectedFile) {
+        console.log('Upload skipped: editModel=', this.editModel, 'selectedFile=', this.selectedFile);
+        return;
+      }
+      
+      console.log('Starting image upload...');
+      console.log('editModel:', this.editModel);
+      console.log('selectedActivity:', this.selectedActivity);
+      console.log('Activity ID (editModel.id):', this.editModel.id);
+      console.log('Activity ID (selectedActivity.id):', this.selectedActivity?.id);
+      console.log('File:', this.selectedFile);
+      
       const fd = new FormData();
       fd.append('image', this.selectedFile);
-      await apiClient.post(`/predefined-activities/${this.editModel.id}/image`, fd, {
-        headers: { 'Content-Type': 'multipart/form-data' }
-      });
-      // Nach Upload Details neu laden
-      await this.select(this.editModel);
-      this.selectedFile = null;
+      
+      // Füge Zeichnungsdaten hinzu, falls vorhanden
+      if (this.selectedDrawingData) {
+        fd.append('drawingData', JSON.stringify(this.selectedDrawingData));
+        console.log('Added drawingData to FormData:', this.selectedDrawingData);
+      }
+      
+      // Verwende PUT für Updates, POST für neue Activities
+      const isUpdate = this.selectedActivity && this.selectedActivity.id === this.editModel.id;
+      const method = isUpdate ? 'put' : 'post';
+      
+      console.log('Using method:', method);
+      
+      try {
+        const response = await apiClient[method](`/predefined-activities/${this.editModel.id}/image`, fd, {
+          headers: { 'Content-Type': 'multipart/form-data' }
+        });
+        console.log('Upload successful:', response);
+        
+        // Nach Upload Details neu laden
+        await this.select(this.editModel);
+        this.selectedFile = null;
+        
+        // Bildliste explizit aktualisieren
+        await this.reloadImages();
+      } catch (error) {
+        console.error('Upload failed:', error);
+        throw error;
+      }
     },
     async deleteImage(imageId) {
       if (!this.editModel || !this.editModel.id) return;
@@ -220,6 +309,53 @@ export default {
       if (!confirm('Alle Aktivitäten mit identischem Namen werden zusammengeführt. Fortfahren?')) return;
       await apiClient.post('/predefined-activities/deduplicate', {});
       await this.reload();
+    },
+    onDrawingSave(drawingData) {
+      if (this.editModel) {
+        this.editModel.drawingData = drawingData;
+        // Automatisch als Bild-Link setzen, wenn es eine Zeichnung gibt
+        if (drawingData && !this.editModel.imageLink) {
+          this.editModel.imageLink = drawingData;
+        }
+      }
+      // Nicht automatisch speichern, nur wenn User explizit "Speichern" klickt
+    },
+    onUpdateFields(fields) {
+      if (this.editModel) {
+        this.editModel.code = fields.code;
+        this.editModel.name = fields.name;
+        this.editModel.description = fields.description;
+      }
+    },
+    onUpdateDrawingData(data) {
+      if (this.editModel) {
+        this.editModel.drawingData = data;
+      }
+    },
+    
+    async onDrawingImageUpload(file, drawingData) {
+      console.log('onDrawingImageUpload called with file:', file);
+      console.log('onDrawingImageUpload called with drawingData:', drawingData);
+      console.log('File type:', file?.type);
+      console.log('File size:', file?.size);
+      console.log('File name:', file?.name);
+      
+      // Setze das File und die Zeichnungsdaten für den Upload
+      this.selectedFile = file;
+      this.selectedDrawingData = drawingData;
+      console.log('selectedFile set to:', this.selectedFile);
+      console.log('selectedDrawingData set to:', this.selectedDrawingData);
+      
+      // Upload wird erst beim Speichern durchgeführt
+      console.log('File and drawing data ready for upload when saving');
+    },
+    
+    async onImageUploaded() {
+      console.log('Image uploaded successfully, refreshing image list...');
+      // Bildliste aktualisieren
+      if (this.editModel && this.editModel.id) {
+        await this.select(this.editModel);
+      }
     }
   },
   async mounted() {
@@ -354,5 +490,19 @@ input[type="text"], input[type="number"], textarea { width: 100%; }
 .btn-danger:hover {
   background: #c82333;
 }
+
+.drawing-section {
+  margin: 1rem 0;
+  padding: 1rem;
+  background: white;
+  border-radius: var(--border-radius);
+  border: 1px solid #ddd;
+}
+
+.drawing-section h5 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1rem;
+}
 </style>