refactor: Inline-Styles durch CSS-Klassen ersetzt

- 40+ Utility-Klassen in form.css (clickable, text-danger, flex-row, loading-state, etc.)
- share-menu position/z-index in chat.css statt inline
- index.html: 0 Inline-Styles (hidden-Attribut, CSS-Klassen)
- 12 JS-Dateien bereinigt: style.cssText/style.* durch classList ersetzt
- Bugfix: var(--danger) → var(--dangerous) (nicht existierende Variable)
- display:none Toggles → hidden-Attribut wo passend
- Hardcoded font-sizes in chat.css → var(--font-size)

15 Dateien, nur Frontend (CSS/JS/HTML), kein Backend

wwwroot/css/chat.css

@@ -241,7 +241,7 @@
   border-radius: var(--border-radius);
   color: var(--text) !important;
   text-decoration: none !important;
-  font-size: 0.85em;
+  font-size: var(--font-size);
   transition: background var(--transition-speed), border-color var(--transition-speed);
   max-width: 20em;
   overflow: hidden;
@@ -254,7 +254,7 @@
 }
 
 .web-search-source .fa {
-  font-size: 0.75em;
+  font-size: var(--font-size);
   opacity: 0.6;
 }
 
@@ -324,7 +324,7 @@
   padding-top: 0;
   display: flex;
   flex-direction: column;
-  font-size: .85rem;
+  font-size: var(--font-size);
   gap: var(--badge-spacing);
 }
 
@@ -979,6 +979,8 @@
 /* Share Menu */
 
 .share-menu {
+  position: fixed;
+  z-index: 10000;
   background: var(--f2-bg);
   border: var(--border-width) solid var(--f2-border);
   border-radius: var(--border-radius);

wwwroot/css/form.css

@@ -855,3 +855,42 @@ a.admin-user-meta {
 .db-back-link:hover {
   color: var(--primary);
 }
+
+/* ── Utility Classes (Inline-Style Replacements) ── */
+
+.clickable { cursor: pointer }
+.semi-dim { opacity: var(--semi-transparent) }
+.text-danger { color: var(--dangerous) }
+.text-accent { color: var(--accent) }
+.text-primary { color: var(--primary) }
+.text-error { color: var(--color-error) }
+.text-secondary { color: var(--text-secondary) }
+.icon-dim { opacity: var(--semi-transparent) }
+.icon-dim-sm { opacity: var(--semi-transparent); font-size: var(--font-size) }
+.chevron-separator { opacity: var(--semi-transparent); font-size: var(--font-size); margin: 0 .3em }
+.pad-v { padding: 1rem 0 }
+.loading-state { opacity: var(--semi-transparent); pointer-events: none }
+.flex-row { display: flex; align-items: center; gap: .5rem }
+.flex-row-tight { display: flex; align-items: center; gap: 8px; margin-top: 2px }
+.min-w-0 { min-width: 0 }
+.ml-auto { margin-left: auto }
+.mr-badge { margin-right: var(--badge-spacing) }
+.ml-sm { margin-left: 8px }
+.mt-xs { margin-top: 4px }
+.font-sm { font-size: var(--font-size) }
+.semi-transparent { opacity: var(--semi-transparent) }
+.lh-relaxed { line-height: 1.7 }
+
+.scan-status { font-size: .85em; color: var(--text-secondary); padding: 0 0 .5rem 0 }
+.check-status-line { padding: 0 var(--box-padding) .5rem; display: none; font-size: .85em }
+.empty-hint { padding: 1rem; text-align: center; opacity: .7 }
+.scanner-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px var(--box-padding); border-bottom: 1px solid var(--border) }
+
+.event-scanner-status { padding: 1em 2em }
+.event-scanner-log { white-space: pre-line }
+
+.remote-hint { font-size: var(--font-size); opacity: var(--semi-transparent); margin-bottom: var(--box-spacing) }
+.remote-card-content { font-size: var(--font-size); display: flex; align-items: center; gap: var(--box-spacing) }
+.remote-card-info { flex: 1; opacity: var(--semi-transparent) }
+.none-card-image { display: flex; align-items: center; justify-content: center }
+.none-card-icon { font-size: 2em; opacity: var(--semi-transparent) }