{{-- Day Skeleton – gleiche Struktur wie echte Tagesansicht --}}
@php $cellPx = 48; $totalPx = 24 * $cellPx; @endphp
<div class="animate-pulse">

    {{-- Scroll-Bereich --}}
    <div class="overflow-y-auto" style="max-height: 560px">
        <div class="flex" style="min-height: {{ $totalPx }}px">

            {{-- Zeit-Labels (w-12 wie echt) --}}
            <div class="w-12 shrink-0 relative" style="height: {{ $totalPx }}px">
                @for($h = 0; $h < 24; $h++)
                    <div class="absolute right-2 -translate-y-2" style="top: {{ $h * $cellPx }}px">
                        <div class="h-2 w-8 bg-gray-100 rounded"></div>
                    </div>
                @endfor
            </div>

            {{-- Tagesspalte (flex-1 wie echt) --}}
            <div class="flex-1 border-l border-gray-100 relative" style="height: {{ $totalPx }}px">

                {{-- Stunden-Linien --}}
                @for($h = 0; $h < 24; $h++)
                    <div class="absolute left-0 right-0 border-b border-gray-50 pointer-events-none"
                         style="top: {{ $h * $cellPx }}px; height: {{ $cellPx }}px"></div>
                @endfor

                {{-- Fake Events --}}
                <div class="absolute rounded-md" style="top: {{ 9 * $cellPx }}px; height: {{ 2 * $cellPx }}px; left: 2px; right: 4px; background: #EEF2FF; border-left: 2px solid #C7D2FE;"></div>
                <div class="absolute rounded-md" style="top: {{ 14 * $cellPx }}px; height: {{ 1 * $cellPx }}px; left: 2px; right: 4px; background: #FFFBEB; border-left: 2px solid #FDE68A;"></div>
            </div>

        </div>
    </div>
</div>
