/* Beiträge: Karte, Karussell, Aktionen, Zusage, Kommentare, Teilen, Melden, Raster.
   Vorbild friends_feed_page.dart (_revealedPostCard), user_post_comments_sheet.dart,
   widgets/post_grid.dart. Ohne Kacheln: Medien randlos, nur Abstand zwischen Beiträgen. */

/* Elemente mit hidden-Attribut bleiben unsichtbar, auch wenn eine Klasse display setzt. */
.pc[hidden],
.pc [hidden],
.pcm-composer [hidden],
.pcm-list [hidden],
.pc-sheet [hidden],
.pgrid [hidden],
.feed-notice[hidden],
.feed-stories[hidden],
dialog.sheet .sheet__foot[hidden] { display: none !important; }

/* ---------- Kopfzeile mit Zurück (Detailseiten) ---------- */
.pc-subhead {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.pd-header,
.saved-header { padding-left: 4px; }
.pc-subhead__text {
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Karte ---------- */
.pc { position: relative; }
.feed-list .pc + .pc,
.feed-list .pc--skeleton + .pc--skeleton,
.feed-status .pc--skeleton + .pc--skeleton { margin-top: 26px; }

.pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 10px 10px;
}
.pc-head__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.pc-head__ring {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.pc-head__ring.has-story { background: var(--ring-unseen); }
.pc-head__ring.has-story > .avatar { box-shadow: 0 0 0 2px var(--bg); }
.pc-head__who {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}
.pc-head__who--sk { gap: 7px; }
.pc-head__name {
  justify-self: start;
  max-width: 100%;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.pc-head__name:hover { text-decoration: underline; }
.pc-info {
  justify-self: start;
  max-width: 100%;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-info__text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  transition: opacity .22s ease, transform .22s ease;
}
.pc-info__text.is-out { opacity: 0; transform: translateY(-4px); }
.pc-more {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--text-2);
}
.pc-more .icon { width: 20px; height: 20px; }

/* Nutzer-Event: Titel + „Mehr Infos hier“ */
.pc-event {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0 14px 8px 10px;
  text-align: left;
}
.pc-event__title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text);
}
.pc-event__more {
  justify-self: start;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- Medien: volle Breite, Rahmen 4:5 … 1,91:1 ---------- */
.pc-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pc-ar, 0.8);
  overflow: hidden;
  background: var(--placeholder);
  isolation: isolate;
}
@media (min-width: 768px) {
  .pc-media,
  .pc-cover,
  .pc-sk-media { border-radius: 4px; }
}
.pc-media__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: manipulation;
  outline: none;
}
.pc-media__track::-webkit-scrollbar { display: none; }
.pc-media__track:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.pc-media__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pc-media__img,
.pc-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
}
.pc-media__img { opacity: 0; transition: opacity .25s ease; }
.pc-media__img.is-loaded { opacity: 1; }
.pc-media__video { background: #000; }
.pc-media__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.pc-media__play-ring {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pc-media__play .icon { position: relative; width: 34px; height: 34px; }
.pc-media__play.is-busy .icon { opacity: 0; }
.pc-media__play.is-busy .pc-media__play-ring {
  border: 2.4px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  background: rgba(0, 0, 0, .42);
  animation: pc-spin .9s linear infinite;
}
.pc-media__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
  pointer-events: none;
}
.pc-media__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25);
  transition: background .2s ease, transform .2s ease;
}
.pc-media__dot.is-on { background: #fff; transform: scale(1.15); }
.pc-media__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pc-media__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .2);
    opacity: 0;
    transition: opacity .15s ease;
  }
  .pc-media__nav .icon { width: 22px; height: 22px; }
  .pc-media__nav--prev { left: 10px; }
  .pc-media__nav--next { right: 10px; }
  .pc-media:hover .pc-media__nav,
  .pc-media__nav:focus-visible { opacity: 1; }
}

/* ---------- Aktionsleiste ---------- */
.pc-actions {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 2px 12px 0 4px;
  color: var(--text);
}
.pc-act {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--text);
}
.pc-act .icon { width: 24px; height: 24px; }
.pc-act--like .icon { width: 25px; height: 25px; }
.pc-act:disabled { opacity: .45; }
.pc-count {
  min-width: 14px;
  margin-left: -6px;
  margin-right: 4px;
  padding: 0 4px 0 2px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 44px;
}
.pc-actions__spacer { flex: 1 1 auto; }
.pc-act--send { margin-right: -2px; }

