/* ============================================================================
   felixihno.com 2027 · pages.css · additions for the sub pages
   (Über mich, Kontakt, Impressum, Datenschutz, 404). Load after site.css.
   Same rules as site.css: colours only through the semantic tokens, no hex values,
   motion only through the tokens and off under reduced motion (site.css §18).

   Contents
     04 legal text           05 placeholder              06 about
   Moved to site.css on 2026-10-14: page transitions, .top (now the sticky nav bar),
   .intro, .callout.
   ========================================================================== */


/* ── 04 legal text (Impressum, Datenschutz) ────────────────────────────────── */
.legal { display: grid; gap: var(--s-10); max-width: 44rem; }
.legal__part { display: grid; gap: var(--s-4); padding-top: var(--s-6); box-shadow: inset 0 1px 0 var(--c-line); }
.legal__part:first-child { padding-top: 0; box-shadow: none; }
.legal__part > h2 {
  font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
}
.legal__part h3 { margin-top: var(--s-4); font-size: 1.0625rem; line-height: var(--lh-snug); font-weight: var(--w-semi); }
.legal__part p, .legal__part li { color: var(--c-text-2); max-width: var(--measure); }
.legal__part b { color: var(--c-text); }
.legal__part ul { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-5); }
.legal__part li::marker { color: var(--c-text-3); }
.legal__part address { font-style: normal; }
.legal__part address p { color: var(--c-text); }
.legal__stand { font-size: var(--fs-sm); }


/* ── 05 placeholder box ─────────────────────────────────────────────────────── */
/* an open value the page must not ship with: dashed box, mono, impossible to overlook */
.ph {
  display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-sm);
  border: 1px dashed var(--c-text-3); color: var(--c-text);
  font: var(--w-reg) var(--fs-mono)/1.6 var(--font-mono);
}


/* ── 06 about: shorter hero, three short parts ─────────────────────────────── */
@media (min-width: 900px) {
  .hero--about { min-height: 42rem; }
}
.about__part > .prose { color: var(--c-text-2); }
.about__part .section__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }

/* 404: a short list of ways back */
.ways { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); list-style: none; padding: 0; }