/* Social-Bereich (social.js, docs ADR 0011): Feed, Beiträge, Freunde, Folgen. Farben und Flächen aus portal.css. */

/* ---------------------------------------------------------------- Allgemein */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.av.sq { border-radius:10px; }
.icon-btn.sm { width:32px; height:32px; }
.icon-btn.sm svg.i { width:16px; height:16px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------------------------------------------------------------- Feed */
.feed-layout { margin-top:0; }
.feed-layout > div > h1 { margin:0 0 18px; }
.feed-layout > div > .notice { margin-bottom:16px; }
.feed { display:grid; gap:14px; }
.feed + .more, .more { text-align:center; margin:18px 0 0; }
.post-page { display:grid; gap:14px; max-width:820px; }
.post-page .box { display:grid; gap:14px; }
.post-page .box h3.box-t { margin:0; }
.post-page .box p { margin:0; }
.post-page form.stack { max-width:none; }

.composer { display:grid; gap:12px; margin-bottom:18px; padding:16px 18px; }
.composer.drop { box-shadow:0 0 0 2px var(--accent); }
.composer-top { display:flex; gap:12px; align-items:flex-start; }
.composer-top .av { margin-top:6px; }
.composer textarea { min-height:84px; background:var(--bg); resize:vertical; }
.composer-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:54px; }
.composer-bar select { width:auto; max-width:100%; flex:0 1 auto; padding:7px 10px; font-size:.85rem; }
.composer-bar .cp-count { margin-left:auto; font-variant-numeric:tabular-nums; }
.composer .fine { margin:0; padding-left:54px; }
.composer .form-msg:empty { display:none; }
.cp-btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:10px; background:var(--btn); color:var(--fg);
  font:700 .88rem/1 var(--text); cursor:pointer; text-transform:none; letter-spacing:0; margin:0; }
