Umbau-Projekt (SSR und Rest)

web/css/app.css

@@ -302,6 +302,53 @@ img.avatar-lg { width: 72px; height: 72px; }
 .ghost.selected { font-weight: bold; }
 .msg { color: red; }
 
+/* Melden sitzt rechtsbündig in der Meta-Zeile (weit weg von den Interaktionen).
+   margin-left:auto schiebt es im Byline-Flex ganz nach rechts; position:relative
+   verankert das aufklappende Grund-Feld. Der <details>-Zweischritt (erst öffnen,
+   dann absenden) verhindert versehentliche Meldungen; nativ (details/summary +
+   echtes Formular), damit es später auch ohne JS funktioniert. */
+details.report {
+  margin-left: auto;
+  position: relative;
+  font-size: 0.9rem;
+}
+/* summary wie ein Button, aber zurückhaltend (grau), da Moderationshilfe. */
+details.report > summary {
+  list-style: none;
+  user-select: none;
+  cursor: pointer;
+  padding: 2px 8px;
+  border: 1px solid #ccc;
+  color: gray;
+  background-color: white;
+}
+details.report > summary::-webkit-details-marker { display: none; }
+details.report > summary:hover { text-decoration: underline; }
+details.report[open] > summary { color: #a00; border-color: #a00; }
+details.report.reported > summary {
+  color: green;
+  border-color: green;
+  cursor: default;
+  text-decoration: none;
+}
+/* Aufgeklapptes Grund-Feld schwebt unter dem Button, damit die Meta-Zeile nicht
+   springt. Über dem Inhalt (z-index) und rechtsbündig ausgerichtet. */
+.report-form {
+  position: absolute;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  padding: 0.5rem;
+  background-color: white;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+}
+.report-form input { font-family: inherit; font-size: 0.9rem; }
+
 p.warning {
   background-color: #faa;
   padding: 10px 15px;
@@ -393,3 +440,19 @@ hr {
   flex-basis: 13rem;
   white-space: normal;
 }
+
+/* Blätternavigation des serverseitig gerenderten Feeds. Ohne JavaScript gibt
+   es kein Nachladen beim Scrollen -- stattdessen Zurück/Weiter am Seitenende.
+   space-between hält die Seitenanzeige mittig, auch wenn auf der ersten bzw.
+   letzten Seite einer der beiden Links fehlt. */
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+.pager > span {
+  flex: 1;
+  text-align: center;
+}