/* SURFACE: ki-check — the personalised questionnaire. Loaded after core.css,
   which it depends on for every token. See docs/ki-check.md.

   PAPER THROUGHOUT. core.css already sets `body { background-color:
   var(--color-paper) }`, so this surface adds no background of its own and
   introduces no new colour token — `--color-paper` IS the semantic paper
   token the brief asks for, and it has been since the design system was
   written. A second `--background-paper` alias would be two names for one
   value, which is how a page ends up carrying the wrong one.

   MOBILE FIRST, and the file is written in that order: every rule below is
   the narrow-screen rule, and the only @media blocks are `min-width`. Checked
   at 390px. */

/* --------------------------------------------------------------------------
   1. PAGE FRAME
   -------------------------------------------------------------------------- */

.kc-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* THE TICK GUTTER — OPENED ON SELECTION, NOT HELD OPEN (2026-08-26,
     Stefanie's call, correcting the first attempt made the same day).

     THE FIRST VERSION RESERVED THIS SPACE ON EVERY ROW so that nothing could
     move when a tick appeared. On screen that was the wrong trade: twelve
     unticked rows each carried a 40px empty margin that never explained
     itself, and the list read as indented rather than as ticked. Stefanie:
     "don't have the left spacing to the text on linen already."

     So the space OPENS when the row is chosen, and the jump it would otherwise
     cause is answered with motion rather than with permanent emptiness — the
     inset transitions, and the tick fades in and slides the last few pixels
     along with it. The movement is the state change made visible, which is the
     one thing motion is for on this surface.

     Composed from tokens rather than written as 2.5rem: it is the row's own
     left inset plus the room the mark needs beside it, declared once because
     four rules (row, card, chip, consent) refer to it and they must not
     drift apart. */
  --tick-gutter: calc(var(--space-4) + var(--space-5));
}

/* THE ROOM THE FIXED BAR NO LONGER RESERVES FOR ITSELF.

   .kc-foot is `position: fixed` on a phone (see section 10), so it is out of
   flow and the page has to keep its height clear or the last option on every
   step sits underneath it. 8rem is DELIBERATELY GENEROUS against a bar that
   measures about 110px: too much is a little dead space at the end of a
   scrollable page, too little is a control nobody can reach. When the two
   labels wrap onto two lines on a very narrow screen, the slack is what
   absorbs it.

   Scoped to .kc-body--check, which is exactly the two surfaces that have a
   bar — the steps and the closing page. The welcome, info and thank-you pages
   have none and must not grow a hole at the bottom. */
.kc-body--check .kc-main {
  padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0rem));
}

/* TIGHT TO THE HEADER ON A PHONE (2026-08-26, Stefanie's call). 32px of air
   under a 4.5rem header is a screen and a half of nothing before the question
   starts, on the device where vertical space is the scarce thing. 16px here,
   and the wide-screen step back up lives in section 11 where every other
   min-width override is. */
.kc-main {
  flex: 1;
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4) var(--space-6);
}

/* The three short pages — info, invalid, thank-you — centre in the viewport
   ONCE THERE IS A VIEWPORT TO CENTRE IN. On a phone they do not: a card that
   is nearly as tall as the screen has no spare height to be centred in, so
   `align-items: center` spends what little there is on a gap above the title
   and pushes the card's own text off the bottom. Mobile-first, so the plain
   top-aligned stack is the unconditional rule and the centring is the
   override, in section 11 with the others.

   The questionnaire never centres at all, at any width: a form that moves
   vertically as its content changes length is disorienting. */
.kc-main--centered {
  display: block;
}

/* --------------------------------------------------------------------------
   2. PROGRESS — under the mark on a desktop, INSIDE THE BAR on a phone

   TWO COPIES IN THE DOM, ONE VISIBLE (2026-08-26). The markup is rendered
   twice by one function in views/ki-check.js — see the long note there for
   why duplication is the honest answer and why neither copy is aria-hidden.
   This file decides which one is on screen, and nothing else.

   MOBILE FIRST, so the BAR copy is the unconditional one and the header copy
   is switched on at 34rem, the same width at which .kc-foot stops being a
   sticky bar. The two have to flip at the same breakpoint or there is a band
   of widths showing the progress twice, or not at all.
   -------------------------------------------------------------------------- */

.kc-progress--header {
  display: none;
}

.kc-progress {
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: var(--space-3);
}

/* THE TRACK IS THE BAR'S TOP EDGE, which is the whole reason this fits without
   making the bar taller. .kc-foot already drew a 1px hairline across its top;
   the unfilled part of the track is that same hairline colour, so the line
   that was there is now the line that fills up. Nothing was added — a border
   was promoted into a progress bar.

   The negative margins pull it out over the bar's own padding to the page
   edges: a progress track that stops at the text gutter reads as a graphic
   sitting on the bar rather than as the bar's edge. */
/* ONLY THE TRACK BLEEDS OUT, NOT THE BLOCK — and that distinction is a bug
   fix rather than a preference. The first version put `margin-inline:
   calc(var(--gutter) * -1)` on this block together with `flex: 0 0 100%`, and
   the row never wrapped: **a flex basis of 100% resolves against the
   container's CONTENT box** (358px at 390px wide), so negative side margins
   made the item's OUTER size 326px — narrower than the line it was supposed
   to fill — and both buttons fitted beside it and were squeezed to 4px.
   Measured, not guessed: getBoundingClientRect put the block at w=358 and each
   button at w=4 on the same y.

   The lesson is worth keeping: `flex: 0 0 100%` forces a row break only while
   the item's MARGIN box is at least as wide as the line. A negative margin
   silently un-forces it. */
.kc-progress--bar {
  flex: 0 0 100%;
  /* Up over the bar's own top padding, so the track sits on its edge. */
  margin-top: calc(var(--space-3) * -1);
  border-bottom: 0;
  padding-bottom: 0;
}

/* Reversed, because the DOM has the labels first — correct reading order for
   a screen reader, which should hear "Schritt 4 von 6" before it meets a
   decorative bar — while on screen the track belongs on the bar's top edge. */
