/* KI-Beratung: one world of points, on paper or at night as the operating system decides
   (tokens in css/farbe.css). A fixed field of points behind the page re-forms per reading unit.
   Every frame is one screen below the header; content and figures are sized from the frame, so
   a frame is used well at every size (units and stops: js/ki.js).
   The accent is always made of points: rust appears as point type (js/punkttype.js) or as the
   decided point of a figure, never as flat rust type or flat rust fills, and at most once per frame. */
.ki {
  --ground: var(--k-bg); --fg: var(--k-fg); --fg-2: var(--k-fg2); --fg-3: var(--k-fg3);
  /* rust, one tone per mode: --acc marks, --acc-ink sits behind small text */
  --acc: var(--k-acc); --acc-ink: var(--k-acc-ink);
  --hair: var(--k-line);
  /* one type scale for this page, set from the width and the height of the screen, so a short
     laptop and a tall monitor both get type that fills their frames */
  --fs-h2: clamp(34px, 2.6vw + 3.2svh, 80px);
  --fs-h3: clamp(20px, 1vw + 1.5svh, 30px);
  --fs-body: clamp(16px, .8vw + 1.1svh, 21px);
  --fs-small: clamp(15px, .68vw + .95svh, 18px);
  color-scheme: light dark;
  background: var(--ground); color: var(--fg);
}
.ki ::selection { background: var(--acc-ink); color: var(--k-on-word); }
.ki .bar { --bar-bg: var(--ground); --bar-fg: var(--fg); }
.ki .bar-nav .bar-cta:hover { background: var(--acc-ink); color: var(--k-on-word); }
.ki :focus-visible { outline-color: var(--acc); }

/* the canvas takes the largest viewport, so the phone address bar never resizes (and clears) it */
.field-canvas { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
main, .site-footer { position: relative; z-index: 1; }

/* ---------- point type: the accent ---------- */
/* the real text stays (screen readers, search, selection); while the canvas can draw, the text is
   transparent and the points stand exactly on it. Without script it is plain ink type. */
.pt { position: relative; display: inline-block; white-space: nowrap; font-variant-numeric: normal; }
.pt-on .pt { color: transparent; }
.pt-c { position: absolute; left: 0; top: 0; pointer-events: none; }
/* the canvas of a word reaches beyond it (js/punkttype.js), so yielding points are never cut; the
   page itself never scrolls sideways for it */
.ki main { overflow-x: clip; }

/* ---------- grid and rhythm ---------- */
.sec { position: relative; padding: 0 var(--content-r) 0 var(--gutter); }
.wrap { width: 100%; }
.wrap.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.col-text { grid-column: 1 / span 7; }
/* the figures take the right five columns, the full height of the frame and the margin to the edge */
.wrap.grid > .field, .field-d { grid-column: 8 / span 5; align-self: stretch; min-height: clamp(320px, 66svh, 720px); margin-right: calc(-1 * var(--content-r) + 16px); }
.field-m { display: none; }
/* the fields only hold the place of a figure; taps and clicks go to the text over them */
.field { pointer-events: none; }

/* one rhythm for the whole page: every frame (a section, or one of the two halves of the thesis
   and the person) is exactly one screen below the header, its content centred in it with the same
   padding above and below. The browser snaps to the top of each frame (see "snapping" below). */
.ki { --frame-h: calc(100vh - var(--bar-h)); --frame-pad: clamp(20px, 4.5vh, 56px); }
@supports (height: 100svh) { .ki { --frame-h: calc(100svh - var(--bar-h)); --frame-pad: clamp(20px, 4.5svh, 56px); } }
.frame { min-height: var(--frame-h); display: flex; flex-direction: column; justify-content: center; padding-top: var(--frame-pad); padding-bottom: var(--frame-pad); }
.wrap.grid.frame { display: grid; align-content: center; }
/* the last frame and the footer share the last screen (--foot-h is measured by js/ki.js) */
.frame.faq { min-height: calc(var(--frame-h) - var(--foot-h, 0px)); }

/* ---------- type ---------- */
.huge { font: 700 var(--fs-display)/var(--lh-display) var(--sans); letter-spacing: -.045em; }
.huge .line { display: block; overflow: hidden; padding: .12em 0 .1em; margin: -.12em 0 -.1em; }
.h2 { font: 700 var(--fs-h2)/var(--lh-h2) var(--sans); letter-spacing: -.04em; text-wrap: balance; max-width: 17ch; }
.p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 60ch; color: var(--fg-2); }
.h2 + .p, .h2 + .field-m + .p { margin-top: clamp(24px, 4.2svh, 44px); }
.p + .p { margin-top: .9em; }
.p b, .promise b { color: var(--fg); font-weight: 600; }

/* one rolling word, in the hero only: the task that changes. Its first word is point type, so the
   points of the field condense onto points (no flat rust type at any moment). */
