/* The content pages: offer template and appointment checklist
   (generated by content/build.ts). Hand-written, no Tailwind: they borrow
   the landing page's vocabulary — coal ground, amber, mono labels, hairline
   rules, the offer on cream paper — so a visitor from a search result is
   visibly on the same site as the app. Fonts as on the landing page. */

@font-face {
  font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/shared/fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter"; font-weight: 600 700; font-style: normal; font-display: swap;
  src: url("/shared/fonts/Inter-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Inter-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-weight: 600 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Inter-Bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --coal: #1c1917; --coal-2: #292524; --coal-deep: #12100e;
  --amber: #f59e0b; --amber-2: #d97706;
  --cream: #fefce8; --smoke: #a8a29e; --smoke-light: #d6d3d1;
  --ink: #44403c; --ink-mute: #57534e;
  --rule: rgba(254,252,232,0.09); --rule-strong: rgba(254,252,232,0.2); --rule-paper: rgba(28,25,23,0.16);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1080px; --prose: 66ch;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  color: var(--cream); background: var(--coal);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
a { color: var(--amber); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.nw { white-space: nowrap; }

.label {
  font-family: var(--mono); font-weight: 500; font-size: 11.5px; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin: 0 0 14px;
}

/* --- Nav (as the landing page) --- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(28,25,23,.94); border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-inner { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.logo { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--amber); text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px; margin-right: auto; }
.logo .end { color: var(--cream); }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--cream);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 6px; }

/* --- Page head with the downloads above the fold --- */
.page-head { padding: 40px 0 48px; border-bottom: 1px solid var(--rule); }
.crumbs { font-family: var(--mono); font-size: 11.5px; color: var(--smoke); margin: 0 0 22px; }
.crumbs a { color: var(--smoke); }
.crumbs .sep { margin: 0 .55em; opacity: .55; }
.page-head h1 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em;
  margin: 0 0 18px; max-width: 24ch; }
.lede { font-size: 18.5px; line-height: 1.55; color: var(--smoke-light); max-width: 60ch; margin: 0 0 28px; }

.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.download { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 18px; background: var(--coal-2); border: 1px solid var(--rule-strong); border-radius: 6px; }
.download .thumb { display: block; background: #fff; border-radius: 2px; box-shadow: 0 10px 24px -10px rgba(12,10,9,.9); }
.download h2 { font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 4px; }
.download .meta { font-family: var(--mono); font-size: 11.5px; color: var(--smoke); margin: 0 0 8px; }
.download .what { font-size: 14.5px; line-height: 1.5; color: var(--smoke-light); margin: 0 0 14px; }
.download .note { font-size: 12.5px; line-height: 1.5; color: var(--smoke); margin: 12px 0 0; }
.free { font-size: 14px; color: var(--smoke); margin: 16px 0 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border-radius: 6px; font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
  border: 0; cursor: pointer; transition: transform .12s, background-color .15s, color .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: var(--coal); }
.btn-primary:active { background: var(--amber-2); }
.btn-secondary { background: transparent; color: var(--cream); border: 1px solid var(--rule-strong); }
.btn-secondary:active { border-color: var(--amber); color: var(--amber); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Sections --- */
.block { padding: 72px 0; border-bottom: 1px solid var(--rule); }
.block h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 26ch; }
.block h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; }
.prose { max-width: var(--prose); color: var(--smoke-light); }
.prose p { margin: 0 0 14px; }
.prose strong { color: var(--cream); }
.small { font-size: 14px; }
.muted { color: var(--smoke); }

.parts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px; counter-reset: part; }
.parts li { padding: 18px 0 18px 40px; border-top: 1px solid var(--rule); position: relative; counter-increment: part; color: var(--smoke-light); font-size: 15.5px; }
.parts li::before { content: counter(part, upper-alpha); position: absolute; left: 0; top: 18px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--coal);
  font-family: var(--mono); font-size: 12px; font-weight: 600; }
.parts h3 { color: var(--cream); font-size: 16.5px; }
.parts p { margin: 0; }

.steps { list-style: none; margin: 24px 0 0; padding: 0; max-width: var(--prose); }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--rule); color: var(--smoke-light); }
.steps li::before { content: ""; width: 14px; height: 14px; margin-top: 6px; border: 1.5px solid var(--amber); border-radius: 3px; }
.steps li b { color: var(--cream); font-weight: 600; }
.steps .app { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--smoke); margin-top: 4px; }

/* --- The sample on paper --- */
.paper { background: var(--cream); color: var(--ink); }
.paper h2 { color: var(--coal); }
.paper .label { color: var(--amber-2); }
.paper .prose { color: var(--ink); }
.paper .prose strong { color: var(--coal); }
.paper a { color: var(--amber-2); }
.sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; margin-top: 28px; }
/* Grid items default to min-width:auto, so the table's min-content width
   would push the column past a 320px screen. */
