/* THE WINE CLUB / Feed: Story-Karten oben, kompakte Beitragsleiste, Beiträge im Foto-zuerst-Aufbau. */

/* ---------- Story-Karten ---------- */
#app .story-cards{display:flex;gap:10px;overflow-x:auto;margin:0 -14px 14px;padding:2px 14px 4px;scroll-snap-type:x proximity;scroll-padding-left:14px;scrollbar-width:none}
#app .story-cards::-webkit-scrollbar{display:none}
.story-card{position:relative;flex:0 0 108px;height:176px;scroll-snap-align:start}
.story-card-open{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#6b2233,#2a1418);color:#fff;text-align:left;box-shadow:0 8px 20px rgba(42,20,18,.16);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.story-card-open:active{transform:scale(.96)}
.story-card-open>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.story-card-open:hover>img{transform:scale(1.05)}
.story-card-open::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 55%,rgba(0,0,0,.62) 100%);pointer-events:none}
.story-card-text{position:absolute;inset:44px 10px 34px;display:flex;align-items:center;font:600 14px/1.3 'Playfair Display',Georgia,serif}
.story-card-ring{position:absolute;top:8px;left:8px;z-index:1;display:grid;place-items:center;width:40px;height:40px;padding:2.5px;border-radius:50%;background:conic-gradient(from 210deg,#8f2338,#c4586c,#d9a441,#8f2338)}
.story-card-ring .avatar{width:100%!important;height:100%!important;border:2px solid #fff!important;font-size:12px!important}
.story-card.seen .story-card-ring{background:rgba(255,255,255,.75)}
.story-card.seen .story-card-open>img{filter:saturate(.75) brightness(.92)}
.story-card-name{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.story-card-add{position:absolute;right:-4px;top:136px;z-index:2;display:grid;place-items:center;width:28px;height:28px;padding:0;border:3px solid var(--bg,#faf8f4);border-radius:50%;background:var(--wine);color:#fff}
/* Eigene Karte ohne Story: Profilbild oben, „Story erstellen“ unten */
.story-card-create .story-card-open{background:#fffefa;color:var(--ink);border:1px solid var(--card-line,#e6dcd2);box-shadow:none}
.story-card-create .story-card-open::after{display:none}
.story-card-me{position:absolute;inset:0 0 52px;overflow:hidden;background:var(--sand,#f2ede6)}
#app .story-card-me .avatar{width:100%!important;height:100%!important;border-radius:0!important;font-size:30px!important}
.story-card-plus{position:absolute;left:50%;bottom:36px;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin-left:-16px;border:3px solid #fffefa;border-radius:50%;background:var(--wine);color:#fff}
.story-card-create .story-card-name{bottom:10px;text-align:center;color:var(--ink);text-shadow:none;font-size:12px}

/* ---------- Beitragsleiste: Composer + Neueste/Freunde ---------- */
.feed-x-bar{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
#app .feed-x-bar .composer{margin:0;min-height:54px;padding:8px 8px 8px 10px;border-radius:999px;gap:10px}
#app .feed-x-bar .composer-add{width:38px;height:38px;border-radius:50%;background:var(--wine);color:#fff}
#app .feed-x-bar .tabs{align-self:flex-start}

/* ---------- Beitrag: Foto zuerst ---------- */
#app .post-x{overflow:hidden}
#app .post-x .post-head{padding:12px 14px 10px}
#app .post-x .post-media{margin:0;border-radius:0!important;position:relative}
#app .post-x .post-media:not(.multi-media) .user-photo{height:auto;aspect-ratio:4/5;max-height:560px;width:100%;border-radius:0!important}
#app .post-x .post-media .media-placeholder{border-radius:0!important}
#app .post-x .post-media.multi-media{gap:2px}
#app .post-x .post-media.multi-media .user-photo{border-radius:0!important;height:auto;aspect-ratio:3/4}
#app .post-x .post-actions{padding:6px 8px 2px}
.post-x-body{display:flex;flex-direction:column;gap:8px;padding:2px 16px 14px}
.post-card-text .post-x-body{padding-top:0}
#app .post-x .post-copy{margin:0;padding:0;font-size:14px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
#app .post-x .post-copy b{font-weight:700;margin-right:2px}
#app .post-card-text.post-x .post-copy{font:500 18px/1.5 'Playfair Display',Georgia,serif}
#app .post-x .post-product-tags{display:flex;flex-direction:column;gap:6px;margin:0}
#app .post-x .post-product{display:flex;align-items:center;gap:10px;width:100%;max-width:none;margin:0;padding:6px 12px 6px 6px;border:1px solid var(--card-line,#e6dcd2);border-radius:14px;background:#fffefa;color:var(--ink);font-size:13px;text-align:left}
#app .post-x .post-product>span{flex:1;display:flex;flex-direction:column;min-width:0}
#app .post-x .post-product b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .post-x .post-product small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-product-shot{flex:0 0 40px;width:40px;height:48px;border-radius:10px;background:linear-gradient(170deg,#f7efed,#efe5da)}
.post-product-shot img{height:42px;width:auto}
#app .post-x .post-chips{margin:0;padding:0}
.post-x-comments{align-self:flex-start;padding:0;border:0;background:none;color:var(--muted);font-size:13px}

/* Doppeltipp: Gläser stoßen mitten im Foto an */
.cheers-burst{position:absolute;left:50%;top:50%;z-index:3;width:110px;height:110px;margin:-55px 0 0 -55px;display:grid;place-items:center;pointer-events:none;color:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));animation:cheersBurst .85s cubic-bezier(.2,.9,.3,1.2) forwards}
.cheers-burst svg,.cheers-burst img{width:96px!important;height:96px!important}
@keyframes cheersBurst{0%{opacity:0;transform:scale(.3) rotate(-12deg)}18%{opacity:1;transform:scale(1.15) rotate(6deg)}32%{transform:scale(.95) rotate(-3deg)}48%{transform:scale(1.02) rotate(0)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1) translateY(-14px)}}

@media(min-width:801px){
 #app .story-cards{margin:0 0 16px;padding:2px 0 4px}
 .feed-x-bar{flex-direction:row;align-items:center}
 #app .feed-x-bar .composer{flex:1}
 #app .feed-x-bar .tabs{align-self:center}
}
@media(prefers-reduced-motion:reduce){.cheers-burst{animation:none;opacity:0}.story-card-open,.story-card-open>img{transition:none}}