---
name: adaptive-responsive-fluidity
description: Garantiere makellose, flüssige Layouts auf allen erdenkbaren Bildschirmgrößen (von der Smartwatch bis zum 4K-Monitor) ohne Layout-Shifts.
---

# Adaptive Responsive Fluidity Guidelines

*   **Fluid Typography & Spacing:** Konsequente Nutzung von Tailwinds modernen Funktionen oder CSS-Funktionen wie `clamp()`, `calc()` und relativen Einheiten (`rem`, `vw`), damit Schriften und Abstände stufenlos mit der Bildschirmgröße mitatmen.
*   **Mobile Daumenzone:** Platzierung aller kritischen Interaktionselemente (Menüs, primäre CTAs) im unteren und mittleren Drittel des Smartphones.
*   **Flex- & Grid-Sicherungen:** Jedes Grid muss mit `minmax()` oder intelligenten Autofit-Klassen abgesichert sein, um Textüberlappungen oder abgeschnittene Bilder bei ungewöhnlichen Display-Ratios zu verhindern.