Input-Text geht, CORS behoben

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Frontend Dockerfile
-FROM node:18-alpine AS builder
+FROM node:22.12.0-alpine AS builder
 
 # Set working directory
 WORKDIR /app

frontend/package-lock.json

@@ -26,6 +26,9 @@
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.43.0",
         "vite": "^7.1.6"
+      },
+      "engines": {
+        "node": ">=20.19.0 <21 || >=22.12.0"
       }
     },
     "node_modules/@babel/code-frame": {

frontend/package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=20.19.0 <21 || >=22.12.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

frontend/src/components/RecipeEdit.css

@@ -140,6 +140,15 @@
   font-family: inherit;
   transition: all 0.3s ease;
   background: white;
+  color: #333; /* Ensure visible text color (fix for invisible typed characters) */
+  caret-color: #333;
+}
+
+/* Placeholder visibility */
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: #888;
+  opacity: 1; /* Override browser lower opacity */
 }
 
 .form-group input:focus,

frontend/src/index.css

@@ -23,11 +23,12 @@ a:hover {
 }
 
 body {
+  /* Removed global flex centering (display:flex + place-items:center) because it created a layout
+     that could interfere with stacking/focus of interactive form elements ("Neues Rezept" Eingabeproblem). */
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  /* Let the app container (see App.css .App) handle layout instead. */
 }
 
 h1 {