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>

CLAUDE.md

@@ -159,6 +159,7 @@ docker/                 # Dockerfiles, Nginx configs, PHP configs
 ### UI Patterns
 
 - Edit pages: tabs → `Master data` | `Visibility` | optional `Danger zone`
+- **Tab panel width**: `data-tab-panel` defaults to `max-width: 70ch` (optimal for form readability). Add `data-tab-panel-wide` for panels that need full width (e.g. split layouts, side-by-side editors, preview panels, tables). Use 70ch for standard form fields (text inputs, selects, textareas); use wide for multi-column layouts or content that benefits from horizontal space.
 - Titlebar partial for primary actions (Save, Save & close)
 - Secondary actions in Aside block via `app-details-aside-actions.phtml`
 - Lists use Grid.js via `initStandardListPage()` (GR-UI-LIST)
@@ -166,6 +167,9 @@ docker/                 # Dockerfiles, Nginx configs, PHP configs
 - New views must handle loading, empty, error, and success states (GR-UI-014)
 - All visible text wrapped in `t('...')`
 - Check existing JS/CSS components before adding new ones (GR-UI-REUSE)
+- **Buttons**: Always use core classes (`secondary outline small`, `danger outline small`) — custom CSS only for shape/position. Icon-only buttons must have `data-tooltip` + `aria-label`.
+- **Components inside forms**: Reset core `margin-bottom` on buttons/inputs/selects/labels at component scope. Checkboxes in flex need explicit `1.25em` sizing + `flex-shrink: 0`.
+- **Sticky elements**: Always use `top: calc(var(--app-topbar-height) + ...)` — never `top: 0`. Multi-column grids must have a responsive single-column `@media` fallback.
 - **File uploads** use `app-file-upload.phtml` partial (deliberate exception to plain-HTML inputs — the markup is too complex for inline use). See `templates/partials/app-file-upload.phtml` for the `$fileUpload` array contract. Never write file-upload markup inline; always use the partial.
 
 ### Never Do This