/* ============================================================================
   felixihno.com 2027 · pakete.css · only for /pakete/ (load after site.css, pages.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).

   No vermilion on this page: the recommended Website-Paket is marked by position (the
   middle column), its "Meine Empfehlung" label and a 2 px ink rule above the price
   (site.css .price-card--pick). The facts rows are the shared .facts (site.css §13).

   Contents
     01 overview path, H2 price    02 jump links in price lines    03 recommendation (M)
     05 body blocks                06 plan (nine steps)            07 rules list
   ========================================================================== */


/* ── 01 overview: Zuerst · Das Paket · Danach, then the Bausteine ─────────────
   phone: one column, capped for reading; ≥ 1000 px: three columns, M in the middle */
.pk-path { list-style: none; padding: 0; display: grid; gap: var(--s-10); max-width: 44rem; }
.pk-stage { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pk-stage__label { display: flex; align-items: baseline; gap: var(--s-2); }
.pk-stage__n { color: var(--c-text); font-weight: var(--w-med); }
.pk-extras { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-12); max-width: 44rem; }
@media (min-width: 1000px) {
  .pk-path { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .pk-extras { max-width: none; }
  .pk-extras .price-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-8); }
  .pk-extras .price-lines > li { box-shadow: inset 0 1px 0 var(--c-text); padding-bottom: 0; }
}


/* the price of a package on its own line under the H2 (no leading "·" when it wraps) */
.pk-h2-price { display: block; font-variant-numeric: tabular-nums; }


/* ── 02 the name in a price line jumps to its section ──────────────────────── */
.pk-jump {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .25em; text-decoration-color: var(--c-line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.pk-jump:hover { text-decoration-color: currentColor; }
.price-lines__amount .pk-plus { color: var(--c-text-2); font-weight: var(--w-reg); }


/* ── 03 recommendation: M sits in the middle, labelled, with the 2 px ink rule ── */
.pk-pick__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-4); }
.pk-pick__label { font: var(--w-med) var(--fs-mono)/1.4 var(--font-mono); color: var(--c-text); }
.pk-pick .price-card__figure { padding-top: var(--s-4); }
.pk-pick .link { align-self: flex-start; padding-block: var(--s-1); }


/* ── 05 body blocks: the H3 parts beside a sticky section head ─────────────── */
.pk-body { display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }
.pk-block { display: flex; flex-direction: column; gap: var(--s-4); }
.pk-block > .h3 { margin-bottom: var(--s-1); }
.pk-block > p { max-width: var(--measure); }
.pk-block > p.muted, .pk-block .prose { color: var(--c-text-2); }
.pk-block .section__foot { margin-top: 0; }
.pk-block .price-lines { max-width: 44rem; }
.pk-aside { color: var(--c-text-2); font-size: var(--fs-ui); max-width: var(--measure); }


/* ── 06 plan: nine steps from acceptance to the end ───────────────────────────
   phone: a vertical rail with square marks; a filled mark is a step where you decide
   and pay, a hollow one is work. Wider than 34rem: when · what · who in three columns. */
.pk-plan { list-style: none; padding: 0; container-type: inline-size; }
.pk-step { position: relative; display: grid; gap: 2px; padding: 0 0 var(--s-6) var(--s-8); }
.pk-step::before {
  content: ""; position: absolute; left: 4px; top: 1.25rem; bottom: 0; width: 1px;
  background: var(--c-line-strong);
}
.pk-step:last-child { padding-bottom: 0; }
.pk-step:last-child::before { content: none; }
.pk-step__mark {
  position: absolute; left: 0; top: .4rem; width: 9px; height: 9px; border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--c-text);
}
.pk-step--yes .pk-step__mark { background: var(--c-text); }
.pk-step__when { font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.pk-step__what { font-weight: var(--w-semi); line-height: var(--lh-snug); }
.pk-step__more { color: var(--c-text-2); font-size: var(--fs-ui); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.pk-step__who { font-size: var(--fs-sm); color: var(--c-text-2); }
@container (min-width: 34rem) {
  .pk-step { grid-template-columns: 7.5rem minmax(0, 1fr) 7rem; column-gap: var(--s-4); align-items: baseline; }
  .pk-step__when { grid-column: 1; grid-row: 1; }
  .pk-step__what { grid-column: 2; grid-row: 1; }
  .pk-step__more { grid-column: 2; grid-row: 2; }
  .pk-step__who { grid-column: 3; grid-row: 1; text-align: right; }
}


/* ── 07 rules: what happens if it stalls ───────────────────────────────────── */
.pk-rules { display: grid; gap: var(--s-4); max-width: var(--measure); }
.pk-rules dt { font-weight: var(--w-semi); }
.pk-rules dd { margin-top: var(--s-1); color: var(--c-text-2); }