.roll { display: inline-flex; flex-direction: column; height: 1.2em; overflow: hidden; vertical-align: bottom; margin-bottom: -.1em; }
.roll-list { display: block; animation: roll 13s var(--ease-io) infinite; }
.roll-w { display: block; height: 1.2em; line-height: 1.2em; white-space: nowrap; color: var(--fg); }
.pt-on .roll-list { animation: none; }
.pt-on .roll-w:not(:first-child) { visibility: hidden; }
/* the DOM word stands still while the points condense onto it, then it fades out and
   keeps its place in the line; the point field draws the word from then on */
.roll-wait .roll-list { animation: none; transition: opacity .5s var(--ease); }
.roll-points .roll-list { opacity: 0; }
@keyframes roll { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-1.2em); } 50%, 68% { transform: translateY(-2.4em); } 75%, 93% { transform: translateY(-3.6em); } 100% { transform: translateY(-4.8em); } }

/* the two display sentences rise line by line; everything else is simply there */
.kin .li { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--ease); }
.kin.in .li { transform: none; }
/* risen: the lines stop clipping, so the points of a word in them can yield to the pointer */
.kin.done .line { overflow: visible; }
.kin.in .line:nth-child(2) .li { transition-delay: .08s; } .kin.in .line:nth-child(3) .li { transition-delay: .16s; }

/* ---------- controls on the KI ground ---------- */
.ki .btn { background: var(--k-btn-bg); color: var(--k-btn-fg); border-color: var(--k-btn-bg); }
.ki .btn:hover { background: var(--acc-ink); border-color: var(--acc-ink); color: var(--k-on-word); }
.ki .btn-outline { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 42%, transparent); }
.ki .btn-outline:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.arr { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.qhint:hover .arr { transform: translateY(3px); }

/* ---------- hero and final ---------- */
.sec.hero { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--bar-h) + 32px); padding-bottom: 48px; }
.hero .wrap.grid > .field, .final .wrap.grid > .field { min-height: min(74svh, 720px); }
.promise { margin-top: 40px; font: 600 calc(var(--fs-h3) + 2px)/1.25 var(--sans); letter-spacing: -.02em; max-width: 26ch; }
.sub { margin-top: 16px; font-size: var(--fs-body); line-height: var(--lh-body); max-width: 46ch; color: var(--fg-2); }
.final .sub { margin-top: 24px; font-size: calc(var(--fs-h3) * .9); line-height: 1.35; }
.cta-row, .cta-final { margin-top: 36px; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.note { font-size: 15px; color: var(--fg-3); }
.gonote { margin-top: 24px; font: 500 var(--fs-label)/1.6 var(--mono); }
.gonote a { color: var(--fg-2); text-underline-offset: 4px; }
.gonote a:hover { color: var(--fg); }
.qhint { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 40px; font: 500 15px/1 var(--sans); color: var(--fg-2); text-decoration: none; }
.qhint:hover { color: var(--fg); }

/* ---------- today and with KI: a real table with its own title ---------- */
.tasks { width: 100%; border-collapse: collapse; }
.tasks-cap { caption-side: top; text-align: left; padding-bottom: clamp(20px, 4svh, 44px); font: 700 calc(var(--fs-h2) * .72)/1.05 var(--sans); letter-spacing: -.035em; color: var(--fg); }
.tasks thead th { padding: 0 var(--gap) 14px 0; text-align: left; font: 600 calc(var(--fs-body) * .92)/1.3 var(--sans); letter-spacing: -.01em; color: var(--fg-2); }
.tasks tbody th, .tasks td { padding: clamp(18px, 3.4svh, 34px) var(--gap) clamp(18px, 3.4svh, 34px) 0; vertical-align: baseline; border-top: 1px solid var(--hair); text-align: left; }
.tasks tbody th { width: 22%; font: 650 calc(var(--fs-h3) * 1.08)/1.15 var(--sans); letter-spacing: -.025em; }
.tasks td { font-size: var(--fs-body); line-height: 1.5; color: var(--fg-2); width: 30%; }
.tasks td.then { color: var(--fg); }
.tasks .num { width: 18%; padding-right: 0; text-align: right; white-space: nowrap; }
.tasks td.num { font: 600 calc(var(--fs-h3) * 1.5)/1 var(--sans); letter-spacing: -.035em; color: var(--fg); font-variant-numeric: tabular-nums; }
/* the savings are the accent of the table, set in point type: a heavier cut gives the points body */
.tasks td.num .pt { font-weight: 700; }
.tasks tbody tr:last-child > * { border-bottom: 1px solid var(--hair); }
.fine { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--fg-3); }

/* ---------- about: the person (name, roles, photo, prose) ---------- */
/* name and roles are one identity block; the prose starts after a clear pause; the photo stands
   beside both and takes the height of the frame */
