/**
 * wezunu · Social-Feed v2 — reisefreundliches CD-Theme (hell / Pink / Schwarz)
 * Additive Ebene über social.css. Stylt den Reise-Moment-Feed (.fp-*) modern & bildstark.
 * Developed by Toni Sciacca - mail@tonisciacca.com
 */
#feedContent{
  --sf-pink:#FF385C; --sf-pink-dark:#E0224C; --sf-ink:#1a1a1a; --sf-ink2:#5a5a5a; --sf-ink3:#9a9a9a;
  --sf-bg:#f5f5f7; --sf-card:#ffffff; --sf-line:rgba(0,0,0,.07);
  --sf-shadow:0 2px 12px rgba(0,0,0,.06); --sf-shadow-h:0 14px 36px rgba(0,0,0,.12);
  --sf-radius:20px; --sf-font:'Outfit',system-ui,-apple-system,sans-serif;
}
#feedContent .fp-shell{ background:var(--sf-bg); font-family:var(--sf-font); padding-bottom:40px; }
#feedContent .fp-shell *{ font-family:var(--sf-font); }

/* ── Post-Box: „Teile einen Reise-Moment" ── */
#feedContent .fp-post-box{
  background:var(--sf-card); border:1px solid var(--sf-line); border-radius:var(--sf-radius);
  box-shadow:var(--sf-shadow); padding:16px 18px; margin:16px; transition:box-shadow .2s;
}
#feedContent .fp-post-box:focus-within{ box-shadow:var(--sf-shadow-h); border-color:rgba(255,56,92,.25); }
#feedContent .fp-post-av{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--sf-pink),#ff6b8a);
  display:grid; place-items:center; color:#fff; overflow:hidden; flex:0 0 auto;
}
#feedContent .fp-post-av i{ width:20px; height:20px; }
#feedContent .fp-post-title-input{
  border:0; font-size:16px; font-weight:700; color:var(--sf-ink); width:100%; padding:6px 0; background:none; letter-spacing:-.01em;
}
#feedContent .fp-post-title-input::placeholder{ color:var(--sf-ink3); font-weight:600; }
#feedContent .fp-post-text-input{ border:0; font-size:14px; color:var(--sf-ink2); width:100%; background:none; resize:none; }
#feedContent .fp-post-tool{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--sf-ink2);
  background:#f5f5f7; border:1px solid var(--sf-line); border-radius:999px; padding:8px 14px; cursor:pointer; transition:.15s;
}
#feedContent .fp-post-tool:hover{ border-color:var(--sf-pink); color:var(--sf-pink); }
#feedContent .fp-post-tool i{ width:16px; height:16px; }
#feedContent .fp-post-submit{
  background:var(--sf-pink); color:#fff; border:0; border-radius:999px; padding:10px 22px; font-weight:800; font-size:14px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 8px 20px rgba(255,56,92,.3); transition:transform .15s;
}
#feedContent .fp-post-submit:hover{ transform:translateY(-1px); }
#feedContent .fp-post-cancel{ background:none; border:0; color:var(--sf-ink3); font-weight:700; font-size:14px; cursor:pointer; }
#feedContent .fp-post-loc-input{ border:1px solid var(--sf-line); border-radius:12px; padding:9px 13px; font-size:14px; width:100%; }
#feedContent .fp-post-preview img{ border-radius:14px; max-height:220px; object-fit:cover; }

/* ── Travel-Stories-Bar ── */
#feedContent .fp-storybar{
  display:flex; gap:14px; overflow-x:auto; padding:14px 16px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#feedContent .fp-storybar::-webkit-scrollbar{ display:none; }
#feedContent .fp-sb-item{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; width:70px;
  background:none; border:0; cursor:pointer; font-family:inherit; padding:0;
}
#feedContent .fp-sb-ring{
  width:64px; height:64px; border-radius:50%; padding:3px;
  background:linear-gradient(135deg,var(--sf-pink),#ff8fa3 60%,#f5a623);
  display:grid; place-items:center; transition:transform .15s;
}
#feedContent .fp-sb-item:hover .fp-sb-ring{ transform:scale(1.06); }
#feedContent .fp-sb-thumb{
  width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center;
  background-color:#e9e9ee; border:2.5px solid #fff;
}
#feedContent .fp-sb-add-ring{ background:#fff; border:2px dashed rgba(255,56,92,.5); }
#feedContent .fp-sb-add-ring i{ width:22px; height:22px; color:var(--sf-pink); }
#feedContent .fp-sb-item span{
  font-size:11.5px; font-weight:700; color:var(--sf-ink2); max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Pulse-Leiste (Live-Aktivität) ── */