.sample > * { min-width: 0; }
.sample figure { margin: 0; }
.sample figure img { box-shadow: 0 1px 1px rgba(12,10,9,.2), 0 18px 40px -16px rgba(12,10,9,.45); }
.sample figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 12px; }
.case { font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); margin: 0 0 12px; }

/* Long German words in a position may break rather than widen the table;
   the scroll box is only the last resort, scoped to the table. */
.ledger-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.ledger td:nth-child(2) { overflow-wrap: break-word; hyphens: auto; }
.ledger th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); padding: 0 8px 8px 0; border-bottom: 1.5px solid var(--coal); }
.ledger td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule-paper); vertical-align: top; color: var(--coal); }
.ledger .r { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 12px; }
.ledger .grp td { font-weight: 600; font-size: 13px; color: var(--ink-mute); padding-top: 16px; }
.ledger .hint { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.ledger tfoot td { border-bottom: 0; padding-top: 8px; padding-bottom: 4px; }
.ledger tfoot .total td { font-weight: 700; font-size: 17px; border-top: 1.5px solid var(--coal); padding-top: 10px; }

/* --- The catalog matrix on the checklist page --- */
.table-scroll { overflow-x: auto; margin-top: 24px; -webkit-overflow-scrolling: touch; }
table.grid { border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.grid th, .grid td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.grid thead th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--smoke); }
.grid .c { text-align: center; padding-right: 0; width: 78px; }
.grid tbody th { font-weight: 400; color: var(--cream); }
.grid .grp th { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); padding-top: 20px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }

/* --- Notice, app callout, sources, related --- */
.notice { max-width: var(--prose); margin-top: 28px; padding: 16px 18px; border-left: 3px solid var(--amber);
  background: rgba(254,252,232,.04); font-size: 14px; line-height: 1.55; color: var(--smoke-light); }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin: 0; }
.callout { padding: 72px 0; background: var(--coal-deep); border-bottom: 1px solid var(--rule); }
.callout h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 16px; max-width: 24ch; }
.callout p { color: var(--smoke-light); max-width: var(--prose); margin: 0 0 14px; }
.callout .fine { font-size: 14px; color: var(--smoke); margin: 16px 0 0; }
.sources { margin: 0; padding-left: 20px; max-width: var(--prose); color: var(--smoke-light); font-size: 15px; }
.sources li { margin-bottom: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.card { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--rule-strong); border-radius: 6px; text-decoration: none; color: var(--cream); }
.card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.card .t { font-weight: 600; font-size: 17px; }
.card .d { font-size: 14px; color: var(--smoke); }
.card:active { border-color: var(--amber); }

/* --- Footer --- */
.foot { padding: 40px 0 56px; font-size: 14px; color: var(--smoke); }
.foot .row { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; }
.foot a { color: var(--smoke-light); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.foot .copy { margin: 18px 0 0; }

@media (max-width: 760px) {
  .sample { grid-template-columns: 1fr; gap: 32px; }
  .sample figure { max-width: 420px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .nav-inner { min-height: 56px; }
  .page-head { padding: 22px 0 36px; }
  .crumbs { margin-bottom: 14px; }
  .page-head h1 { font-size: clamp(28px, 8.4vw, 36px); margin-bottom: 12px; }
  .lede { font-size: 16px; margin-bottom: 20px; }
  .downloads { grid-template-columns: 1fr; gap: 12px; }
  .download { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .download h2 { font-size: 16.5px; }
  .download .what { font-size: 14px; margin-bottom: 12px; }
  .download .btn { width: 100%; }
  .block, .callout { padding: 52px 0; }
  .callout .btn { flex: 1 1 100%; }
  .ledger { font-size: 14px; }
  .ledger th, .ledger td { padding-right: 6px; }
  /* The quantity is in the position's name ("1 Feuerstätte"); on a phone
     the column only costs the width the names need. */
  .ledger th:nth-child(3), .ledger td:nth-child(3) { display: none; }
  .ledger .r { padding-left: 8px; }
  /* Five narrow columns fit beside the label; "Offener Kamin" wraps. */
  table.grid { min-width: 0; width: 100%; font-size: 13.5px; }
  .grid .c { width: 40px; }
  .grid thead th { font-size: 9.5px; letter-spacing: 0; }
  .grid thead .c { vertical-align: bottom; }
}
/* Below 360px the five columns would crush their headers; the matrix
   scrolls inside its own box instead (.table-scroll), the page does not. */
@media (max-width: 360px) {
  table.grid { min-width: 300px; }
}
@media print {
  .nav, .foot, .callout, .downloads, .related { display: none; }
  body { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}