/* photo spans all rows; the two outer 1fr rows share the free space, so text and photo share one vertical centre */
.wrap.grid.about-person { align-items: start; grid-template-rows: 1fr auto auto 1fr; }
.about-photo { grid-column: 1 / span 5; grid-row: 1 / -1; border-radius: var(--radius); overflow: hidden; background: var(--k-photo); aspect-ratio: 4 / 5; max-height: calc(var(--frame-h) - 2 * var(--frame-pad)); align-self: center; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.about-head, .about-prose { grid-column: 7 / span 6; }
.about-head { grid-row: 2; }
.about-prose { grid-row: 3; }
.about-head .h2 { font-size: calc(var(--fs-h2) * 1.18); }
.roles { margin: 20px 0 0; padding: 0; list-style: none; font: 500 var(--fs-h3)/1.4 var(--sans); letter-spacing: -.015em; color: var(--fg-2); }
.about-prose { margin-top: clamp(28px, 5svh, 56px); }

/* ---------- about: the reference, one real project ---------- */
/* one case, read in order: which office (150 in point type, the only accent, with its caption),
   what was done in three steps, the result, and below one shared hairline the facts of the office
   and the way into the case study. The heading spans the frame. The two columns share a top line
   (the top of the 150 and the first hairline) and a base line (the caption and the result rest on
   the hairline of the foot). Each step carries a quiet mono label in a hanging column, so the text
   keeps a calm measure of about 60 characters. */
.wrap.grid.case { align-items: stretch; --case-gap: clamp(24px, 4.2svh, 48px); --case-pad: clamp(12px, 2.1svh, 22px); row-gap: var(--case-gap); }
/* a heading inside the person's section: the size of the table title, one step below the h2 */
.case-h { grid-column: 1 / -1; font: 700 calc(var(--fs-h2) * .72)/1.05 var(--sans); letter-spacing: -.035em; }
.case-lead { grid-column: 1 / span 5; display: flex; flex-direction: column; padding-bottom: var(--case-pad); container-type: inline-size; }
.case-fig { flex: 1; display: flex; flex-direction: column; }
/* a tight line box, so the top of the points is the top of the column; never wider than the column */
.case-n { display: block; width: max-content; font: 700 min(clamp(120px, min(24vw, 34svh), 310px), 60cqi)/.8 var(--sans); letter-spacing: -.05em; margin: -.02em 0 0 -.04em; }
.case-l { display: block; max-width: 22ch; margin-top: auto; padding-top: clamp(20px, 3.4svh, 40px); font: 600 var(--fs-h3)/1.3 var(--sans); letter-spacing: -.02em; color: var(--fg); }
.case-text { grid-column: 6 / span 7; display: flex; flex-direction: column; --case-lab: calc((100% - 6 * var(--gap)) / 7 + var(--gap)); }
.case-step { position: relative; margin: 0; padding: var(--case-pad) 0 var(--case-pad) var(--case-lab); border-top: 1px solid var(--hair); font-size: var(--fs-body); line-height: var(--case-lh, 1.5); color: var(--fg-2); }
/* the text keeps a measure of about 60 characters on wide screens */
.case-step, .case-step:first-child { padding-right: max(0px, 100% - var(--case-lab) - 29.5 * var(--fs-body)); }
.case-step:first-child { padding-top: calc(var(--case-pad) * .85); }
.case-step b { font-weight: 650; color: var(--fg); }
.case-step .nobr { white-space: nowrap; }
/* the label hangs in the first column and stands on the first line of its step */
.case-k { position: absolute; left: 0; top: var(--case-pad); font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .02em; color: var(--fg-3); padding-top: calc(var(--fs-body) * var(--case-lh, 1.5) / 2 - .2em); }
.case-step:first-child .case-k { top: calc(var(--case-pad) * .85); }
/* the result closes the steps: ink, a step larger, resting on the base line */
.case-result { margin-top: auto; font: 600 calc(var(--fs-h3) * .9)/1.3 var(--sans); letter-spacing: -.02em; color: var(--fg); }
.case-result .case-k { padding-top: calc(var(--fs-h3) * .9 * .72 - .25em); }
/* the foot: one hairline across the frame, the facts of the office left, the way into the case study under the steps */
.case-foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; margin-top: calc(-1 * var(--case-gap)); padding-top: calc(var(--case-pad) * .5); border-top: 1px solid var(--hair); }
.case-meta { grid-column: 1 / span 5; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-2); }
.case-more { grid-column: 7 / span 6; }
.case-more a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 var(--fs-small)/1.35 var(--sans); color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.case-more a:hover { text-decoration-color: currentColor; }
.case-more a:hover .arr { transform: translateX(3px); }

/* variant B, for comparison only (class case-b on the frame): the heading heads the left column,
   the labels stand above their steps, one hairline sets the result apart */
.wrap.grid.case.case-b { grid-template-rows: auto 1fr auto; row-gap: 0; }
.case-b .case-h { grid-column: 1 / span 5; grid-row: 1; }
.case-b .case-lead { grid-row: 2; padding: clamp(20px, 3.6svh, 40px) 0 0; }
.case-b .case-text { grid-column: 7 / span 6; grid-row: 1 / span 2; }
.case-b .case-step { padding: 0 max(0px, 100% - 29.5 * var(--fs-body)) 0 0; border: 0; }
.case-b .case-step + .case-step { margin-top: clamp(16px, 2.8svh, 30px); }
.case-b .case-k, .case-b .case-step:first-child .case-k { position: static; display: block; padding: .5em 0 .7em; }
.case-b .case-step:first-child .case-k { padding-top: 0; }
.case-b .case-step.case-result { margin-top: auto; padding-bottom: 0; padding-top: clamp(16px, 2.8svh, 30px); border-top: 1px solid var(--hair); }
.case-b .case-result .case-k { padding: 0 0 .9em; }
.case-b .case-foot { display: contents; }
.case-b .case-meta { grid-row: 3; align-self: last baseline; padding-top: 10px; }
.case-b .case-more { grid-row: 3; align-self: last baseline; padding-top: 10px; }

