/* Landing page theme and layout on top of scrollcraft.css (the engine, never edited).
   Paper and ink, cold. Six colours, two faces. Built from scrollcraft/builds/buchungsstapel-landing. */

/* Self-hosted faces (latin subset, OFL). Newsreader and IBM Plex Sans are variable fonts:
   one file covers the weight range. No request leaves the site; the CSP has font-src 'self'. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/newsreader-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/ibm-plex-sans-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-normal-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-normal-500.woff2") format("woff2"); }

:root {
  --sc-canvas:      #F4F5F3;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #16211C;
  --sc-ink-soft:    #55655D;
  --sc-accent:      #0F5C48;
  --sc-accent-ink:  #F4F5F3;
  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sc-shadow-color: 160 18% 12%;
  --folio-h: 3rem;
}
/* The peak chapters hard-cut to deep forest. Restate color on the subtree:
   inherited color resolves on body and does not follow the token. */
.ch--dark {
  --sc-canvas:     #0E1F19;
  --sc-surface:    #15291F;
  --sc-ink:        #EEF2EE;
  --sc-ink-soft:   #9FB3A8;
  --sc-accent:     #7FD1B3;
  --sc-accent-ink: #0E1F19;
  --sc-shadow-color: 160 40% 3%;
  color: var(--sc-ink);
  background: var(--sc-canvas);
}
html { background: #F4F5F3; }
body { margin: 0; padding-bottom: var(--folio-h); background: var(--sc-canvas); }
.ch { background: var(--sc-canvas); color: var(--sc-ink); }
a { color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.sc-display { font-weight: 500; text-wrap: balance; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* masthead: static, part of the title page. No fixed bar. */
.mast { display: flex; align-items: center; gap: var(--sc-4); padding: var(--sc-5) var(--sc-gutter) 0; max-width: var(--sc-maxw); margin-inline: auto; }
.mast__brand { display: inline-flex; align-items: center; gap: var(--sc-3); color: var(--sc-ink); text-decoration: none; font-weight: 600; letter-spacing: var(--sc-track-normal); }
.mast__mark { width: 28px; height: 28px; border-radius: 7px; display: block; }
.mast__nav { margin-left: auto; display: flex; gap: var(--sc-5); font-size: var(--sc-t-sm); align-items: center; }
.mast__nav a, .mast__nav button { color: var(--sc-ink-soft); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.mast__nav a:hover, .mast__nav button:hover { color: var(--sc-accent); }

/* chapter I: title page */
.title { padding-block: clamp(4rem, 12vh, 9rem) var(--sc-section); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sc-6) var(--sc-8); align-items: start; }
.title h1 { grid-column: 1 / -1; max-width: 14ch; }
.title .sc-lede { max-width: 30ch; grid-column: 1; grid-row: 3; }
.title__aside { display: grid; gap: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); grid-column: 2; grid-row: 3 / 5; }
/* brand marks under the lede: simple-icons paths, each in its own brand colour, name in ink */
.title__marks, .colophon__marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }
/* title page: a 2×2 block under the lede (the column is too narrow for one line at this size) */
.title__marks { grid-column: 1; grid-row: 4; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sc-4) var(--sc-7); }
.title__marks .marks-label { grid-column: 1 / -1; }
.colophon__marks { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.colophon__marks .marks-label { flex-basis: auto; margin-right: var(--sc-3); }
.marks-label { flex-basis: 100%; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.mark { display: inline-flex; align-items: center; gap: var(--sc-3); color: var(--sc-ink); text-decoration: none; font-weight: 500; font-size: var(--sc-t-lg); }
.mark svg { flex: none; color: var(--brand); }
.mark:hover { color: var(--brand); }
@media (max-width: 720px) {
  .title__marks, .colophon__marks { gap: var(--sc-3) var(--sc-5); }
  .colophon__marks .marks-label { flex-basis: 100%; margin-right: 0; }
  .mark { font-size: var(--sc-t-base); }
}
.cta { display: inline-flex; align-items: center; gap: var(--sc-2); padding: 0.7rem 1.1rem; background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--sc-r-sm); text-decoration: none; font-weight: 500; font-size: var(--sc-t-base); box-shadow: var(--sc-e1), var(--sc-edge); transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out); border: 0; font-family: inherit; cursor: pointer; }
.cta:hover { box-shadow: var(--sc-e2), var(--sc-edge); transform: translateY(-1px); color: var(--sc-accent-ink); }
.cta:active { transform: translateY(1px); }
.cta svg { width: 14px; height: 14px; }
.cta--quiet { background: transparent; color: var(--sc-accent); box-shadow: none; border: 1px solid var(--sc-hairline-strong); }
.cta--quiet:hover { color: var(--sc-accent); box-shadow: none; }
.title__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4); }
.tag { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent-ink); background: var(--sc-accent); border-radius: 3px; padding: 0.15rem 0.4rem; margin-right: 0.4rem; }
.chapter-head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sc-4); align-items: baseline; }
.chapter-head .num { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
/* overflow-wrap: a single word wider than the column (browser translation: "appointment.") wraps instead of running into the next column */
.chapter-head h2 { max-width: 20ch; overflow-wrap: anywhere; }

/* chapter II: three steps, asymmetric */
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; }
.steps__list { display: grid; gap: 0; border-top: 1px solid var(--sc-hairline-strong); list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sc-4); padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); }
.step .n { font-family: var(--sc-font-mono); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); padding-top: 0.35rem; }
.step h3 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); margin-bottom: var(--sc-2); }
.step p { color: var(--sc-ink-soft); max-width: 52ch; }
.step code, .honest code, .colophon code { font-family: var(--sc-font-mono); font-size: 0.92em; background: color-mix(in oklab, var(--sc-ink) 6%, transparent); padding: 0.05em 0.35em; border-radius: 4px; }
figure { margin: 0; }
.media { border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); overflow: hidden; background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge); }
.media img { display: block; width: 100%; height: auto; }
figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 60ch; }
.steps__media { margin-top: var(--sc-6); }

