style(web): Seiten auf Mosaik-Muster umgestellt

Einheitliche Seitenkoepfe mit Modul-Kachel, Knopf- und Linkklassen
statt gelber Schrift, Karten ohne harte Rahmen, Tabellenkoepfe ohne
Grossbuchstaben, Marktplatz mit Fluent-Reitern, Filterpillen und
Kachel-Karten, Einstellungs-/Verwaltungsnavigation mit Auswahlpille,
leere Zustaende mit Symbol im Kreis, Proxmox ohne leuchtende Schatten.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/web/src/app/globals.css

@@ -306,7 +306,15 @@ body {
   }
   .btn:disabled {
     cursor: not-allowed;
-    opacity: 0.55;
+  }
+  /* Fluent: deaktiviert = graue Flaeche, graue Schrift (nicht verblasstes Gelb). */
+  .btn-primary:disabled {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    border-color: var(--border);
+  }
+  .btn-secondary:disabled, .btn-subtle:disabled {
+    color: var(--muted-foreground);
   }
   .btn-primary {
     background-color: var(--primary);
@@ -395,3 +403,102 @@ body {
   border-radius: 9999px;
   background-color: var(--primary-strong);
 }
+
+/* Checkboxen und Optionsfelder in der Link-Farbe statt Browser-Blau bzw.
+   Gelb (Gelb mit weissem Haken waere kaum lesbar). */
+input[type="checkbox"], input[type="radio"] {
+  accent-color: var(--link);
+}
+
+/* ---------------------------------------------------------------------------
+   Dashboard-Kacheln (Design „Mosaik“)
+   ------------------------------------------------------------------------- */
+
+/* Einheitliche Kachel-Kopfzeile: 40 px, 12 px Innenabstand, 14 px halbfett. */
+.widget-head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/* Aktionen der Kachel erscheinen erst beim Zeigen oder mit Tastaturfokus —
+   nur auf Geraeten mit Maus; auf Touch bleiben sie sichtbar. */
+@media (hover: hover) {
+  [data-widget-id]:not(:hover):not(:focus-within) .widget-action:not(.widget-action-pinned) {
+    opacity: 0;
+  }
+}
+.widget-action {
+  transition: opacity 120ms;
+}
+
+/* Notiz: ruhige Schrift, Innenabstand wie die Kopfzeile. */
+:root .widget-note-body .wmde-markdown {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+:root .widget-note-body .w-md-editor-preview,
+:root .widget-note-body .wmde-markdown {
+  padding: 0 0.75rem 0.75rem;
+}
+:root .widget-note-body .wmde-markdown h1,
+:root .widget-note-body .wmde-markdown h2 {
+  border-bottom: 0;
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.375rem;
+}
+
+/* Bearbeitungsmodus: gestrichelte Akzentkontur und sichtbarer Groessengriff. */
+.react-grid-item .widget-drag-handle {
+  outline: 2px dashed var(--primary-strong);
+  outline-offset: -2px;
+}
+.react-grid-item > .react-resizable-handle {
+  z-index: 20;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  width: 18px;
+  height: 18px;
+  right: 4px;
+  bottom: 4px;
+  background-image: none;
+  border-right: 2px solid var(--primary-strong);
+  border-bottom: 2px solid var(--primary-strong);
+  border-bottom-right-radius: 4px;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se::after {
+  display: none;
+}
+.react-grid-item.react-grid-placeholder {
+  background: var(--primary);
+  opacity: 0.18;
+  border-radius: 0.5rem;
+}
+
+/* Mit Hintergrund: Kacheln als Windows-11-„Mica“ — halbtransparent mit
+   Unschaerfe. Die einzige Stelle mit Transparenz. Deckkraft so gewaehlt,
+   dass Text auch vor einem rein schwarzen (hell) bzw. rein weissen, dann auf
+   55 % abgedunkelten (dunkel) Bild 4,5:1 haelt. Ohne backdrop-filter oder
+   bei „weniger Transparenz“ bleibt die Kachel deckend. */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  @media not (prefers-reduced-transparency: reduce) {
+    .dashboard-has-bg [data-widget-id] {
+      background-color: oklch(1 0 0 / 0.86);
+      -webkit-backdrop-filter: blur(20px) saturate(1.2);
+      backdrop-filter: blur(20px) saturate(1.2);
+    }
+    .dark .dashboard-has-bg [data-widget-id] {
+      background-color: oklch(0.24 0.01 260 / 0.88);
+      border-color: oklch(1 0 0 / 0.1);
+    }
+  }
+}
+.dashboard-has-bg [data-widget-id] {
+  box-shadow: 0 0 2px oklch(0 0 0 / 0.14), 0 2px 6px oklch(0 0 0 / 0.16);
+}