/* ---------- calculator: inputs and assumption left, result right ---------- */
/* the figure stands on the line of the numbers: the rust block (the hours that return) right above
   its number 72, the whole beside it; result and button follow below */
.tool .wrap.grid { align-items: stretch; }
.tr-ctrls { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.tr-ctrls .rsources { margin-top: auto; padding-top: 40px; }
.tr-out { grid-column: 7 / span 6; display: flex; flex-direction: column; }
.tr-fig { display: flex; flex-direction: column; }
.field-tool { display: block; height: clamp(180px, 34svh, 360px); margin-top: .2em; }
.tr-row { margin-top: 14px; display: flex; gap: 12px clamp(28px, 3vw, 48px); flex-wrap: wrap; align-items: flex-end; }
.tr-stat { display: flex; flex-direction: column; }
.tr-big { font: 700 clamp(64px, min(8vw, 14svh), 150px)/1 var(--sans); letter-spacing: -.05em; margin-left: -.03em; }
.tr-n { font: 700 calc(var(--fs-h3) * 1.3)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tr-sub { margin-top: 10px; font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: .02em; color: var(--fg-3); }
.tr-lead .tr-sub { margin-top: 4px; }
.tr-res { margin-top: clamp(16px, 3svh, 32px); font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); max-width: 56ch; }
.tr-res b { color: var(--fg); font-weight: 600; }
.tool-cta { margin-top: clamp(16px, 3svh, 32px); align-self: flex-start; }
.tctrl { margin-top: clamp(24px, 4.4svh, 48px); }
.tctrl:first-of-type { margin-top: clamp(28px, 5.4svh, 56px); }
.tlab { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-2); margin-bottom: 12px; }
.tlab b { font: 500 calc(var(--fs-small) * .95)/1 var(--mono); color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; --fill: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--fg) var(--fill), color-mix(in srgb, var(--fg) 22%, transparent) var(--fill)); }
input[type=range]::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--fg) 22%, transparent); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--fg); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: var(--radius); background: var(--fg); transition: transform .2s var(--ease); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: var(--radius); background: var(--fg); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]:focus-visible { outline: 2px solid var(--acc); outline-offset: 6px; }
.rsources { font-size: 14px; line-height: 1.55; color: var(--fg-3); max-width: 58ch; }

/* ---------- the way: heading and lead side by side, four blocks of points over the four steps ---------- */
.weg-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.weg-head .h2 { grid-column: 1 / span 5; }
.weg-head .lead-p { grid-column: 6 / span 7; margin-top: .35em; }
.field-weg { display: block; height: clamp(150px, min(24vw, 30svh), 340px); margin-top: clamp(24px, 5svh, 64px); }
.path { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.pnode h3 { font: 650 var(--fs-h3)/1.15 var(--sans); letter-spacing: -.025em; transition: color .3s var(--ease); }
.pnode p { margin-top: 12px; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); max-width: 32ch; transition: color .3s var(--ease); }
.pnode { cursor: default; -webkit-tap-highlight-color: transparent; }
/* pointing at (or tapping) a step brings its block forward; the other steps step back with it */
.path.picked .pnode:not(.on) h3, .path.picked .pnode:not(.on) p { color: var(--fg-3); }

/* ---------- offer: name and frame on the left, what happens on the right ---------- */
#ch9 .h2 { max-width: none; }
.k1-list { margin-top: clamp(24px, 4.4svh, 48px); border-bottom: 1px solid var(--hair); }
.k1-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: clamp(14px, 2.6svh, 28px) 0; border-top: 1px solid var(--hair); }
.k1-n { grid-column: 1 / span 4; }
.k1-n h3 { font: 650 var(--fs-h3)/1.15 var(--sans); letter-spacing: -.025em; }
.k1-tag { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--fg-3); }
.k1-c { grid-column: 5 / span 8; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); max-width: 64ch; }
.stair-foot { padding-top: clamp(16px, 3svh, 28px); font-size: var(--fs-small); line-height: 1.55; color: var(--fg); max-width: 62ch; }
/* compact offer (phones, upright and sideways): the four names stay in view as one list, the
   description of one format opens at a time (js/ki.js adds the buttons) */