/* pinned chapters: stage layout */
.stage__grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-7); align-items: center; padding: var(--sc-gutter); max-width: var(--sc-maxw); margin-inline: auto; padding-bottom: calc(var(--sc-gutter) + var(--folio-h)); }
.cues { display: grid; }
.cues > * { grid-area: 1 / 1; margin: 0; }
.cue h2 { margin-bottom: var(--sc-3); font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); overflow-wrap: anywhere; }
.cue p { color: var(--sc-ink-soft); max-width: 36ch; text-wrap: pretty; }
.cue strong { color: var(--sc-ink); font-weight: 500; }

/* chapter III: the raw row */
.csv { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); line-height: 1.5; display: flex; flex-wrap: wrap; gap: 0.45rem 0.6rem; align-content: flex-start; }
.csv .c { border: 1px solid var(--sc-hairline); border-radius: 4px; padding: 0.15rem 0.5rem; color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-surface) 60%, transparent); transition: color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out); }
.csv .c b { font-weight: 400; color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.csv .c.lit { color: var(--sc-ink); border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 14%, transparent); }
.csv .more { color: var(--sc-ink-soft); padding: 0.15rem 0; }
.csv__head { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: var(--sc-4); display: flex; justify-content: space-between; gap: var(--sc-4); }

/* chapter IV: the file is made. Three real screens, then the record. */
.stack { position: relative; aspect-ratio: 876 / 640; max-height: calc(100svh - var(--folio-h) - 2 * var(--sc-gutter)); }
.card { position: absolute; top: 0; left: 0; width: 100%; border-radius: var(--sc-r-md); overflow: hidden; background: #fff; border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); box-shadow: var(--sc-e3), var(--sc-edge); will-change: transform, opacity, filter; opacity: 0; transform: translate3d(0, 48px, 0); }
.card img { display: block; width: 100%; height: auto; }
.card--a { z-index: 1; } .card--b { z-index: 2; } .card--c { z-index: 3; }
.record { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--sc-surface); border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); border-radius: var(--sc-r-md); box-shadow: var(--sc-e3), var(--sc-edge); padding: var(--sc-5); opacity: 0; transform: translate3d(0, 40px, 0); will-change: transform, opacity; }
.record__name { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; margin-bottom: var(--sc-4); }
.record__row { font-family: var(--sc-font-mono); font-size: var(--sc-t-base); line-height: 1.5; display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); color: var(--sc-ink); }
.record__row .f { display: grid; gap: 0.1rem; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); white-space: nowrap; }
.record__row .f.on { opacity: 1; transform: none; }
.record__row .f .v::after { content: ";"; color: var(--sc-ink-soft); margin-left: 0.1rem; }
.record__row .f:last-child .v::after { content: ""; }
.record__row .f small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: var(--sc-track-wide); text-transform: uppercase; line-height: 1.2; }
.record__foot { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.record__foot.on { opacity: 1; }

/* chapter V: honest */
.ch--after-pin { padding-top: var(--sc-7); }
.honest { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-8); align-items: start; margin-top: var(--sc-8); }
.honest ul { list-style: none; padding: 0; margin: 0; }
.honest li { padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.honest li strong { color: var(--sc-ink); font-weight: 500; }
.honest h3 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink); margin-bottom: var(--sc-2); }
.honest__col + .honest__col { margin-top: var(--sc-7); }
.note { border-left: 3px solid var(--sc-accent); padding: var(--sc-3) var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); border-radius: 0 var(--sc-r-sm) var(--sc-r-sm) 0; margin-top: var(--sc-5); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-8); margin: var(--sc-8) 0 0; }
.faq div { border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-4); }
.faq dt { font-weight: 600; margin-bottom: var(--sc-2); }
.faq dd { margin: 0; color: var(--sc-ink-soft); }

/* chapter VI: numbers, ledger, price, platforms */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); border-bottom: 1px solid var(--sc-hairline-strong); padding: var(--sc-6) 0; margin: var(--sc-7) 0; }
.figures .sc-display { font-variant-numeric: tabular-nums; }
.figures small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: var(--sc-2); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; min-width: 34rem; }
.ledger th { text-align: left; font-family: var(--sc-font-mono); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); padding: 0 0 var(--sc-3); border-bottom: 1px solid var(--sc-hairline-strong); }
.ledger td { padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.ledger td:first-child, .ledger td:nth-child(2) { font-family: var(--sc-font-mono); color: var(--sc-ink); }
.ledger .num { text-align: right; padding-left: var(--sc-4); white-space: nowrap; }
.ledger td.num { color: var(--sc-ink); }
.ledger tfoot td { border-bottom: 0; color: var(--sc-ink-soft); padding-top: var(--sc-4); font-family: var(--sc-font-text); }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: start; }
.price { display: grid; gap: 0; border-top: 1px solid var(--sc-hairline-strong); scroll-margin-top: var(--sc-6); }
.price > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); align-items: baseline; }
.price .amt { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-variant-numeric: tabular-nums; color: var(--sc-ink); }
.price p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.price p strong { color: var(--sc-ink); font-weight: 500; }
.platforms { color: var(--sc-ink-soft); max-width: var(--sc-measure); scroll-margin-top: var(--sc-6); }
.platforms strong { color: var(--sc-ink); font-weight: 500; }
.req { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sc-3); align-items: end; margin-top: var(--sc-4); }
.req .field { display: flex; flex-direction: column; gap: var(--sc-1); margin: 0; }
.req label { font-size: var(--sc-t-xs); font-family: var(--sc-font-mono); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.req input, .req select { padding: 0.55rem 0.7rem; font: inherit; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); background: var(--sc-surface); color: var(--sc-ink); max-width: 100%; }
.req .error { grid-column: 1 / -1; color: #b3261e; font-size: var(--sc-t-sm); }
.banner.ok { margin-top: var(--sc-4); padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); color: var(--sc-ink); font-size: var(--sc-t-sm); }

