Responsive: drei Ebenen
Ein HTML für alle Viewports — Responsive ist immer CSS, nie Markup-Verzweigung.
1. Intrinsisch (der Default)
Bausteine verhalten sich responsiv, weil ihre Definition es so baut: Tabellen scrollen, Grids brechen um, Heros stapeln. Mobile-Klemmer sind Bugs der Definition und werden dort für alle gefixt. Wächter: npm run audit:mobile misst echte Overflows bei 375px.
2. Responsive Props (Instanz-Wahl)
"columns": { "base": "2", "md": "4" } → invisible-grid--base-cols-2 invisible-grid--md-cols-4
Ausgewählte, rein CSS-wirksame Enum-Props tragen "responsive": true — der Wert darf pro Breakpoint variieren. Fünf Umbruchpunkte: base, sm (640), md (768), lg (1024), xl (1280) — die Werte kommen aus den breakpoint-Tokens. Streng beim Publish (base Pflicht, jeder Wert im Enum), tolerant zur Laufzeit. Props, die das Markup ändern würden, dürfen nie responsive sein.
3. hideOn (universell, pro Node)
Jeder Node darf "hideOn": ["mobile"|"tablet"|"desktop"] tragen. Der Renderer setzt ein Attribut, generierte Utilities in tokens.css blenden per Media Query aus. Die Grenzen kommen aus den breakpoint-Tokens (md = 768px, lg = 1024px) — dokumentierte Wahrheit, da CSS kein var() in Media Queries erlaubt.