diff --git a/README.md b/README.md
index f285481..e825b06 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,11 @@ Rein manuelle Pflege: Sidebar links = Projekte, Hauptbereich = Feature-Cards.
 Markdown-Dateien unter `daten/<projekt>/<feature>.md` — Projekt = Ordner, die Datei ist
 die Wahrheit. Der Editor bearbeitet immer den rohen Text; geparst wird nur für die Anzeige.
 
-Format (Marker allein auf einer Zeile; `<!-- funktion -->` ist wiederholbar, `<!-- regel -->`
-und `<!-- flow -->` gehören zur davorstehenden Funktion; Trennzeilen aus `---` sind Optik):
+Format (Marker allein auf einer Zeile; `<!-- funktion -->` ist wiederholbar; `<!-- ziel -->`,
+`<!-- regeln -->` und `<!-- testen -->` nach einer Funktion gehören zu ihr — `ziel`/`regeln`
+vor der ersten Funktion gehören zur Karte; regeln/testen: je eine `- `-Zeile pro Eintrag;
+`<!-- regel -->`-Blöcke aus dem Alt-Format werden zu Zeilen zusammengeführt;
+Trennzeilen aus `---` sind Optik):
 
 ```markdown
 <!-- titel -->
@@ -24,18 +27,19 @@ kern
 Kurzer Satz, was das Ziel ist.
 <!-- funktion -->
 Anmeldung mit E-Mail
-<!-- regel -->
-Passwort nie loggen
-<!-- flow -->
+<!-- regeln -->
+- Passwort nie loggen
+<!-- testen -->
 - Formular öffnen
 - Daten eingeben
 <!-- funktion -->
 Abmeldung
 ```
 
-Funktionen erscheinen als Titelliste; Regeln und Flow zeigt die Karte erst beim Hover über
-die Funktion. Text vor dem ersten Marker, Inhalt unbekannter Marker und verwaiste
-regel/flow-Blöcke werden nicht angezeigt, aber beim Speichern erhalten. Bearbeitet wird live auf
+Funktionen erscheinen als Titelliste; Regeln und Testen zeigt die ausführliche Ansicht.
+Text vor dem ersten Marker, Inhalt unbekannter Marker und verwaiste
+regeln/testen-Blöcke (auch Alt-Marker `flow`) werden nicht angezeigt, aber beim Speichern
+erhalten. Bearbeitet wird live auf
 der Karte (Klick ins Feld, Verlassen speichert, Escape verwirft); jedes Speichern setzt
 die Datei neu zusammen. Titeländerungen benennen die Datei passend um.
 
diff --git a/backend/parser.py b/backend/parser.py
index 59058e8..296fc81 100644
--- a/backend/parser.py
+++ b/backend/parser.py
@@ -1,9 +1,11 @@
 """Zerlegt den rohen Feature-Text in Sektionen — nur für die Anzeige.
 
 Format: titel (eine Zeile), art, ziel, dann wiederholbare <!-- funktion -->-Blöcke;
-<!-- regel -->- und <!-- flow -->-Blöcke gehören zur davorstehenden Funktion.
-Präambel, unbekannte Marker und verwaiste regel/flow-Blöcke landen in `sonstiges`
-(wird nicht angezeigt, aber beim Speichern erhalten).
+<!-- regeln -->- und <!-- testen -->-Blöcke (je eine `- `-Zeile pro Eintrag) gehören zur
+davorstehenden Funktion. Alt-Format wird weiter gelesen: <!-- regel -->-Blöcke (einer je
+Regel) und <!-- flow --> (heute testen) werden zusammengeführt. Präambel, unbekannte
+Marker und verwaiste Blöcke landen in `sonstiges` (wird nicht angezeigt, aber beim
+Speichern erhalten).
 Trennzeilen aus Bindestrichen (---) sind reine Optik und werden ignoriert.
 """
 
@@ -36,6 +38,7 @@ def zerlege(roh: str) -> dict:
 
     titel = []
     ziel = []
+    regeln = []
     funktionen = []
     sonstiges = []
     art = []
@@ -45,18 +48,22 @@ def zerlege(roh: str) -> dict:
         elif schluessel == "art":
             art.append(text)
         elif schluessel == "ziel":
-            ziel.append(text)
+            # vor der ersten Funktion: Karten-Ziel, danach: Ziel der Funktion
+            (funktionen[-1]["ziel"] if funktionen else ziel).append(text)
         elif schluessel == "funktion":
-            funktionen.append({"text": text, "regeln": [], "flow": []})
-        elif schluessel == "regel" and funktionen:
-            funktionen[-1]["regeln"].append(text)
-        elif schluessel == "flow" and funktionen:
-            funktionen[-1]["flow"].append(text)
-        else:  # Präambel, unbekannter Marker, regel/flow ohne funktion
+            funktionen.append({"text": text, "ziel": [], "regeln": [], "testen": []})
+        elif schluessel in ("regel", "regeln"):
+            # vor der ersten Funktion: Karten-Regeln, danach: Regeln der Funktion
+            (funktionen[-1]["regeln"] if funktionen else regeln).append(text)
+        elif schluessel in ("flow", "testen") and funktionen:
+            funktionen[-1]["testen"].append(text)
+        else:  # Präambel, unbekannter Marker, regeln/testen ohne funktion
             sonstiges.append(text)
 
     for f in funktionen:
-        f["flow"] = "\n".join(f["flow"])
+        f["ziel"] = "\n\n".join(f["ziel"])
+        f["regeln"] = "\n".join(f["regeln"])
+        f["testen"] = "\n".join(f["testen"])
 
     # Titel ist eine Zeile: erste nicht-leere
     titel_zeilen = [z.strip() for t in titel for z in t.splitlines() if z.strip()]
@@ -65,6 +72,7 @@ def zerlege(roh: str) -> dict:
         "titel": titel_zeilen[0] if titel_zeilen else "",
         "art": "optional" if art and art[0].strip().lower() == "optional" else "kern",
         "ziel": "\n\n".join(ziel),
+        "regeln": "\n".join(regeln),
         "funktionen": funktionen,
         "sonstiges": "\n\n".join(sonstiges),
     }
diff --git a/backend/tests/test_parser.py b/backend/tests/test_parser.py
index fe8fcaa..4fcacff 100644
--- a/backend/tests/test_parser.py
+++ b/backend/tests/test_parser.py
@@ -11,11 +11,10 @@ Nutzer können sich anmelden.
 ----------------------------------------
 <!-- funktion -->
 Anmeldung mit E-Mail
-<!-- regel -->
-Passwort nie loggen
-<!-- regel -->
-Sperre nach 5 Fehlversuchen
-<!-- flow -->
+<!-- regeln -->
+- Passwort nie loggen
+- Sperre nach 5 Fehlversuchen
+<!-- testen -->
 - Formular öffnen
 - Daten eingeben
 <!-- funktion -->
@@ -31,16 +30,33 @@ def test_alle_sektionen():
     assert s["funktionen"] == [
         {
             "text": "Anmeldung mit E-Mail",
-            "regeln": ["Passwort nie loggen", "Sperre nach 5 Fehlversuchen"],
-            "flow": "- Formular öffnen\n- Daten eingeben",
+            "ziel": "",
+            "regeln": "- Passwort nie loggen\n- Sperre nach 5 Fehlversuchen",
+            "testen": "- Formular öffnen\n- Daten eingeben",
         },
-        {"text": "Abmeldung", "regeln": [], "flow": ""},
+        {"text": "Abmeldung", "ziel": "", "regeln": "", "testen": ""},
     ]
 
 
-def test_mehrere_flow_bloecke_werden_verbunden():
-    s = zerlege("<!-- funktion -->\nX\n<!-- flow -->\n- a\n<!-- flow -->\n- b\n")
-    assert s["funktionen"][0]["flow"] == "- a\n- b"
+def test_ziel_nach_funktion_gehoert_zur_funktion():
+    s = zerlege("<!-- ziel -->\nKarte\n<!-- funktion -->\nX\n<!-- ziel -->\nFunktion\n")
+    assert s["ziel"] == "Karte"
+    assert s["funktionen"][0]["ziel"] == "Funktion"
+
+
+def test_mehrere_testen_bloecke_werden_verbunden():
+    s = zerlege("<!-- funktion -->\nX\n<!-- testen -->\n- a\n<!-- testen -->\n- b\n")
+    assert s["funktionen"][0]["testen"] == "- a\n- b"
+
+
+def test_alter_flow_marker_wird_gelesen():
+    s = zerlege("<!-- funktion -->\nX\n<!-- flow -->\n- a\n")
+    assert s["funktionen"][0]["testen"] == "- a"
+
+
+def test_alte_regel_bloecke_werden_zusammengefuehrt():
+    s = zerlege("<!-- funktion -->\nX\n<!-- regel -->\na\n<!-- regel -->\nb\n")
+    assert s["funktionen"][0]["regeln"] == "a\nb"
 
 
 def test_trenner_zeilen_werden_ignoriert():
@@ -59,10 +75,16 @@ def test_unbekannter_marker_landet_in_sonstiges():
     assert s["sonstiges"] == "Geheim"
 
 
-def test_regel_und_flow_ohne_funktion_landen_in_sonstiges():
-    s = zerlege("<!-- regel -->\nverwaist\n<!-- flow -->\n- auch\n")
+def test_regeln_vor_erster_funktion_gehoeren_zur_karte():
+    s = zerlege("<!-- regeln -->\n- karte\n<!-- funktion -->\nX\n<!-- regeln -->\n- funktion\n")
+    assert s["regeln"] == "- karte"
+    assert s["funktionen"][0]["regeln"] == "- funktion"
+
+
+def test_testen_ohne_funktion_landet_in_sonstiges():
+    s = zerlege("<!-- testen -->\n- verwaist\n")
     assert s["funktionen"] == []
-    assert s["sonstiges"] == "verwaist\n\n- auch"
+    assert s["sonstiges"] == "- verwaist"
 
 
 def test_doppelter_marker_wird_konkateniert():
@@ -72,7 +94,7 @@ def test_doppelter_marker_wird_konkateniert():
 
 def test_leerer_text():
     s = zerlege("")
-    assert s == {"titel": "", "art": "kern", "ziel": "", "funktionen": [], "sonstiges": ""}
+    assert s == {"titel": "", "art": "kern", "ziel": "", "regeln": "", "funktionen": [], "sonstiges": ""}
 
 
 def test_art_optional():
diff --git a/daten/Planer/darkmode.md b/daten/Planer/darkmode.md
index d26c3c2..ae7c9ad 100644
--- a/daten/Planer/darkmode.md
+++ b/daten/Planer/darkmode.md
@@ -9,11 +9,9 @@ optional
 ----------------------------------------
 <!-- funktion -->
 Darkmode umschalten
-<!-- regel -->
-Icon: ☾ / ☀
-<!-- regel -->
-Folgt beim ersten Start der System-Einstellung
-<!-- regel -->
-Zustand bleibt gespeichert
-<!-- flow -->
+<!-- regeln -->
+- Icon: ☾ / ☀
+- Folgt beim ersten Start der System-Einstellung
+- Zustand bleibt gespeichert
+<!-- testen -->
 - Klick auf Icon in der Sidebar oben
diff --git a/daten/Planer/features.md b/daten/Planer/features.md
index 84a5df7..3ff193d 100644
--- a/daten/Planer/features.md
+++ b/daten/Planer/features.md
@@ -5,74 +5,85 @@ Features
 kern
 ----------------------------------------
 <!-- ziel -->
-
+Gruppieren Informationen zu ähnlichen Funktionen
+----------------------------------------
+<!-- regeln -->
+- Alphabetisch sortiert
+- Unter daten/ als md Datei gespeichert
+- Verlassen speichert
+- Escape verwirft
 ----------------------------------------
 <!-- funktion -->
-Ausführliche Ansicht umschalten
-<!-- regel -->
-Volle Breite
-<!-- regel -->
-Funktionen als Boxen in zwei Spalten
-<!-- regel -->
-Alle Details offen
-<!-- flow -->
+Anzeigemodus umschalten
+<!-- ziel -->
+Kompaktmodus zum lesen und Vollmodus zum vertiefen und anpassen
+<!-- regeln -->
+- Standard ist Kompaktmodus
+- Vollmodus geht über responsive Spalten
+- Vollmodus zeigt alles 
+- Kompaktmodus zeigt Ziel und Funktionstitel als Liste
+<!-- testen -->
+- Klick auf Karte
+- Vollmodus sichtbar 
 - Klick auf freie Kartenfläche
-- Nochmal klicken schaltet zurück
+- Kompaktmodus sichtbar
 <!-- funktion -->
-Feature als Datei speichern
-<!-- regel -->
-Projekt = Ordner unter daten/
-<!-- regel -->
-Feature = Markdown-Datei im Projektordner
-<!-- regel -->
-Titeländerung benennt die Datei um
-<!-- regel -->
-Versionierbar per git
+Badge umschalten
+<!-- ziel -->
+Unterscheidet die Kern- und Optionalen Features
+<!-- regeln -->
+- Kernfarbe blau
+- Optionalfarbe grün
+- Verändert die Randfarbe vom Feature
+<!-- testen -->
+- Vollmodus öffnen
+- Klick auf Badge zum toggeln
+<!-- funktion -->
+Feature entfernen
+<!-- regeln -->
+- x-Icon
+<!-- testen -->
+- RMB auf Featurecard
+- Klick auf "Feature entfernen"
+- Bestätigen im Modal
+- Feature entfernt
 <!-- funktion -->
 Feature erstellen
-<!-- regel -->
-Icon: +
-<!-- regel -->
-Titel direkt zur Bearbeitung geöffnet
-<!-- regel -->
-Karten alphabetisch nach Titel sortiert
-<!-- flow -->
-- Klick auf leere Card
-- Card wird erstellt
+<!-- regeln -->
+- +-Icon
+- Feature direkt in Vollmodus geöffnet
+<!-- testen -->
+- RMB auf Hauptbereich
+- Klick auf "Feature erstellen"
+- Im Modal Namen eingeben
+- Bestätigen
 <!-- funktion -->
-Features entfernen
-<!-- regel -->
-Icon: x
-<!-- flow -->
-- Hover über Card
-- Auf Icon klicken
-- Icon wird zum Bestätigungs Icon
-- Klick zum entfernen
-<!-- funktion -->
-Kern/Optional umschalten
-<!-- regel -->
-Kern blau umrandet
-<!-- regel -->
-Optional grün umrandet
-<!-- flow -->
-- Klick auf Badge
+Regeln anpassen
+<!-- ziel -->
+Spezifische Hinweise für Features
+<!-- regeln -->
+- Nur paar Wörter je Regel
+<!-- testen -->
+- Vollmodus öffnen
+- Klick auf Regeln
+- Inhalt anpassen
 <!-- funktion -->
 Titel anpassen
