Script in eigene File verschoben, Startscripte geändert

package.json

@@ -5,8 +5,10 @@
   "type": "module",
   "main": "server.js",
   "scripts": {
+    "dev": "node --env-file=.env server.js & sleep 1 && xdg-open http://localhost:3000",
+    "dev:dry": "node server.js & sleep 1 && xdg-open http://localhost:3000",
     "start": "node --env-file=.env server.js",
-    "start:dry": "node server.js"
+    "prod": "NODE_ENV=production node --env-file=.env server.js"
   },
   "engines": { "node": ">=20" },
   "dependencies": {

public/index.html

@@ -4,115 +4,13 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Ticket anlegen - Service-Portal</title>
-<style>
+<link href="styles.css" rel="stylesheet">
-    :root {
-        --ink: #1B2430;
-        --ink-soft: #5C6B7A;
-        --surface: #FFFFFF;
-        --canvas: #F5F7F8;
-        --line: #D7DEE3;
-        --accent: #0E7C7B;
-        --accent-dark: #0B6362;
-        --ok: #1D7A3E;
-        --bad: #B3261E;
-        --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
-    }
-    * { box-sizing: border-box; margin: 0; }
-    body {
-        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-        background: var(--canvas);
-        color: var(--ink);
-        min-height: 100vh;
-        padding: 48px 16px;
-    }
-    main { max-width: 560px; margin: 0 auto; }
-    header { margin-bottom: 28px; }
-    header h1 { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.01em; }
-    header p { color: var(--ink-soft); margin-top: 6px; font-size: 0.95rem; }
-
-    .step {
-        background: var(--surface);
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        padding: 20px;
-        margin-bottom: 16px;
-    }
-    .step[data-disabled="true"] { opacity: 0.45; pointer-events: none; }
-    .step-label {
-        display: flex; align-items: baseline; gap: 8px;
-        font-size: 0.8rem; font-weight: 650; text-transform: uppercase;
-        letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 12px;
-    }
-    .step-label .num { font-family: var(--mono); color: var(--accent); }
-
-    label { display: block; font-size: 0.9rem; font-weight: 600; margin: 14px 0 6px; }
-    label:first-of-type { margin-top: 0; }
-    input[type="text"], textarea {
-        width: 100%; font: inherit; color: inherit;
-        padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
-        background: var(--surface);
-    }
-    input[type="text"]:focus-visible, textarea:focus-visible, button:focus-visible {
-        outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
-    }
-    textarea { min-height: 110px; resize: vertical; }
-
-    /* Autocomplete */
-    .search-wrap { position: relative; }
-    #customerSearch { font-size: 1.05rem; padding: 13px 14px; }
-    .suggestions {
-        position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
-        background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
-        box-shadow: 0 8px 24px rgba(27, 36, 48, 0.12);
-        max-height: 320px; overflow-y: auto; display: none;
-    }
-    .suggestions.open { display: block; }
-    .suggestion {
-        display: flex; gap: 12px; align-items: baseline;
-        padding: 10px 14px; cursor: pointer; border: 0; width: 100%;
-        background: transparent; font: inherit; text-align: left;
-    }
-    .suggestion + .suggestion { border-top: 1px solid var(--canvas); }
-    .suggestion.active, .suggestion:hover { background: #E9F3F3; }
-    .suggestion .cnum { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); white-space: nowrap; }
-    .suggestion-empty { padding: 12px 14px; color: var(--ink-soft); font-size: 0.9rem; }
-
-    /* Gewaehlter Kunde als Chip */
-    .customer-chip {
-        display: none; align-items: center; gap: 12px;
-        background: #E9F3F3; border: 1px solid var(--accent);
-        border-radius: 8px; padding: 12px 14px;
-    }
-    .customer-chip.visible { display: flex; }
-    .customer-chip .cnum { font-family: var(--mono); font-weight: 600; color: var(--accent); }
-    .customer-chip .cname { flex: 1; font-weight: 600; }
-    .customer-chip button {
-        border: 0; background: transparent; color: var(--ink-soft);
-        font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline;
-    }
-
-    .actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
-    .submit {
-        font: inherit; font-weight: 650; color: #fff; background: var(--accent);
-        border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer;
-    }
-    .submit:hover { background: #0B6362; }
-    .submit:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
-
-    .feedback { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 0.92rem; display: none; }
-    .feedback.error { display: block; background: #FBEAE9; color: var(--bad); border: 1px solid #EBC4C1; }
-    .feedback.success { display: block; background: #E8F3EC; color: var(--ok); border: 1px solid #BFDEC9; }
-    .feedback a { color: inherit; font-weight: 650; }
-    .feedback .mono { font-family: var(--mono); }
-
-    footer { margin-top: 20px; font-size: 0.8rem; color: var(--ink-soft); }
-</style>
 </head>
 <body>
 <main>
     <header>
         <h1>Service-Ticket anlegen</h1>
-        <p>Zuerst den Kunden waehlen, dann das Anliegen erfassen. Das Ticket landet direkt in Redmine.</p>
+        <p>Zuerst den Kunden wählen, dann das Anliegen erfassen. Das Ticket landet direkt in Redmine.</p>
     </header>
 
     <section class="step" id="stepCustomer">
@@ -129,7 +27,7 @@
         <div class="customer-chip" id="customerChip">
             <span class="cnum" id="chipNumber"></span>
             <span class="cname" id="chipName"></span>
-            <button type="button" id="chipReset">Aendern</button>
+            <button type="button" id="chipReset">Ändern</button>
         </div>
     </section>
 
@@ -137,7 +35,7 @@
         <div class="step-label"><span class="num">2</span> Anliegen</div>
 
         <label for="subject">Betreff</label>
-        <input type="text" id="subject" maxlength="200" placeholder="Kurze Zusammenfassung der Stoerung">
+        <input type="text" id="subject" maxlength="200" placeholder="Kurze Zusammenfassung der Störung">
 
         <label for="description">Beschreibung</label>
         <textarea id="description" placeholder="Was ist passiert? Fehlermeldungen, betroffene Systeme, Ansprechpartner ..."></textarea>
@@ -148,174 +46,9 @@
         <div class="feedback" id="feedback"></div>
     </section>
 
-    <footer>Der Kundenbezug wird serverseitig gegen die Stammdaten geprueft, bevor das Ticket erstellt wird.</footer>
+    <footer>Der Kundenbezug wird serverseitig gegen die Stammdaten geprüft, bevor das Ticket erstellt wird.</footer>
 </main>
 
-<script>
+<script src="index.js"></script>
-(function () {
-    "use strict";
-
-    const searchInput = document.getElementById("customerSearch");
-    const searchWrap = document.getElementById("searchWrap");
-    const suggestionsBox = document.getElementById("suggestions");
-    const customerChip = document.getElementById("customerChip");
-    const chipNumber = document.getElementById("chipNumber");
-    const chipName = document.getElementById("chipName");
-    const chipReset = document.getElementById("chipReset");
-    const stepIssue = document.getElementById("stepIssue");
-    const subjectInput = document.getElementById("subject");
-    const descriptionInput = document.getElementById("description");
-    const submitButton = document.getElementById("submitButton");
-    const feedback = document.getElementById("feedback");
-
-    let selectedCustomer = null;
-    let currentResults = [];
-    let activeIndex = -1;
-    let debounceTimer = null;
-
-    function updateSubmitState() {
-        const subjectOk = subjectInput.value.trim().length >= 5;
-        submitButton.disabled = !(selectedCustomer && subjectOk);
-    }
-
-    function closeSuggestions() {
-        suggestionsBox.classList.remove("open");
-        searchInput.setAttribute("aria-expanded", "false");
-        activeIndex = -1;
-    }
-
-    function renderSuggestions() {
-        suggestionsBox.innerHTML = "";
-        if (currentResults.length === 0) {
-            const empty = document.createElement("div");
-            empty.className = "suggestion-empty";
-            empty.textContent = "Kein Kunde gefunden. Nummer und Schreibweise pruefen.";
-            suggestionsBox.appendChild(empty);
-        } else {
-            currentResults.forEach((customer, index) => {
-                const item = document.createElement("button");
-                item.type = "button";
-                item.className = index === activeIndex ? "suggestion active" : "suggestion";
-                item.setAttribute("role", "option");
-                item.innerHTML = "";
-                const numberSpan = document.createElement("span");
-                numberSpan.className = "cnum";
-                numberSpan.textContent = customer.number;
-                const nameSpan = document.createElement("span");
-                nameSpan.textContent = customer.name;
-                item.appendChild(numberSpan);
-                item.appendChild(nameSpan);
-                item.addEventListener("click", () => selectCustomer(customer));
-                suggestionsBox.appendChild(item);
-            });
-        }
-        suggestionsBox.classList.add("open");
-        searchInput.setAttribute("aria-expanded", "true");
-    }
-
-    async function runSearch(query) {
-        try {
-            const response = await fetch("/api/customers?search=" + encodeURIComponent(query));
-            const payload = await response.json();
-            currentResults = payload.results;
-            activeIndex = currentResults.length > 0 ? 0 : -1;
-            renderSuggestions();
-        } catch (error) {
-            currentResults = [];
-            renderSuggestions();
-        }
-    }
-
-    function selectCustomer(customer) {
-        selectedCustomer = customer;
-        chipNumber.textContent = customer.number;
-        chipName.textContent = customer.name;
-        customerChip.classList.add("visible");
-        searchWrap.style.display = "none";
-        closeSuggestions();
-        stepIssue.dataset.disabled = "false";
-        updateSubmitState();
-        subjectInput.focus();
-    }
-
-    function resetCustomer() {
-        selectedCustomer = null;
-        customerChip.classList.remove("visible");
-        searchWrap.style.display = "";
-        searchInput.value = "";
-        stepIssue.dataset.disabled = "true";
-        updateSubmitState();
-        searchInput.focus();
-    }
-
-    searchInput.addEventListener("input", () => {
-        const query = searchInput.value.trim();
-        clearTimeout(debounceTimer);
-        if (query.length < 2) { closeSuggestions(); return; }
-        debounceTimer = setTimeout(() => runSearch(query), 200);
-    });
-
-    searchInput.addEventListener("keydown", (event) => {
-        const isOpen = suggestionsBox.classList.contains("open");
-        if (event.key === "ArrowDown" && isOpen) {
-            event.preventDefault();
-            activeIndex = Math.min(activeIndex + 1, currentResults.length - 1);
-            renderSuggestions();
-        } else if (event.key === "ArrowUp" && isOpen) {
-            event.preventDefault();
-            activeIndex = Math.max(activeIndex - 1, 0);
-            renderSuggestions();
-        } else if (event.key === "Enter" && isOpen && activeIndex >= 0) {
-            event.preventDefault();
-            selectCustomer(currentResults[activeIndex]);
-        } else if (event.key === "Escape") {
-            closeSuggestions();
-        }
-    });
-
-    document.addEventListener("click", (event) => {
-        if (!searchWrap.contains(event.target)) { closeSuggestions(); }
-    });
-
-    chipReset.addEventListener("click", resetCustomer);
-    subjectInput.addEventListener("input", updateSubmitState);
-
-    submitButton.addEventListener("click", async () => {
-        feedback.className = "feedback";
-        submitButton.disabled = true;
-        submitButton.textContent = "Wird angelegt ...";
-
-        try {
-            const response = await fetch("/api/tickets", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    customerNumber: selectedCustomer.number,
-                    subject: subjectInput.value,
-                    description: descriptionInput.value,
-                }),
-            });
-            const payload = await response.json();
-
-            if (response.status === 201) {
-                const dryRunHint = payload.dryRun ? " (Trockenlauf, nicht wirklich in Redmine angelegt)" : "";
-                feedback.className = "feedback success";
-                feedback.innerHTML = "Ticket <a class=\"mono\" href=\"" + payload.issueUrl + "\" target=\"_blank\" rel=\"noopener\">#" + payload.issueId + "</a> fuer <span class=\"mono\">" + payload.customer.number + "</span> angelegt." + dryRunHint;
-                subjectInput.value = "";
-                descriptionInput.value = "";
-            } else {
-                feedback.className = "feedback error";
-                feedback.textContent = payload.error || "Unbekannter Fehler beim Anlegen des Tickets.";
-            }
-        } catch (error) {
-            feedback.className = "feedback error";
-            feedback.textContent = "Server nicht erreichbar. Bitte spaeter erneut versuchen.";
-        } finally {
-            submitButton.textContent = "Ticket anlegen";
-            updateSubmitState();
-        }
-    });
-})();
-</script>
 </body>
 </html>

public/index.js

@@ -0,0 +1,164 @@
+(function () {
+    "use strict";
+
+    const searchInput = document.getElementById("customerSearch");
+    const searchWrap = document.getElementById("searchWrap");
+    const suggestionsBox = document.getElementById("suggestions");
+    const customerChip = document.getElementById("customerChip");
+    const chipNumber = document.getElementById("chipNumber");
+    const chipName = document.getElementById("chipName");
+    const chipReset = document.getElementById("chipReset");
+    const stepIssue = document.getElementById("stepIssue");
+    const subjectInput = document.getElementById("subject");
+    const descriptionInput = document.getElementById("description");
+    const submitButton = document.getElementById("submitButton");
+    const feedback = document.getElementById("feedback");
+
+    let selectedCustomer = null;
+    let currentResults = [];
+    let activeIndex = -1;
+    let debounceTimer = null;
+
+    function updateSubmitState() {
+        const subjectOk = subjectInput.value.trim().length >= 5;
+        submitButton.disabled = !(selectedCustomer && subjectOk);
+    }
+
+    function closeSuggestions() {
+        suggestionsBox.classList.remove("open");
+        searchInput.setAttribute("aria-expanded", "false");
+        activeIndex = -1;
+    }
+
+    function renderSuggestions() {
+        suggestionsBox.innerHTML = "";
+        if (currentResults.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "suggestion-empty";
+            empty.textContent = "Kein Kunde gefunden. Nummer und Schreibweise prüfen.";
+            suggestionsBox.appendChild(empty);
+        } else {
+            currentResults.forEach((customer, index) => {
+                const item = document.createElement("button");
+                item.type = "button";
+                item.className = index === activeIndex ? "suggestion active" : "suggestion";
+                item.setAttribute("role", "option");
+                item.innerHTML = "";
+                const numberSpan = document.createElement("span");
+                numberSpan.className = "cnum";
+                numberSpan.textContent = customer.number;
+                const nameSpan = document.createElement("span");
+                nameSpan.textContent = customer.name;
+                item.appendChild(numberSpan);
+                item.appendChild(nameSpan);
+                item.addEventListener("click", () => selectCustomer(customer));
+                suggestionsBox.appendChild(item);
+            });
+        }
+        suggestionsBox.classList.add("open");
+        searchInput.setAttribute("aria-expanded", "true");
+    }
+
+    async function runSearch(query) {
+        try {
+            const response = await fetch("/api/customers?search=" + encodeURIComponent(query));
+            const payload = await response.json();
+            currentResults = payload.results;
+            activeIndex = currentResults.length > 0 ? 0 : -1;
+            renderSuggestions();
+        } catch (error) {
+            currentResults = [];
+            renderSuggestions();
+        }
+    }
+
+    function selectCustomer(customer) {
+        selectedCustomer = customer;
+        chipNumber.textContent = customer.number;
+        chipName.textContent = customer.name;
+        customerChip.classList.add("visible");
+        searchWrap.style.display = "none";
+        closeSuggestions();
+        stepIssue.dataset.disabled = "false";
+        updateSubmitState();
+        subjectInput.focus();
+    }
+
+    function resetCustomer() {
+        selectedCustomer = null;
+        customerChip.classList.remove("visible");
+        searchWrap.style.display = "";
+        searchInput.value = "";
+        stepIssue.dataset.disabled = "true";
+        updateSubmitState();
+        searchInput.focus();
+    }
+
+    searchInput.addEventListener("input", () => {
+        const query = searchInput.value.trim();
+        clearTimeout(debounceTimer);
+        if (query.length < 2) { closeSuggestions(); return; }
+        debounceTimer = setTimeout(() => runSearch(query), 200);
+    });
+
+    searchInput.addEventListener("keydown", (event) => {
+        const isOpen = suggestionsBox.classList.contains("open");
+        if (event.key === "ArrowDown" && isOpen) {
+            event.preventDefault();
+            activeIndex = Math.min(activeIndex + 1, currentResults.length - 1);
+            renderSuggestions();
+        } else if (event.key === "ArrowUp" && isOpen) {
+            event.preventDefault();
+            activeIndex = Math.max(activeIndex - 1, 0);
+            renderSuggestions();
+        } else if (event.key === "Enter" && isOpen && activeIndex >= 0) {
+            event.preventDefault();
+            selectCustomer(currentResults[activeIndex]);
+        } else if (event.key === "Escape") {
+            closeSuggestions();
+        }
+    });
+
+    document.addEventListener("click", (event) => {
+        if (!searchWrap.contains(event.target)) { closeSuggestions(); }
+    });
+
+    chipReset.addEventListener("click", resetCustomer);
+    subjectInput.addEventListener("input", updateSubmitState);
+
+    submitButton.addEventListener("click", async () => {
+        feedback.className = "feedback";
+        submitButton.disabled = true;
+        submitButton.textContent = "Wird angelegt ...";
+
+        try {
+            const response = await fetch("/api/tickets", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    customerNumber: selectedCustomer.number,
+                    subject: subjectInput.value,
+                    description: descriptionInput.value,
+                }),
+            });
+            const payload = await response.json();
+
+            if (response.status === 201) {
+                const dryRunHint = payload.dryRun ? " (Trockenlauf, nicht wirklich in Redmine angelegt)" : "";
+                feedback.className = "feedback success";
+                feedback.innerHTML = "Ticket <a class=\"mono\" href=\"" + payload.issueUrl + "\" target=\"_blank\" rel=\"noopener\">#" + payload.issueId + "</a> fuer <span class=\"mono\">" + payload.customer.number + "</span> angelegt." + dryRunHint;
+                subjectInput.value = "";
+                descriptionInput.value = "";
+            } else {
+                feedback.className = "feedback error";
+                feedback.textContent = payload.error || "Unbekannter Fehler beim Anlegen des Tickets.";
+            }
+        } catch (error) {
+            feedback.className = "feedback error";
+            feedback.textContent = "Server nicht erreichbar. Bitte später erneut versuchen.";
+        } finally {
+            submitButton.textContent = "Ticket anlegen";
+            updateSubmitState();
+        }
+    });
+})();

