/* ================== Cross-Slider (clean) ================== */
/* Scoped Tuning-Variablen */
.reco-section{
    --reco-width: 100%;          /* ggf. 93% */
    --reco-gap: 16px;            /* Abstand zwischen Karten */
    --reco-radius: 12px;         /* Kartenradius */
    --reco-btn-radius: 10px;     /* Buttonradius */
    --reco-thumb-h-min: 150px;   /* Thumb-Höhe min */
    --reco-thumb-h-mid: 18vw;    /* Thumb-Höhe dynamisch */
    --reco-thumb-h-max: 220px;   /* Thumb-Höhe max */
    --reco-title-size: 15px;     /* Titel-Schriftgröße */
    --reco-title-lines: 2;       /* sichtbare Titelzeilen (optisch) */

    width: var(--reco-width);
    margin: 34px auto 0;
    padding-top: 20px;
    border-top: 1px solid #dfe8f7;
}

/* Header */
.reco-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 12px;
}
.reco-head h2{
    margin: 0; font-size: 1.4rem; color: var(--primary-color);
}
body.darkmode .reco-head h2{ color: var(--font-color-dark); }

/* Navigation */
.reco-nav{ display: flex; gap: 8px; }
.reco-btn{
    border: 0; border-radius: var(--reco-btn-radius); padding: 8px 12px; cursor: pointer;
    background: var(--secondary-color); color: var(--primary-color);
    font-size: 18px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: background .18s ease, opacity .18s ease;
}
.reco-btn:hover{ background: #dfe8f7; }
.reco-btn:disabled{ opacity: .4; cursor: default; }

/* Bühne + Track */
.reco-viewport{
    position: relative; overflow: hidden; isolation: isolate;
    padding: 20px;
}
.reco-track{
    display: flex; align-items: stretch; /* gleiche Höhe für alle Karten */
    gap: var(--reco-gap);
    padding: 6px 2px 2px;
    will-change: transform;
    transition: transform .38s ease;
    touch-action: pan-y; /* kein horizontales Wischen */
}

/* Karte */
.reco-card{
    /* 4 pro View (Desktop) ? Formeln passen sich per Breakpoint an */
    flex: 0 0 calc((100% - var(--reco-gap)*3) / 4);

    display: grid; grid-template-rows: auto auto auto; /* Bild, Titel, Meta/Preis */
    background: var(--light-grey);
    border-radius: var(--reco-radius);
    overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.reco-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
body.darkmode .reco-card{ background:#1e1e1e; box-shadow: 0 4px 16px rgba(0,0,0,.25); }

/* Thumb – feste Höhe, kein Beschnitt */
.reco-thumb{
    height: clamp(var(--reco-thumb-h-min), var(--reco-thumb-h-mid), var(--reco-thumb-h-max));
    background:#fff;
    display:grid; place-items:center;
    overflow:hidden;
}
.reco-thumb img{
    width:100%; height:100%;
    max-height: 180px; max-width: 250px;
    object-fit:contain; display:block;
}

/* Titel – iOS-sicher, genau 2 Zeilen */
.reco-title{
    padding: 10px 12px 0;
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--reco-title-size);
    line-height: 1.35;

    min-height: 2.9em; /* ~2 Zeilen */
    max-height: 2.9em;

    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
body.darkmode .reco-title{ color: var(--font-color-dark); }

/* Meta/Preis */
.reco-meta{
    padding: 4px 12px 10px;
    color: var(--dark-grey); font-size: 14px;
    display:flex; align-items:center; justify-content:space-between; gap: 8px;
    min-height: 2.2em; /* konstante Höhe */
}
.reco-art{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reco-price{ font-weight: 700; color: var(--danger-color); }

/* Responsive: 3 / 2 / 1 Karten */
@media (max-width: 1200px){
    .reco-card{ flex-basis: calc((100% - var(--reco-gap)*2) / 3); }
}
@media (max-width: 900px){
    .reco-card{ flex-basis: calc((100% - var(--reco-gap)*1) / 2); }
    .reco-thumb{ height: clamp(140px, 28vw, 210px); }
}
@media (max-width: 540px){
    .reco-card{ flex-basis: 100%; }
    .reco-thumb{ height: clamp(160px, 46vw, 220px); }
}

/* ============= Skeleton Loader ============= */
.reco-card.skel{ background: var(--light-grey); position: relative; overflow: hidden; }
.reco-card.skel .reco-thumb,
.reco-card.skel .reco-title,
.reco-card.skel .reco-meta > *{
    background: #e9eef7; color: transparent;
}
body.darkmode .reco-card.skel .reco-thumb,
body.darkmode .reco-card.skel .reco-title,
body.darkmode .reco-card.skel .reco-meta > *{ background: #2a2a2a; }

/* Shimmer */
.reco-card.skel::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-100%);
    animation: skel 1.2s linear infinite;
    mix-blend-mode: overlay; pointer-events:none;
}
@keyframes skel{ to{ transform: translateX(100%); } }

.reco-card.skel .reco-thumb{
    height: clamp(var(--reco-thumb-h-min), var(--reco-thumb-h-mid), var(--reco-thumb-h-max));
}
.reco-card.skel .reco-title{
    min-height: 2.9em; margin: 10px 12px 0; border-radius: 6px;
}
.reco-card.skel .reco-meta{
    padding: 4px 12px 10px; display:flex; justify-content:space-between; gap:8px;
}
.reco-card.skel .reco-meta > *{
    height: 1.2em; border-radius: 6px; flex:1;
}

/* Motion-Preferenzen */
@media (prefers-reduced-motion: reduce){
    .reco-card{ transition: box-shadow .15s ease; }
    .reco-track{ transition: none; }
}