-<!-- regel -->
-Enter schließt ab
-<!-- regel -->
-Verlassen speichert
-<!-- regel -->
-Escape verwirft
-<!-- flow -->
-- Hover über Card
+<!-- regeln -->
+- 1-2 Wörter
+- Aktualisiert den Dateinamen
+<!-- testen -->
+- Vollmodus öffnen
 - Klick auf Titel
 - Inhalt ändern
 <!-- funktion -->
 Ziel anpassen
-<!-- regel -->
-Leer: Platzhalter „Ziel ergänzen" klicken
-<!-- flow -->
-- Hover über Card
-- Klick auf Zieltext
+<!-- ziel -->
+Beschreibt kurz das Kernziel vom Feature
+<!-- regeln -->
+- 1-2 simple Sätze
+- Nur wenn der Titel nicht selbsterklärend ist
+<!-- testen -->
+- Vollmodus öffnen
+- Klick auf Ziel
 - Inhalt anpassen
diff --git a/daten/Planer/funktionen.md b/daten/Planer/funktionen.md
index 6cd4bfe..6c2f69c 100644
--- a/daten/Planer/funktionen.md
+++ b/daten/Planer/funktionen.md
@@ -8,52 +8,46 @@ kern
 
 ----------------------------------------
 <!-- funktion -->
-Flow anpassen
-<!-- regel -->
-Ein Flow je Funktion
-<!-- regel -->
-Leeren entfernt den Flow
-<!-- flow -->
-- Hover über Funktion
-- Klick auf Flow oder + Flow
+Testen anpassen
+<!-- regeln -->
+- Ein Testen-Block je Funktion
+- Leeren entfernt den Block
+<!-- testen -->
+- Klick auf Testen oder + Testen
 - Inhalt anpassen
 <!-- funktion -->
 Funktion anpassen
-<!-- flow -->
+<!-- testen -->
 - Klick auf Text
 - Inhalt ändern
 <!-- funktion -->
 Funktion entfernen
-<!-- regel -->
-Feld leeren entfernt auch
-<!-- flow -->
+<!-- regeln -->
+- Feld leeren entfernt auch
+<!-- testen -->
 - Hover über Funktion
 - Klick auf x
 <!-- funktion -->
 Funktion hinzufügen
-<!-- regel -->
-Alphabetisch sortiert
-<!-- regel -->
-Neue Funktion rückt nach dem Speichern an ihre Position
-<!-- flow -->
-- Hover über Card
+<!-- regeln -->
+- Alphabetisch sortiert
+- Neue Funktion rückt nach dem Speichern an ihre Position
+<!-- testen -->
 - Klick auf + Funktion
 - Inhalt eingeben
 <!-- funktion -->
-Regel anpassen
-<!-- flow -->
-- Klick auf Text
-- Inhalt ändern
+Ziel anpassen
+<!-- regeln -->
+- Ein Ziel je Funktion
+- Leeren entfernt das Ziel
+<!-- testen -->
+- Klick auf Ziel oder + Ziel
+- Inhalt anpassen
 <!-- funktion -->
-Regel entfernen
-<!-- regel -->
-Feld leeren entfernt auch
-<!-- flow -->
-- Hover über Regel
-- Klick auf x
-<!-- funktion -->
-Regel hinzufügen
-<!-- flow -->
-- Hover über Funktion
-- Klick auf + Regel
-- Inhalt eingeben
+Regeln anpassen
+<!-- regeln -->
+- Eine Regel je Zeile
+- Leeren entfernt alle Regeln
+<!-- testen -->
+- Klick auf Regeln oder + Regeln
+- Inhalt anpassen
diff --git a/daten/Planer/projekte.md b/daten/Planer/projekte.md
index f9288a8..144ca1f 100644
--- a/daten/Planer/projekte.md
+++ b/daten/Planer/projekte.md
@@ -5,43 +5,45 @@ Projekte
 kern
 ----------------------------------------
 <!-- ziel -->
-
+Gruppiert Features für ein Projekt
+----------------------------------------
+<!-- regeln -->
+- Alphabetisch sortiert
+- Aktives Projekt ist hervorgehoben
+- 1-2 Wörter für den Namen
 ----------------------------------------
 <!-- funktion -->
 Projekt anpassen
-<!-- regel -->
-Icon: Stift
-<!-- regel -->
-Enter bestätigt
-<!-- regel -->
-Escape bricht ab
-<!-- flow -->
-- Hover über Projektname
-- Klick auf Icon
+<!-- regeln -->
+- Stift-Icon
+<!-- testen -->
+- RMB auf Projektname
+- Klick auf "Projekt anpassen"
 - Inhalt anpassen
+- Rausklicken
+- Name ist angepasst
 <!-- funktion -->
-Projekt auswählen
-<!-- regel -->
-Aktives Projekt ist hervorgehoben
-<!-- flow -->
-- Klick auf Name
-- Features werden im Hauptbereich angezeigt
+Projekt aufrufen
+<!-- testen -->
+- LMB auf Projektname
+- Features werden angezeigt
 <!-- funktion -->
 Projekt entfernen
-<!-- regel -->
-Icon: x
-<!-- flow -->
-- Hover über Name
-- Klick auf Icon
-- Icon wird zum Bestätigungs Icon
-- Klick zum entfernen
+<!-- regeln -->
+- X-Icon
+- Auch Features entfernen
+<!-- testen -->
+- RMB auf Projektname
+- Klick auf "Projekt entfernen"
+- Bestätigen im Modal
+- Projekt entfernt
 <!-- funktion -->
 Projekt erstellen
-<!-- regel -->
-Alphabetisch in der Sidebar sortiert
-<!-- regel -->
-Feature-Anzahl neben dem Namen
-<!-- flow -->
-- Inputfeld titel eingeben
-- Mit Icon oder Enter erstellen
-- Projekt wird direkt ausgewählt
+<!-- regeln -->
+- Projekt wird direkt aufgerufen
+- +-Icon
+<!-- testen -->
+- RMB auf Sidebar
+- Klick auf "Projekt erstellen"
+- Im Modal Namen eingeben
+- Bestätigen
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a9c6a06..8cce99d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { fetchProjekte } from './api.js'
 import SeitenLeiste from './components/SeitenLeiste.vue'
 import FeatureListe from './components/FeatureListe.vue'
@@ -21,13 +21,25 @@ function umbenannt(alt, neu) {
   ladeProjekte()
 }
 
+// Zuletzt aktives Projekt überlebt das Neuladen
+watch(aktivesProjekt, name => {
+  if (name) localStorage.setItem('aktivesProjekt', name)
+  else localStorage.removeItem('aktivesProjekt')
+})
+
 function wechsleDarkMode() {
   dunkel.value = !dunkel.value
   document.documentElement.classList.toggle('dark', dunkel.value)
   localStorage.setItem('darkMode', dunkel.value)
 }
 
