/* ============================================================
   machbar. — Unterseiten (Pakete, Zeitfresser-Check)
   Baut auf styles.css auf (Tokens, Fonts, Header, Buttons, Footer).
   Ohne die Effekte der Startseite (Loader, Cursor, Smooth-Scroll).
   ============================================================ */

/* Header: auf Unterseiten immer sichtbar (kein Hero dahinter) */
.site-header--sub {
  background: rgba(246, 243, 236, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line-2);
  padding-top: 14px; padding-bottom: 14px;
}
.site-header--sub .nav,
.site-header--sub .nav-cta,
.site-header--sub .nav-toggle { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { width: 100%; }
.mobile-nav a[aria-current="page"] { color: var(--brass); }

/* Seitenkopf */
.sub-main { padding-top: clamp(96px, 12vw, 132px); }
.page-head { display: grid; gap: 1.1rem; padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.page-head .section-num { margin-bottom: 0; }
.page-title {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.025em;
  max-width: 17ch; text-wrap: balance;
}
.page-title em { font-style: italic; color: var(--brass); }
.page-lede { max-width: 40rem; color: var(--ink-soft); font-size: clamp(1.02rem, 1.7vw, 1.2rem); }
/* Kurzer Hinweis unter dem Seitenkopf, z. B. „Alle Preise netto." */
.page-note {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--ink-soft); padding-left: 0.8rem; border-left: 2px solid var(--brass);
}

/* Kleine Labels */
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass);
}
.tag {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass-deep); background: rgba(226, 118, 43, 0.12);
  padding: 0.25em 0.6em; border-radius: 3px; font-weight: 500; white-space: nowrap;
}

/* Textlink im Fliesstext */
.textlink { color: var(--brass-deep); border-bottom: 1px solid rgba(198, 90, 20, 0.35); transition: color 0.25s, border-color 0.25s; }
.textlink:hover { color: var(--brass); border-bottom-color: var(--brass); }

@media (max-width: 560px) {
  .btn--lg { width: 100%; white-space: normal; text-align: center; }
}