.kc-progress--bar .kc-progress__inner {
  padding-inline: 0;
  display: flex;
  flex-direction: column-reverse;
}

/* THE ONE THING THAT ESCAPES THE GUTTER. Square, full width, and it is what
   the bar's old 1px border-top became. */
.kc-progress--bar .kc-progress__track {
  border-radius: 0;
  margin-inline: calc(var(--gutter) * -1);
}

/* No bottom padding: .kc-foot's `gap` already separates this row from the
   buttons, and adding both is how a sticky bar quietly grows a third of the
   screen. */
.kc-progress--bar .kc-progress__labels {
  margin-bottom: 0;
  padding-top: var(--space-2);
}

.kc-progress__inner {
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kc-progress__labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kc-progress__time {
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-meta);
}

.kc-progress__track {
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-hairline);
  overflow: hidden;
}

/* The one piece of motion on this surface, and it is a state change rather
   than decoration: the bar has to be seen to move or it reads as a static
   graphic. Reduced-motion is handled globally in core.css, which drops every
   transition to 0.01ms. */
.kc-progress__fill {
  display: block;
  height: 100%;
  background-color: var(--color-lavender);
  transition: width var(--duration-slow) var(--ease);
}

/* --------------------------------------------------------------------------
   3. CARD AND TYPE
   -------------------------------------------------------------------------- */

/* THE FILL IS THE EDGE (2026-08-26, docs/ki-check-redesign.md).

   Until this date .kc-card was --color-paper on a body that is also
   --color-paper, with a 1px hairline at 1,23:1 around it. Card and page had
   the same colour, so that line was not the card's EDGE — it was the whole
   card. A decorative line in a load-bearing role, which docs/design-system.md
   rules out. The repair was not a darker line, it was a surface: linen fills
   the box and the border goes. Padding steps to 24px at the same time,
   because 16px of inset beside a 16px radius put the first letter in the
   curve. */
.kc-card {
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-box);
  background-color: var(--color-linen);
}

/* THE PAGE IS NOT A CARD, and three of the six pages here are the page.

   The step, the welcome and the closing page each hold boxes of their own —
   the example, the facts, a case, the consent, and every option row — and all
   of them are linen. Fill them AND their container and the nesting
   disappears: linen on linen has no edge at all, so twelve options would read
   as one long block instead of twelve boxes. On those three the card draws
   nothing and does only what is left: hold the stack. The three text-only
   pages — info, invalid, thank-you — keep the fill, because there the card
   really is a card standing on the page. */