public/styles.css

@@ -0,0 +1,276 @@
+:root {
+    --ink: #1B2430;
+    --ink-soft: #5C6B7A;
+    --surface: #FFFFFF;
+    --canvas: #F5F7F8;
+    --line: #D7DEE3;
+    --accent: #0E7C7B;
+    --accent-dark: #0B6362;
+    --ok: #1D7A3E;
+    --bad: #B3261E;
+    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+body {
+    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    background: var(--canvas);
+    color: var(--ink);
+    min-height: 100vh;
+    padding: 48px 16px;
+}
+
+main {
+    max-width: 560px;
+    margin: 0 auto;
+}
+
+header {
+    margin-bottom: 28px;
+}
+
+header h1 {
+    font-size: 1.45rem;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+}
+
+header p {
+    color: var(--ink-soft);
+    margin-top: 6px;
+    font-size: 0.95rem;
+}
+
+.step {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 16px;
+}
+
+.step[data-disabled="true"] {
+    opacity: 0.45;
+    pointer-events: none;
+}
+
+.step-label {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 0.8rem;
+    font-weight: 650;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ink-soft);
+    margin-bottom: 12px;
+}
+
+.step-label .num {
+    font-family: var(--mono);
+    color: var(--accent);
+}
+
+label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 14px 0 6px;
+}
+
+label:first-of-type {
+    margin-top: 0;
+}
+
+input[type="text"],
+textarea {
+    width: 100%;
+    font: inherit;
+    color: inherit;
+    padding: 10px 12px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: var(--surface);
+}
+
+input[type="text"]:focus-visible,
+textarea:focus-visible,
+button:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+    border-color: var(--accent);
+}
+
+textarea {
+    min-height: 110px;
+    resize: vertical;
+}
+
+/* Autocomplete */
+.search-wrap {
+    position: relative;
+}
+
+#customerSearch {
+    font-size: 1.05rem;
+    padding: 13px 14px;
+}
+
+.suggestions {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + 4px);
+    z-index: 10;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(27, 36, 48, 0.12);
+    max-height: 320px;
+    overflow-y: auto;
+    display: none;
+}
+
+.suggestions.open {
+    display: block;
+}
+
+.suggestion {
+    display: flex;
+    gap: 12px;
+    align-items: baseline;
+    padding: 10px 14px;
+    cursor: pointer;
+    border: 0;
+    width: 100%;
+    background: transparent;
+    font: inherit;
+    text-align: left;
+}
+
+.suggestion+.suggestion {
+    border-top: 1px solid var(--canvas);
+}
+
+.suggestion.active,
+.suggestion:hover {
+    background: #E9F3F3;
+}
+
+.suggestion .cnum {
+    font-family: var(--mono);
+    font-size: 0.85rem;
+    color: var(--accent);
+    white-space: nowrap;
+}
+
+.suggestion-empty {
+    padding: 12px 14px;
+    color: var(--ink-soft);
+    font-size: 0.9rem;
+}
+
+/* Gewaehlter Kunde als Chip */
+.customer-chip {
+    display: none;
+    align-items: center;
+    gap: 12px;
+    background: #E9F3F3;
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    padding: 12px 14px;
+}
+
+.customer-chip.visible {
+    display: flex;
+}
+
+.customer-chip .cnum {
+    font-family: var(--mono);
+    font-weight: 600;
+    color: var(--accent);
+}
+
+.customer-chip .cname {
+    flex: 1;
+    font-weight: 600;
+}
+
+.customer-chip button {
+    border: 0;
+    background: transparent;
+    color: var(--ink-soft);
+    font: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-top: 18px;
+}
+
+.submit {
+    font: inherit;
+    font-weight: 650;
+    color: #fff;
+    background: var(--accent);
+    border: 0;
+    border-radius: 8px;
+    padding: 11px 22px;
+    cursor: pointer;
+}
+
+.submit:hover {
+    background: #0B6362;
+}
+
+.submit:disabled {
+    background: var(--line);
+    color: var(--ink-soft);
+    cursor: not-allowed;
+}
+
+.feedback {
+    margin-top: 14px;
+    padding: 12px 14px;
+    border-radius: 8px;
+    font-size: 0.92rem;
+    display: none;
+}
+
+.feedback.error {
+    display: block;
+    background: #FBEAE9;
+    color: var(--bad);
+    border: 1px solid #EBC4C1;
+}
+
+.feedback.success {
+    display: block;
+    background: #E8F3EC;
+    color: var(--ok);
+    border: 1px solid #BFDEC9;
+}
+
+.feedback a {
+    color: inherit;
+    font-weight: 650;
+}
+
+.feedback .mono {
+    font-family: var(--mono);
+}
+
+footer {
+    margin-top: 20px;
+    font-size: 0.8rem;
+    color: var(--ink-soft);
+}