#feedContent .fp-pulse{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--sf-ink2); }
#feedContent .fp-pulse-icon{ color:var(--sf-pink); width:15px; height:15px; }
#feedContent .fp-pulse-item a{ color:var(--sf-ink); font-weight:600; text-decoration:none; }
#feedContent .fp-pulse-sep{ color:var(--sf-ink3); }

/* ── Section-Header + Tages-Gruppen ── */
#feedContent .fp-section-pre,
#feedContent .fp-day-title{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--sf-ink3);
  padding:0 4px; margin:22px 16px 12px;
}
#feedContent .fp-day-group{ margin-bottom:6px; }

/* ── Reise-Moment-Card ── */
#feedContent .feed-card.fp-story{
  background:var(--sf-card); border:1px solid var(--sf-line); border-radius:var(--sf-radius);
  box-shadow:var(--sf-shadow); margin:0 16px 16px; overflow:hidden; transition:transform .18s, box-shadow .18s;
}
#feedContent .feed-card.fp-story:hover{ transform:translateY(-3px); box-shadow:var(--sf-shadow-h); }
#feedContent .fp-story-head{ display:flex; align-items:center; gap:12px; padding:15px 17px 12px; }
#feedContent .fp-story-av{
  width:42px; height:42px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:linear-gradient(135deg,var(--sf-pink),#ff8fa3); display:grid; place-items:center; color:#fff;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,56,92,.25);
}
#feedContent .fp-story-meta{ flex:1; min-width:0; }
#feedContent .fp-story-user b{ font-size:14.5px; font-weight:800; color:var(--sf-ink); letter-spacing:-.01em; }
#feedContent .fp-story-user a{ text-decoration:none; }
#feedContent .fp-source-badge{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--sf-pink);
  background:rgba(255,56,92,.1); border-radius:999px; padding:2px 8px; margin-left:8px;
}
#feedContent .fp-story-sub{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--sf-ink2); margin-top:2px; }
#feedContent .fp-story-sub i{ width:13px; height:13px; color:var(--sf-pink); }
#feedContent .fp-story-time{ font-size:12px; color:var(--sf-ink3); font-weight:600; flex:0 0 auto; }
#feedContent .fp-story-img{ position:relative; margin:0; }
#feedContent .fp-story-img img{ width:100%; max-height:420px; object-fit:cover; display:block; }
#feedContent .fp-story-titel{ font-size:17px; font-weight:800; color:var(--sf-ink); letter-spacing:-.015em; padding:14px 17px 4px; line-height:1.25; }
#feedContent .fp-story-text{ font-size:14.5px; color:var(--sf-ink2); line-height:1.55; padding:2px 17px 4px; }

/* ── Aktionen: Reise-Interaktion ── */
#feedContent .fp-story-actions{ display:flex; align-items:center; gap:4px; padding:10px 12px 12px; border-top:1px solid var(--sf-line); margin-top:8px; }
#feedContent .fp-act{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:var(--sf-ink2); font-weight:700; font-size:13px; padding:8px 11px; border-radius:999px; transition:.15s; font-family:inherit;
}
#feedContent .fp-act i{ width:18px; height:18px; }
#feedContent .fp-act:hover{ background:#f5f5f7; color:var(--sf-pink); }
#feedContent .fp-act.liked{ color:var(--sf-pink); }
#feedContent .fp-act-right{ margin-left:auto; }

/* ── Tages-/Für-dich-Grids ── */
#feedContent .fp-fuerdich-grid{ display:grid; gap:14px; padding:0 16px; }
@media(min-width:900px){ #feedContent .fp-fuerdich-grid{ grid-template-columns:1fr 1fr; } }
#feedContent .fp-fuerdich-grid .feed-card.fp-story{ margin:0; }

/* ── Hint-Cards (Trend/Tagesüberblick) ── */
#feedContent .fp-hint-grid{ display:grid; gap:12px; padding:0 16px; }
@media(min-width:900px){ #feedContent .fp-hint-grid{ grid-template-columns:1fr 1fr; } }
#feedContent .fp-hint-card{
  display:flex; align-items:center; gap:12px; background:var(--sf-card); border:1px solid var(--sf-line);
  border-radius:16px; padding:13px 16px; box-shadow:var(--sf-shadow);
}
#feedContent .fp-hint-titel{ font-size:14px; font-weight:800; color:var(--sf-ink); }
#feedContent .fp-hint-sub{ font-size:12.5px; color:var(--sf-ink2); }
#feedContent .fp-hint-btn{
  margin-left:auto; background:var(--sf-pink); color:#fff; border:0; border-radius:999px; padding:7px 15px;
  font-weight:700; font-size:12.5px; cursor:pointer;
}

@media (prefers-color-scheme: dark){
  /* wezunu bleibt hell — Feed erzwingt sein helles CD auch im Dark-Modus des OS */
  #feedContent .fp-shell{ background:#f5f5f7; }
}