.k1-compact .k1-n { cursor: pointer; }
.k1-head { appearance: none; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.k1-head .ai { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .45s var(--ease); }
.k1-head[aria-expanded="true"] .ai { transform: rotate(45deg); }

/* ---------- questions: 4 + 7 ---------- */
.faq .wrap.grid { align-items: start; }
.colhead { grid-column: 1 / span 4; }
.acc { grid-column: 6 / span 7; }
.acc-item { border-top: 1px solid var(--hair); }
.acc-item:last-child { border-bottom: 1px solid var(--hair); }
.acc-item h3 { margin: 0; }
.acc-head { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(10px, 1.7svh, 22px) 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: 600 calc(var(--fs-h3) * .92)/1.3 var(--sans); letter-spacing: -.02em; }
.acc-head .ai { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .45s var(--ease); }
.acc-head[aria-expanded="true"] .ai { transform: rotate(45deg); }
.acc-head:hover span, .k1-head:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; min-height: 0; }
.acc-body p { padding-bottom: 24px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); max-width: 62ch; }

/* ---------- footer, curtain ---------- */
.site-footer { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 28px var(--content-r) 36px var(--gutter); color: var(--fg-3); font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: .02em; border-top: 1px solid var(--hair); background: var(--ground); }
.site-footer span { margin-right: auto; }
.site-footer a { color: var(--fg-2); text-decoration: none; padding: 6px 0; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.curtain-in { position: fixed; inset: 0; z-index: 90; background: var(--ground); pointer-events: none; transition: opacity .9s var(--ease); }
.ki.ready .curtain-in { opacity: 0; }

/* ---------- laptops: same composition, a little less height everywhere ---------- */
@media (max-height: 800px) and (min-width: 761px) {
  .wrap.grid.case { --case-pad: clamp(9px, 1.5svh, 14px); --case-gap: clamp(18px, 3svh, 28px); --case-lh: 1.45; }
  .about-prose { margin-top: 28px; }
  .k1-tag { margin-top: 4px; font-size: 14px; }
  .site-footer { padding-top: 20px; padding-bottom: 24px; }
}
/* ---------- tablets ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .col-text { grid-column: 1 / span 7; }
  .wrap.grid > .field, .field-d { grid-column: 8 / span 5; }
  .tasks thead { display: none; }
  .tasks tbody th, .tasks td { display: block; width: auto; border: 0; padding: 0 0 8px; text-align: left; }
  .tasks tr { display: grid; grid-template-columns: 1fr 1fr auto; column-gap: var(--gap); padding: 22px 0; border-top: 1px solid var(--hair); }
  .tasks tbody th { grid-column: 1 / -1; padding-bottom: 12px; }
  .tasks td.num { align-self: start; }
  .tasks tbody tr:last-child { border-bottom: 1px solid var(--hair); }
  .tasks tbody tr:last-child > * { border-bottom: 0; }
  .colhead { grid-column: 1 / span 12; margin-bottom: 32px; } .acc { grid-column: 1 / span 12; }
  .tr-ctrls { grid-column: 1 / span 5; } .tr-out { grid-column: 6 / span 7; }
}

/* ---------- phones: one calm column, the figures sit between heading and text ---------- */
/* The page flows here (see "phones: a flowing page" below): heading, figure and text of a section
   stay together, the sections follow one rhythm, and the body text keeps a reading size. */
@media (max-width: 760px) {
  .ki { --fs-h2: 34px; --fs-h3: 21px; --fs-body: 17px; --fs-small: 16px; }
  .sec { padding-left: var(--gutter); padding-right: var(--gutter); }
  .wrap.grid { display: block; }
  .field-d { display: none; }
  /* the figures: compact bands of points between heading and text */
  .field-m { display: block; height: clamp(170px, 50vw, 230px); margin: 24px calc(-1 * var(--gutter) / 2) 8px; }
  .h2 + .field-m + .p { margin-top: 16px; }
  .sec.hero > .wrap, .sec.final > .wrap { display: flex; flex-direction: column; }
  .wrap.grid.frame { display: flex; flex-direction: column; }
  .hero .wrap.grid > .field, .final .wrap.grid > .field { display: block; flex: none; height: clamp(180px, 52vw, 250px); min-height: 0; max-height: none; margin: 28px calc(-1 * var(--gutter) / 2) 0; }
  .promise { margin-top: 24px; }
  .sub { margin-top: 14px; }
  .cta-row, .cta-final { margin-top: 24px; }
  .note { font-size: 15px; }
  .gonote { margin-top: 20px; }
  .gonote a { display: inline-block; padding: 14px 0; margin: -14px 0; }
  .qhint { margin-top: 12px; font-size: 16px; }
  /* today and with KI: one block per task, each value with its own label */
  .tasks-cap { padding-bottom: 8px; font-size: 27px; }
  .tasks thead { display: none; }
  .tasks tr { display: block; padding: 22px 0 24px; border-top: 1px solid var(--hair); }
  .tasks tbody tr:last-child { border-bottom: 1px solid var(--hair); }
  .tasks tbody tr:last-child > * { border-bottom: 0; }
  .tasks tbody th, .tasks td { display: block; width: auto; border: 0; padding: 0; text-align: left; font-size: 17px; line-height: 1.55; }
  .tasks tbody th { font-size: 22px; padding-bottom: 12px; }
  .tasks td + td { margin-top: 14px; }
  .tasks td::before { display: block; margin-bottom: 4px; font: 500 12px/1.4 var(--mono); letter-spacing: .02em; color: var(--fg-3); }
  .tasks td:not(.then):not(.num)::before { content: 'Heute'; }
  .tasks td.then::before { content: 'Mit KI'; }
  .tasks td.num { margin-top: 16px; font-size: 30px; }
  .tasks td.num::before { content: 'Zeitersparnis*'; margin-bottom: 8px; }
  .fine { font-size: 14px; }
  /* the person */
  .about-head .h2 { font-size: 40px; }
  .about-photo { aspect-ratio: 4 / 5; max-height: 440px; width: 100%; margin: 28px 0 0; }
  .roles { margin-top: 12px; font-size: 19px; }
  .about-prose { margin-top: 32px; }
  .about-prose .p { font-size: 17px; line-height: 1.6; }
  /* one column in reading order: the office with its facts, then the steps, the result and the way on */
  .wrap.grid.case { row-gap: 0; }
  .case-h { order: 0; font-size: 30px; }
  .case-lead { order: 1; padding-bottom: 0; }
  .case-fig { display: block; margin-top: 24px; }
  .case-n { font-size: clamp(100px, 34vw, 150px); }
  .case-l { font-size: 19px; max-width: none; padding-top: 18px; }
  .case-foot { display: contents; }
  .case-meta { order: 2; margin-top: 8px; font-size: 16px; }
  .case-text { order: 3; margin-top: 32px; }
  .case-step, .case-step:first-child { padding: 18px 0; font-size: 17px; line-height: 1.55; }
  .case-k, .case-step:first-child .case-k, .case-result .case-k { position: static; display: block; padding: 0 0 8px; font-size: 12px; line-height: 1.4; }
  .case-result { margin-top: 0; padding-bottom: 0; font-size: 19px; line-height: 1.4; }
  .case-more { order: 4; margin-top: 20px; } .case-more a { display: inline; font-size: 16px; line-height: 1.6; } .case-more .arr { display: inline-block; vertical-align: -3px; margin-left: 6px; }
  .case-b .case-step + .case-step { margin-top: 0; }
  .case-b .case-step { padding: 10px 0; }
  .case-b .case-result { padding-top: 16px; }
  .case-b .case-meta, .case-b .case-more { padding-top: 0; }
  .case-b .case-lead { padding-top: 0; }
  /* the calculator: heading, the two inputs, the figure with its numbers, result, way on, sources */
  .tool .wrap.grid { display: flex; flex-direction: column; }
  .tr-ctrls { display: contents; }
  .tr-out { order: 1; margin-top: 28px; }
  .tr-ctrls .rsources { order: 2; margin-top: 32px; padding-top: 0; }
  .tctrl { margin-top: 24px; } .tctrl:first-of-type { margin-top: 28px; }
  .tlab { font-size: 16px; }
  .tr-big { font-size: 72px; }
  .tr-row { margin-top: 10px; gap: 12px 24px; }
  .tr-sub { font-size: 12px; }
  .field-tool { height: clamp(150px, 44vw, 200px); }
  .tr-res { font-size: 17px; }
  .tool-cta { margin-top: 24px; }
  .weg-head { display: block; }
  .weg-head .lead-p { margin-top: 24px; }
  /* one column: a flat strip of points above each step, figure and text in one place */
  .weg-body { position: relative; margin-top: 12px; }
  .field-weg { position: absolute; inset: 0; height: auto; margin: 0; }
  .path { grid-template-columns: 1fr; row-gap: 32px; margin-top: 0; }
  /* each step carries its own bar of points above its title, one size taller per step */
  .pnode { --bar: 22px; padding-top: calc(var(--bar) + 30px); }
  .pnode:nth-child(2) { --bar: 34px; } .pnode:nth-child(3) { --bar: 46px; } .pnode:nth-child(4) { --bar: 58px; }
  .pnode p { margin-top: 8px; font-size: 16px; }
  .k1-list { margin-top: 28px; }
  .k1-row { display: block; padding: 0; }
  .k1-n { padding: 14px 0; }
  .k1-n h3 { font-size: 21px; }
  .k1-tag { margin-top: 2px; font-size: 15px; }
  .k1-c { margin: 0; padding: 0 0 20px; font-size: 17px; }
  .k1-compact .k1-row:not(.open) .k1-c { display: none; }
  .stair-foot { padding-top: 20px; font-size: 17px; }
  .colhead { margin-bottom: 24px; }
  .acc-head { min-height: 56px; font-size: 18px; padding: 12px 0; }
  .acc-body p { font-size: 17px; }
  .site-footer { padding: 24px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
  .site-footer { gap: 0 24px; } .site-footer a { padding: 13px 0; }
}

/* short phones (small models, or a browser with its bars shown): the title stays one screen */
@media (max-width: 760px) and (max-height: 620px) {
  .ki { --fs-display: 40px; }
  .sec.hero { padding-top: calc(var(--bar-h) + 20px); }
  .promise { margin-top: 18px; font-size: 21px; }
  .sub { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .cta-row { margin-top: 18px; }
}

/* ---------- phones held sideways: little height, so a compact scale and a slimmer header ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root:has(> body.ki) { --bar-h: 56px; --fs-display: 36px; }
  .ki { --fs-h2: 28px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 14px; --frame-pad: 14px; }
  .sec.hero { min-height: 100svh; padding-top: calc(var(--bar-h) + 16px); padding-bottom: 16px; }
  .hero .wrap.grid > .field, .final .wrap.grid > .field { min-height: 0; }
  .hero .col-text, .final .col-text { grid-column: 1 / span 8; }
  .hero .wrap.grid > .field, .final .wrap.grid > .field { grid-column: 9 / span 4; }
  .promise { margin-top: 14px; font-size: 18px; max-width: 34ch; }
  .sub { margin-top: 8px; max-width: 64ch; }
  .final .sub { margin-top: 8px; font-size: 15px; }
  .cta-row, .cta-final { margin-top: 16px; }
  .ki .btn { min-height: 44px; padding: 10px 18px; }
  .qhint { margin-top: 8px; }
  .gonote { margin-top: 10px; }
  .h2 + .p { margin-top: 16px; }
  .wrap.grid > .field, .field-d { min-height: 0; }
  .tasks-cap { padding-bottom: 12px; font-size: 22px; }
  .tasks thead th { padding-bottom: 6px; }
  .tasks tbody th, .tasks td { padding: 10px var(--gap) 10px 0; }
  .tasks td { font-size: 13.5px; line-height: 1.4; }
  .tasks tbody th { font-size: 17px; }
  .tasks td.num { font-size: 24px; }
  .tasks thead { display: table-header-group; }
  .tasks tr { display: table-row; padding: 0; border: 0; }
  .tasks tbody th, .tasks td { display: table-cell; border-top: 1px solid var(--hair); padding: 7px var(--gap) 7px 0; line-height: 1.35; }
  .tasks tbody th { width: 20%; }
  .tasks tbody tr:last-child > * { border-bottom: 1px solid var(--hair); }
  .fine { margin-top: 8px; font-size: 12.5px; }
  /* the photo stands beside name and roles only, the prose follows below in the text column */
  .wrap.grid.about-person { grid-template-rows: auto auto; align-items: center; }
  .about-photo { grid-column: 1 / span 4; grid-row: 1; margin-top: 0; aspect-ratio: 1 / 1; max-height: calc(100svh - var(--bar-h) - 48px); }
  .about-head { grid-column: 6 / span 7; grid-row: 1; }
  .about-head .h2 { font-size: 34px; }
  .about-prose { grid-column: 1 / span 12; grid-row: 2; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--gap)); }
  .about-prose .p + .p { margin-top: 0; }
  .roles { font-size: 16px; margin-top: 10px; }
  /* the heading heads the left column, so the steps get the full height beside it */
  .wrap.grid.case { --case-gap: 6px; --case-pad: 4px; --case-lh: 1.3; grid-template-rows: auto 1fr auto; }
  .case-h { grid-column: 1 / span 5; grid-row: 1; font-size: 24px; }
  .case-lead { grid-row: 2; }
  .case-text { grid-row: 1 / span 2; }
  .case-foot { grid-row: 3; }
  .case-n { font-size: min(20vw, 32svh, 60cqi); }
  .case-l { padding-top: 10px; font-size: 16px; }
  .case-step { font-size: 12.5px; }
  .case-k { font-size: 10.5px; padding-top: calc(12.5px * .65 - .5em); }
  .case-result { font-size: 14px; }
  .case-result .case-k { padding-top: calc(14px * .65 - .4em); }
  /* 13px keeps the case study link on one line on landscape phones around 850px wide */
  .case-meta { font-size: 13px; }
  .case-more a { min-height: 30px; font-size: 13px; }
  .field-tool { height: min(130px, 30svh); }
  .tr-big { font-size: 52px; }
  .tr-row { margin-top: 6px; }
  .tctrl { margin-top: 14px; } .tctrl:first-of-type { margin-top: 18px; }
  .tlab { margin-bottom: 4px; }
  .tr-ctrls .rsources { padding-top: 14px; font-size: 12.5px; }
  .tr-res { margin-top: 10px; font-size: 13.5px; }
  .tool-cta { margin-top: 12px; }
  .weg-head .lead-p { font-size: 14px; }
  .field-weg { height: min(84px, 22svh); margin-top: 0; }
  .path { margin-top: 10px; }
  .pnode h3 { font-size: 17px; }
  .pnode p { margin-top: 6px; font-size: 13px; line-height: 1.42; }
  /* the compact offer: heading and the four names on the left, the open description on the right */
  #ch9 .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  #ch9 .h2 { grid-column: 1 / span 5; }
  .k1-list { grid-column: 1 / span 5; grid-row: 2; margin-top: 14px; display: grid; }
  .k1-row { display: contents; }
  .k1-n { padding: 4px 0 6px; border-top: 1px solid var(--hair); cursor: pointer; }
  .k1-n h3 { font-size: 16px; }
  .k1-tag { margin-top: 0; font-size: 12.5px; line-height: 1.3; }
  .k1-head { min-height: 26px; }
  #ch9 .wrap { position: relative; }
  .k1-compact .k1-list { position: relative; }
  .k1-compact .k1-c { grid-column: auto; grid-row: auto; position: absolute; left: calc(100% + (100% - 4 * var(--gap)) / 5 + 2 * var(--gap)); width: calc((100% - 4 * var(--gap)) / 5 * 6 + 5 * var(--gap)); top: 0; margin: 0; padding: 6px 0 0; font-size: 15px; line-height: 1.55; }
  .k1-compact .k1-row:not(.open) .k1-c { display: none; }
  .stair-foot { grid-column: 7 / span 6; grid-row: 1; align-self: end; padding-top: 0; font-size: 14px; color: var(--fg-2); }
  .colhead { grid-column: 1 / span 3; margin-bottom: 0; } .acc { grid-column: 4 / span 9; }
  .acc { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; }
  .acc-item:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
  .acc-head { padding: 8px 0; font-size: 15px; }
  .acc-body p { font-size: 14px; padding-bottom: 12px; }
  .site-footer { padding: 14px var(--content-r) 16px var(--gutter); }
}

