From cd6a4698aa4927e44592018d116edc2837c30974 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Mon, 14 Sep 2026 10:47:16 +0200
Subject: [PATCH] fix(anhaenge): Anhang-Bereich ruhiger und im Stil der
 Eingabefelder

Die beiden Texte steckten in .form-hint -- eine spaetere Regel fuer den
SSO-Login macht daraus einen umrandeten Kasten in Primaerfarbe. Fuer eine
Warnung ist das richtig, fuer eine Bildunterschrift viel zu laut. Eigene
leise Klasse statt dessen.

"Datei hinzufuegen" sieht jetzt aus wie die Textfelder darueber: gleicher
Grund, Rahmen, Radius und Innenabstand, nur linksbuendig und in der
gedaempften Textfarbe.

Der Leerzustand "Keine Anhaenge" faellt weg -- die Erinnerungsliste macht
es genauso, und die Zeile unter dem Knopf sagt ohnehin, was hier hin kann.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/css/app.css    | 21 ++++++++++++++++++++-
 frontend/index.html     |  4 ++--
 frontend/js/calendar.js |  8 ++------
 frontend/js/i18n.js     |  2 --
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/css/app.css b/frontend/css/app.css
index 8d02fbe..e118867 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -399,7 +399,26 @@ a { color: var(--primary); text-decoration: none; }
 .ev-reminder-before { color: var(--text-3); font-size: 12px; }
 
 /* ── Attachments ─────────────────────────────────────── */
-.ev-attach-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
+.ev-attach-list:not(:empty) { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
+/* Looks like the text inputs above it rather than a button: same ground,
+   border, radius and padding, just left-aligned and in the muted text colour.
+   NOT .form-hint for the caption below — a later rule turns that class into a
+   bordered callout box, which is right for a warning and far too loud here. */
+.ev-attach-add {
+  display: block; width: 100%; text-align: left;
+  background: var(--bg-app);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 11px 14px;
+  color: var(--text-2);
+  font-size: 14px; font-family: inherit;
+  cursor: pointer; outline: none;
+  transition: border-color var(--transition), color var(--transition);
+}
+.ev-attach-add:hover:not(:disabled) { border-color: var(--text-3); color: var(--text-1); }
+.ev-attach-add:focus-visible { border-color: var(--primary); }
+.ev-attach-add:disabled { opacity: .5; cursor: default; }
+.ev-attach-hint { font-size: 11px; color: var(--text-3); margin-top: 6px; }
 .ev-attach-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
                  border: 1px solid var(--border); border-radius: 8px; }
 .ev-attach-row:hover { background: var(--hover-highlight); }
diff --git a/frontend/index.html b/frontend/index.html
index 5c296c9..aa5d48d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -400,8 +400,8 @@
       <div class="form-group" id="ev-attachments-group" style="display:none">
         <label data-i18n="attachments">Anhänge</label>
         <div id="ev-attachments-list" class="ev-attach-list"></div>
-        <button type="button" class="btn btn-ghost btn-sm" id="ev-attachment-add" data-i18n="attachment_add">Datei hinzufügen</button>
-        <div class="form-hint" data-i18n="attachment_hint">Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.</div>
+        <button type="button" class="ev-attach-add" id="ev-attachment-add" data-i18n="attachment_add">Datei hinzufügen</button>
+        <div class="ev-attach-hint" data-i18n="attachment_hint">Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.</div>
       </div>
     </div>
     <div class="modal-footer">
diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js
index 4d85b99..a9b54a5 100644
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -2355,12 +2355,8 @@ function renderAttachmentRows() {
   const existing = (state.eventAttachments || []).filter(a => !removed.includes(a.id));
   const pending = state.pendingAttachments || [];
 
-  if (!existing.length && !pending.length) {
-    const empty = document.createElement('div');
-    empty.className = 'form-hint';
-    empty.textContent = t('attachment_none');
-    list.appendChild(empty);
-  }
+  // Nothing when empty — the reminders list does the same, and the caption
+  // under the button already says what can go here.
   existing.forEach(a => list.appendChild(attachmentRow({
     name: a.filename, size: a.size_bytes, contentType: a.content_type,
     thumbId: a.has_thumb ? a.id : null,
diff --git a/frontend/js/i18n.js b/frontend/js/i18n.js
index 2415223..bd45bb4 100644
--- a/frontend/js/i18n.js
+++ b/frontend/js/i18n.js
@@ -176,7 +176,6 @@ const translations = {
     attachments: 'Anhänge',
     attachment_add: 'Datei hinzufügen',
     attachment_hint: 'Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.',
-    attachment_none: 'Keine Anhänge',
     attachment_uploading: 'Wird hochgeladen …',
     attachment_deleted: 'Anhang gelöscht',
     attachment_delete_confirm: "Anhang „{name}“ löschen?",
@@ -1003,7 +1002,6 @@ const translations = {
     attachments: 'Attachments',
     attachment_add: 'Add file',
     attachment_hint: 'Max. 10 MB per file, 10 files. PDF, images, text.',
-    attachment_none: 'No attachments',
     attachment_uploading: 'Uploading …',
     attachment_deleted: 'Attachment deleted',
     attachment_delete_confirm: "Delete attachment “{name}”?",