diff --git a/public/index.html b/public/index.html
index 12a8757..fb1efa7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,109 +4,7 @@
Ticket anlegen - Service-Portal
-
+
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..57dfe28
--- /dev/null
+++ b/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);
+}
\ No newline at end of file