/* ------------------------------------------------------------- page head
 * templates/ui/page_head.html. Kicker, the title in the display role, the
 * Haarlinie (WEB-GRU-04, web.hairline.title: directly beneath the title, left on
 * the text margin - the page's one recurring red mark; nothing red runs
 * vertically), the lead in graphite. The same on every list, form and
 * overview page. */
@layer ui {
.page-head { margin-bottom: var(--s-7); }
.page-head__eyebrow { display: block; margin-bottom: var(--s-3); font-size: var(--t-micro); color: var(--text-secondary); }
.page-head h1, .page-head__title { font-size: var(--t-display); max-width: 24ch; }
.page-head h1::after, .page-head__title::after {
  content: ""; display: block; width: 134px; height: 2px; background: var(--rule-brand); margin-top: var(--s-4);
}
.page-head__lead { margin-top: var(--s-4); font-size: var(--t-body); color: var(--text-secondary); max-width: var(--measure);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4); font-size: var(--t-small); color: var(--text-secondary); }
.page-head__actions { margin-top: var(--s-5); }
/* A qualifier beside the title - «nur intern»: a tag in the title's line,
   not a second red statement (the tag is quiet; the Haarlinie is the red). */
.page-head__tag { vertical-align: middle; margin-left: var(--s-2); }
}  /* @layer ui */