---
name: bento-grid-architecture
description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
---

# Bento Grid Architecture Guidelines

*   **Non-Linear Layouts:** Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (`grid-cols-1 md:grid-cols-3`) mit unterschiedlichen Box-Breiten (`md:col-span-2` vs. `md:col-span-1`).
*   **Content-Mix Rule:** Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons).
*   **Visual Anchor:** Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert).