/* ═══════════════════════════════════════════════════════════════
   ne-locals-override.css
   Layout: EINE Zeile, horizontal scrollbar.
   Reihenfolge: [MORGEN-Kachel] [Item] [Item] [Item] [MITTAG-Kachel] [Item] ...
   Alles in einer durchgehenden Reihe — scrollt seitlich, wenn zu lang.
   Leere Slots bleiben sichtbar.
   ═══════════════════════════════════════════════════════════════ */

.local-today-grid-4{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:4px 2px 18px !important;
    margin-bottom:20px !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:thin !important;
    scrollbar-color:var(--gold) transparent !important;
}

/* Slot-Container: display:contents → Kachel + Items werden direkte Flex-Kinder
   der Reihe und erscheinen so alle hintereinander. */
.local-today-slot{
    display:contents !important;
}

/* Leere Slots NICHT ausblenden */
.local-today-slot:has(.local-today-slot-empty){
    display:contents !important;
}

/* ── Slot-Head: farbige Kachel in der Reihe ── */
.local-today-slot-head{
    flex:0 0 104px !important;
    width:104px !important;
    min-width:104px !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    gap:10px !important;
    margin:0 !important;
    padding:18px 10px !important;
    border:0 !important;
    background:var(--paper-warm) !important;
    color:var(--accent) !important;
    box-shadow:inset 0 0 0 1px var(--rule) !important;
    scroll-snap-align:start !important;
}

.local-today-slot-head svg{
    width:30px !important;
    height:30px !important;
    color:inherit !important;
}

.local-today-slot-head h4{
    font-size:.74rem !important;
    letter-spacing:.14em !important;
    color:inherit !important;
    margin:0 !important;
}

/* Farbvarianten je Slot */
.local-today-slot:nth-child(4n+2) .local-today-slot-head{
    background:var(--gold) !important;
    color:#fff !important;
    box-shadow:none !important;
}
.local-today-slot:nth-child(4n+3) .local-today-slot-head{
    background:var(--accent) !important;
    color:#fff !important;
    box-shadow:none !important;
}
.local-today-slot:nth-child(4n+4) .local-today-slot-head{
    background:#B64A5E !important;
    color:#fff !important;
    box-shadow:none !important;
}

/* ── Items: Karten in der Reihe ── */
.local-today-grid-4 .local-today-slot-item,
.local-today-grid-4 .local-today-slot-item:last-child{
    flex:0 0 240px !important;
    width:240px !important;
    min-width:240px !important;
    max-width:240px !important;
    padding:12px !important;
    border:1px solid var(--rule) !important;
    background:#fff !important;
    transform:none !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    scroll-snap-align:start !important;
    transition:border-color .15s, box-shadow .15s !important;
}

.local-today-grid-4 .local-today-slot-item:hover{
    transform:none !important;
    box-shadow:0 6px 18px -12px rgba(133,27,47,.35) !important;
    border-color:var(--accent) !important;
    background:#fff !important;
}

.local-today-slot-thumb{
    width:52px !important;
    height:52px !important;
    border-radius:0 !important;
    flex-shrink:0 !important;
}

/* ── Empty-State: gleicher Look wie Items, gestrichelt ── */
.local-today-grid-4 .local-today-slot-empty{
    flex:0 0 240px !important;
    width:240px !important;
    min-width:240px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px !important;
    border:1px dashed var(--rule) !important;
    background:#fff !important;
    color:var(--ink-muted) !important;
    font-size:.8rem !important;
    font-style:italic !important;
    scroll-snap-align:start !important;
}

/* ── Responsive ── */
@media(max-width:640px){
    .local-today-slot-head{flex-basis:88px !important;width:88px !important;min-width:88px !important;padding:14px 6px !important;gap:6px !important;}
    .local-today-slot-head svg{width:24px !important;height:24px !important;}
    .local-today-slot-head h4{font-size:.66rem !important;letter-spacing:.1em !important;}
    .local-today-grid-4 .local-today-slot-item,
    .local-today-grid-4 .local-today-slot-empty{flex-basis:210px !important;width:210px !important;min-width:210px !important;}
    .local-today-slot-thumb{width:44px !important;height:44px !important;}
    
/* ═══════════════════════════════════════════════════════════════
   OTKRIJ MAKARSKU — auf Mobile horizontale Zeile mit Scroll
   (Desktop bleibt unangetastet)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px){

    /* Alle 4 Grids: eine Zeile, seitlich scrollbar */
    .ll-cards-grid,
    .ll-fv-grid,
    .ll-auto-grid,
    .ll-bs-grid{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:12px !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        padding:4px 2px 16px !important;
        margin:0 !important;
        scroll-snap-type:x proximity !important;
        scrollbar-width:thin !important;
        scrollbar-color:var(--gold) transparent !important;
        -webkit-overflow-scrolling:touch !important;
    }

    /* Karten: feste Breite, kein Umbruch */
    .ll-cards-grid > *,
    .ll-fv-grid > *,
    .ll-auto-grid > *,
    .ll-bs-grid > *{
        flex:0 0 240px !important;
        width:240px !important;
        min-width:240px !important;
        max-width:240px !important;
        scroll-snap-align:start !important;
    }

    /* Scrollbar dezent ausblenden (Touch-Scroll reicht) */
    .ll-cards-grid::-webkit-scrollbar,
    .ll-fv-grid::-webkit-scrollbar,
    .ll-auto-grid::-webkit-scrollbar,
    .ll-bs-grid::-webkit-scrollbar{
        height:6px;
    }
}

@media (max-width: 640px){
    .ll-cards-grid > *,
    .ll-fv-grid > *,
    .ll-auto-grid > *,
    .ll-bs-grid > *{
        flex:0 0 200px !important;
        width:200px !important;
        min-width:200px !important;
        max-width:200px !important;
    }
    
}