.kc-card--plain {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.kc-card--narrow {
  max-width: 34rem;
}

.kc-card > * + * {
  margin-top: var(--space-5);
}

.kc-title {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
}

/* The thank-you page's headline is a whole sentence, not a word. See
   --text-statement in core.css for why that needs its own size; the tracking
   drops with it, because -0.035em is a display setting and a sentence read at
   38px wants the calmer one. */
.kc-title--sentence {
  font-size: var(--text-statement);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}

/* The step question is the page's h1 but must not be display-sized — six of
   them in a row at --text-h2 would read as six separate pages. */
.kc-question {
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: var(--tracking-h3);
}

.kc-lead {
  font-size: var(--text-lead-section);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.kc-support {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.kc-note {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* The "no credentials, no confidential data" line. Amber would be the
   instinct and is ruled out by the design system — it is a surface colour,
   1.44:1 on linen and worse on paper. A left rule in ink carries the same
   "stop and read" weight and stays AAA. */
.kc-note--warn {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-ink);
  color: var(--color-text);
}

.kc-meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
}

.kc-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.kc-link:hover {
  color: var(--color-focus);
}

/* Name and company, shown back rather than asked for again. */
.kc-facts {
  padding: var(--space-5);
  border-radius: var(--radius-box);
  background-color: var(--color-linen);
  font-size: var(--text-small);
}

.kc-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.kc-facts__row + .kc-facts__row {
  margin-top: var(--space-2);
}

.kc-facts dt {
  color: var(--color-text-muted);
  min-width: 7rem;
}

.kc-facts dd {
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   4. OPTIONS

   Real <input type="radio"> and <input type="checkbox">, styled, never
   replaced. Keyboard behaviour, arrow-key group navigation and screen-reader
   semantics all come free and correct that way, and the alternative — a
   div with role="radio" — has to re-implement every one of them.
   -------------------------------------------------------------------------- */

.kc-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* fieldset defaults to min-content, which breaks grid children */
}

.kc-field--spaced {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}

.kc-optionlist {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* EVERY BOX IN A ROW IS THE SAME HEIGHT (2026-08-26, Stefanie's finding).

   .kc-optionlist is a grid, so it already stretched .kc-option to the tallest
   cell in the row — but the LABEL inside was `display: block` and sized to its
   own text, so "Buchhaltungs- oder Rechnungsprogramm" (two lines) left the box
   beside it visibly short, with a strip of paper under it. Stefanie: "so that
   it doesn't look like it's broken."

   The repair is one line each: the option becomes a flex container and the
   label is told to fill it. Not `height: 100%`, which depends on the parent's
   height being definite — true for a stretched grid item, NOT true for the
   chips, which live in a wrapping flex row. Flex works in both. */
.kc-option {
  position: relative;
  display: flex;
}

/* Visually hidden but focusable and hit-testable: the input sits on top of
   its own label at full size, so a tap anywhere on the row is a tap on the
   control. That is what makes the whole row a >=44px touch target without a
   single pixel of custom hit-testing. */
.kc-option__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* THE FILL IS THE EDGE HERE, AND SINCE 2026-08-26 IT IS THE ONLY EDGE.

   These rows were the last paper-on-paper boxes on the surface: transparent,
   drawn only by a 1px hairline at 1.23:1. That is the exact defect the card
   fill was introduced to fix, and a list of twelve of them is where it showed
   most — the boxes beside them had a surface while the options had a line.
   Now every box on a step is the same linen form, which is what the lab asked
   for: "drei Kästen, alle gleich".

   NO BORDER IN ANY STATE (Stefanie's call, same day): "remove the border of
   the buttons, on linen, amber, hover, no border needed." It was carried as
   `1px solid transparent` so that hover and selection had something to colour
   without shifting the row — and once neither of them draws a line, a
   permanently invisible border is 2px of box nobody asked for. Both went.

   THE CHOSEN STATE DOES NOT LOSE ITS GREYSCALE SIGNAL WITH IT, which is the
   thing to check before deleting a border from a control: what remains is the
   amber fill (colour), the TICK (shape), and the weight step. The tick alone
   satisfies "never signalled by colour alone" — it is the signal a monochrome
   print, a low-vision reader and a glance all get for free, and it is the one
   the ink border never was. */
.kc-option__label {
  /* Fills the row's height, and centres its text in whatever height that
     turns out to be — a one-line label sitting at the top of a two-line box
     is the same raggedness one level down. Cards opt back out below: their
     title and description are a stack, and a stack is centred by keeping it
     where it starts. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  position: relative;
  /* 44px minimum at the default type size, and it grows if the label wraps —
     padding rather than min-height, per docs/design-system.md → Tap targets.
     At rest the inset is even; the left one grows when the row is chosen. */
  padding: var(--space-3) var(--space-4);
  border: 0;
  /* A ROW IS A SMALL BOX. --radius-box (16px) is a card's corner and on a 44px
     row it curves through most of the height; --radius-box-sm is the same
     decision one size down. Stefanie's call, 2026-08-26. */
  border-radius: var(--radius-box-sm);
  background-color: var(--color-linen);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  cursor: pointer;
  /* padding-left is animated, which is a layout property and normally the one
     not to animate. It is safe here for a reason that was checked rather than
     assumed: the box's WIDTH is fixed by its grid track, so only this element's
     own text reflows — no sibling moves and no ancestor resizes — and at most
     one row is transitioning at a time, because a click drives it. The
     alternative, translating an inner wrapper, would need a wrapper span that
     most of these labels do not have. */
  transition:
    background-color var(--duration-base) var(--ease),
    padding-left var(--duration-base) var(--ease);
}


/* THE MARK ITSELF. Two borders on a rotated box rather than a ✓ glyph or an
   SVG: this system has no icon language, generated text content is read aloud
   by some screen readers, and a second asset for one shape is not worth a
   request. `currentColor` so it always matches the label it belongs to.

   Opacity rather than display, so it fades with the fill instead of appearing
   a frame ahead of it. */
.kc-option__label::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  /* The centre of the box, now that the box may be taller than its text. On a
     single-line row this lands within half a pixel of where the old
     first-line offset put it; on a stretched one it follows the text. */
  top: 50%;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  /* Rest: invisible and a few pixels short of home, so it arrives WITH the
     text rather than switching on in front of it. The two translations have
     different jobs — Y is the rotated shape's optical centring and never
     changes, X is the entrance. */
  transform: translate(-0.3rem, -60%) rotate(-45deg);
  /* -60% rather than -50%: the rotated shape's optical centre sits below its
     bounding box's, so half its own height leaves it looking low. */
  opacity: 0;
  transition:
    opacity var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
}

/* HOVER FILLS WITH AMBER — BUT ONLY WHERE HOVER IS A REAL THING.

   Amber is the site's second accent and until 2026-08-26 it had shipped on
   exactly one surface. Here it does the job it is best at: a warm wash under
   the pointer saying "this one, if you press".

   @media (hover: hover) IS NOT A REFINEMENT, IT IS THE BUG FIX. A touchscreen
   has no pointer to move away, so a tapped element keeps :hover until
   something else is tapped — which meant UNTICKING AN OPTION ON A PHONE LEFT
   IT AMBER. The row said "chosen" with the tick gone and the weight back to
   normal: the loudest of the three signals contradicting the other two, on
   the state where being wrong matters most. Stefanie found it on a phone
   within minutes; no test and no desktop pass can see it, because a desktop
   pointer does move away.

   The query asks whether the primary input can hover AT ALL, so a laptop with
   a touchscreen keeps the effect and a phone never gets it. Nothing is lost
   there: on touch the press itself is the feedback, and hover was never
   carrying information on this surface anyway. */
@media (hover: hover) {
  .kc-option__input:hover + .kc-option__label {
    background-color: var(--color-amber);
  }
}

/* SELECTED IS NOT SIGNALLED BY COLOUR ALONE, and now it carries four signals
   rather than three: the amber fill, a full-ink border, a weight step, and the
   tick. The tick is the one that matters most, because it is the only one that
   survives BOTH greyscale and a glance — it says "chosen" in a shape rather
   than in a shade, which is what Stefanie asked for on 2026-08-26 and what the
   linen-deep fill it replaces could never do.

   AMBER FOR HOVER AND FOR SELECTED, the same value in both. They were nearly
   given --color-amber and --color-amber-deep to tell them apart, and the two
   measure 1.13:1 against each other — a distinction that exists in the token
   list and not on the screen. The tick and the ink border do that work
   instead, and they do it at any contrast. --color-linen-deep goes back to
   being a parked token; see core.css. */
.kc-option__input:checked + .kc-option__label {
  background-color: var(--color-amber);
  font-weight: var(--weight-medium);
  padding-left: var(--tick-gutter);
}

.kc-option__input:checked + .kc-option__label::before {
  opacity: 1;
  transform: translate(0, -60%) rotate(-45deg);
}

/* THE FOCUS INDICATOR IS THE ROW'S OWN EDGE (2026-08-26). The input is
   invisible and stretched across the row, so the indicator has to be drawn on
   the label it controls — that part has always been true and must never be
   removed: without it, arrowing through a radio group is invisible.

   WHAT CHANGED IS ITS SHAPE. It was an outline offset 3px outside the box,
   which since the rows lost their borders read as a ring hovering around them.
   An INSET box-shadow puts the same 2px on the row's own edge instead, follows
   --radius-box-sm for free, and — unlike a border — costs no layout, so a
   focused row does not move by a pixel.

   --color-focus, not --color-lavender: 5.87:1 on paper against lavender's
   1.95:1. See the note on .kc-input in core.css. */
.kc-option__input:focus-visible + .kc-option__label {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus);
}

/* -- Card labels: title plus description ----------------------------------

   The step-3 cards carry a short title and a grey sentence under it. The
   WHOLE CARD is the control, not the title: the invisible input already
   covers the label at full size, so nothing extra is needed to make the
   description clickable — which is the point of styling the label rather
   than replacing the input with a div.
   ------------------------------------------------------------------------- */

/* A CARD IS A STACK, NOT A LINE. Its title and description are two elements,
   so the flex row above would sit them SIDE BY SIDE. Back to a block, still
   stretched to the row height by the flex parent, with its content at the top
   where a heading belongs. */
.kc-option__label--card {
  display: block;
  padding: var(--space-4);
}

/* And its tick goes back to the title's first line — beside the heading, not
   floating halfway down a two-line description. */
.kc-option__label--card::before {
  top: calc(var(--space-4) + 0.73rem);
}

/* CARD AND CHIP EACH SET `padding` AS A SHORTHAND, which includes the left
   inset, so the chosen state has to be restated for both — at a selector that
   outweighs theirs. Three classes against one for the card, four against two
   for the chip. Left implicit, the generic chosen rule loses the cascade to
   whichever of these is written later in the file, and the tick would sit on
   top of the first word. */
.kc-option__input:checked + .kc-option__label--card {
  padding-left: var(--tick-gutter);
}

.kc-option__title {
  display: block;
  font-weight: var(--weight-medium);
}

.kc-option__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Selected already changes fill, border and weight. The description must not
   inherit that extra weight — it would make the whole card bold and undo the
   title/description distinction exactly when the card matters most.

   AND IT MUST NOT STAY MUTED, which is the part that is a measurement rather
   than a preference. --color-text-muted is tuned for paper and linen, where it
   sits above 5:1; on amber it falls to 3.97:1, under the 4.5:1 body text
   needs. So on an amber card the description steps up to full ink — 11.59:1 —
   and the title/description distinction goes on being carried by weight and
   size, which is where it was doing most of the work anyway. Hover gets the
   same treatment for the same reason: the fill is amber there too. */
.kc-option__input:checked + .kc-option__label--card .kc-option__desc {
  font-weight: var(--weight-regular);
}

.kc-option__input:checked + .kc-option__label .kc-option__desc {
  color: var(--color-text);
}

@media (hover: hover) {
  .kc-option__input:hover + .kc-option__label .kc-option__desc {
    color: var(--color-text);
  }
}

/* Short labels — company size, frequency — wrap into a row instead of a
   column once there is room, but stay a stack on a phone. */
@media (min-width: 34rem) {
  .kc-optionlist--compact {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

/* A LIST OF ONE STAYS A LIST OF ONE. Step 3's "Sonstiges" card is rendered on
   its own after the branch block, and the two-column grid below would stretch
   it across half the width with a hole beside it — a lone card in a slot
   reads as a card whose partner failed to load. */
.kc-optionlist--single {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .kc-optionlist:not(.kc-optionlist--single) {
    grid-template-columns: 1fr 1fr;
  }

  .kc-optionlist--compact {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
}

/* --------------------------------------------------------------------------
   5. THE CONDITIONAL "SONSTIGES" FIELD

   Revealed with `:has()`, NOT with JavaScript — the same mechanism the
   services accordion uses, and for the same reason: the questionnaire has to
   work with scripting switched off.

   Read the selector carefully: hide when NO "other" input in this fieldset is
   checked. The naive version — `:has(.kc-option__input--other:not(:checked))`
   — is wrong wherever a fieldset holds several "other" options (step 5 has
   four), because it matches as soon as ANY of them is unchecked and would
   hide the field the respondent just asked for.

   In a browser with no `:has()` support the whole rule is dropped and the
   field simply stays visible. That is a complete form rather than a broken
   one, which is why there is no @supports fallback here.
   -------------------------------------------------------------------------- */

.kc-other {
  margin-top: var(--space-4);
}

.kc-field:not(:has(.kc-option__input--other:checked)) .kc-other {
  display: none;
}

/* STEP 5 NEEDS A SECOND, TIGHTER SCOPE (2026-08-26), and the two rules only
   work together.

   Its four "Anderes …" boxes each live inside their own .kc-toolgroup, and all
   four are inside the one .kc-field. So the rule above — which asks "is ANY
   other option in this fieldset ticked?" — stops hiding every box the moment a
   single one is ticked, and all four appear at once. This asks the same
   question of the GROUP.

   The two are the same specificity (`:not()` and `:has()` each take their
   argument's), so this one has to come second — and between them they produce
   exactly the right three states: nothing ticked anywhere, both rules hide;
   this group ticked, neither hides; another group ticked, only this one hides.

   Without `:has()` support both rules are dropped and every box is simply
   visible, which is a complete form rather than a broken one. */
.kc-toolgroup:not(:has(.kc-option__input--other:checked)) .kc-other {
  display: none;
}

/* --------------------------------------------------------------------------
   6. THE EXAMPLE HINT

   The form controls themselves — .kc-label, .kc-input, .kc-textarea,
   .kc-hint, .kc-error — live in core.css, not here. They were promoted the
   day the internal dashboard started using them, per CLAUDE.md: a block used
   by a second surface belongs in core.
   -------------------------------------------------------------------------- */

.kc-example {
  margin-top: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-box);
  background-color: var(--color-linen);
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.kc-example__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   7. SUBGROUPS AND TOOL CHIPS
   -------------------------------------------------------------------------- */

.kc-subgroup {
  margin-top: var(--space-6);
}

.kc-subgroup__title {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text);
}

.kc-toolgroups {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

/* Air above the group name as well as below it, and MORE below (2026-08-27,
   Stefanie's call: 0.5rem / 1rem). The title had only a margin-bottom, so it
   sat tight under the previous group's last chip row and the eye had to work
   out which side it belonged to. Sitting nearer its own chips than to what
   came before, it reads as their heading rather than as a divider.

   --space-2 and --space-4 ARE 0.5rem and 1rem exactly; the tokens are used
   because the token block is the only place raw values are written here. The
   gap between groups is .kc-toolgroups' own --space-5, so the top margin adds
   to that rather than replacing it. */
.kc-toolgroup__title {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Chips wrap and size to their content — the tool names are short and a
   two-column grid would leave "Gmail" sitting in half a screen of space. */
.kc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kc-chips .kc-option {
  flex: 0 1 auto;
}

/* A CHIP NEVER CHANGES WIDTH, AND THAT IS THE ONE RULE THIS BLOCK EXISTS FOR
   (2026-08-26, Stefanie's finding, on a phone).

   THE PROBLEM IS THE CONTAINER, not the chip. .kc-chips is a wrapping flex
   row, so a chip that grows by even a few pixels can push itself — or the chip
   after it — onto the next line. Ticking "Anderes E-Mail-Programm" made it
   wider and it JUMPED DOWN A ROW under her thumb: the element you just pressed
   is somewhere else by the time you look at it, and the two chips beside it
   moved as well. Nothing like that happens in the option lists on steps 3, 4
   and 6, because those are grids and a grid track's width is fixed regardless
   of what is inside it.

   SO THE CHIP KEEPS THE ROOM PERMANENTLY INSTEAD OF OPENING IT.

   This is the opposite of the decision one section up, and deliberately so.
   The animated inset is right for a full-width row, where the space is
   obviously empty when unused and the box cannot move. It is wrong here, where
   the cost of the movement is a chip changing line. Same signal, two
   mechanisms, chosen by what the container does.

   IT DOES NOT READ AS AN INDENT, which was the objection to the reserved
   gutter on the rows: the padding is SYMMETRIC — 24px each side, a slightly
   roomier pill and nothing more — and the tick is drawn inside the left inset
   the pill already has, rather than in an extra one added beside it.

   THE WEIGHT STEP IS DROPPED HERE FOR THE SAME REASON. Medium is a few pixels
   wider than regular over a twenty-character German label, which is enough to
   wrap a line on its own; a fix that holds the padding constant and then lets
   the type grow has not fixed anything. The chosen chip is carried by its
   amber fill and its tick — colour and shape, which is what the "never colour
   alone" rule asks for. */
.kc-chips .kc-option__label {
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
}

.kc-chips .kc-option__input:checked + .kc-option__label {
  padding-left: var(--space-5);
  font-weight: var(--weight-regular);
}

/* Inside the pill's own left inset: 8px of clearance from the curve, ten of
   tick, six to the first letter. It still fades and slides in — that costs no
   width, because it is absolutely positioned. */
.kc-chips .kc-option__label::before {
  left: var(--space-2);
}

/* --------------------------------------------------------------------------
   8. PILLS — the step-3 selection, carried into steps 4 and 5

   EVERY selected card, always, wrapping onto as many lines as it needs.
   There is deliberately no "+3 weitere": the pills exist so the next two
   questions read as being about something specific, and the hidden one is
   invariably the one the respondent had in mind.

   They are not controls. No hover, no focus ring, nothing focusable — a pill
   that looks pressable and is not is worse than a pill that looks like text.
   -------------------------------------------------------------------------- */

/* ABOVE THE QUESTION SINCE 2026-08-26, not below it (Stefanie's call).

   The pills are the premise of the question, not a note on it. "Wo befinden
   sich die Informationen, die ihr dafür benötigt?" is unreadable until you
   know what *dafür* refers to, and under the headline the answer arrived after
   the question that needed it. Now they read in order: here is what you told
   us, and here is what we are asking about it. The rule underneath separates
   the premise from the question rather than the question from the options. */
.kc-pills {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
}

.kc-pills__label {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.kc-pills__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
}

/* A PILL MUST NOT LOOK LIKE AN OPTION, and after 2026-08-26 that is a real
   risk rather than a theoretical one: every option row on this surface is a
   filled linen box, and until this day so was every pill. Two boxes in the
   same fill, one pressable and one not, six inches apart.

   THREE THINGS SEPARATE THEM NOW, and none of them is a shape:
     - NO FILL AT ALL. The pill is paper, the same colour as the page behind
       it (2026-08-26, Stefanie's call). It briefly carried a half-linen wash,
       which measured 1.05:1 against the page — so faint that removing it lost
       nothing and gained the one thing that matters here: an option row is a
       FILLED box and a pill now is not, which is a difference visible before
       either is read.
     - AN EDGE INSTEAD OF A SURFACE. 1px of --color-hairline-linen, 1.43:1 on
       paper. Decorative, and allowed to be — the pill's text is 17.66:1 and
       carries the entire message if the outline goes unseen.
     - MONO. Sentence-case mono at --text-meta is an EXISTING role in this
       system, not a new one: it is what .kc-meta and the progress bar's
       "noch ca. 8 Min." already use, and its job there is exactly this
       one — quiet factual read-back, machine-recorded rather than authored.
       Option labels are sans; nothing else in the option list is mono; so the
       typeface alone says "this is a record, not a choice".

   Still not controls. No hover, no focus ring, nothing focusable — a pill that
   looks pressable and is not is worse than a pill that looks like text. */
.kc-pill {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-hairline-linen);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   9. CASES — step 6

   One block per case, stacked. The block is set on linen so that "this is
   one case" is a surface rather than a heading someone has to read, which is
   what stops three cases reading as nine loose questions.
   -------------------------------------------------------------------------- */

.kc-cases {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.kc-case {
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-box);
  background-color: var(--color-linen);
}

.kc-case > * + * {
  margin-top: var(--space-4);
}

.kc-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.kc-case__title {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text);
}

/* The inner fieldsets sit inside a block that already provides the grouping,
   so they get the spacing without the rule above them that .kc-field--spaced
   draws between top-level sections. */
.kc-field--tight {
  margin-top: var(--space-4);
}

.kc-addcase {
  margin-top: var(--space-4);
}

/* Stands exactly where the button it replaces stood, so the block does not
   jump when the third case takes the control away. */
.kc-addcase__limit {
  margin-top: var(--space-4);
}

/* The example hint inside a case sits on linen already; give it the paper
   ground so it stays a distinct note rather than blending into the block. */
.kc-case .kc-example {
  background-color: var(--color-paper);
}

/* AN OPTION INSIDE A CASE STANDS ON LINEN, so its resting fill flips to paper.

   Everywhere else on this surface the ground is paper and the option is
   linen. Inside a case that would be linen on linen — no edge at all — so the
   two swap. Only the RESTING fill flips: hover and selected are amber, which
   is a step away from both grounds (1.44:1 from linen, 1.61:1 from paper) and
   therefore needs no override here. That was the argument for the pressed
   state being its own value rather than "whatever the ground is not", and it
   survived the move from linen-deep to amber unchanged.

   Caught by a 390px screenshot of step 6 on the day the case became a filled
   box. No test looks at this. */
.kc-case .kc-option__label {
  background-color: var(--color-paper);
}

/* --------------------------------------------------------------------------
   10. FOOTER CONTROLS
   -------------------------------------------------------------------------- */

.kc-form > * + * {
  margin-top: var(--space-5);
}

/* A HIDDEN INPUT IS NOT A VISUAL SIBLING, AND THE STACK ABOVE COUNTED IT AS
   ONE. Every step form opens with two of them — the CSRF token and the step
   number — so `* + *` matched .kc-card and opened --space-5 (24px) above the
   first thing on the page, produced entirely by form plumbing nobody can see.
   It measured as 40px of space above "Deine ausgewählten Zeitfresser:" at
   narrow (16px page padding + this 24px) and 72px at wide.

   Found on 2026-08-27 by measuring the box chain, not by reading: the rule
   looks correct in isolation and the markup looks correct in isolation, and
   only the two together produce the gap. THE SAME 24px SAT ON EVERY STEP,
   above the question on the steps that have no pills — so this tightens the
   whole questionnaire by one step of space, not just the two pill pages. */
.kc-form > input[type="hidden"] + * {
  margin-top: 0;
}

/* NARROW: A STICKY BAR AT THE BOTTOM OF THE SCREEN (2026-08-26, Stefanie's
   call, and the problem she named was a usability one rather than a visual
   one).

   Step 3 is sixteen cards tall and step 6 is a textarea plus two radio groups
   per case. On a phone that put Weiter two or three thumb-scrolls below the
   last answer, so the sequence "choose · scroll · scroll · press" repeated six
   times — and a respondent who has finished answering and cannot see a way
   forward reads the form as stuck, not as long.

   STICKY, NEVER FIXED, and the difference is the whole reason this is safe. A
   sticky element keeps its place in the flow, so it reserves its own height at
   the end of the form and can never sit on top of the last option; it simply
   floats up to the viewport edge while there is still form below it. `fixed`
   would need a matching bottom padding on .kc-main, kept in sync by hand,
   which is how a phone ends up with an unreachable last row.

   BOTH BUTTONS ON ONE LINE, HALF EACH, per the brief. `flex: 1 1 0` rather
   than `50%` so the gap comes out of the pair rather than off the right edge.

   AND ON STEP 1 THERE IS NO ZURÜCK. .kc-foot__left is rendered empty there —
   it is a container the view always emits — so `:empty` collapses it and
   Weiter takes the full width. Without that, step 1 shows one button occupying
   the right half of the bar and a hole where its partner would be. */
.kc-foot {
  /* FIXED, NOT STICKY (2026-08-26, Stefanie's call, and it reverses the note
     that used to stand here).

     Sticky keeps its place in the flow, which is why it was chosen: it
     reserves its own height and can never cover the last option. What it also
     does is STOP BEING PINNED once its containing block runs out — scroll to
     the end of the form and the bar lifts away from the bottom edge, leaving
     a strip of page beneath it. That is what Stefanie saw, and on a control
     bar it reads as the bar having come loose.

     Fixed costs exactly what sticky was buying: the height is no longer
     reserved, so .kc-body--check .kc-main has to reserve it by hand below.
     That is the one thing to keep in mind when editing this bar — ADD A ROW
     HERE AND THE RESERVE BELOW HAS TO GROW, or the last option on every step
     ends up underneath it. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  /* The progress copy is `flex: 0 0 100%`, which forces its own row above the
     buttons. `wrap` is what lets it — without it the three children share one
     line and the buttons are squeezed to nothing. */
  flex-wrap: wrap;
  gap: var(--space-3);
  /* `left: 0; right: 0` already takes it to the page edges — the negative
     margins sticky needed are gone with it. */
  padding: var(--space-3) var(--gutter);
  /* The home indicator on a modern phone sits over the bottom of the viewport;
     without this the buttons are under it. Resolves to 0 everywhere else.

     The fallback is a bare zero rather than a token because there is no
     --space-0 and there should not be: zero is not a spacing decision. It
     cannot be omitted either — an env() with no fallback in a browser that
     does not know the variable makes the whole declaration invalid at
     computed-value time, and padding-bottom would drop to 0 rather than to
     the shorthand's value above it. */
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0rem));
  /* NO BORDER-TOP: the progress track is the edge now. See .kc-progress--bar.
     On the pages that carry no progress at all this would leave the bar
     edgeless — there are none: every page with a .kc-foot has a step count. */
  background-color: var(--color-paper);
}

/* Step 1 has no Zurück. The column is still rendered — the desktop layout
   needs something at the left end for `space-between` to push Weiter away
   from — so on a phone it is collapsed by name rather than by :empty, which
   whitespace in the template defeats. See the note in views/ki-check.js. */
.kc-foot--noback .kc-foot__left {
  display: none;
}

.kc-foot__left,
.kc-foot__right {
  flex: 1 1 0;
  min-width: 0;
}

.kc-foot__right .btn,
.kc-foot__left .btn {
  width: 100%;
  justify-content: center;
}

/* ONE BUTTON SIZE INSIDE THE BAR, WHATEVER VARIANT THE BUTTON CARRIES.

   .btn--lg exists to make a standalone call to action prominent. In a two-up
   bar the prominence comes from the bar, and its extra padding is the
   difference between a German label that fits inside its pill at 390px and one
   that runs out of it — .btn is `white-space: nowrap`, so an overlong label
   does not wrap, it overflows. Caught on step 6 by the 390px screenshot, where
   "Weiter zum Abschluss" spilled past both ends of the pill. The label was
   shortened at the same time; this is the half that protects every other long
   label from the same fate. */
.kc-foot .btn {
  padding: var(--space-3);
  font-size: var(--text-small);
}

/* THE "GESPEICHERT" NOTE IS GONE (2026-08-26, Stefanie's call), and with it
   the absolute positioning that floated it above the sticky bar. `.kc-saved`
   itself went the same day the correction request did: the confirmation line
   on the welcome page was the class's last remaining user. */

.kc-autosave-error {
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-ink);
  font-size: var(--text-small);
  color: var(--color-text);
}

.kc-autosave-error[hidden] {
  display: none;
}

.kc-actions {
  margin-top: var(--space-6);
}

.kc-actions .btn {
  width: 100%;
  justify-content: center;
}

.kc-consent {
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-box);
  background-color: var(--color-linen);
}

/* THE ACKNOWLEDGMENT IS A PARAGRAPH WITH A CHECKBOX, not an option row, and
   after 2026-08-26 it has to say so louder than before: option rows now fill
   with amber on hover and carry a tick of their own. Every one of those has to
   be turned off here explicitly — an unticked opt-out is how a consent control
   ends up flashing amber under the pointer. */
.kc-consent .kc-option__label {
  /* Back to a block: the acknowledgment is a wrapping paragraph beside a
     checkbox, and vertically centring it against its own height does nothing
     except fight the ::before box that is positioned from the top. */
  display: block;
  border: 0;
  background: none;
  padding: var(--space-2) 0 var(--space-2) var(--space-7);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

.kc-consent .kc-option__input:hover + .kc-option__label,
.kc-consent .kc-option__input:checked + .kc-option__label {
  background: none;
  font-weight: var(--weight-regular);
  /* Its inset belongs to the checkbox and never moves — the tick here appears
     INSIDE a box that is already drawn, so there is nothing to make room for.
     Restated because the generic chosen rule outweighs the consent label's own
     padding and would otherwise slide this paragraph sideways. */
  padding-left: var(--space-7);
}

/* THE BOX. Drawn on the label because the input itself is transparent and
   stretched across the whole row.

   ITS CORNER IS --radius-xs, 4px, AND THAT IS THE FIX FOR 2026-08-26. It sat
   on --radius-sm (8px) — the token for inputs and tags — which on a 20px
   square curves through 40 % of each side and turns the box into a lozenge.
   The scale is proportional to the box: 16px on a card, 11px on a row, 4px
   here. Stefanie's finding, on /ki-check/abschluss. */
.kc-consent .kc-option__label::before {
  content: "";
  position: absolute;
  left: 0;
  /* TOP-ALIGNED WITH THE TEXT, NOT WITH THE LINE BOX (2026-08-27, Stefanie's
     call). --space-2 alone puts the box at the top of the label's content
     box, but the first line of text does NOT start there: --leading-relaxed
     is 1.65, so half of the extra leading — (24.75 − 15) / 2 ≈ 4.9px — sits
     above the glyphs. The box therefore rode ~5px higher than the "I" of
     "Ich habe", which is small enough to look like a mistake rather than a
     choice.

     Compared against 8px and 14.9px on screen before choosing: 8px is
     visibly high, 14.9px (ascent + half-leading) drops the box just below
     the cap line, and this one lands on it.

     TWO DECLARATIONS ON PURPOSE. The first is the fallback; the second says
     the same thing in terms the tokens can move — `1lh` is the computed line
     height and `1em` the font size, so their difference stays the leading
     even if --leading-relaxed or the type scale is retuned. Where `lh` is
     unsupported the whole second declaration is dropped and the static value
     holds; without the fallback it would fall back to `top: auto` and the
     box would land at its static position, which is not a near miss but a
     broken control. */
  top: calc(var(--space-2) + 0.3rem);
  top: calc(var(--space-2) + (1lh - 1em) / 2);
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--color-paper);
  /* The generic option tick above is a rotated, faded pair of borders on this
     same pseudo-element. Here the pseudo-element is the BOX, so both have to
     be put back deliberately — inheriting either leaves a permanently
     invisible checkbox rotated 45 degrees. */
  transform: none;
  opacity: 1;
  transition: background-color var(--duration-base) var(--ease);
}

/* `transform: none` AGAIN, AND IT HAS TO BE ON THIS RULE RATHER THAN THE ONE
   ABOVE. This is a specificity bug, and it is the exact failure the comment on
   .kc-consent .kc-option__label::before warns about — it just could not be
   fixed from there.

   `.kc-option__input:checked + .kc-option__label::before` is (0,3,1) and turns
   the generic tick into a rotated pair of borders. The consent reset sits on
   `.kc-consent .kc-option__label::before`, which is only (0,2,1), so THE
   MOMENT THE BOX IS TICKED the generic rule outranks it and rotates the box
   itself 45 degrees: a black diamond where a checkbox should be. Unticked it
   was always correct, which is why it survived so long unnoticed — the broken
   state is the one nobody screenshots.

   This rule is (0,4,1), so it wins. Verified against the CSS as it stood at
   c264da7: the diamond reproduces there too, so it predates the 2026-08-27
   work and is not a regression from it. Reported by Stefanie with a
   screenshot of /ki-check/abschluss. */
.kc-consent .kc-option__input:checked + .kc-option__label::before {
  background-color: var(--color-ink);
  transform: none;
}

/* THE CONSENT CONTROL IS THE LITTLE BOX, NOT THE PARAGRAPH. The row-level
   inset shadow above would draw a rectangle around four lines of prose, which
   says "this text is focused" rather than "this checkbox is". So the shadow is
   switched off here and the box's own border carries it — thickened to 2px,
   which changes nothing geometrically because `box-sizing: border-box` is
   global and the box has an explicit 1.25rem. */
.kc-consent .kc-option__input:focus-visible + .kc-option__label {
  box-shadow: none;
}

.kc-consent .kc-option__input:focus-visible + .kc-option__label::before {
  border-width: 2px;
  border-color: var(--color-focus);
}

/* THE TICK, BIGGER AND ACTUALLY CENTRED (2026-08-26). It was 0.45 × 0.22rem
   inside a 1.25rem box — under a fifth of the area — and positioned by two
   hand-tuned offsets that put it low and left of centre. Now it is more than
   half the box and its position is derived rather than eyeballed: the box's
   own centre (half of 1.25rem, offset by the label's top padding), then
   translated back by its own size. The extra 10 % of downward shift is the
   rotated shape's optical centre, which sits below its bounding box.

   Two borders rather than a ✓ glyph — this system has no icon language, and
   generated text content is read aloud by some screen readers. */
.kc-consent .kc-option__input:checked + .kc-option__label::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  /* THE SAME OFFSET THE BOX GOT, PLUS HALF THE BOX (2026-08-27). The box moved
     down to the text's cap line earlier the same day and the tick did not
     follow it: its centre stayed at --space-2 + half the box, which left it
     the whole half-leading — ~4.9px — above the box's centre and reading as
     top-aligned inside a box it is supposed to sit in the middle of.
     Stefanie's finding on /ki-check/abschluss.

     Both offsets now start from the same place, so the tick stays centred
     wherever the box lands. TWO DECLARATIONS for the same reason as the box:
     `1lh` is the computed line height and `1em` the font size, so the pair
     survives a retune of --leading-relaxed or the type scale; where `lh` is
     unsupported the whole second declaration is dropped and the static value
     holds. */
  top: calc(var(--space-2) + 0.3rem + 0.625rem);
  top: calc(var(--space-2) + (1lh - 1em) / 2 + 0.625rem);
  width: 0.68rem;
  height: 0.36rem;
  border-left: 2px solid var(--color-paper);
  border-bottom: 2px solid var(--color-paper);
  transform: translate(-50%, -60%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   11. WIDER SCREENS — min-width only, and only where the LAYOUT changes
   -------------------------------------------------------------------------- */

@media (min-width: 34rem) {
  /* The tighter phone spacing in section 1 is a phone decision and stops
     here: from a tablet up the page keeps the air it always had. */
  .kc-main {
    padding-block: var(--space-6) var(--space-8);
  }

  /* :not() rather than a second reset below, so the plain card cannot get its
     padding back by cascade order — the preview lab lost two rounds to
     exactly that mistake, and a cascade error looks like a shape problem. */
  .kc-card:not(.kc-card--plain) {
    padding: var(--space-6);
  }

  /* THE BAR STOPS BEING A BAR. With a pointer and a tall viewport the last
     answer and the Weiter button are on screen together, so there is nothing
     for stickiness to solve — and a strip pinned across the bottom of a
     desktop window is an app chrome this site does not have. Every one of the
     narrow-screen bar's properties is undone here, deliberately spelled out
     rather than left to inheritance: a half-undone sticky bar is a hairline
     floating across the middle of the page. */
  /* Back in flow, and the reserve goes with it — leaving it would put 8rem of
     nothing under every step on a desktop. */
  .kc-body--check .kc-main {
    padding-bottom: var(--space-8);
  }

  .kc-foot {
    position: static;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-inline: 0;
    padding: 0;
    background-color: transparent;
  }

  /* The two copies flip at exactly this width, which is also where the bar
     stops being sticky. Any daylight between the two breakpoints shows the
     progress twice or not at all. */
  .kc-progress--bar {
    display: none;
  }

  .kc-progress--header {
    display: block;
  }

  .kc-foot--noback .kc-foot__left {
    display: block;
  }

  .kc-foot__left,
  .kc-foot__right {
    flex: 0 0 auto;
  }

  .kc-foot__right .btn,
  .kc-foot__left .btn {
    width: auto;
  }

  .kc-foot .btn {
    padding: var(--space-3) var(--space-5);
  }

  .kc-foot .btn--lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-body);
  }

  .kc-actions .btn {
    width: auto;
  }

  /* The centred short pages get their centring back once there is spare
     height to centre in — see section 1 for why a phone has none. */
  .kc-main--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
  }
}