/* chapter VII: colophon, holds */
/* starts right after chapter VI's own bottom padding (no second section padding, no vertical centring); still holds a full screen */
.colophon { min-height: calc(100svh - var(--folio-h)); display: grid; align-content: start; gap: var(--sc-7); padding-block: var(--sc-6) var(--sc-section); }
.running { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; color: var(--sc-ink-soft); }
.running a { color: var(--sc-accent); font-weight: 500; }
.plate { border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.plate a { color: var(--sc-ink-soft); text-decoration: none; }
.plate a:hover { color: var(--sc-accent); }
.extf { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); word-break: break-all; max-width: 90ch; line-height: 1.6; }

/* the signature move: der Buchungssatz schreibt sich */
.folio { position: fixed; left: 0; right: 0; bottom: 0; height: var(--folio-h); z-index: var(--sc-z-chrome); background: color-mix(in oklab, #FFFFFF 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(22, 33, 28, 0.16); color: #16211C; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sc-5); padding: 0 var(--sc-gutter); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); }
.folio__ch { display: inline-flex; gap: var(--sc-3); align-items: baseline; white-space: nowrap; }
.folio__num { font-family: var(--sc-font-display); font-size: var(--sc-t-base); color: #0F5C48; min-width: 1.6em; }
.folio__title { color: #55655D; letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.folio__rec { display: flex; justify-content: flex-end; align-items: center; gap: 0; overflow: hidden; white-space: nowrap; min-width: 0; }
.folio__label { color: #55655D; margin-right: var(--sc-3); }
.folio__rec .f { opacity: 0.18; transition: opacity 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out); color: #55655D; }
.folio__rec .f.on { opacity: 1; color: #16211C; }
.folio__rec .f.on.fresh { color: #0F5C48; }
.folio__rec .f::after { content: ";"; opacity: 0.5; }
.folio__rec .f:last-of-type::after { content: ""; }
.folio__rec a { color: #0F5C48; text-decoration: none; margin-left: var(--sc-3); opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.folio__rec a.on { opacity: 1; }

/* responsive */
@media (max-width: 1024px) {
  .steps, .honest, .two { grid-template-columns: 1fr; gap: var(--sc-7); }
  .stage__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-5); }
}
@media (max-width: 860px) {
  .title { grid-template-columns: 1fr; align-items: start; }
  .title .sc-lede, .title__marks, .title__aside { grid-column: 1; grid-row: auto; }
  .title__marks { display: flex; }
  .title h1 { max-width: 12ch; }
  .stage__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; align-content: start; gap: var(--sc-4); padding-top: var(--sc-6); }
  .stage__grid > .cues { order: 2; }
  .stage__grid > .stage__media { order: 1; }
  .stack { aspect-ratio: auto; height: min(44svh, 380px); }
  .csv { font-size: 0.78rem; max-height: 42svh; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: 1fr; }
  .chapter-head { grid-template-columns: 1fr; gap: var(--sc-2); }
  .folio__title, .folio__label { display: none; }
  .folio__rec .f:not(.fresh) { display: none; }
  .folio__rec { justify-content: flex-start; }
  .folio__rec .f { overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
  .folio__rec a { font-size: 0; }
  .folio__rec a::after { content: "EXTF ↓"; font-size: var(--sc-t-xs); }
}
@media (max-width: 700px) {
  .title h1 { font-size: var(--sc-t-3xl); }
  .mast__nav a:not(:last-child), .mast__nav form, .mast__nav > details { display: none; }
  .price > div { grid-template-columns: 1fr; gap: var(--sc-1); }
  .record { padding: var(--sc-4); }
  .record__row { font-size: var(--sc-t-sm); }
}
/* A rewound chapter (landing.js) cuts from its last cue to its first exactly once, as it slides
   out below; give that one cut a fade. */
@media (prefers-reduced-motion: no-preference) {
  .sc-ready .is-rewound [data-sc-cue] { transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .card, .record { transition: none; }
  .record__row .f, .record__foot, .folio__rec .f, .folio__rec a { transition: none; }
}