/* ---------- phones held sideways, now that the page flows: back to a readable size ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .ki { --fs-h2: 30px; --fs-h3: 19px; --fs-body: 16px; --fs-small: 16px; }
  .sec.hero { min-height: 0; }
  .sub { margin-top: 12px; }
  .note { font-size: 14px; }
  .h2 + .p { margin-top: 18px; }
  .tasks thead th { font-size: 14px; }
  .tasks td { font-size: 16px; line-height: 1.5; }
  .tasks tbody th, .tasks td { padding: 12px var(--gap) 12px 0; line-height: 1.45; }
  .tasks tbody th { font-size: 18px; }
  .fine { margin-top: 10px; font-size: 14px; }
  .roles { font-size: 17px; }
  .about-prose .p { font-size: 16px; }
  .wrap.grid.case { --case-gap: 16px; --case-pad: 10px; --case-lh: 1.5; }
  .case-step { font-size: 16px; }
  .case-k { font-size: 12px; padding-top: calc(16px * .75 - .5em); }
  .case-result { font-size: 17px; }
  .case-result .case-k { padding-top: calc(17px * .7 - .4em); }
  .case-meta { font-size: 15px; }
  .case-more a { display: inline-flex; min-height: 44px; font-size: 15px; }
  .tlab { font-size: 15px; }
  .tr-ctrls .rsources { font-size: 14px; }
  .tr-res { font-size: 16px; }
  .weg-head .lead-p { font-size: 16px; }
  .pnode h3 { font-size: 18px; }
  .pnode p { font-size: 15px; line-height: 1.5; }
  .k1-n h3 { font-size: 18px; }
  .k1-tag { font-size: 14px; }
  .k1-head { min-height: 44px; }
  .k1-compact .k1-c { font-size: 16px; }
  .stair-foot { font-size: 15px; }
  .acc-head { min-height: 48px; font-size: 16px; }
  .acc-body p { font-size: 16px; }
  .site-footer { padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- phones: a flowing page ---------- */
