docs: add UI/UX component guidelines and improve breadcrumb/tab-panel styling

Add "Komponenten in Formularen" section to boundaries-ui.md with rules
for core button classes, margin resets, checkbox sizing, sticky positioning,
icon-only buttons, responsive grids, and CSS variables. Add matching
quick-reference bullets to CLAUDE.md UI Patterns section.

Fix breadcrumb wrapping: nowrap + overflow hidden + flex-shrink for
single-line behavior. Add data-tab-panel-wide opt-out for full-width
tab panels (default 70ch).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/css/components/app-breadcrumb.css

@@ -9,6 +9,7 @@
     display: flex;
     align-items: center;
     margin: 0;
+    min-width: 0;
     font-size: var(--text-xs);
     line-height: var(--leading-tight);
   }
@@ -16,11 +17,13 @@
   .app-breadcrumb ol {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 0.375rem;
     list-style: none;
     margin: 0;
     padding: 0;
+    overflow: hidden;
+    min-width: 0;
   }
 
   .app-breadcrumb li {
@@ -28,6 +31,13 @@
     align-items: center;
     margin: 0;
     padding: 0;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+
+  .app-breadcrumb li:first-child,
+  .app-breadcrumb li:last-child {
+    flex-shrink: 0;
   }
 
   .app-breadcrumb li::before {
@@ -40,12 +50,13 @@
     font-size: 0.75em; /* em-relative sizing — intentional */
     margin-inline-end: 0.375rem;
     pointer-events: none;
+    flex-shrink: 0;
   }
 
   .app-breadcrumb a,
   .app-breadcrumb [aria-current="page"] {
     display: inline-block;
-    max-width: 18ch;
+    max-width: 14ch;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

web/css/components/app-details.css

@@ -8,6 +8,10 @@
     max-width: 70ch;
   }
 
+  .app-details-container > section > form [data-tab-panel-wide] {
+    max-width: none;
+  }
+
   .app-details-aside-actions {
     display: grid;
     gap: calc(var(--app-spacing) * 0.5);