/* Jede Aktion ihre eigene Bewegung: Herz springt, Lesezeichen fällt,
   Pfeile drehen sich, Flieger fliegt, Sprechblase hebt sich. */
.pc-act--like.is-pop .icon,
.pcm-like.is-pop .icon { animation: pc-heart-pop .45s var(--ease-out); }
.pc-act--save.is-drop .icon { animation: pc-drop .55s var(--ease-out); }
.pc-act--repost.is-spin .icon { animation: pc-spin-once 1s cubic-bezier(.34, 1.56, .64, 1); }
.pc-act--send.is-fly .icon,
.pcm-send.is-fly .icon { animation: pc-fly .7s var(--ease-out); }
.pc-act--comment .icon { transition: transform .35s var(--ease-out); }
.pc-act--comment.is-raised .icon { transform: translateY(-4px); }
@keyframes pc-heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.32); }
  65% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes pc-drop {
  0% { transform: translateY(-8px); opacity: .4; }
  60% { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(0); }
}
@keyframes pc-spin-once { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pc-fly {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(14px, -12px); opacity: 0; }
  46% { transform: translate(-10px, 8px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* ---------- Gäste + Zusagen (eine Zeile, immer gleich hoch) ---------- */
.pc-rsvp-slot { padding: 4px 14px 4px; }
.pc-rsvp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.pc-guests {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  text-align: left;
}
.pc-guests--invite {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-guests__faces { display: flex; align-items: center; }
.pc-guests__face,
.pc-guests__sk {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.pc-guests__face + .pc-guests__face,
.pc-guests__sk + .pc-guests__sk { margin-left: -8px; }
.pc-guests__face > .avatar { box-shadow: 0 0 0 2px var(--bg); }
.pc-guests__more,
.pc-guests__count {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
.pc-rsvp {
  flex: none;
  border-radius: 14px;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity .15s ease;
}
/* Handlung groß und gefüllt … */
.pc-rsvp.is-ask {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ev-on, var(--bg));
  background: var(--ev-color, var(--text));
}
.pc-rsvp.is-ask.is-approval { color: var(--on-accent); background: var(--accent-gradient); }
/* … Erledigtes klein, nur Schrift im feinen Rand. */
.pc-rsvp.is-done {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ev-color, var(--text));
  border: 1px solid var(--ev-color, var(--text));
  background: transparent;
}
.pc-rsvp.is-done.is-approval { color: var(--text); border-color: var(--accent-solid); }
.pc-rsvp:disabled { opacity: .5; }
.pc-rsvp.is-enter-done { animation: pc-rsvp-done .38s ease-out; }
.pc-rsvp.is-enter-ask { animation: pc-rsvp-ask .24s ease-out; }
@keyframes pc-rsvp-done { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pc-rsvp-ask { from { transform: scale(.94); opacity: .6; } to { transform: none; opacity: 1; } }
.pc-rsvp-note {
  padding: 2px 0 4px;
  font-size: 12px;
  color: var(--text-2);
}

/* ---------- Bildunterschrift + Zeit ---------- */
.pc-caption {
  padding: 2px 14px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pc-caption__name { font-weight: 800; }
.pc-caption__more {
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.pc-time {
  padding: 6px 14px 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  opacity: .9;
}

/* ---------- Sensibler Inhalt (Rand-Knopf „Ansehen“) ---------- */
.pc-cover {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--pc-ar, 0.8);
  min-height: 240px;
  max-height: 80vh;
  padding: 24px;
  background: var(--placeholder);
  text-align: center;
}
.pc-cover__inner { display: grid; justify-items: center; gap: 10px; max-width: 320px; }
.pc-cover__icon { width: 36px; height: 36px; color: var(--text-2); }
.pc-cover__title { font-size: 16px; font-weight: 700; color: var(--text); }
.pc-cover__text { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pc-cover__reveal { min-width: 180px; min-height: 46px; margin-top: 8px; border-radius: 14px; }
.pc-cover__manage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
}
.pc-cover__manage .icon { width: 20px; height: 20px; }

/* ---------- Platzhalter in Beitragsform ---------- */
.pc--skeleton .pc-head { padding-bottom: 10px; }
.pc-sk-media { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 0; }
.pc-sk-lines { display: grid; gap: 8px; padding: 14px 14px 0; }
.pc-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.4px solid var(--line);
  border-top-color: var(--accent-solid);
  animation: pc-spin .9s linear infinite;
}

/* ---------- Sheets (Menüs, Listen) ---------- */
.pc-sheet { padding: 6px 0 16px; }
.pc-sheet__search { margin: 8px 16px 10px; }
.pc-sheet__sub {
  margin: 4px 16px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
}
.pc-sheet__more { display: grid; place-items: center; padding: 10px 16px 0; }
.pc-sheet-note {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 36px 24px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
}
.pc-sheet-loading { display: grid; gap: 4px; padding: 6px 16px; }
.pc-sheet-loading__row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.pc-menu { padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); }
.pc-foot { display: grid; gap: 10px; }

.pc-people { display: grid; }
.pc-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 6px 16px;
  color: var(--text);
}
.pc-person__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  a.pc-person:hover { background: var(--line-soft); }
}

.pc-why { display: grid; justify-items: center; gap: 14px; padding: 18px 24px 8px; text-align: center; }
.pc-why__text { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.pc-why__more { font-size: 14px; line-height: 1.5; color: var(--text-2); text-align: left; }
.pc-why__toggle { min-height: 44px; padding: 10px 20px; font-size: 16px; font-weight: 800; }

/* Gästeliste */
.pc-guests-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
  padding: 10px 18px 22px;
}
.pc-guests-grid > .pc-sheet-loading,
.pc-guests-grid > .pc-sheet-note { grid-column: 1 / -1; }
.pc-guest {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
}
.pc-guest__avatar { position: relative; display: grid; place-items: center; }
.pc-guest__me {
  position: absolute;
  bottom: -2px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-2);
}
.pc-guest__name {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Beitragsinfos */
.pinfo { padding: 8px 0 6px; }
.pinfo__head {
  padding: 4px 16px 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
}
.pinfo__line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 600;
}
.pinfo__line .icon { width: 20px; height: 20px; }

/* Eventdetails */
.pev-title { padding: 6px 16px 0; font-size: 25px; font-weight: 900; line-height: 1.15; }
.pev-host { padding: 12px 16px 6px; }
.pev-host__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.pev-rows { display: grid; padding: 4px 16px; }
.pev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 0;
}
.pev-row__icon { display: grid; place-items: center; width: 24px; flex: none; color: var(--text-2); }
.pev-row__icon .icon { width: 20px; height: 20px; }
.pev-row__text { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pev-row.is-quiet .pev-row__text { color: var(--text-2); }
/* „Ansehen“/„Route“ nur als Rand im Verlauf (PaletteOutlineButton) */
.pev-row__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--sheet-bg), var(--sheet-bg)) padding-box,
    var(--accent-gradient) border-box;
}
.pev-row__action .icon { width: 15px; height: 15px; }
.pev-row__action.is-busy { opacity: .6; pointer-events: none; }
.pev-desc {
  padding: 14px 16px 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Bearbeiten */
.pedit { display: grid; gap: 14px; padding: 12px 16px 16px; }
.pedit .field__textarea { min-height: 120px; }

/* ---------- Melden ---------- */
.prep-hint {
  padding: 6px 20px 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
}
.prep-reasons { display: grid; }
.prep-reason {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .prep-reason:hover { background: var(--line-soft); }
}
.prep-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 12px 4px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.prep-back .icon { width: 20px; height: 20px; }
.prep-details-wrap { padding: 6px 20px 4px; }
.prep-details { min-height: 96px; }

/* ---------- An Chat senden ---------- */
.pshare-list { display: grid; }
.pshare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 7px 16px;
  text-align: left;
  color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .pshare-row:hover { background: var(--line-soft); }
}
.pshare-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pshare__group .icon { width: 22px; height: 22px; }
.pshare-send { gap: 8px; }
.pshare-send .icon { width: 20px; height: 20px; }
.pshare-send.is-busy { opacity: .7; }