server.js

@@ -16,7 +16,7 @@ const config = {
     customersFile: process.env.CUSTOMERS_FILE || path.join(__dirname, "data", "customers.csv"),
 };
 
-// Ohne API-Key laeuft der Server im Trockenlauf: Tickets werden nur simuliert.
+// Ohne API-Key läuft der Server im Trockenlauf: Tickets werden nur simuliert.
 const dryRun = config.redmineApiKey === "";
 
 // --- Kundenstammdaten laden (CSV: Kundennummer;Firmenname) ---
@@ -97,7 +97,7 @@ const app = express();
 app.use(express.json());
 app.use(express.static(path.join(__dirname, "public")));
 
-// GET /api/customers?search=... -> Trefferliste fuer das Autocomplete
+// GET /api/customers?search=... -> Trefferliste für das Autocomplete
 app.get("/api/customers", (request, response) => {
     const query = String(request.query.search || "").trim();
     if (query.length < 2) {
@@ -113,7 +113,7 @@ app.post("/api/tickets", async (request, response) => {
 
     const customer = customersByNumber.get(String(customerNumber || "").trim());
     if (!customer) {
-        return response.status(422).json({ error: "Unbekannte Kundennummer. Bitte einen Kunden aus der Vorschlagsliste waehlen." });
+        return response.status(422).json({ error: "Unbekannte Kundennummer. Bitte einen Kunden aus der Vorschlagsliste wählen." });
     }
     if (!subject || String(subject).trim().length < 5) {
         return response.status(422).json({ error: "Der Betreff muss mindestens 5 Zeichen lang sein." });
@@ -150,5 +150,5 @@ app.use((error, request, response, next) => {
 
 app.listen(config.port, () => {
     const mode = dryRun ? "TROCKENLAUF (kein REDMINE_API_KEY gesetzt, Tickets werden simuliert)" : `verbunden mit ${config.redmineUrl}`;
-    console.log(`Ticket-Portal laeuft auf http://localhost:${config.port} - Modus: ${mode}`);
+    console.log(`Ticket-Portal läuft auf http://localhost:${config.port} - Modus: ${mode}`);
 });