Löschen Button verschönert

css/main.css

@@ -237,11 +237,6 @@ h1 {
     text-decoration: none;
     box-sizing: border-box;
 }
-/* Deutlichere Klickreaktion für normale Buttons */
-.button:active {
-    transform: translateY(1px);
-    box-shadow: none;
-}
 
 /* Deutlichere Klickreaktion für Kategorien */
 .category-link:active {
@@ -325,7 +320,8 @@ h1 {
 
 #comments-list button {
     cursor: pointer;
-}.delete-comment-button {
+}
+.delete-comment-button {
      display: inline-block;
      background: #ffffff;
      color: #dc2626;
@@ -356,4 +352,66 @@ h1 {
 .delete-comment-form {
     margin-top: 12px;
     margin-bottom: 12px;
+}
+/* Button zum Öffnen der Kommentarbearbeitung */
+.edit-comment-button {
+    display: inline-block;
+    width: auto;
+    padding: 10px 18px;
+    background-color: #2563eb;
+    color: #ffffff;
+    border: 2px solid #2563eb;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    list-style: none;
+    transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease,
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+}
+
+/* Entfernt das normale Dreieck in einigen Browsern */
+.edit-comment-button::-webkit-details-marker {
+    display: none;
+}
+
+/* Eigenes Symbol vor dem Text */
+.edit-comment-button::before {
+    content: "✏ ";
+}
+
+.edit-comment-button:hover {
+    background-color: #1e40af;
+    border-color: #1e40af;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.3);
+}
+
+.edit-comment-button:active {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
+.edit-comment-button:focus-visible {
+    outline: 3px solid #fbbf24;
+    outline-offset: 3px;
+}
+
+/* Abstand zwischen Bearbeiten und Löschen */
+.edit-comment-details {
+    margin-bottom: 12px;
+}
+
+/* Geöffneter Bearbeitungsbereich */
+.edit-comment-details[open] .edit-comment-button {
+    margin-bottom: 12px;
+    background-color: #1e40af;
+}
+
+/* Geändertes Symbol, wenn der Bereich geöffnet ist */
+.edit-comment-details[open] .edit-comment-button::before {
+    content: "▲ ";
 }