/* ---------- Kommentare ---------- */
dialog.sheet.sheet--comments { height: min(86dvh, 820px); }
@media (max-width: 559px) {
  dialog.sheet.sheet--comments { height: 86dvh; }
}
.pcm-list { display: grid; padding: 6px 16px 10px; }
.pcm-loading { display: grid; place-items: center; padding: 40px 0; }
.pcm-empty {
  padding: 48px 24px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
  white-space: pre-line;
}
.pcm-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.pcm-item--reply { margin-left: 42px; }
.pcm-avatar { flex: none; display: grid; }
.pcm-body { flex: 1 1 auto; min-width: 0; }
.pcm-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}
.pcm-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}
a.pcm-name:hover { text-decoration: underline; }
.pcm-badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--on-accent);
  background: var(--accent-gradient);
}
.pcm-time { font-size: 11px; font-weight: 600; color: var(--text-2); }
.pcm-text {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pcm-mention { font-weight: 800; }
.pcm-gif {
  width: 180px;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--quiet-fill);
}
.pcm-gif--sticker { width: 110px; border-radius: 0; background: transparent; }
.pcm-gif__img { width: 100%; height: 100%; object-fit: cover; }
.pcm-gif--sticker .pcm-gif__img { object-fit: contain; }
.pcm-tools { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.pcm-tool {
  min-height: 28px;
  padding: 2px 6px 2px 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-2);
}
.pcm-tool--more { display: grid; place-items: center; width: 28px; padding: 0; }
.pcm-tool--more .icon { width: 18px; height: 18px; }
.pcm-like {
  display: grid;
  justify-items: center;
  align-content: center;
  flex: none;
  width: 44px;
  min-height: 44px;
  color: var(--text-2);
}
.pcm-like .icon { width: 17px; height: 17px; }
.pcm-like__count { font-size: 11px; font-weight: 700; color: var(--text-2); }
.pcm-thread {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 0 0 6px 42px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.pcm-thread__line { width: 24px; height: 1px; background: var(--text-3); opacity: .6; }

.pcm-composer { display: grid; gap: 8px; }
.pcm-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.pcm-reply__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcm-reply__close { display: grid; place-items: center; width: 32px; height: 32px; color: var(--text-2); }
.pcm-reply__close .icon { width: 18px; height: 18px; }
.pcm-compose-row { display: flex; align-items: flex-end; gap: 10px; }
.pcm-compose-row > .avatar { margin-bottom: 3px; }
.pcm-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: 140px;
  padding: 9px 14px;
  border-radius: 20px;
  border: 1px solid var(--line-soft);
  background: var(--input-fill);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.4;
  resize: none;
  outline: none;
}
.pcm-input::placeholder { color: var(--text-3); }
.pcm-input:focus {
  border-color: transparent;
  background:
    linear-gradient(var(--input-fill), var(--input-fill)) padding-box,
    var(--accent-gradient) border-box;
}
.pcm-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-gradient);
  transition: opacity .15s ease;
}
.pcm-send .icon { width: 20px; height: 20px; }
.pcm-send:disabled { opacity: .4; }