.cp-btn svg.i { width:17px; height:17px; color:#3fb67a; }
.cp-btn:hover { background:var(--btn-h); }
.cp-btn:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.cp-aud { position:relative; display:inline-flex; align-items:center; margin:0; text-transform:none; letter-spacing:0; }
.cp-aud > svg.i { position:absolute; left:10px; width:15px; height:15px; color:var(--muted); pointer-events:none; }
.cp-aud select { padding-left:31px !important; font-weight:700; }
.cp-photos { display:flex; flex-wrap:wrap; gap:8px; padding-left:54px; }
.cp-ph { position:relative; width:112px; height:112px; border-radius:10px; overflow:hidden; background:var(--card-2); }
.cp-ph canvas { width:100%; height:100%; display:block; }
.cp-ph.busy canvas { opacity:.55; }
.cp-ph.err { box-shadow:inset 0 0 0 2px var(--accent); }
.cp-ph.err canvas { opacity:.35; }
.cp-prog { position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:2px; background:rgba(0,0,0,.4); overflow:hidden; display:none; }
.cp-ph.busy .cp-prog { display:block; }
.cp-prog i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; }
.cp-x { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:rgba(18,19,29,.75); color:#fff; }
.cp-x svg.i { width:14px; height:14px; }
.cp-x:hover { background:var(--accent); }
.cp-link { padding-left:54px; }
.link-card.loading b { color:var(--muted); font-weight:600; }

/* ---------------------------------------------------------------- Beitrag (wie bei Facebook, im Vikinger-Stil) */
.post { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px 6px; display:grid; gap:12px; min-width:0; }
.post.release { padding-bottom:16px; }
.post.is-removed { border-color:rgba(239,35,60,.45); padding-bottom:16px; }
.pin-badge { display:flex; align-items:center; gap:6px; margin:-4px 0 -4px; font:700 .78rem/1 var(--text); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.pin-badge svg.i { width:14px; height:14px; color:var(--accent); }
.post-h { display:flex; gap:12px; align-items:center; }
.post-who { flex:1; min-width:0; display:grid; gap:1px; }
.pw-n { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.pw-n b { font-size:1rem; }
.pw-n .pill { padding:3px 6px; }
.post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; font-size:.82rem; color:var(--muted); }
.post-meta a { color:var(--muted); }
.post-meta a:hover { color:var(--fg); text-decoration:underline; }
.post-meta .aud { display:inline-flex; }
.post-meta svg.i { width:13px; height:13px; }
.post-h .menu-pop { width:250px; }
.post-body { white-space:pre-line; overflow-wrap:anywhere; font-size:1rem; line-height:1.5; color:var(--prose, #dfe4ec); }
.post-body.big { font-size:1.45rem; line-height:1.3; font-weight:600; }
.post-body.clamp { display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
.post-body a, .cm-text a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.post-body a.mention, .cm-text a.mention { text-decoration:none; font-weight:700; }
.see-more { justify-self:start; margin-top:-8px; padding:0; border:0; background:none; color:var(--fg); font:700 .92rem/1.2 var(--text); cursor:pointer; }
.see-more:hover { text-decoration:underline; }

/* Fotos: 1 groß, 2 nebeneinander, 3 und 4 im Raster wie bei Facebook. Randlos bis an die Kartenkante. */
.post-media { display:grid; gap:3px; margin:0 -18px; overflow:hidden; background:var(--bg); }
.post-media .pm { display:block; padding:0; border:0; background:var(--card-2); cursor:zoom-in; min-height:0; overflow:hidden; }
.post-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.post-media .pm:hover img { transform:scale(1.02); }
.post-media.n1 img { height:auto; max-height:640px; object-fit:contain; background:var(--bg); }
.post-media.n1.tall img { max-height:560px; }
.post-media.n2 { grid-template-columns:1fr 1fr; aspect-ratio:2 / 1.1; }
.post-media.n3 { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:3 / 2; }
.post-media.n3 .pm:first-child { grid-row:span 2; }
.post-media.n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1 / 1; max-height:640px; }
.post-share .post-media { margin:0; }

/* Link-Karte: nur Titel und Seitenname (ADR 0011 Punkt 11), YouTube erst nach Klick. */
.link-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; background:var(--card-2); border:1px solid var(--line); color:var(--fg); min-width:0; }
a.link-card:hover { color:var(--fg); border-color:var(--muted-2, var(--muted)); }
.lc-ico { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:var(--btn); color:var(--accent); flex:none; }
.lc-t { flex:1; min-width:0; display:grid; }
.lc-t small { color:var(--muted); font-size:.74rem; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-t b { font-size:1rem; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.link-card > svg.i { color:var(--muted); width:16px; height:16px; }
.link-card.yt { display:grid; gap:0; padding:0; overflow:hidden; }
.yt-ph { position:relative; display:flex; align-items:center; gap:14px; width:100%; aspect-ratio:16 / 9; padding:20px; border:0; cursor:pointer; text-align:left; color:#fff;
  background:radial-gradient(ellipse at 30% 20%, rgba(239,35,60,.35), transparent 60%), linear-gradient(135deg, #2B2D42, #12131d); font:inherit; }
.yt-play { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 10px 30px -8px rgba(239,35,60,.8); }
.yt-play svg.i { width:26px; height:26px; fill:#fff; stroke:#fff; margin-left:3px; }
.yt-t { display:grid; gap:6px; min-width:0; }
.yt-t b { font-size:1.15rem; line-height:1.25; }
.yt-t small { color:rgba(237,242,244,.7); font-size:.8rem; line-height:1.35; max-width:46ch; }
.yt-ph:hover .yt-play { transform:scale(1.06); }
.yt-frame { aspect-ratio:16 / 9; background:#000; }
.yt-frame iframe { width:100%; height:100%; border:0; display:block; }
.lc-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; color:var(--muted); }
.lc-foot svg.i { width:14px; height:14px; }

/* Geteilter Beitrag */
.post-share { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.post-share .ps-in { display:grid; gap:10px; padding:12px 14px; }
.post-share .ps-in .link-card { background:var(--card-2); }
.post-share.gone { display:flex; gap:12px; align-items:center; padding:14px; color:var(--muted); background:var(--card-2); }
.post-share.gone b { display:block; color:var(--fg); }
.post-share.gone small { display:block; }

/* Zähler und Leiste */
.post-stats { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:22px; font-size:.9rem; color:var(--muted); }
.post-stats button { padding:0; border:0; background:none; color:var(--muted); font:600 .9rem/1 var(--text); cursor:pointer; }
.post-stats button:hover { text-decoration:underline; color:var(--fg); }
.ps-r { display:flex; gap:6px; }
.rx-sum { display:inline-flex; align-items:center; gap:6px; }
.rx-stack { display:inline-flex; }
.rx-stack .rx { width:20px; height:20px; margin-left:-4px; border-radius:50%; box-shadow:0 0 0 2px var(--surface); }
.rx-stack .rx:first-child { margin-left:0; }
svg.rx { display:block; flex:none; }
.post-acts { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; border-top:1px solid var(--line); padding-top:4px; }
.post-acts .rx-wrap { display:grid; }
.act { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 8px; border:0; border-radius:8px; background:transparent;
  color:var(--muted); font:700 .95rem/1 var(--text); cursor:pointer; min-width:0; }
.act:hover:not(:disabled) { background:var(--card-2); color:var(--fg); }
.act svg.i { width:19px; height:19px; }
.act svg.rx.sm { width:19px; height:19px; }
.act:disabled { opacity:.45; cursor:not-allowed; }
:root { --rx-like:#2D88FF; }
:root[data-theme="light"] { --rx-like:#1263D6; }
.act.on { color:var(--rx-like); }
.act.on.rx-love { color:#FF4F79; }
.act.on.rx-haha, .act.on.rx-wow, .act.on.rx-sad { color:#E8A500; }
.act.on.rx-angry { color:#FF8A3D; }

/* Auswahl der Reaktionen */
.rx-wrap { position:relative; }
.rx-pick { position:absolute; left:0; bottom:calc(100% + 6px); z-index:20; display:flex; gap:2px; padding:5px 6px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); box-shadow:0 14px 40px -8px rgba(0,0,0,.55); opacity:0; transform:translateY(8px) scale(.94); transform-origin:left bottom;
  pointer-events:none; transition:opacity .15s ease .2s, transform .15s ease .2s; }
.rx-pick::after { content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.rx-pick button { display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; transition:transform .12s; }
.rx-pick button .rx { width:36px; height:36px; }
.rx-pick button:hover, .rx-pick button:focus-visible { transform:translateY(-6px) scale(1.18); }
.rx-pick button[aria-pressed="true"] { background:var(--card-2); }
.rx-wrap.open .rx-pick { opacity:1; transform:none; pointer-events:auto; transition-delay:0s; }
@media (hover:hover) {
  .rx-wrap:hover .rx-pick { opacity:1; transform:none; pointer-events:auto; transition-delay:.45s; }
  .rx-wrap.done .rx-pick { opacity:0; pointer-events:none; transition:none; }
}
@media (prefers-reduced-motion:reduce) { .rx-pick, .rx-pick button, .post-media img { transition:none; } }

/* ---------------------------------------------------------------- Kommentare */
.cmts { display:grid; gap:10px; border-top:1px solid var(--line); padding:10px 0 12px; }
.cm-list, .cm-sub { display:grid; gap:10px; }
.cm-sub:empty { display:none; }
.cm { display:flex; gap:8px; align-items:flex-start; min-width:0; }
.cm > a .av { margin-top:2px; }
.cm-main { flex:1; min-width:0; display:grid; gap:3px; }
.cm-row { display:flex; align-items:center; gap:4px; min-width:0; }
.cm-bub { position:relative; max-width:100%; min-width:0; padding:8px 12px; border-radius:16px; background:var(--card-2); }
.cm-name { display:block; font-weight:700; font-size:.88rem; line-height:1.2; }
.cm-text { white-space:pre-line; overflow-wrap:anywhere; font-size:.95rem; line-height:1.4; color:var(--prose, var(--fg)); }
.cm-rx { position:absolute; right:-10px; bottom:-10px; display:inline-flex; align-items:center; gap:3px; padding:2px 5px 2px 3px; border-radius:999px;
  background:var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.25); font-size:.78rem; color:var(--muted); }
.cm-rx .rx { width:16px; height:16px; }
.cm-rx .rx-stack .rx { box-shadow:none; }
.cm-rx:not(:has(span + span)) { padding-right:3px; }
.cm-dots { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; opacity:0; flex:none; }
.cm:hover .cm-dots, .cm-dots:focus-visible, .cm-dots[aria-expanded="true"] { opacity:1; }
.cm-dots:hover { background:var(--card-2); color:var(--fg); }
.cm-row .dd { position:relative; }
.cm-row .menu-pop { width:210px; }
.cm-acts { display:flex; align-items:center; gap:12px; padding-left:12px; font-size:.8rem; color:var(--muted); }
.cm-a { padding:0; border:0; background:none; color:var(--muted); font:700 .82rem/1 var(--text); cursor:pointer; }
.cm-a:hover { text-decoration:underline; color:var(--fg); }
.cm-a.on { color:var(--rx-like); }
.cm-a.on.rx-love { color:#FF4F79; }
.cm-a.on.rx-haha, .cm-a.on.rx-wow, .cm-a.on.rx-sad { color:#E8A500; }
.cm-a.on.rx-angry { color:#FF8A3D; }
.cm-rxw .rx-pick { bottom:calc(100% + 4px); }
.cm-rxw .rx-pick button { width:36px; height:36px; }
.cm-rxw .rx-pick button .rx { width:30px; height:30px; }
.cm-acts time { color:var(--muted); }
.cm-note { margin:0; padding-left:12px; font-size:.8rem; color:var(--accent); }
.cm.is-removed .cm-bub { opacity:.6; box-shadow:inset 0 0 0 1px rgba(239,35,60,.5); }
.cm-replies { display:grid; gap:8px; margin-top:4px; }
.cm-replies:not(:has(> .cm-sub > .cm, > button, > form)) { display:none; }
.cm-more { justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:2px 0; border:0; background:none; color:var(--muted); font:700 .9rem/1.2 var(--text); cursor:pointer; }
.cm-more:hover { color:var(--fg); text-decoration:underline; }
.cm-more.sub svg.i { width:14px; height:14px; transform:rotate(0deg); }
.cm-off { display:flex; align-items:center; gap:6px; margin:0; font-size:.85rem; color:var(--muted); }
.cm-off svg.i { width:14px; height:14px; }
.cm-form { display:grid; grid-template-columns:auto 1fr; gap:4px 8px; align-items:start; }
.cm-form > .av { margin-top:3px; }
.cm-form .form-msg { grid-column:2; }
.cm-form .form-msg:empty { display:none; }
.cm-field { position:relative; }
.cm-input { display:block; width:100%; min-height:38px; max-height:220px; padding:8px 44px 8px 14px; border-radius:19px; resize:none; overflow-y:auto;
  background:var(--card-2); border:1px solid transparent; line-height:1.4; font-size:.95rem; }
.cm-input:focus { border-color:var(--input-line, var(--line)); }
.cm-send { position:absolute; right:4px; bottom:3px; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--accent); cursor:pointer; }
.cm-send svg.i { width:17px; height:17px; }
.cm-send:hover { background:rgba(239,35,60,.12); }
.cm-send:disabled { opacity:.4; }
.cm-form.reply .av { width:28px; height:31px; font-size:.7rem; }
.cm-edit { display:grid; gap:6px; }
.cm-edit .cm-input { padding-right:14px; }
.cm-edit-acts { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.cm-edit-acts .muted { margin-right:auto; }
.cm-edit .form-msg:empty { display:none; }

/* ---------------------------------------------------------------- Dialoge: Teilen, Reaktionen, Fotos, Bearbeiten */
.share-who { display:flex; gap:12px; align-items:center; }
.share-who > div { display:grid; gap:4px; justify-items:start; }
.share-who select { padding:5px 10px; font-size:.85rem; width:auto; }
.share-d textarea { min-height:70px; }
.share-d .post-media { max-height:180px; aspect-ratio:auto; }
.share-d .post-media.n1 img { max-height:180px; object-fit:cover; }
.share-d .post-media.n2, .share-d .post-media.n3, .share-d .post-media.n4 { height:180px; grid-template-rows:1fr; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:1fr; }
.share-d .post-media .pm:first-child { grid-row:auto; }
.share-d .post-body.clamp { -webkit-line-clamp:3; }
.rx-dlg { gap:12px; }
.rx-tabs { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.rx-tabs [data-rx-tab] { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border:0; border-radius:8px; background:none; color:var(--muted);
  font:700 .92rem/1 var(--text); cursor:pointer; }
.rx-tabs [data-rx-tab]:hover { background:var(--card-2); }
.rx-tabs [data-rx-tab][aria-selected="true"] { color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); border-radius:8px 8px 0 0; }
.rx-tabs .rx.sm { width:20px; height:20px; }
.rx-x { margin-left:auto; }
.rx-people { display:grid; gap:4px; max-height:min(60vh, 460px); overflow-y:auto; }
.rx-people .fr-who { padding:8px; border-radius:8px; }
.rx-people .fr-who:hover { background:var(--card-2); }
.rx-av { position:relative; flex:none; }
.rx-av .rx.badge { position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; border-radius:50%; box-shadow:0 0 0 2px var(--surface); }
.dlg.lb-d { width:min(1200px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; background:#0b0c14; border-color:#000; overflow:hidden; }
.lb { position:relative; display:grid; grid-template-rows:1fr auto; height:min(86vh, 900px); }
.lb-img { width:100%; height:100%; min-height:0; object-fit:contain; display:block; touch-action:pan-y; user-select:none; }
.lb-nav { position:absolute; top:calc(50% - 40px); width:48px; height:48px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; }
.lb-nav:hover { background:rgba(255,255,255,.24); }
.lb-nav.prev { left:14px; } .lb-nav.next { right:14px; }
.lb-bar { display:flex; align-items:center; gap:8px; justify-content:flex-end; padding:10px 14px; background:#12131d; color:#EDF2F4; }
.lb-n { margin-right:auto; color:#b9c1d0; font-weight:700; }
.lb-bar .btn.ghost { color:#EDF2F4; }
.dlg .menu-pop hr { margin:4px 0; }
.mod-img { display:block; max-width:min(100%, 360px); max-height:240px; border-radius:8px; margin-bottom:8px; background:var(--card-2); }
.decision blockquote.quote { margin:0; padding:10px 12px; border-left:3px solid var(--accent); background:var(--card-2); border-radius:6px; white-space:pre-line; }

.post.release { gap:10px; }
.rel-ico { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--card-2); color:var(--accent); flex:none; }
.rel-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:6px; background:var(--card); border:1px solid var(--line); }
.rel-card:hover { border-color:var(--muted); color:var(--fg); }
.rel-t { flex:1; min-width:0; }
.rel-t b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rel-t small { display:block; color:var(--muted); font-size:.78rem; }

.sug-h { font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:14px 0 8px; }
.box-t + .sug-h { margin-top:0; }
.box .list { display:grid; gap:10px; }
.follow-btn { flex:none; }
.li .follow-btn.sm { height:30px; padding:0 9px; }

/* ---------------------------------------------------------------- Zähler und Knöpfe auf Profil-, Studio- und Projektseiten */
.social-acts { flex-wrap:wrap; justify-content:flex-end; }
.soc-stats { display:flex; gap:4px; }
.soc-stat { display:grid; justify-items:center; padding:4px 10px; border-radius:6px; min-width:64px; }
.soc-stat:hover { background:rgba(237,242,244,.05); color:var(--fg); }
.soc-stat b { font:400 1.5rem/1 var(--display); letter-spacing:.03em; display:flex; align-items:center; height:24px; }
.soc-stat b svg.i { width:20px; height:20px; color:var(--accent); }
.soc-stat span { font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.soc-btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.soc-btns:empty { display:none; }
.soc-btns .pill.free svg.i { width:13px; height:13px; }
.soc-box { display:grid; gap:14px; justify-items:start; }
.feature .social-acts { justify-content:flex-start; }
.feature .soc-stat:hover { background:rgba(18,19,29,.45); }

/* ---------------------------------------------------------------- Freunde */
.friends { display:grid; gap:18px; max-width:980px; }
.fr-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); }
.fr-title { display:flex; align-items:center; gap:10px; margin:0; font-size:2rem; }
.fr-title svg.i { width:26px; height:26px; color:var(--accent); }
.seg { display:flex; gap:4px; flex-wrap:wrap; }
.seg a { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:6px; font-weight:700; font-size:.82rem; color:var(--muted); }
.seg a:hover { background:rgba(237,242,244,.05); color:var(--fg); }
.seg a.active { background:var(--card-2); color:var(--fg); }
.seg .cnt { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:800; display:grid; place-items:center; }
.fr-bar .btn { margin-left:auto; }
.fr-bar .btn.is-on { background:transparent; color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok); }
.fr-main { display:grid; gap:10px; }
.fr-filter { max-width:none; }
.fr-h { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:8px 0 2px; }
.fr-list { display:grid; }
.fr-row { display:flex; align-items:center; gap:12px; padding:10px 10px; border-top:1px solid var(--line); border-radius:6px; }
.fr-row:first-child { border-top-color:transparent; }
.fr-row:hover { background:var(--surface); border-top-color:transparent; }
.fr-row:hover + .fr-row { border-top-color:transparent; }
.fr-who { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.fr-who > span { min-width:0; }
.fr-who b { display:block; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-who small { display:block; font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-acts { display:flex; gap:8px; align-items:center; flex:none; }
.round { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:0; background:var(--card); color:var(--muted); cursor:pointer; }
.round svg.i { width:17px; height:17px; }
.round:hover { color:var(--fg); background:var(--card-2); }
.round.ok:hover { color:var(--ok); }
.round.warn:hover { color:var(--accent); }
.round:disabled { opacity:.45; cursor:not-allowed; }
.add-friend { max-width:none; }
.add-row { display:flex; gap:10px; }
.add-row input { flex:1; background:var(--bg); }
.add-friend .form-msg:not(:empty) { margin-top:12px; }
#privacy-form { max-width:620px; }
.fr-list.conn { margin-top:10px; max-width:760px; }

/* ---------------------------------------------------------------- Melden (Dialog) und Hinweise */
.dlg { width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; padding:24px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--fg); box-shadow:0 30px 80px -10px rgba(0,0,0,.8); }
.dlg::backdrop { background:rgba(10,10,18,.72); backdrop-filter:blur(2px); }
.dlg h2 { margin:0; font-size:2rem; }
.dlg form.stack { max-width:none; }
.dlg .acts { display:flex; gap:8px; flex-wrap:wrap; }
.dlg p { margin:0; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; max-width:calc(100vw - 32px); padding:12px 16px; border-radius:8px;
  background:var(--card-2); color:var(--fg); border-left:3px solid var(--ok); box-shadow:0 18px 50px -10px rgba(0,0,0,.8); font-size:.88rem; }
.toast.error { border-left-color:var(--accent); }

.mod-card.urgent { border-color:var(--accent); box-shadow:var(--glow); }

/* ---------------------------------------------------------------- Schmale Bildschirme */
@media (max-width:900px) {
  .profile-head .acts { flex-wrap:wrap; }
  .social-acts { justify-content:flex-start; }
}
@media (max-width:640px) {
  .composer-bar, .composer .fine, .cp-photos, .cp-link { padding-left:0; }
  .composer-top .av { display:none; }
  .cp-ph { width:calc(25% - 6px); height:auto; aspect-ratio:1; }
  .composer-bar .cp-count { display:none; }
  .composer-bar .btn.primary { margin-left:auto; }
  .post { padding:14px 14px 4px; }
  .post-media { margin:0 -14px; }
  .post-body.big { font-size:1.25rem; }
  .act { gap:6px; font-size:.9rem; }
  .rx-pick button { width:38px; height:38px; }
  .rx-pick button .rx { width:32px; height:32px; }
  .cm-dots { opacity:1; }
  .lb { height:80vh; }
  .lb-nav { width:40px; height:40px; }
  .two { grid-template-columns:1fr; }
  .fr-bar .btn { margin-left:0; }
  .fr-title { font-size:1.7rem; flex-basis:100%; }
  .seg { flex:1 1 100%; }
  .add-row { flex-direction:column; }
  .fr-row { padding:10px 4px; }
  .soc-stat { min-width:0; padding:4px 8px; }
  .dlg { padding:18px; }
}
/* Zwischen 1100 und 1380 px stellt portal.css .profile-body einspaltig; der Feed behält seine Spalte rechts. */
@media (min-width:1101px) and (max-width:1380px) {
  .profile-body.feed-layout { grid-template-columns:minmax(0,1fr) 280px; }
  .feed-layout .rail { position:sticky; grid-template-columns:minmax(0,1fr); }
}

/* ---------------------------------------------------------------- Geburtsmonat (Registrierung, ältere Konten) */
fieldset.bm { border:0; padding:0; margin:0; display:grid; gap:6px; min-width:0; }
fieldset.bm legend { padding:0; margin-bottom:6px; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
fieldset.bm legend .hint { display:block; margin-top:6px; font-weight:400; text-transform:none; letter-spacing:0; font-size:.8rem; }
.bm-row { display:grid; grid-template-columns:3fr 2fr; gap:10px; }
.bm-box { max-width:none; border-color:rgba(239,35,60,.55); }
.bm-box h3.box-t { margin:0; }
.bm-box p { margin:0; }
.friends > .bm-box { max-width:620px; }

/* Link-Vorschau im Eingabefeld: kompakt, auch für YouTube. */
.cp-link .yt-ph { aspect-ratio:auto; padding:12px 14px; }
.cp-link .yt-play { width:42px; height:42px; box-shadow:none; }
.cp-link .yt-play svg.i { width:18px; height:18px; }
.cp-link .yt-t b { font-size:1rem; }
.cp-link .yt-t small, .cp-link .lc-foot { display:none; }

/* ---------------------------------------------------------------- GIFs (KLIPY, über die API) */
/* Knöpfe erst zeigen, wenn der Server GIFs anbietet (app setzt data-gifs="on" am html-Element). */
.cp-btn.gif-btn, .cm-gif-btn { display:none; }
:root[data-gifs="on"] .cp-btn.gif-btn { display:inline-flex; border:0; }
.cp-btn.gif-btn svg.i { color:#19B5A5; width:20px; height:20px; }
.cp-btn:disabled, .cp-btn.off { opacity:.45; cursor:not-allowed; }
.cp-btn:disabled:hover, .cp-btn.off:hover { background:var(--btn); }
.cp-btn.gif-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cp-gif { padding-left:54px; }
.cp-gif-in { position:relative; display:inline-block; max-width:min(300px, 100%); border-radius:10px; overflow:hidden; background:var(--card-2); vertical-align:top; }
.cp-gif-in img { display:block; width:100%; height:auto; }
.gif-via { position:absolute; left:8px; bottom:8px; padding:3px 6px; border-radius:5px; background:rgba(10,10,18,.62); color:#fff;
  font:700 .62rem/1 var(--text); letter-spacing:.06em; pointer-events:none; }
.post-gif { display:flex; justify-content:center; margin:0 -18px; background:var(--bg); }
.gif-box { position:relative; display:block; width:100%; }
.post-gif .gif-box { max-width:400px; }
.post-gif img { display:block; width:100%; height:auto; max-height:520px; object-fit:contain; }
.post-share .post-gif { margin:0; }
.cm-gif { position:relative; justify-self:start; width:min(240px, 100%); margin:2px 0 0; border-radius:14px; overflow:hidden; background:var(--card-2); }
.cm-gif img { display:block; width:100%; height:auto; }
.cm-gif .gif-via { left:6px; bottom:6px; font-size:.56rem; }
.cm-bub.name-only { padding:0 4px 0 2px; background:none; }
.cm-bub.name-only .cm-rx { bottom:-4px; }
:root[data-gifs="on"] .cm-gif-btn { position:absolute; right:40px; bottom:9px; display:grid; place-items:center; height:20px; padding:0 4px; border:1.5px solid currentColor;
  border-radius:5px; background:none; color:var(--muted); font:700 .66rem/1 var(--text); letter-spacing:.04em; cursor:pointer; }
:root[data-gifs="on"] .cm-gif-btn:hover { color:var(--fg); }
:root[data-gifs="on"] .cm-form .cm-input { padding-right:84px; }

.dlg.gif-d { width:min(560px, calc(100vw - 24px)); height:min(660px, calc(100vh - 48px)); padding:0; overflow:hidden; }
.gif-pk { display:flex; flex-direction:column; height:100%; }
.gif-top { display:flex; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--line); }
.gif-q { position:relative; flex:1; margin:0; text-transform:none; letter-spacing:0; }
.gif-q > svg.i { position:absolute; left:12px; top:50%; width:17px; height:17px; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.gif-q input { width:100%; padding-left:38px; border-radius:999px; }
.gif-scroll { flex:1; min-height:0; overflow-y:auto; padding:10px 12px; }
.gif-grid { columns:3 140px; column-gap:6px; }
.gif-it { display:block; width:100%; margin:0 0 6px; padding:0; border:0; border-radius:8px; overflow:hidden; background:var(--card-2); cursor:pointer; break-inside:avoid; }
.gif-it img { display:block; width:100%; height:auto; transition:transform .15s; }
.gif-it:hover img { transform:scale(1.04); }
.gif-it:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.gif-state { margin:10px 0 0; text-align:center; }
.gif-state:empty { display:none; }
.gif-end { display:block; height:1px; }
.gif-foot { padding:8px 14px; border-top:1px solid var(--line); text-align:right; font-size:.75rem; color:var(--muted); letter-spacing:.04em; }
.gif-foot b { color:var(--fg); letter-spacing:.08em; }
@media (max-width:640px) {
  .cp-gif { padding-left:0; }
  .post-gif { margin:0 -14px; }
  .gif-grid { columns:2 120px; }
  .dlg.gif-d { height:calc(100vh - 32px); }
}
@media (prefers-reduced-motion:reduce) { .gif-it img { transition:none; } }