-onMounted(ladeProjekte)
+onMounted(async () => {
+  await ladeProjekte()
+  const gemerkt = localStorage.getItem('aktivesProjekt')
+  if (gemerkt && projekte.value.some(p => p.name === gemerkt)) {
+    aktivesProjekt.value = gemerkt
+  }
+})
 </script>
 
 <template>
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
index d467d33..ff456e6 100644
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -88,6 +88,50 @@ input, textarea {
 
 .meldung { color: var(--rot); font-size: 0.85rem; }
 
+.kontextmenue {
+  position: fixed;
+  z-index: 10;
+  background: var(--panel);
+  border: 1px solid var(--rand);
+  border-radius: 6px;
+  padding: 0.2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.kontextmenue button {
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  text-align: left;
+  padding: 0.3rem 0.7rem;
+  border-radius: 4px;
+}
+.kontextmenue button:hover { background: var(--bg); }
+
+.schleier {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal {
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  cursor: default;
+}
+.modal h2 { margin: 0; font-size: 1rem; }
+.modal .frage { margin: 0; }
+.modal footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
 .badge {
   font-size: 0.72rem;
   font-weight: 600;
diff --git a/frontend/src/components/FeatureKarte.vue b/frontend/src/components/FeatureKarte.vue
index 7b23163..98404e0 100644
--- a/frontend/src/components/FeatureKarte.vue
+++ b/frontend/src/components/FeatureKarte.vue
@@ -1,22 +1,23 @@
 <script setup>
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { marked } from 'marked'
-import { featureSpeichern, featureLoeschen } from '../api.js'
+import { featureSpeichern } from '../api.js'
 
 const props = defineProps({
   projekt: { type: String, required: true },
   feature: { type: Object, required: true },
-  titelBearbeiten: { type: Boolean, default: false }, // frisch angelegt: Titel direkt öffnen
+  vollmodus: { type: Boolean, default: false }, // frisch angelegt: direkt im Vollmodus öffnen
 })
-const emit = defineEmits(['aktualisiert', 'geloescht'])
+const emit = defineEmits(['aktualisiert', 'kontextmenue'])
 
 function kopie(sekt) {
   return {
     titel: sekt.titel,
     art: sekt.art,
     ziel: sekt.ziel,
+    regeln: sekt.regeln,
     funktionen: sekt.funktionen
-      .map(f => ({ text: f.text, regeln: [...f.regeln], flow: f.flow }))
+      .map(f => ({ text: f.text, ziel: f.ziel, regeln: f.regeln, testen: f.testen }))
       .sort((a, b) => a.text.localeCompare(b.text, 'de', { sensitivity: 'base' })),
     sonstiges: sekt.sonstiges, // nicht angezeigt, aber beim Speichern erhalten
   }
@@ -26,6 +27,7 @@ const s = ref(kopie(props.feature.sektionen))
 watch(() => props.feature, f => { s.value = kopie(f.sektionen) })
 
 const aktiv = ref(null) // {feld, i, j, original} — das eine gerade offene Eingabefeld
+const gross = ref(false) // ausführliche Ansicht
 const entwurf = ref('')
 const meldung = ref('')
 const feldRef = ref(null)
@@ -40,13 +42,14 @@ function istAktiv(feld, i, j) {
 
 function wert(feld, i, j) {
   if (feld === 'titel') return s.value.titel
-  if (feld === 'ziel') return s.value.ziel
+  if (feld === 'ziel') return i === undefined ? s.value.ziel : s.value.funktionen[i].ziel
   if (feld === 'funktion') return s.value.funktionen[i].text
-  if (feld === 'flow') return s.value.funktionen[i].flow
-  return s.value.funktionen[i].regeln[j]
+  if (feld === 'testen') return s.value.funktionen[i].testen
+  return i === undefined ? s.value.regeln : s.value.funktionen[i].regeln
 }
 
 async function starte(feld, i, j) {
+  if (!gross.value) return // Bearbeiten nur in der ausführlichen Ansicht
   const original = wert(feld, i, j)
   aktiv.value = { feld, i, j, original }
   entwurf.value = original
@@ -59,16 +62,16 @@ async function starte(feld, i, j) {
 function abbrechen() {
   const a = aktiv.value
   aktiv.value = null
-  // frisch angelegte, noch leere Einträge wieder entfernen
-  if (a && !a.original) {
-    if (a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
-    if (a.feld === 'regel') s.value.funktionen[a.i].regeln.splice(a.j, 1)
+  // frisch angelegte, noch leere Funktion wieder entfernen
+  if (a && !a.original && a.feld === 'funktion') {
+    s.value.funktionen.splice(a.i, 1)
   }
 }
 
 async function fertig() {
   const a = aktiv.value
   if (!a) return
+  blurZeit = Date.now() // der Klick, der das Feld schloss, soll die Ansicht nicht schließen
   aktiv.value = null
   const neu = entwurf.value.trim()
 
@@ -78,45 +81,34 @@ async function fertig() {
     if (!neu) return // Titel ist Pflicht — leere Eingabe verwerfen
     s.value.titel = neu
   } else if (a.feld === 'ziel') {
-    s.value.ziel = neu
+    if (a.i === undefined) s.value.ziel = neu
+    else s.value.funktionen[a.i].ziel = neu
   } else if (a.feld === 'funktion') {
     if (!neu) s.value.funktionen.splice(a.i, 1) // leeren = löschen
     else s.value.funktionen[a.i].text = neu
-  } else if (a.feld === 'flow') {
-    s.value.funktionen[a.i].flow = neu
-  } else if (a.feld === 'regel') {
-    if (!neu) s.value.funktionen[a.i].regeln.splice(a.j, 1)
-    else s.value.funktionen[a.i].regeln[a.j] = neu
+  } else if (a.feld === 'testen') {
+    s.value.funktionen[a.i].testen = neu
+  } else if (a.feld === 'regeln') {
+    if (a.i === undefined) s.value.regeln = neu
+    else s.value.funktionen[a.i].regeln = neu
   }
   await speichern()
 }
 
 function abbrechenLeer(a) {
-  if (a.original) return
-  if (a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
-  if (a.feld === 'regel') s.value.funktionen[a.i].regeln.splice(a.j, 1)
+  if (!a.original && a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
 }
 
 function neueFunktion() {
-  s.value.funktionen.unshift({ text: '', regeln: [], flow: '' })
+  s.value.funktionen.unshift({ text: '', ziel: '', regeln: '', testen: '' })
   starte('funktion', 0)
 }
 
-function neueRegel(i) {
-  s.value.funktionen[i].regeln.push('')
-  starte('regel', i, s.value.funktionen[i].regeln.length - 1)
-}
-
 function entferneFunktion(i) {
   s.value.funktionen.splice(i, 1)
   speichern()
 }
 
-function entferneRegel(i, j) {
-  s.value.funktionen[i].regeln.splice(j, 1)
-  speichern()
-}
-
 function wechsleArt() {
   s.value.art = s.value.art === 'kern' ? 'optional' : 'kern'
   speichern()
@@ -131,10 +123,13 @@ function baueRoh() {
     `<!-- art -->\n${s.value.art}`,
     `<!-- ziel -->\n${s.value.ziel}`,
   ]
+  if (s.value.regeln) teile.push(`<!-- regeln -->\n${s.value.regeln}`)
   const funktionen = s.value.funktionen
     .map(f => {
-      const bloecke = [`<!-- funktion -->\n${f.text}`, ...f.regeln.map(r => `<!-- regel -->\n${r}`)]
-      if (f.flow) bloecke.push(`<!-- flow -->\n${f.flow}`)
+      const bloecke = [`<!-- funktion -->\n${f.text}`]
+      if (f.ziel) bloecke.push(`<!-- ziel -->\n${f.ziel}`)
+      if (f.regeln) bloecke.push(`<!-- regeln -->\n${f.regeln}`)
+      if (f.testen) bloecke.push(`<!-- testen -->\n${f.testen}`)
       return bloecke.join('\n')
     })
     .join('\n')
@@ -153,42 +148,33 @@ async function speichern() {
   }
 }
 
-const loeschBestaetigung = ref(false)
-
-async function loeschen() {
-  // Erster Klick: Icon wird zum Bestätigungs-Icon, zweiter Klick löscht
-  if (!loeschBestaetigung.value) {
-    loeschBestaetigung.value = true
-    return
-  }
-  loeschBestaetigung.value = false
-  try {
-    await featureLoeschen(props.projekt, props.feature.id)
-    emit('geloescht')
-  } catch (e) {
-    meldung.value = e.message
-  }
-}
-
 function zeilen(text) {
   return Math.max(2, text.split('\n').length)
 }
 
-// Flow-Text („- Schritt“ je Zeile) für die nummerierte Anzeige zerlegen
-function flowSchritte(flow) {
-  return flow.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
+// Blocktext („- Eintrag“ je Zeile) für die Listen-Anzeige zerlegen
+function punkte(text) {
+  return text.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
 }
 
-// Ausführliche Ansicht: Klick auf freie Kartenfläche schaltet um
-const gross = ref(false)
+// Standardansicht ist reine Übersicht: Klick öffnet die ausführliche Ansicht,
+// nur dort wird bearbeitet; Klick auf freie Fläche schließt sie wieder —
+// außer der Klick hat gerade eine Bearbeitung beendet (Blur kommt vor dem Klick)
+let blurZeit = 0
 
 function wechsleAnsicht(e) {
-  if (e.target.closest('button, input, textarea, .klickbar, h3')) return
-  gross.value = !gross.value
+  if (gross.value) {
+    if (e.target.closest('button, input, textarea, .klickbar, h3, .hinweis')) return
+    if (Date.now() - blurZeit < 300) return
+    gross.value = false
+  } else {
+    if (e.target.closest('button, input, textarea')) return
+    gross.value = true
+  }
 }
 
 onMounted(() => {
-  if (props.titelBearbeiten) starte('titel')
+  if (props.vollmodus) gross.value = true
 })
 </script>
 
@@ -197,7 +183,7 @@ onMounted(() => {
     class="karte"
     :class="[s.art, { gross }]"
     @click="wechsleAnsicht"
-    @mouseleave="loeschBestaetigung = false"
+    @contextmenu.prevent.stop="emit('kontextmenue', $event)"
   >
     <header>
       <input
@@ -209,19 +195,15 @@ onMounted(() => {
         @keyup.enter="$event.target.blur()"
         @keydown.esc="abbrechen"
       >
-      <h3 v-else :title="'Klicken zum Bearbeiten'" @click="starte('titel')">{{ s.titel }}</h3>
+      <h3 v-else :title="gross ? 'Klicken zum Bearbeiten' : null" @click="starte('titel')">{{ s.titel }}</h3>
       <button
+        v-if="gross"
         class="badge"
         :class="s.art === 'kern' ? 'blau' : 'gruen'"
         title="Klicken zum Umschalten"
         @click="wechsleArt"
       >{{ s.art }}</button>
-      <button
-        class="icon-knopf rot werkzeug"
-        :class="{ bestaetigen: loeschBestaetigung }"
-        :title="loeschBestaetigung ? 'Wirklich löschen?' : 'Feature löschen'"
-        @click="loeschen"
-      >{{ loeschBestaetigung ? '✓' : '✕' }}</button>
+      <span v-else class="badge" :class="s.art === 'kern' ? 'blau' : 'gruen'">{{ s.art }}</span>
     </header>
 
     <section :class="{ leer: !s.ziel && !istAktiv('ziel') }">
@@ -235,12 +217,29 @@ onMounted(() => {
         @keydown.esc="abbrechen"
       />
       <div v-else-if="s.ziel" class="inhalt klickbar" v-html="md(s.ziel)" @click="starte('ziel')" />
-      <p v-else class="hinweis" @click="starte('ziel')">Ziel ergänzen…</p>
+      <p v-else-if="gross" class="hinweis" @click="starte('ziel')">Ziel ergänzen…</p>
+    </section>
+
+    <!-- Karten-Regeln nur in der ausführlichen Ansicht -->
+    <section v-if="gross" :class="{ leer: !s.regeln && !istAktiv('regeln') }">
+      <p class="gruppe">Regeln</p>
+      <textarea
+        v-if="istAktiv('regeln')"
+        ref="feldRef"
+        v-model="entwurf"
+        :rows="zeilen(entwurf)"
+        @blur="fertig"
+        @keydown.esc="abbrechen"
+      />
+      <div v-else-if="s.regeln" class="klickbar" @click="starte('regeln')">
+        <div v-for="(r, k) in punkte(s.regeln)" :key="k" class="regel">{{ r }}</div>
+      </div>
+      <p v-else-if="gross" class="hinweis" @click="starte('regeln')">Regeln ergänzen…</p>
     </section>
 
     <section :class="{ leer: !s.funktionen.length }">
       <p class="gruppe">Funktionen</p>
-      <button class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
+      <button v-if="gross" class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
       <div class="liste">
       <div
         v-for="(f, i) in s.funktionen"
@@ -259,44 +258,62 @@ onMounted(() => {
             @keydown.esc="abbrechen"
           >
           <div v-else class="funktionstitel klickbar" @click="starte('funktion', i)">{{ f.text }}</div>
-          <button class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
+          <button v-if="gross" class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
         </div>
 
         <!-- Regeln und Flow nur beim Hover über die Funktion (oder während der Bearbeitung) -->
         <div class="details">
-          <!-- Regeln als Punktliste -->
-          <div v-if="f.regeln.length" class="regeln">
-            <div v-for="(r, j) in f.regeln" :key="j" class="zeile">
-              <textarea
-                v-if="istAktiv('regel', i, j)"
-                ref="feldRef"
-                v-model="entwurf"
-                :rows="zeilen(entwurf)"
-                @blur="fertig"
-                @keydown.esc="abbrechen"
-              />
-              <div v-else class="regel klickbar" @click="starte('regel', i, j)">{{ r }}</div>
-              <button class="icon-knopf rot" title="Regel entfernen" @click="entferneRegel(i, j)">✕</button>
+          <!-- Ziel der Funktion -->
+          <div v-if="istAktiv('ziel', i) || f.ziel" class="block">
+            <p class="mini">Ziel</p>
+            <textarea
+              v-if="istAktiv('ziel', i)"
+              ref="feldRef"
+              v-model="entwurf"
+              :rows="zeilen(entwurf)"
+              @blur="fertig"
+              @keydown.esc="abbrechen"
+            />
+            <div v-else class="inhalt klickbar" v-html="md(f.ziel)" @click="starte('ziel', i)" />
+          </div>
+          <button v-if="!f.ziel && !istAktiv('ziel', i)" class="hinzu" @click="starte('ziel', i)">+ Ziel</button>
+
+          <!-- Regeln als Punktliste, ein Block je Funktion -->
+          <div v-if="istAktiv('regeln', i) || f.regeln" class="block">
+            <p class="mini">Regeln</p>
+            <textarea
+              v-if="istAktiv('regeln', i)"
+              ref="feldRef"
+              v-model="entwurf"
+              :rows="zeilen(entwurf)"
+              @blur="fertig"
+              @keydown.esc="abbrechen"
+            />
+            <div v-else class="klickbar" @click="starte('regeln', i)">
+              <div v-for="(r, k) in punkte(f.regeln)" :key="k" class="regel">{{ r }}</div>
             </div>
           </div>
-          <button class="hinzu" @click="neueRegel(i)">+ Regel</button>
+          <button v-if="!f.regeln && !istAktiv('regeln', i)" class="hinzu" @click="starte('regeln', i)">+ Regeln</button>
 
-          <!-- Flow als nummerierte Schritte -->
-          <textarea
-            v-if="istAktiv('flow', i)"
-            ref="feldRef"
-            v-model="entwurf"
-            :rows="zeilen(entwurf)"
-            @blur="fertig"
-            @keydown.esc="abbrechen"
-          />
-          <div v-else-if="f.flow" class="flow klickbar" @click="starte('flow', i)">
-            <div v-for="(schritt, k) in flowSchritte(f.flow)" :key="k" class="schritt">
-              <span class="nr">{{ k + 1 }}.</span>{{ schritt }}
+          <!-- Testen als nummerierte Schritte -->
+          <div v-if="istAktiv('testen', i) || f.testen" class="block">
+            <p class="mini">Testen</p>
+            <textarea
+              v-if="istAktiv('testen', i)"
+              ref="feldRef"
+              v-model="entwurf"
+              :rows="zeilen(entwurf)"
+              @blur="fertig"
+              @keydown.esc="abbrechen"
+            />
+            <div v-else class="klickbar" @click="starte('testen', i)">
+              <div v-for="(schritt, k) in punkte(f.testen)" :key="k" class="schritt">
+                <span class="nr">{{ k + 1 }}.</span>{{ schritt }}
+              </div>
             </div>
           </div>
 
-          <button v-if="!f.flow && !istAktiv('flow', i)" class="hinzu" @click="starte('flow', i)">+ Flow</button>
+          <button v-if="!f.testen && !istAktiv('testen', i)" class="hinzu" @click="starte('testen', i)">+ Testen</button>
         </div>
       </div>
       </div>
@@ -314,7 +331,7 @@ onMounted(() => {
 /* Ausführliche Ansicht: volle Breite, Funktionen in Spalten, alle Details offen.
    Jede Funktion als eigene Box, Zufüge-Knöpfe nur beim Hover über die Box. */
 .karte.gross { column-span: all; display: block; }
-.karte.gross .liste { columns: 2; column-gap: 1.2rem; }
+.karte.gross .liste { columns: 320px; column-gap: 1.2rem; }
 .karte.gross section.leer { display: block; }
 .karte.gross .funktion {
   break-inside: avoid;
@@ -331,9 +348,6 @@ onMounted(() => {
   margin: 0.1rem 0 0;
   padding-left: 0.2rem;
 }
-.karte.gross .details .hinzu { display: none; }
-.karte.gross .funktion:hover .details .hinzu { display: block; }
-.icon-knopf.bestaetigen { color: var(--rot); }
 
 header {
   display: flex;
@@ -343,6 +357,13 @@ header {
   border-bottom: 1px solid var(--rand);
 }
 h3 { margin: 0; font-size: 1rem; cursor: pointer; flex: 1; }
+/* Im Bearbeitungsmodus zeigt Hover die klickbare Titelfläche */
+.karte.gross h3 {
+  padding: 0.1rem 0.3rem;
+  margin-left: -0.3rem;
+  border-radius: 4px;
+}
+.karte.gross h3:hover { background: var(--code-bg); }
 .titel-feld { flex: 1; font-weight: 600; padding: 0.1rem 0.4rem; }
 .badge { cursor: pointer; }
 
@@ -357,9 +378,8 @@ section + section { border-top: 1px solid var(--rand); }
   margin: 0 0 0.15rem;
 }
 
-/* Leere Sektionen und Werkzeuge erscheinen erst beim Hover über die Karte */
+/* Leere Sektionen nur in der ausführlichen Ansicht */
 section.leer { display: none; }
-.karte:hover section.leer { display: block; }
 .werkzeug { opacity: 0; transition: opacity 0.1s; }
 .karte:hover .werkzeug, .werkzeug:focus { opacity: 1; }
 /* „+ Funktion" belegt ohne Hover auch keinen Platz */
@@ -369,9 +389,12 @@ section.leer { display: none; }
 .hinweis {
   color: var(--dezent);
   font-size: 0.85rem;
-  margin: 0.1rem 0;
+  padding: 0.1rem 0.3rem;
+  margin: 0.1rem 0 0.1rem -0.3rem;
+  border-radius: 4px;
   cursor: pointer;
 }
+.hinweis:hover { background: var(--code-bg); }
 .hinzu {
   border: none;
   background: none;
@@ -391,38 +414,35 @@ section.leer { display: none; }
 .zeile .icon-knopf { font-size: 0.8rem; opacity: 0; }
 .zeile:hover .icon-knopf { opacity: 1; }
 
-/* Funktionsliste: Zeilen mit Aufklapp-Pfeil */
+/* Funktionsliste */
 .zeile.kopf { padding: 0.15rem 0.2rem; border-radius: 4px; }
-.zeile.kopf:hover { background: var(--code-bg); }
+.karte.gross .zeile.kopf:hover { background: var(--code-bg); }
 .funktionstitel { flex: 1; }
-.pfeil {
-  color: var(--dezent);
-  font-size: 0.75rem;
-  display: inline-block;
-  transition: transform 0.12s;
+.pfeil { color: var(--dezent); font-size: 0.75rem; }
+
+/* Regeln und Flow nur in der ausführlichen Ansicht */
+.details { display: none; font-size: 0.9rem; }
+
+/* Regeln (Punktliste) und Flow (nummerierte Schritte) als getönte Blöcke */
+.block {
+  background: var(--code-bg);
+  border-radius: 6px;
+  padding: 0.3rem 0.55rem 0.35rem;
+  margin: 0.3rem 0 0.1rem;
 }
-.funktion:hover .pfeil, .funktion.offen .pfeil {
-  transform: rotate(90deg);
+.mini {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--akzent);
+  margin: 0 0 0.1rem;
 }
-
-/* Regeln und Flow erst beim Hover über die Funktion; offen bleiben während Bearbeitung */
-.details { display: none; }
-.funktion:hover .details, .funktion.offen .details {
-  display: block;
-  margin: 0.15rem 0 0.45rem 0.35rem;
-  padding: 0.1rem 0 0.1rem 0.75rem;
-  border-left: 2px solid var(--akzent);
-  font-size: 0.9rem;
-}
-
-/* Regeln als Punktliste, Flow als nummerierte Schritte */
-.regeln { margin: 0.15rem 0; }
-.regel {
-  flex: 1;
+.block .klickbar { border-radius: 4px; }
+.block .klickbar:hover { background: var(--bg); }
+.regel, .schritt {
   position: relative;
   padding-left: 1.15rem;
-  border-radius: 4px;
 }
 .regel::before {
   content: "•";
@@ -430,25 +450,18 @@ section.leer { display: none; }
   left: 0.35rem;
   color: var(--dezent);
 }
-.regel:hover { background: var(--code-bg); }
-/* „+ Regel"/„+ Flow" bündig zur Listen-Einrückung */
-.details .hinzu {
-  display: block;
-  padding: 0.05rem 0 0.05rem 1.15rem;
-  margin: 0.05rem 0;
-}
-.flow { border-radius: 4px; }
-.flow:hover { background: var(--code-bg); }
-.schritt {
-  position: relative;
-  padding-left: 1.15rem;
-}
 .nr {
   position: absolute;
   left: 0.15rem;
   color: var(--dezent);
   font-size: 0.85em;
 }
+/* „+ Regeln"/„+ Flow" bündig zur Listen-Einrückung */
+.details .hinzu {
+  display: block;
+  padding: 0.05rem 0 0.05rem 0.55rem;
+  margin: 0.05rem 0;
+}
 
 textarea {
   width: 100%;
diff --git a/frontend/src/components/FeatureListe.vue b/frontend/src/components/FeatureListe.vue
index 2ef53a5..eb82afd 100644
--- a/frontend/src/components/FeatureListe.vue
+++ b/frontend/src/components/FeatureListe.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { ref, watch } from 'vue'
-import { fetchFeatures, featureAnlegen } from '../api.js'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { fetchFeatures, featureAnlegen, featureLoeschen } from '../api.js'
 import FeatureKarte from './FeatureKarte.vue'
 
 const props = defineProps({
@@ -10,7 +10,7 @@ const emit = defineEmits(['geaendert'])
 
 const features = ref([])
 const meldung = ref('')
-const neuId = ref(null) // frisch angelegte Karte: Titel direkt bearbeiten
+const neuId = ref(null) // frisch angelegte Karte: direkt im Vollmodus öffnen
 
 async function laden() {
   meldung.value = ''
@@ -23,35 +23,84 @@ async function laden() {
   }
 }
 
-async function neuesFeature() {
+function aktualisiert(altId, f) {
+  const idx = features.value.findIndex(x => x.id === altId)
+  if (idx >= 0) features.value[idx] = f
+  if (neuId.value === altId) neuId.value = f.id
+}
+
+// Kontextmenü: Rechtsklick auf eine Card (entfernen) oder den Hauptbereich (erstellen)
+const kontextMenue = ref(null) // {feature|null, x, y}
+
+function oeffneKartenMenue(e, f) {
+  kontextMenue.value = { feature: f, x: e.clientX, y: e.clientY }
+}
+
+function oeffneBereichsMenue(e) {
+  kontextMenue.value = { feature: null, x: e.clientX, y: e.clientY }
+}
+
+function schliesseKontextMenue() {
+  kontextMenue.value = null
+}
+
+onMounted(() => window.addEventListener('click', schliesseKontextMenue))
+onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
+
+// Modal für Erstellen und Entfernen
+const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', feature}
+const modalName = ref('')
+const modalFeld = ref(null)
+
+async function menueErstellen() {
+  kontextMenue.value = null
   meldung.value = ''
+  modal.value = { art: 'erstellen' }
+  modalName.value = ''
+  await nextTick()
+  modalFeld.value?.focus()
+}
+
+function menueEntfernen() {
+  const feature = kontextMenue.value.feature
+  kontextMenue.value = null
+  meldung.value = ''
+  modal.value = { art: 'entfernen', feature }
+}
+
+async function erstellenBestaetigen() {
+  meldung.value = ''
+  const name = modalName.value.trim()
+  if (!name) return
   try {
-    const f = await featureAnlegen(props.projekt, '<!-- titel -->\nNeues Feature\n')
+    const f = await featureAnlegen(props.projekt, `<!-- titel -->\n${name}\n`)
+    modal.value = null
     features.value.push(f)
-    neuId.value = f.id
-    emit('geaendert') // Anzahl in der Seitenleiste aktualisieren
+    neuId.value = f.id // öffnet die Karte im Vollmodus
+    emit('geaendert')
   } catch (e) {
     meldung.value = e.message
   }
 }
 
-function aktualisiert(altId, f) {
-  const idx = features.value.findIndex(x => x.id === altId)
-  if (idx >= 0) features.value[idx] = f
-  if (neuId.value === altId) neuId.value = null
-}
-
-function geloescht(id) {
-  features.value = features.value.filter(f => f.id !== id)
-  emit('geaendert')
+async function entfernenBestaetigen() {
+  meldung.value = ''
+  try {
+    await featureLoeschen(props.projekt, modal.value.feature.id)
+    features.value = features.value.filter(f => f.id !== modal.value.feature.id)
+    modal.value = null
+    emit('geaendert')
+  } catch (e) {
+    meldung.value = e.message
+  }
 }
 
 watch(() => props.projekt, laden, { immediate: true })
 </script>
 
 <template>
-  <div>
-    <p v-if="meldung" class="meldung">{{ meldung }}</p>
+  <div class="bereich" @contextmenu.prevent="oeffneBereichsMenue">
+    <p v-if="meldung && !modal" class="meldung">{{ meldung }}</p>
 
     <div class="gitter">
       <FeatureKarte
@@ -59,16 +108,54 @@ watch(() => props.projekt, laden, { immediate: true })
         :key="f.id"
         :projekt="projekt"
         :feature="f"
-        :titel-bearbeiten="f.id === neuId"
+        :vollmodus="f.id === neuId"
         @aktualisiert="aktualisiert"
-        @geloescht="geloescht(f.id)"
+        @kontextmenue="oeffneKartenMenue($event, f)"
       />
-      <button class="karte neu" @click="neuesFeature">+ Feature</button>
+    </div>
+
+    <div
+      v-if="kontextMenue"
+      class="kontextmenue"
+      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
+    >
+      <button v-if="kontextMenue.feature" @click="menueEntfernen">✕ Feature entfernen</button>
+      <button v-else @click="menueErstellen">+ Feature erstellen</button>
+    </div>
+
+    <div v-if="modal" class="schleier" @click.self="modal = null">
+      <div class="modal karte">
+        <template v-if="modal.art === 'erstellen'">
+          <h2>Feature erstellen</h2>
+          <input
+            ref="modalFeld"
+            v-model="modalName"
+            placeholder="Feature-Titel"
+            @keyup.enter="erstellenBestaetigen"
+            @keydown.esc="modal = null"
+          >
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
+          </footer>
+        </template>
+        <template v-else>
+          <h2>Feature entfernen</h2>
+          <p class="frage">„{{ modal.feature.sektionen.titel }}“ entfernen?</p>
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
+          </footer>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.bereich { min-height: 100%; }
 /* Spaltenlayout: unterschiedlich hohe Karten stapeln sich ohne Lücken */
 .gitter {
   columns: 340px;
@@ -83,13 +170,4 @@ watch(() => props.projekt, laden, { immediate: true })
   margin-bottom: 0.9rem;
   width: 100%;
 }
-/* Geisterkarte statt Kopfzeilen-Knopf */
-.neu {
-  border: 1px dashed var(--rand);
-  background: none;
-  color: var(--dezent);
-  min-height: 90px;
-  font-size: 0.95rem;
-}
-.neu:hover { color: var(--akzent); border-color: var(--akzent); }
 </style>
diff --git a/frontend/src/components/SeitenLeiste.vue b/frontend/src/components/SeitenLeiste.vue
index 984963d..27d5f6b 100644
--- a/frontend/src/components/SeitenLeiste.vue
+++ b/frontend/src/components/SeitenLeiste.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { projektAnlegen, projektUmbenennen, projektLoeschen } from '../api.js'
 
 const props = defineProps({
@@ -8,26 +8,10 @@ const props = defineProps({
 })
 const emit = defineEmits(['auswaehlen', 'geaendert', 'umbenannt'])
 
-const neuerName = ref('')
 const meldung = ref('')
 const bearbeitet = ref(null) // Projektname, der gerade umbenannt wird
 const umbenennung = ref('')
 const umbenennFeld = ref(null)
-const loeschBestaetigung = ref(null) // Projektname, dessen ✕ auf Bestätigung wartet
-
-async function anlegen() {
-  meldung.value = ''
-  const name = neuerName.value.trim()
-  if (!name) return
-  try {
-    await projektAnlegen(name)
-    neuerName.value = ''
-    emit('geaendert')
-    emit('auswaehlen', name)
-  } catch (e) {
-    meldung.value = e.message
-  }
-}
 
 async function starteUmbenennen(name) {
   meldung.value = ''
@@ -49,16 +33,71 @@ async function umbenennen(alt) {
   }
 }
 
-async function loeschen(name) {
-  // Erster Klick: Icon wird zum Bestätigungs-Icon, zweiter Klick löscht
-  if (loeschBestaetigung.value !== name) {
-    loeschBestaetigung.value = name
-    return
+// Kontextmenü: Rechtsklick auf Projektname (anpassen/entfernen)
+// oder auf freie Sidebar-Fläche (erstellen)
+const kontextMenue = ref(null) // {name|null, x, y}
+
+function oeffneProjektMenue(e, name) {
+  kontextMenue.value = { name, x: e.clientX, y: e.clientY }
+}
+
+function oeffneLeistenMenue(e) {
+  kontextMenue.value = { name: null, x: e.clientX, y: e.clientY }
+}
+
+function schliesseKontextMenue() {
+  kontextMenue.value = null
+}
+
+onMounted(() => window.addEventListener('click', schliesseKontextMenue))
+onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
+
+// Modal für Erstellen und Entfernen
+const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', name}
+const modalName = ref('')
+const modalFeld = ref(null)
+
+async function menueErstellen() {
+  kontextMenue.value = null
+  meldung.value = ''
+  modal.value = { art: 'erstellen' }
+  modalName.value = ''
+  await nextTick()
+  modalFeld.value?.focus()
+}
+
+function menueAnpassen() {
+  const name = kontextMenue.value.name
+  kontextMenue.value = null
+  starteUmbenennen(name)
+}
+
+function menueEntfernen() {
+  const name = kontextMenue.value.name
+  kontextMenue.value = null
+  meldung.value = ''
+  modal.value = { art: 'entfernen', name }
+}
+
+async function erstellenBestaetigen() {
+  meldung.value = ''
+  const name = modalName.value.trim()
+  if (!name) return
+  try {
+    await projektAnlegen(name)
+    modal.value = null
+    emit('geaendert')
+    emit('auswaehlen', name) // Projekt wird direkt aufgerufen
+  } catch (e) {
+    meldung.value = e.message
   }
-  loeschBestaetigung.value = null
+}
+
+async function entfernenBestaetigen() {
   meldung.value = ''
   try {
-    await projektLoeschen(name)
+    await projektLoeschen(modal.value.name)
+    modal.value = null
     emit('geaendert')
   } catch (e) {
     meldung.value = e.message
@@ -67,7 +106,7 @@ async function loeschen(name) {
 </script>
 
 <template>
-  <aside>
+  <aside @contextmenu.prevent="oeffneLeistenMenue">
     <header>
       <p class="gruppe">Projekte</p>
       <slot />
@@ -78,7 +117,7 @@ async function loeschen(name) {
         :key="p.name"
         :class="{ aktiv: p.name === aktiv }"
         @click="emit('auswaehlen', p.name)"
-        @mouseleave="loeschBestaetigung = null"
+        @contextmenu.prevent.stop="oeffneProjektMenue($event, p.name)"
       >
         <template v-if="bearbeitet === p.name">
           <input
@@ -92,25 +131,51 @@ async function loeschen(name) {
         </template>
         <template v-else>
           <span class="name">{{ p.name }}</span>
-          <span class="anzahl">{{ p.anzahl }}</span>
-          <span class="aktionen" @click.stop>
-            <button class="icon-knopf" title="Umbenennen" @click="starteUmbenennen(p.name)">✎</button>
-            <button
-              class="icon-knopf rot"
-              :class="{ bestaetigen: loeschBestaetigung === p.name }"
-              :title="loeschBestaetigung === p.name ? 'Wirklich löschen?' : 'Löschen'"
-              @click="loeschen(p.name)"
-            >{{ loeschBestaetigung === p.name ? '✓' : '✕' }}</button>
-          </span>
         </template>
       </li>
     </ul>
+    <p v-if="meldung && !modal" class="meldung">{{ meldung }}</p>
 
-    <form class="neu" @submit.prevent="anlegen">
-      <input v-model="neuerName" placeholder="Neues Projekt">
-      <button class="primaer" :disabled="!neuerName.trim()">+</button>
-    </form>
-    <p v-if="meldung" class="meldung">{{ meldung }}</p>
+    <div
+      v-if="kontextMenue"
+      class="kontextmenue"
+      :style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
+    >
+      <template v-if="kontextMenue.name">
+        <button @click="menueAnpassen">✎ Projekt anpassen</button>
+        <button @click="menueEntfernen">✕ Projekt entfernen</button>
+      </template>
+      <button v-else @click="menueErstellen">+ Projekt erstellen</button>
+    </div>
+
+    <div v-if="modal" class="schleier" @click.self="modal = null">
+      <div class="modal karte">
+        <template v-if="modal.art === 'erstellen'">
+          <h2>Projekt erstellen</h2>
+          <input
+            ref="modalFeld"
+            v-model="modalName"
+            placeholder="Projektname"
+            @keyup.enter="erstellenBestaetigen"
+            @keydown.esc="modal = null"
+          >
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
+          </footer>
+        </template>
+        <template v-else>
+          <h2>Projekt entfernen</h2>
+          <p class="frage">„{{ modal.name }}“ mit allen Features entfernen?</p>
+          <p v-if="meldung" class="meldung">{{ meldung }}</p>
+          <footer>
+            <button @click="modal = null">Abbrechen</button>
+            <button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
+          </footer>
+        </template>
+      </div>
+    </div>
   </aside>
 </template>
 
@@ -154,16 +219,6 @@ li.aktiv { background: var(--bg); font-weight: 600; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.anzahl { color: var(--dezent); font-size: 0.78rem; }
-.aktionen { display: none; }
-li:hover .aktionen { display: inline-flex; }
-li:hover .anzahl { display: none; }
 li input { width: 100%; padding: 0.1rem 0.4rem; }
-.icon-knopf.bestaetigen { color: var(--rot); }
-.neu {
-  display: flex;
-  gap: 0.4rem;
-  margin-top: 0.4rem;
-}
-.neu input { flex: 1; min-width: 0; }
+
 </style>