/* ---------- Raster: 3 Spalten, 4:5, 2-px-Fugen ---------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.pgrid__tile,
.pgrid__sk {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--placeholder);
  border-radius: 0;
}
.pgrid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.pgrid__img.is-loaded { opacity: 1; }
.pgrid__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55));
}
.pgrid__badge .icon { width: 16px; height: 16px; }
.pgrid__tile--glass,
.pgrid__tile--text { background: var(--surface-soft); }
.pgrid__tile--glass {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  color: var(--text-2);
  text-align: center;
}
.pgrid__label { font-size: 11px; font-weight: 600; color: var(--text); }
.pgrid__tile--text { display: grid; align-content: start; gap: 6px; padding: 10px; }
.pgrid__tile--text .icon { width: 18px; height: 18px; }
.pgrid__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.pgrid-empty {
  padding: 36px 24px;
  font-size: 14.5px;
  color: var(--text-2);
  text-align: center;
}

/* ---------- Einzelner Beitrag (/p/<id>) ---------- */
.pd-body { padding-top: 4px; }
.pd-locked { cursor: pointer; }
.pd-comments { margin-top: var(--section-gap); }
.pd-comments__title {
  padding: 0 16px 12px;
  font-size: 17px;
  font-weight: 800;
}
.pd-comments > .pcm-composer { padding: 0 16px 6px; }
.pd-comments--locked { display: grid; justify-items: start; gap: 6px; padding: 0 16px; }
.pd-comments--locked .pd-comments__title { padding: 0; }

/* ---------- Gespeicherte Beiträge ---------- */
.saved-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px 12px;
  font-size: 13px;
  color: var(--text-2);
}
.saved-note .icon { width: 15px; height: 15px; }
.saved-locked { cursor: pointer; }
.saved-more { display: grid; place-items: center; gap: 10px; padding: 16px 16px 8px; }

@media (prefers-reduced-motion: reduce) {
  .pc-media__track { scroll-behavior: auto; }
  .pc-info__text,
  .pc-media__img,
  .pgrid__img { transition: none; }
}