Safe Area 1.2.0

Padding-Utilities, die env(safe-area-inset-*) auf Geräten mit Notch respektieren, plus Breakpoint-Helfer für Mobile-only- und Desktop-only-Blöcke. English: Safe area

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Füge Padding für Device-Safe-Areas (Notches) bei fixen Headern/Footern und Bottom Nav hinzu.

Wann nicht

Kein Ersatz für responsive Breakpoints.

Safe-Area-Padding

Jede Klasse nutzt max(var(--velin-space-4, 1rem), env(safe-area-inset-*)) damit Inhalte System-UI ohne hartcodierte Device-Offsets freihalten.

Klasse	Wirkung
`.velin-pt-safe`	Padding block-start (Statusleiste / Notch)
`.velin-pb-safe`	Padding block-end (Home-Indikator)
`.velin-px-safe`	Padding inline (linke/rechte Insets)
`.velin-p-safe`	Alle Seiten

Safe-Area-Padding applied (device insets when present).

<velin-bottom-nav class="velin-pb-safe">…</velin-bottom-nav>
<header class="velin-pt-safe">…</header>

Mobile-/Desktop-Sichtbarkeit

Ergänzt responsive Display-Utilities. Das Layout-Audit markiert velin-ausgeblendet ohne passende Show-Klasse bei md.

Klasse	Standard (< 48rem)	≥ 48rem
`.velin-mobile-only`	sichtbar	ausgeblendet
`.velin-desktop-only`	ausgeblendet	sichtbar