/* ============================================================================
   NØDE.ops — Info-Seiten (Changelog / Roadmap). Baut auf dem Shell von
   legal.css auf (body.legal, .legal-head) und ergänzt nur die Bausteine, die
   diese beiden Seiten brauchen: Release-Blöcke, Status-Chips, Stichpunkt-
   Listen. Tokens ausschließlich aus theme.css. Keine Inline-Styles.
   ========================================================================== */

/* ---- Kopf-Notiz über der ersten Sektion ---------------------------------- */
.note {
  border: 1px solid var(--rail);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--panel2);
  padding: 12px 14px;
  margin: 18px 0 6px;
}
.note p { margin: 0; }
.note p + p { margin-top: 6px; }

/* ---- Release-Block (Changelog) ------------------------------------------- */
.rel { margin: 34px 0 0; }
.rel + .rel { border-top: 1px solid var(--rail); padding-top: 26px; }

.rel-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
}
/* Selektor trägt h2, weil `.legal h2` (legal.css) sonst mit höherer Spezifität
   Farbe, Schrift und text-transform der Versionsnummer überschreibt. */
.legal h2.rel-ver {
  font: 700 17px/1.2 var(--mono);
  letter-spacing: .5px;
  text-transform: none;
  color: var(--accent);
  margin: 0;
}
.rel-date { font: 500 11px/1.2 var(--mono); color: var(--dim); }

/* Status-Chip: welcher Stand läuft öffentlich, welcher nicht. */
.chip {
  font: 600 10px/1 var(--mono);
  letter-spacing: .6px; text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 5px 9px;
  border: 1px solid var(--rail);
  color: var(--muted);
  white-space: nowrap;
}
.chip-live {
  color: var(--green);
  border-color: rgba(var(--green-rgb), .45);
  background: rgba(var(--green-rgb), .10);
}
.chip-soon {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .10);
}

.rel-lead { color: var(--muted); margin: 6px 0 14px; }

/* Themengruppe innerhalb eines Releases. h3, damit die Gliederung
   (h1 Seite → h2 Release-Sektion → h3 Gruppe) für Screenreader stimmt. */
.legal h3 {
  font: 600 12px/1.3 var(--disp);
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt);
  margin: 20px 0 6px;
}

/* ---- Stichpunkt-Listen ---------------------------------------------------- */
.legal ul.tight { margin: 6px 0 0; }
.legal ul.tight li { margin: 5px 0; }

/* ---- Roadmap: Zeithorizont-Sektionen -------------------------------------- */
.horizon { margin: 26px 0 0; }
.horizon-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.horizon-when {
  font: 600 10px/1 var(--mono);
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), .40);
  background: rgba(var(--brand-rgb), .08);
  border-radius: var(--r-pill);
  padding: 5px 9px;
  white-space: nowrap;
}
.horizon h2 { margin: 0; }

/* ---- Seiten-Navigation (Changelog ↔ Roadmap ↔ Handbuch) ------------------- */
.page-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--rail);
}
.page-nav a {
  font: 600 11px/1 var(--mono);
  color: var(--brand); text-decoration: none;
  border: 1px solid var(--rail); border-radius: var(--r-sm);
  padding: 9px 13px;
}
.page-nav a:hover { border-color: var(--brand); color: var(--txt); }