@media (min-width: 48rem) {
  .kc-toolgroups {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .kc-main {
    padding-block: var(--space-7) var(--space-9);
  }
}


/* --------------------------------------------------------------------------
   12. PROSE — the KI-Check's own privacy notice

   A document rather than a form, so it needs the things a form does not: a
   real measure, restored list markers, and underlined links in running text.
   The same three exceptions legal.css makes for the Impressum, made again
   here rather than loading a second surface file — every page still links
   exactly two stylesheets.
   -------------------------------------------------------------------------- */

.kc-prose {
  max-width: var(--container-text);
}

.kc-prose__section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}

.kc-prose__section > h2 {
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: var(--tracking-h3);
}

.kc-prose__section > * + * {
  margin-top: var(--space-4);
}

.kc-prose p,
.kc-prose li {
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* The measure again, one level down: a 46rem column is already close to
   right, and this stops the odd wide paragraph running past it. */
.kc-prose p {
  max-width: 60ch;
}

.kc-prose p.kc-meta,
.kc-prose p.kc-lead {
  max-width: none;
}

/* The date line needs air under the title, the same step legal.css gives the
   statute line on the Impressum. Without it the two read as one block. */
.kc-prose > .kc-meta {
  margin-top: var(--space-4);
}

.kc-prose > .kc-lead {
  margin-top: var(--space-5);
}

/* core.css strips list markers globally, which is right for navigation and
   wrong for a document. Restored here, and only here. */
.kc-prose ul {
  list-style: disc;
  padding-left: var(--space-5);
  max-width: 60ch;
}

.kc-prose ul li + li {
  margin-top: var(--space-2);
}

/* In running prose the underline IS the affordance. */
.kc-prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.kc-prose strong {
  color: var(--color-text);
}