/* Beitragsseite: Bausteine aus dem Feedback-Paket 10/2026.
   Farben nur ueber Variablen (Hell/Dunkel, tests/test_routes/test_darkmode.py). */

/* ── Blaettern zwischen Beitraegen (#83): Zeile mit Zurueck-Link ── */
body.pn-ui.detail-page .bs-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: wrap;
}
body.pn-ui.detail-page .bs-kopf .back-link { margin-right: auto; }
body.pn-ui.detail-page .bs-blaettern { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
body.pn-ui.detail-page .bs-blaettern--leer { display: none; }
body.pn-ui.detail-page .bs-blaettern__btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  min-height: 44px; padding: 0 0.85rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--pn-tx-navy-bsn);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
body.pn-ui.detail-page .bs-blaettern__btn[hidden] { display: none; }
body.pn-ui.detail-page .bs-blaettern__btn:hover { border-color: var(--pn-ln-3); box-shadow: 0 2px 8px var(--hover-shadow); }
body.pn-ui.detail-page .bs-blaettern__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.pn-ui.detail-page .detail-card { touch-action: pan-y pinch-zoom; }
@media (max-width: 420px) {
  body.pn-ui.detail-page .bs-blaettern__btn { padding: 0 0.6rem; }
  body.pn-ui.detail-page .bs-blaettern__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Link zur BGG-Seite des Spiels (#93, Beitrag aus der Sammlung) ── */
body.pn-ui.detail-page .bs-bgg { margin: 0.25rem 0 0.75rem; }
body.pn-ui.detail-page .bs-bgg__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 36px; padding: 0 0.8rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--pn-tx-navy-bsn);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
body.pn-ui.detail-page .bs-bgg__link:hover { border-color: var(--pn-ln-3); box-shadow: 0 2px 8px var(--hover-shadow); }
body.pn-ui.detail-page .bs-bgg__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Weitere Beitraege zum selben Spiel (#71/#90) ── */
body.pn-ui.detail-page .bs-weitere.pn-surface {
  max-width: none;
  margin: 1.5rem 0 0;
  padding: var(--pn-detail-pad);
}
body.pn-ui.detail-page .bs-weitere__titel {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--pn-serif);
  font-size: 1.25rem; font-weight: 400; line-height: 1.25;
  color: var(--pn-tx-navy-bsn);
}
body.pn-ui.detail-page .bs-weitere__zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; height: 1.5rem; padding: 0 0.5rem;
  background: var(--bg); color: var(--pn-tx-navy-bsn);
  border-radius: 999px;
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
}
/* Eine Reihe mit hoechstens vier Karten: haelt die Kommentare dicht am Beitrag */
body.pn-ui.detail-page .bs-weitere__liste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem;
  margin: 0; padding: 0; list-style: none;
}
body.pn-ui.detail-page .bs-karte {
  display: flex; flex-direction: column; gap: 0.4rem;
  height: 100%;
  color: inherit; text-decoration: none;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.pn-ui.detail-page .bs-karte:hover { box-shadow: 0 4px 14px var(--hover-shadow); transform: translateY(-1px); }
body.pn-ui.detail-page .bs-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.pn-ui.detail-page .bs-karte__bild {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pn-sf-2);
}
body.pn-ui.detail-page .bs-karte__bild--leer { display: flex; align-items: center; justify-content: center; }
body.pn-ui.detail-page .bs-karte__text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 0.7rem;
  font-size: 0.875rem; line-height: 1.4;
  color: var(--pn-tx-9);
}
body.pn-ui.detail-page .bs-karte__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
  margin-top: auto; padding: 0 0.7rem 0.65rem;
  font-size: 0.75rem; color: var(--muted);
}
body.pn-ui.detail-page .bs-karte__autor { font-weight: 600; color: var(--pn-tx-7); }
body.pn-ui.detail-page .bs-karte__komm { display: inline-flex; align-items: center; gap: 0.2rem; }
body.pn-ui.detail-page .bs-weitere__alle {
  display: inline-block; margin-top: 1rem;
  font-weight: 600; color: var(--pn-tx-navy-bsn);
  text-underline-offset: 3px;
}

/* Handy: eine seitlich wischbare Zeile, die naechste Karte ist angeschnitten */
@media (max-width: 599px) {
  body.pn-ui.detail-page .bs-weitere__liste {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding-bottom: 0.35rem;
  }
  body.pn-ui.detail-page .bs-weitere__eintrag { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ── Link zu allen eigenen Diskussionen (#88) ── */
body.pn-ui.detail-page .md-alle {
  display: inline-block; margin: -0.25rem 0 0.75rem;
  font-size: 0.875rem; font-weight: 600; color: var(--pn-tx-indigo);
}

/* ── Verweise auf andere Beitraege (#84) ── */
body.pn-ui.detail-page .bs-verweis {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  max-width: 100%;
  margin: 0.1rem 0; padding: 0.15rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--pn-tx-navy-bsn);
  text-decoration: none; vertical-align: baseline;
  line-height: 1.45;
}
body.pn-ui.detail-page .bs-verweis:hover { border-color: var(--pn-ln-3); }
body.pn-ui.detail-page .bs-verweis:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.pn-ui.detail-page .bs-verweis__pfeil { color: var(--accent-strong); font-weight: 700; }
body.pn-ui.detail-page .bs-verweis__titel { font-weight: 600; overflow-wrap: anywhere; }
body.pn-ui.detail-page .bs-verweis__text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; max-width: 22rem;
  color: var(--muted); font-size: 0.875em;
}

/* Knopf "Beitrag" am Kommentarfeld + Suchfenster */
body.pn-ui .bs-vw { position: relative; display: inline-flex; min-width: 0; }
body.pn-ui .bs-vw .bs-vw__btn {
  width: auto; height: auto; padding: 0 0.8rem;
  background: var(--bg); color: var(--pn-tx-navy-bsn);
  border-color: transparent; border-radius: 999px;
}
body.pn-ui .bs-vw .bs-vw__btn:hover,
body.pn-ui .bs-vw.is-open .bs-vw__btn { border-color: var(--border); }
body.pn-ui .bs-vw__panel {
  position: absolute; z-index: 60;
  bottom: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
  width: 320px; max-width: calc(100vw - 32px);
  padding: 0.6rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px var(--hover-shadow);
}
body.pn-ui .bs-vw__panel[hidden] { display: none; }
body.pn-ui .bs-vw__suche { width: 100%; min-height: 40px; }
body.pn-ui .bs-vw__hinweis { font-size: 0.8125rem; color: var(--muted); padding: 0 0.2rem; }
body.pn-ui .bs-vw__hinweis[hidden] { display: none; }
body.pn-ui .bs-vw__liste { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
body.pn-ui .bs-vw__treffer {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  width: 100%; min-height: 44px; padding: 0.4rem 0.5rem;
  border: 0; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer; color: var(--pn-tx-9);
}
body.pn-ui .bs-vw__treffer:hover,
body.pn-ui .bs-vw__treffer:focus-visible { background: var(--bg); outline: none; }
body.pn-ui .bs-vw__titel { font-weight: 600; font-size: 0.9rem; }
body.pn-ui .bs-vw__text {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8rem; color: var(--muted);
}
@media (max-width: 420px) {
  body.pn-ui .bs-vw__label { display: none; }
  body.pn-ui .bs-vw__panel { position: fixed; left: 16px; right: 16px; bottom: auto; top: 30%; width: auto; }
}