/* pages/_listing.css
 * Gemeinsam für die Übersichtsseiten beitraege.html und projekte.html:
 * Seitenkopf, Filterleiste (Jahr bzw. Status), Listen-Container.
 * Beitragskarten liegen in components/_post.css, Projekte in components/_project.css.
 */

/* ── Seitenkopf ───────────────────────────────────────── */

.page-header {
  padding-block: 64px 48px;
  border-bottom: 1px solid var(--border);
}

.page-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 16px;
}

.page-title {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.page-sub {
  font-size: 0.92rem;
  color: var(--fg-body);
  max-width: 50ch;
  line-height: 1.7;
}

/* ── Jahr-Filter ──────────────────────────────────────── */

.year-filter,
.status-filter,
.tag-filter {
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.year-btn,
.status-btn,
.tag-btn {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
  border: 1px solid var(--border);
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.year-btn:hover,
.status-btn:hover,
.tag-btn:hover {
  color: var(--fg);
  border-color: var(--fg-muted);
}

.year-btn.active,
.status-btn.active,
.tag-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tag-btn { text-decoration: none; display: inline-block; }
.tag-filter { border-top: 0; }
nav.tag-filter { border-bottom: 0; }   /* Tag-Seite: die erste Karte hat schon eine Linie */

/* ── Timeline ─────────────────────────────────────────── */

.timeline {
  padding-block: 0 64px;
}

/* ── Projektübersicht ─────────────────────────────────── */

.listing {
  padding-block: 40px 64px;
}

/* ── Fehlerseite (404.html) ───────────────────────────── */

.page-header--error {
  padding-bottom: 72px;
}

.page-header--error .link-group {
  margin-top: 36px;
}