ui: Event-Popup-Aktionen modernisiert — kompakte Icon-Toolbar im Header

Das Popup hatte vorher Text+Icon-Buttons in einem Footer mit
verschwendeter vertikaler Höhe. Jetzt:

- Color-Dot + Titel links (volle Breite, kann sauber umbrechen)
- Kompakte 30px-Icon-Toolbar rechts oben: Bearbeiten / Kopieren /
  Löschen / Schließen
- Icons im Ruhezustand transparent (nur SVG sichtbar, sehr dezent)
- Auf Hover: runder farbiger Hintergrund. Edit/Copy in Primärfarbe,
  Delete in Akzentrot, Close in neutralem bg-hover
- Klick gibt mit Scale-Down (.9) taktilen Feedback
- Popup-Breite leicht erhöht (340 → 360 px) damit Titel + Toolbar
  bequem nebeneinander passen
- Trash- und Copy-SVG-Pfade auf den 24x24-viewBox normalisiert
  (waren vorher zu lang)

Version v16 → v17.

frontend/css/app.css

@@ -975,92 +975,78 @@ a { color: var(--primary); text-decoration: none; }
 }
 .ctx-item:hover { background: var(--bg-hover); }
 
-/* ── Event Popup ────────────────────────────────────────── */
+/* ── Event Popup ──────────────────────────────────────────
+   Layout: Color-Dot + Title links, kleine Icon-Toolbar rechts oben.
+   Icons sind im Ruhezustand transparent (nur das SVG selbst sichtbar),
+   bekommen erst beim Hover einen runden farbigen Hintergrund. Wirkt
+   modern und lässt dem Titel die meiste Breite. */
 .event-popup {
   position: fixed; z-index: 600;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  width: 340px;
+  width: 360px;
   box-shadow: var(--shadow-lg);
 }
 
-/* Close-X tucked into the top-right corner so the title gets full width */
-.popup-close {
-  position: absolute;
-  top: 8px; right: 8px;
-  width: 28px; height: 28px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 18px; line-height: 1;
-  color: var(--text-3);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  z-index: 1;
-  transition: background var(--transition), color var(--transition), transform .1s ease;
-}
-.popup-close:hover {
-  background: rgba(234,67,53,.18);
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  color: var(--accent);
-}
-.popup-close:active { transform: scale(.92); }
-
 .popup-header {
   display: flex; align-items: flex-start; gap: 10px;
-  padding: 14px 44px 12px 16px;     /* right padding leaves room for close-X */
+  padding: 12px 10px 12px 16px;
   border-bottom: 1px solid var(--border);
 }
 .popup-color-dot {
-  width: 12px; height: 12px; border-radius: 50%;
+  width: 11px; height: 11px; border-radius: 50%;
   flex-shrink: 0;
-  margin-top: 5px;                  /* visually align with the title's first line */
+  margin-top: 6px;
 }
 .popup-header h4 {
-  flex: 1; font-size: 15px; font-weight: 500;
-  line-height: 1.35;
+  flex: 1;
+  font-size: 14px; font-weight: 500;
+  line-height: 1.4;
   word-break: break-word;
+  padding-top: 2px;
 }
 
+.popup-toolbar {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+.popup-icon-btn {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background var(--transition),
+    color var(--transition),
+    transform .1s ease;
+}
+.popup-icon-btn svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
+.popup-icon-btn:hover {
+  background: rgba(66,133,244,.16);
+  background: color-mix(in srgb, var(--primary) 16%, transparent);
+  color: var(--primary);
+}
+.popup-icon-btn-danger:hover {
+  background: rgba(234,67,53,.16);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent);
+}
+.popup-icon-btn-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-1);
+}
+.popup-icon-btn:active { transform: scale(.9); }
+
 .popup-body { padding: 12px 16px; }
 .popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
 .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; }
-
-/* Footer with the three action buttons, each takes equal width */
-.popup-actions {
-  display: flex;
-  gap: 4px;
-  padding: 8px 10px 10px;
-  border-top: 1px solid var(--border);
-}
-.popup-action-btn {
-  flex: 1;
-  display: inline-flex; align-items: center; justify-content: center;
-  gap: 6px;
-  padding: 8px 6px;
-  border-radius: 8px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--text-2);
-  font-size: 12px;
-  font-weight: 500;
-  -webkit-tap-highlight-color: transparent;
-  transition: background var(--transition), color var(--transition), transform .1s ease;
-}
-.popup-action-btn svg { width: 16px; height: 16px; fill: currentColor; }
-.popup-action-btn:hover {
-  background: rgba(66,133,244,.14);
-  background: color-mix(in srgb, var(--primary) 14%, transparent);
-  color: var(--primary);
-}
-.popup-action-btn.popup-action-danger:hover {
-  background: rgba(234,67,53,.14);
-  background: color-mix(in srgb, var(--accent) 14%, transparent);
-  color: var(--accent);
-}
-.popup-action-btn:active { transform: scale(.96); }
 .popup-copy-menu {
   border-top: 1px solid var(--border);
   padding: 4px 0;
@@ -1712,9 +1698,11 @@ a { color: var(--primary); text-decoration: none; }
   .topbar-right { gap: 0; }
 
   /* Event-Popup auf Mobile: an Viewport-Breite anpassen */
-  .event-popup { width: min(94vw, 360px); max-width: 94vw; }
-  .popup-actions { padding: 8px 8px 10px; }
-  .popup-action-btn { font-size: 11px; padding: 8px 4px; }
+  .event-popup { width: min(94vw, 380px); max-width: 94vw; }
+  .popup-header { padding: 10px 8px 10px 14px; }
+  .popup-header h4 { font-size: 13.5px; }
+  .popup-icon-btn { width: 32px; height: 32px; }
+  .popup-icon-btn svg { width: 16px; height: 16px; }
 
   /* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */
   .month-event-time { display: none; }