/* On phones, upright or sideways, a frame cannot hold a section whole. So the page drops the
   frames and the snapping and flows like a document: native momentum scrolling, no heights taken
   from the toolbar of the browser, one rhythm of space between the sections. js/ki.js and
   js/fallstudie.js read the same condition and skip the stops and the wheel helper. */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .ki { --flow-gap: clamp(72px, 22vw, 96px); }
  html.snap { scroll-snap-type: none; }
  .frame, .frame.faq { min-height: 0; padding-top: 0; padding-bottom: 0; }
  .sec, .sec.frame { padding-top: var(--flow-gap); padding-bottom: 0; }
  .sec.hero { min-height: 0; padding-top: calc(var(--bar-h) + 28px); }
  /* two frames of one section (the thesis and its table, the person and the case) */
  .sec > .frame + .frame { margin-top: calc(var(--flow-gap) * .75); }
  main > .sec:last-child { padding-bottom: var(--flow-gap); }
  /* an anchor brings the heading of its section just below the header */
  .sec[id] { scroll-margin-top: calc(24px - var(--flow-gap)); }
  .sec.hero[id] { scroll-margin-top: 0; }
}

/* ---------- snapping ---------- */
/* The browser snaps natively for every input (keyboard, touch, scrollbar); js/ki.js turns each
   wheel gesture into one native smooth scroll to the next stop. The stops are invisible anchors
   that js/ki.js places at the top of every frame (and, where a frame is taller than the screen, at
   each of its reading units), shifted by the header height, so a stop always shows one frame whole. */
html:has(> body.ki) { scroll-padding-top: var(--bar-h); }
.snap-anchors { position: absolute; left: 0; top: 0; width: 1px; height: 0; pointer-events: none; }
.snap-anchors i { position: absolute; left: 0; width: 1px; height: 1px; }
@media (prefers-reduced-motion: no-preference) {
  html.snap { scroll-snap-type: y mandatory; }
  .snap-anchors i { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (prefers-reduced-motion: reduce) {
  .kin .li { transition: none !important; transform: none !important; }
  .roll-list { animation: none; }
  .curtain-in { display: none; }
}