/*
 * Engine base of every site: reset, typography, layout primitives, buttons
 * and motion. Values come only from the tokens, like in every component.
 * Components sit in a later layer and win over everything here.
 */

@layer tokens, reset, base, layout, components;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100svh;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
  }

  /* width and height only reserve the place; a narrower image keeps its proportions. */
  img,
  video {
    block-size: auto;
  }

  /*
   * The class of an image goes on its <picture>, so the image fills it:
   * size, aspect-ratio, object-fit and object-position of the class apply to
   * the image. Without an object-fit of the class it is never distorted.
   */
  picture {
    object-fit: contain;
  }

  picture > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: inherit;
    object-position: inherit;
  }

  /*
   * An image shown whole (a screenshot, a graphic) is never cropped, whatever
   * its place asks: the rule sits on the image, so it beats the object-fit
   * the image inherits from the class of its picture. Places with a shape of
   * their own take the image's shape (--image-ratio), no wider than
   * --image-whole-inline, the width at which it stands --image-whole-block high.
   */
  picture[data-fit='whole'] {
    --image-whole-block: min(75svh, var(--width-content) / 2);
  }

  picture[data-fit='whole'] > img {
    object-fit: contain;
    object-position: center;
  }

  button {
    font: inherit;
    color: inherit;
  }

  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    padding: 0;
  }
}

@layer base {
  html {
    font-family: var(--font-body);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
    color: var(--color-ink);
    background-color: var(--color-surface);
    font-optical-sizing: auto;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    hanging-punctuation: first allow-end last;
  }

  body {
    font-size: var(--step-0);
  }

  [data-scheme] {
    background-color: var(--color-surface);
    color: var(--color-ink);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-transform: var(--case-heading);
    color: var(--color-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: var(--step-5);
  }

  h2 {
    font-size: var(--step-4);
  }

  h3 {
    font-size: var(--step-2);
  }

  h4,
  h5,
  h6 {
    font-size: var(--step-1);
  }

  p,
  li,
  dd,
  dt,
  blockquote,
  figcaption {
    text-wrap: pretty;
  }

  p,
  li,
  dd {
    max-inline-size: var(--measure);
  }

  /* German compounds need breaks on small screens, headings included. */
  @media (width < 40rem) {
    p,
    li,
    dd,
    h1,
    h2,
    h3 {
      hyphens: auto;
      hyphenate-limit-chars: 10 4 4;
    }
  }

  strong,
  b {
    font-weight: var(--weight-body-strong);
  }

  a {
    color: var(--color-accent);
    text-decoration-thickness: var(--border-width);
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness var(--duration-fast) var(--ease);
  }

  a:hover {
    text-decoration-thickness: calc(var(--border-width) * 2);
  }

  :focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-accent);
    outline-offset: calc(var(--border-width) * 3);
  }

  ::selection {
    background-color: color-mix(in oklab, var(--color-accent) 22%, transparent);
  }

  .icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: none;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    z-index: 10;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-300%);
  }

  .skip-link:focus {
    transform: none;
  }

  /*
   * An image made by AI carries a visible mark (AI Act Art. 50 (4),
   * Arbeitspaket 49): "KI" or "AI" in the upper corner at the end of the
   * line, on a plate of its own in the colors of the surface it stands on,
   * ink and surface swapped, so it reads on any photo. The <picture> holds it
   * where it sits in the flow; a component that positions the picture itself
   * (a photo behind a whole section) wins over this layer, and the picture
   * stays the mark's box. Isolated, the mark stays with its picture: above
   * the image and its tones, below whatever lies over the picture. Families
   * move it where a corner of a place is cut off or covered, as in round
   * portraits.
   */
  picture[data-ai] {
    position: relative;
    isolation: isolate;
  }

  /* Clear of the rounded corner of a picture, whose radius is at most --radius-l. */
  .ai-mark {
    position: absolute;
    inset-block-start: max(var(--space-2xs), var(--radius-l) * 0.35);
    inset-inline-end: max(var(--space-2xs), var(--radius-l) * 0.35);
    z-index: 1;
    padding: 0.25em 0.45em;
    border-radius: var(--radius-s);
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: var(--weight-body-strong);
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: nowrap;
  }

  /*
   * The tone curves of the page's photos (Arbeitspaket 48): SVG filters that
   * take no room. Not display: none, which would switch the filters off.
   */
  .e-tones {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }
}

@layer layout {
  .section {
    container-type: inline-size;
    padding-block: var(--space-3xl);
  }

  /* A section on the same surface as the one before continues its flow. */
  .section[data-flow='continue'] {
    padding-block-start: 0;
  }

  .l-wrap {
    inline-size: min(100% - 2 * var(--gutter), var(--width-content));
    margin-inline: auto;
  }

  .l-wrap--wide {
    inline-size: min(100% - 2 * var(--gutter), var(--width-wide));
  }

  .l-flow > * + * {
    margin-block-start: var(--stack-space, var(--space-s));
  }

  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
  }

  .l-grid {
    display: grid;
    gap: var(--grid-gap, var(--space-l));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 26ch), 100%), 1fr));
  }

  .t-eyebrow {
    font-family: var(--eyebrow-font);
    font-size: var(--step--1);
    font-weight: var(--weight-body-strong);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: var(--eyebrow-case);
    color: var(--color-accent);
  }

  /* The part of a heading its section's design sets apart. */
  .t-accent {
    color: var(--color-accent);
  }

  .t-lead {
    font-size: var(--step-1);
    line-height: calc(var(--leading-body) - 0.1);
    color: var(--color-muted);
    max-inline-size: 44ch;
  }

  /* A link on to another page, below a text or a list. */
  .t-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-weight: var(--weight-body-strong);
  }

  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--radius-m);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: var(--weight-body-strong);
    line-height: var(--leading-heading);
    text-decoration: none;
    transition:
      background-color var(--duration-fast) var(--ease),
      translate var(--duration-fast) var(--ease);
  }

  .button:hover {
    background-color: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink));
  }

  .button:active {
    translate: 0 calc(var(--border-width) * 1);
  }

  .button--quiet {
    background-color: transparent;
    color: var(--color-ink);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
  }

  .button--quiet:hover {
    background-color: var(--color-raised);
  }

  /*
   * The guided inquiry the engine writes (inquiry.ts, concept: Formulare und
   * Anfragen). Usable in every family as it is; a family styles it further
   * through these classes. Hidden parts stay hidden whatever display a
   * family gives them: rules that set display belong on :not([hidden]).
   */
  .f-inquiry [hidden] {
    display: none;
  }

  .f-inquiry__form {
    display: grid;
    gap: var(--space-l);
  }

  .f-inquiry__step,
  .f-inquiry__contact {
    display: grid;
    gap: var(--space-s);
    min-inline-size: 0;
    padding: 0;
    border: 0;
  }

  /* A legend stands outside its fieldset's grid, so it keeps its own distance. */
  .f-inquiry__question {
    margin-block-end: var(--space-xs);
    padding: 0;
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
    color: var(--color-heading);
  }

  .f-inquiry__hint {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  .f-inquiry__answers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* An answer is a button to the eye and a radio to the browser. */
  .f-inquiry__answer {
    position: relative;
    display: inline-flex;
  }

  .f-inquiry__choice {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .f-inquiry__label {
    display: inline-flex;
    align-items: center;
    min-block-size: calc(var(--space-l) + var(--space-xs));
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
    line-height: var(--leading-heading);
    transition:
      background-color var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease);
  }

  .f-inquiry__choice:hover + .f-inquiry__label {
    background-color: var(--color-raised);
  }

  .f-inquiry__choice:checked + .f-inquiry__label {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: none;
  }

  .f-inquiry__choice:focus-visible + .f-inquiry__label {
    outline: var(--border-width) solid var(--color-accent);
    outline-offset: var(--border-width);
  }

  .f-inquiry__choice[aria-invalid] + .f-inquiry__label {
    box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
  }

  .f-inquiry__fields {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(min(24ch, 100%), 1fr));
  }

  .f-inquiry__field {
    display: grid;
    gap: var(--space-3xs);
  }

  .f-inquiry__field--wide {
    grid-column: 1 / -1;
  }

  .f-inquiry__name {
    font-weight: var(--weight-body-strong);
  }

  .f-inquiry__optional {
    font-weight: var(--weight-body);
    color: var(--color-muted);
  }

  .f-inquiry__input {
    inline-size: 100%;
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-s);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
  }

  .f-inquiry__input[aria-invalid] {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
  }

  textarea.f-inquiry__input {
    resize: vertical;
  }

  /* Out of sight and out of reach, but not display: none, which bots skip. */
  .f-inquiry__trap {
    position: absolute;
    inline-size: var(--border-width);
    block-size: var(--border-width);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .f-inquiry__consent {
    display: flex;
    gap: var(--space-xs);
    align-items: start;
    font-size: var(--step--1);
  }

  .f-inquiry__check {
    flex: none;
    inline-size: 1.25em;
    block-size: 1.25em;
    margin-block-start: 0.1em;
    accent-color: var(--color-accent);
  }

  .f-inquiry__error {
    font-weight: var(--weight-body-strong);
    color: var(--color-ink);
  }

  .f-inquiry__send {
    justify-self: start;
    border: 0;
    cursor: pointer;
  }

  .f-inquiry__send:disabled {
    cursor: progress;
    opacity: 0.7;
  }

  .f-inquiry__done {
    font-size: var(--step-1);
  }

  /*
   * Tool packages (work package 54, tool-contract.md): the tool builds its
   * markup from these classes inside .f-tool__mount, the engine writes the
   * frame around it. Usable in every family as it is; a family styles it
   * further through these classes, so a tool looks like the site and follows
   * every change of its look. Mobile first: rows of fields stack on a phone.
   * Hidden parts stay hidden whatever display a family gives them.
   */
  .f-tool {
    display: grid;
    gap: var(--space-m);
    min-inline-size: 0;
  }

  .f-tool [hidden] {
    display: none;
  }

  /* Whatever the tool puts side by side, form and result, stands apart. */
  .f-tool__mount {
    display: grid;
    gap: var(--space-l);
    min-inline-size: 0;
    container-type: inline-size;
  }

  .f-tool__mount:empty {
    display: none;
  }

  /* Without a script, until the tool runs, or when it fails: what to do. */
  .f-tool__fallback {
    max-inline-size: 65ch;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
  }

  .f-tool[data-tool-ready] .f-tool__fallback {
    display: none;
  }

  /* The sentence about the inputs belongs to a tool there are inputs for. */
  .f-tool:not([data-tool-ready], [data-preview]) .f-tool__privacy {
    display: none;
  }

  .f-tool__privacy,
  .f-tool__address {
    max-inline-size: 65ch;
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  /* What a tool writes for paper, and where it came from, shows only there (work package 56). */
  @media not print {
    .f-tool__paper,
    .f-tool__address {
      display: none;
    }
  }

  /* A table too wide for the phone slides sideways instead of breaking its figures. */
  /* Its width never comes from the table, or the page around it would grow instead. */
  .f-tool__scroll {
    inline-size: 100%;
    overflow-x: auto;
    contain: inline-size;
  }

  /* Words wrap whole; it slides only where the figures need more than the width. */
  .f-tool__scroll > .f-tool__table :is(th, td) {
    overflow-wrap: normal;
  }

  .f-tool__scroll:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-accent);
    outline-offset: var(--border-width);
  }

  .f-tool__form {
    display: grid;
    gap: var(--space-l);
  }

  .f-tool__group {
    display: grid;
    gap: var(--space-s);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* A legend stands outside its fieldset's grid, so it keeps its own distance. */
  .f-tool__legend {
    margin-block-end: var(--space-xs);
    padding: 0;
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
    color: var(--color-heading);
  }

  .f-tool__row {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(26ch, 100%), 1fr));
    align-items: start;
  }

  /* One column that may shrink, so an open explanation wraps inside the field. */
  .f-tool__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
    align-content: start;
    min-inline-size: 0;
  }

  .f-tool__label {
    font-weight: var(--weight-body-strong);
    color: var(--color-heading);
  }

  .f-tool__input {
    inline-size: 100%;
    min-block-size: calc(var(--space-l) + var(--space-xs));
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-s);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-variant-numeric: tabular-nums;
  }

  .f-tool__input:hover {
    border-color: var(--color-muted);
  }

  .f-tool__input:focus-visible,
  .f-tool__choice:has(:focus-visible),
  .f-tool__button:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-accent);
    outline-offset: var(--border-width);
  }

  .f-tool__input[aria-invalid='true'] {
    border-color: var(--color-ink);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-ink);
  }

  .f-tool__hint {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  .f-tool__error {
    font-size: var(--step--1);
    font-weight: var(--weight-body-strong);
    color: var(--color-ink);
  }

  .f-tool__error:empty {
    display: none;
  }

  .f-tool__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* A choice is a field to click: the radio or box inside it, the whole label as its target. */
  .f-tool__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: calc(var(--space-l) + var(--space-xs));
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
    line-height: var(--leading-heading);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease);
  }

  .f-tool__choice:hover {
    background-color: var(--color-raised);
  }

  .f-tool__choice:has(:checked) {
    box-shadow: inset 0 0 0 calc(var(--border-width) * 2) var(--color-accent);
    font-weight: var(--weight-body-strong);
  }

  .f-tool__choice > input {
    flex: none;
    inline-size: 1.15em;
    block-size: 1.15em;
    margin: 0;
    accent-color: var(--color-accent);
  }

  .f-tool__choice > input:focus-visible {
    outline: none;
  }

  .f-tool__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .f-tool__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: calc(var(--space-l) + var(--space-xs));
    padding: var(--space-xs) var(--space-m);
    border: 0;
    border-radius: var(--radius-m);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font: inherit;
    font-weight: var(--weight-body-strong);
    line-height: var(--leading-heading);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease);
  }

  .f-tool__button:hover {
    background-color: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink));
  }

  .f-tool__button[data-kind='secondary'] {
    background-color: transparent;
    color: var(--color-ink);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
  }

  .f-tool__button[data-kind='secondary']:hover {
    background-color: var(--color-raised);
  }

  /*
   * The result: the verdict large, the way there below. Its tone shows on
   * the edge; the verdict says it in words, so no reader depends on a color.
   */
  .f-tool__result {
    display: grid;
    gap: var(--space-s);
    min-inline-size: 0;
    padding: var(--space-m);
    border-inline-start: calc(var(--border-width) * 4) solid var(--color-line);
    border-radius: var(--radius-s);
    background-color: var(--color-raised);
  }

  .f-tool__result[data-tone='positive'] {
    border-inline-start-color: var(--color-accent);
  }

  .f-tool__result[data-tone='negative'] {
    border-inline-start-color: var(--color-heading);
  }

  .f-tool__verdict {
    max-inline-size: 32ch;
    font-family: var(--font-heading);
    font-size: var(--step-2);
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
    color: var(--color-heading);
    text-wrap: balance;
  }

  .f-tool__text {
    max-inline-size: 65ch;
  }

  .f-tool__tiers {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .f-tool__tier {
    display: flex;
    gap: var(--space-xs);
    align-items: baseline;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
    color: var(--color-muted);
  }

  .f-tool__tier::before {
    content: '';
    flex: none;
    inline-size: 0.7em;
    block-size: 0.7em;
    border-radius: var(--radius-round);
    box-shadow: inset 0 0 0 calc(var(--border-width) * 2) currentcolor;
  }

  .f-tool__tier[data-reached='true'] {
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-weight: var(--weight-body-strong);
  }

  .f-tool__tier[data-reached='true']::before {
    background-color: var(--color-accent);
    box-shadow: none;
  }

  .f-tool__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
  }

  .f-tool__table caption {
    padding-block-end: var(--space-2xs);
    font-weight: var(--weight-body-strong);
    text-align: start;
    color: var(--color-heading);
  }

  .f-tool__table :is(th, td) {
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: var(--border-width) solid var(--color-line);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .f-tool__table :is(th, td):first-child {
    padding-inline-start: 0;
  }

  .f-tool__table :is(th, td):last-child {
    padding-inline-end: 0;
  }

  .f-tool__table th {
    font-weight: var(--weight-body-strong);
    color: var(--color-heading);
  }

  .f-tool__table tfoot :is(th, td) {
    border-block: calc(var(--border-width) * 2) solid var(--color-ink);
    font-weight: var(--weight-body-strong);
  }

  /* Figures line up digit under digit. */
  .f-tool__number {
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .f-tool__table .f-tool__number {
    text-align: end;
  }

  .f-tool__note {
    max-inline-size: 65ch;
    font-size: var(--step--1);
  }

  .f-tool__source {
    max-inline-size: 65ch;
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  /*
   * Guidance and help (work package 55, "Führung und Hilfe" in the
   * contract). Questions and result side by side once the tool has the
   * room: the result runs along while the reader answers. Narrower it
   * stands under the questions, and a short status keeps it in view at the
   * bottom of the screen while the questions are.
   */
  .f-tool__split {
    display: grid;
    gap: var(--space-l);
    min-inline-size: 0;
  }

  .f-tool__status {
    position: sticky;
    inset-block-end: var(--space-xs);
    z-index: 1;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-m);
    background-color: var(--color-heading);
    color: var(--color-surface);
    font-weight: var(--weight-body-strong);
    line-height: var(--leading-heading);
  }

  .f-tool__status:empty {
    display: none;
  }

  @container (min-width: 50rem) {
    .f-tool__split {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: start;
      gap: var(--space-xl);
    }

    .f-tool__split > .f-tool__form {
      grid-column: 1;
      grid-row: 1;
    }

    .f-tool__split > .f-tool__result {
      position: sticky;
      inset-block-start: var(--space-m);
      grid-column: 2;
      grid-row: 1;
    }

    .f-tool__split > .f-tool__status {
      display: none;
    }
  }

  /* The head of a field: its label and, where a hint is not enough, the button to the explanation. */
  .f-tool__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  .f-tool__help {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 1.6em;
    block-size: 1.6em;
    margin-block-start: -0.05em;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background-color: transparent;
    box-shadow: inset 0 0 0 calc(var(--border-width) * 1.5) currentcolor;
    color: var(--color-heading);
    font: inherit;
    font-weight: var(--weight-body-strong);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease);
  }

  .f-tool__help:hover {
    background-color: var(--color-surface);
  }

  .f-tool__help[aria-expanded='true'] {
    background-color: var(--color-heading);
    color: var(--color-surface);
  }

  .f-tool__help:focus-visible,
  .f-tool__step:focus-visible,
  .f-tool__more > summary:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-accent);
    outline-offset: var(--border-width);
  }

  /* The explanation opens in place under the question; what counts and what not side by side. */
  .f-tool__explain {
    display: grid;
    gap: var(--space-xs) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(24ch, 100%), 1fr));
    max-inline-size: 70ch;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
    font-size: var(--step--1);
  }

  .f-tool__explain > :not(.f-tool__list) {
    grid-column: 1 / -1;
  }

  .f-tool__explain .f-tool__text {
    color: var(--color-ink);
  }

  .f-tool__list {
    display: grid;
    gap: var(--space-3xs);
    align-content: start;
  }

  .f-tool__list-title {
    font-weight: var(--weight-body-strong);
    color: var(--color-heading);
  }

  .f-tool__list ul {
    display: grid;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .f-tool__list li {
    position: relative;
    padding-inline-start: 1.4em;
  }

  .f-tool__list li::before {
    position: absolute;
    inset-inline-start: 0;
    font-weight: var(--weight-body-strong);
  }

  .f-tool__list[data-kind='in'] li::before {
    content: '✓';
    color: var(--color-heading);
  }

  .f-tool__list[data-kind='out'] li::before {
    content: '–';
    color: var(--color-muted);
  }

  /* A counter: minus, the number, plus. The engine counts; the number stays typeable. */
  .f-tool__stepper {
    display: inline-flex;
    align-items: stretch;
    inline-size: max-content;
    max-inline-size: 100%;
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-s);
    background-color: var(--color-surface);
  }

  .f-tool__stepper > .f-tool__input {
    inline-size: 4ch;
    min-inline-size: 0;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-weight: var(--weight-body-strong);
    text-align: center;
    appearance: textfield;
  }

  .f-tool__stepper > .f-tool__input::-webkit-inner-spin-button,
  .f-tool__stepper > .f-tool__input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  .f-tool__step {
    flex: none;
    inline-size: calc(var(--space-l) + var(--space-xs));
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background-color: transparent;
    color: var(--color-heading);
    font: inherit;
    font-size: var(--step-1);
    font-weight: var(--weight-body-strong);
    line-height: 1;
    cursor: pointer;
  }

  .f-tool__step:hover:not(:disabled) {
    background-color: var(--color-raised);
  }

  .f-tool__step:disabled {
    color: var(--color-line);
    cursor: default;
  }

  /* Yes or no as a switch: the options side by side in one field, the chosen one solid. */
  .f-tool__choices[data-kind='switch'] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: var(--space-3xs);
    inline-size: max-content;
    max-inline-size: 100%;
    padding: var(--space-3xs);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
  }

  .f-tool__choices[data-kind='switch'] > .f-tool__choice {
    position: relative;
    justify-content: center;
    min-inline-size: 5em;
    border-radius: var(--radius-s);
    box-shadow: none;
  }

  .f-tool__choices[data-kind='switch'] > .f-tool__choice:has(:checked) {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: none;
  }

  /* The radio is still there for keyboards and screen readers, the field shows the choice. */
  .f-tool__choices[data-kind='switch'] > .f-tool__choice > input {
    position: absolute;
    inline-size: var(--border-width);
    block-size: var(--border-width);
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
  }

  /* An input with its unit inside, such as an amount in euro. */
  .f-tool__affix {
    position: relative;
    display: grid;
    min-inline-size: 0;
  }

  .f-tool__affix > .f-tool__input {
    padding-inline-end: 2.4em;
  }

  .f-tool__unit {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--space-s);
    display: grid;
    align-items: center;
    color: var(--color-muted);
    font-weight: var(--weight-body-strong);
    pointer-events: none;
  }

  /* One entry of a list of the same details, such as one person. */
  .f-tool__item {
    display: grid;
    gap: var(--space-xs);
    min-inline-size: 0;
    padding: var(--space-s);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
  }

  .f-tool__item-title {
    font-weight: var(--weight-body-strong);
    color: var(--color-heading);
  }

  /*
   * A value against its limits: a bar, the value filled, a mark with its
   * label under it per limit. The tool places both with --f-tool-at, a
   * share from 0 to 1; the tiers say the same in words.
   */
  .f-tool__meter {
    position: relative;
    block-size: 0.8em;
    margin-block: calc(var(--leading-body) * 2em + var(--space-2xs));
    border-radius: var(--radius-round);
    background-color: var(--color-line);
    font-size: var(--step--1);
  }

  .f-tool__meter-value {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(min(var(--f-tool-at, 0), 1) * 100%);
    border-radius: inherit;
    background-color: var(--color-muted);
    transition: inline-size var(--duration-fast) var(--ease);
  }

  .f-tool__result[data-tone='positive'] .f-tool__meter-value {
    background-color: var(--color-accent);
  }

  .f-tool__result[data-tone='negative'] .f-tool__meter-value {
    background-color: var(--color-heading);
  }

  .f-tool__meter-mark {
    position: absolute;
    inset-block-start: -0.3em;
    inset-inline-start: calc(min(var(--f-tool-at, 0), 1) * 100%);
    display: grid;
    justify-items: center;
    padding-block-start: 1.6em;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-body);
    white-space: nowrap;
    translate: -50% 0;
  }

  .f-tool__meter-mark::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: calc(var(--border-width) * 2);
    block-size: 1.4em;
    background-color: var(--color-ink);
    translate: -50% 0;
  }

  /*
   * Limits close together would write over each other: the engine measures
   * the labels and sets a mark above the bar where there is no room under
   * it, and keeps only the tick where there is room on neither side.
   */
  .f-tool__meter-mark[data-side='above'] {
    inset-block: auto -0.3em;
    padding-block: 0 1.6em;
  }

  .f-tool__meter-mark[data-side='above']::before {
    inset-block: auto 0;
  }

  .f-tool__meter-mark[data-side='above'] > :first-child {
    order: 1;
  }

  .f-tool__meter-mark[data-side='none'] > * {
    visibility: hidden;
  }

  /* The last mark stands at the end of the bar and reads back from there. */
  .f-tool__meter-mark:last-child {
    justify-items: end;
    translate: -100% 0;
  }

  .f-tool__meter-mark:last-child::before {
    inset-inline: auto 0;
    translate: 0 0;
  }

  .f-tool__meter-mark > :first-child {
    font-weight: var(--weight-body-strong);
    color: var(--color-ink);
  }

  /* A tier in parts: its name, a detail under it, its limit at the end. */
  .f-tool__tier:has(.f-tool__tier-name) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 var(--space-xs);
  }

  .f-tool__tier:has(.f-tool__tier-name)::before {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }

  .f-tool__tier-name {
    grid-column: 2;
  }

  .f-tool__tier-detail {
    grid-column: 2;
    font-size: var(--step--1);
    font-weight: var(--weight-body);
    color: var(--color-muted);
  }

  .f-tool__tier > .f-tool__number {
    grid-row: 1;
    grid-column: 3;
    font-weight: var(--weight-body-strong);
  }

  /* More to open, such as the way there. */
  .f-tool__more {
    min-inline-size: 0;
  }

  .f-tool__more[open] > summary {
    margin-block-end: var(--space-xs);
  }

  .f-tool__more > summary {
    color: var(--color-heading);
    font-weight: var(--weight-body-strong);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  @supports (animation-timeline: view()) {
    @layer layout {
      .section > .l-wrap > * {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
      }
    }
  }
}

/*
 * Printing one tool (work package 56, "Drucken" in the contract): the
 * runtime marks the page and the tool, and the paper carries only the
 * tool's section, with the result, the way there and the sources, not the
 * questions or the buttons. Nor the meter: paper drops its bar and keeps
 * loose labels, and the tiers say the same in words. Outside the layers, so it wins over every
 * family the way paper does.
 */
@media print {
  html[data-print-tool] body > :not(main),
  html[data-print-tool] main > :not(:has(.f-tool[data-printing])) {
    display: none;
  }

  /* The section's room below would otherwise start an empty sheet. */
  html[data-print-tool] main > :has(.f-tool[data-printing]) {
    padding-block-end: 0;
  }

  html[data-print-tool]
    main
    > :has(.f-tool[data-printing])
    :is(
      .button,
      .f-tool__form,
      .f-tool__status,
      .f-tool__help,
      .f-tool__explain,
      .f-tool__actions,
      .f-tool__fallback,
      .f-tool__privacy,
      .f-tool__meter
    ) {
    display: none;
  }

  .f-tool[data-printing] .f-tool__split {
    display: block;
  }

  .f-tool[data-printing] :is(.f-tool__result, .f-tool__status) {
    position: static;
  }

  .f-tool__scroll {
    overflow: visible;
    contain: none;
  }

  .f-tool__table tr,
  .f-tool__tier {
    break-inside: avoid;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 var(--space-s);
  }
}

@layer tokens {
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Public Sans Fallback";
  src: local('Arial'), local('ArialMT');
  ascent-override: 90.5905%;
  descent-override: 21.4557%;
  line-gap-override: 0%;
  size-adjust: 104.8675%;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/sora-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/sora-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora Fallback";
  src: local('Arial'), local('ArialMT');
  ascent-override: 85.2913%;
  descent-override: 25.4995%;
  line-gap-override: 0%;
  size-adjust: 113.7279%;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local('Courier New'), local('CourierNewPSMT');
  ascent-override: 102.0166%;
  descent-override: 30.0049%;
  size-adjust: 99.9837%;
}
:root {
  --font-body: "Public Sans", "Public Sans Fallback", Arial, sans-serif;
  --font-heading: "Sora", "Sora Fallback", Arial, sans-serif;
  --font-accent: "JetBrains Mono", "JetBrains Mono Fallback", "Courier New", monospace;
  --weight-body: 400;
  --weight-body-strong: 600;
  --weight-heading: 600;
  --weight-heading-strong: 700;
  --weight-accent: 400;
  --weight-accent-strong: 600;
  --step--2: clamp(0.6082rem, 0.7232rem + -0.1277vw, 0.6944rem);
  --step--1: clamp(0.8272rem, 0.8354rem + -0.0091vw, 0.8333rem);
  --step-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.09rem + 0.4889vw, 1.53rem);
  --step-2: clamp(1.44rem, 1.2264rem + 0.9493vw, 2.0808rem);
  --step-3: clamp(1.728rem, 1.3607rem + 1.6324vw, 2.8299rem);
  --step-4: clamp(2.0736rem, 1.4819rem + 2.6297vw, 3.8486rem);
  --step-5: clamp(2.4883rem, 1.573rem + 4.0679vw, 5.2342rem);
  --step-6: clamp(2.986rem, 1.6085rem + 6.1222vw, 7.1185rem);
  --leading-body: 1.55;
  --leading-heading: 1.02;
  --tracking-heading: -0.035em;
  --case-heading: none;
  --eyebrow-font: var(--font-accent);
  --eyebrow-case: uppercase;
  --eyebrow-tracking: 0.08em;
  --measure: 64ch;
  --space-3xs: clamp(0.1975rem, 0.1811rem + 0.0732vw, 0.2469rem);
  --space-2xs: clamp(0.2963rem, 0.2716rem + 0.1097vw, 0.3704rem);
  --space-xs: clamp(0.4444rem, 0.4074rem + 0.1646vw, 0.5556rem);
  --space-s: clamp(0.6667rem, 0.6111rem + 0.2469vw, 0.8333rem);
  --space-m: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
  --space-l: clamp(1.5rem, 1.375rem + 0.5556vw, 1.875rem);
  --space-xl: clamp(2.25rem, 2.0625rem + 0.8333vw, 2.8125rem);
  --space-2xl: clamp(3.375rem, 3.0938rem + 1.25vw, 4.2188rem);
  --space-3xl: clamp(5.0625rem, 4.6406rem + 1.875vw, 6.3281rem);
  --space-4xl: clamp(7.5938rem, 6.9609rem + 2.8125vw, 9.4922rem);
  --width-content: 78rem;
  --width-wide: 96rem;
  --gutter: clamp(1rem, 0.3333rem + 2.963vw, 3rem);
  --radius-s: 0rem;
  --radius-m: 0rem;
  --radius-l: 0rem;
  --radius-round: 999rem;
  --border-width: 0.0625rem;
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 480ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
:root,
[data-scheme="base"] {
  color-scheme: light;
  --color-surface: #ffffff;
  --color-raised: #f6f6f6;
  --color-ink: #141416;
  --color-muted: #5f5f61;
  --color-heading: #141416;
  --color-accent: #1f7a97;
  --color-on-accent: #ffffff;
  --color-line: #e0e0e1;
  --color-mark: #d42824;
  --shadow-s: 0 0rem 0rem 0rem color-mix(in oklab, #141416 0%, transparent);
  --shadow-m: 0 0rem 0rem 0rem color-mix(in oklab, #141416 0%, transparent);
  --shadow-l: 0 0rem 0rem 0rem color-mix(in oklab, #141416 0%, transparent);
}
[data-scheme="soft"] {
  color-scheme: light;
  --color-surface: #e9f3f6;
  --color-raised: #ffffff;
  --color-ink: #141416;
  --color-muted: #545759;
  --color-heading: #141416;
  --color-accent: #1d738e;
  --color-on-accent: #ffffff;
  --color-line: #cbd4d7;
  --color-mark: #d42824;
  --shadow-s: 0 0rem 0rem 0rem color-mix(in oklab, #141416 0%, transparent);
  --shadow-m: 0 0rem 0rem 0rem color-mix(in oklab, #141416 0%, transparent);
  --shadow-l: 0 0rem 0rem 0rem color-mix(in oklab, #141416 0%, transparent);
}
[data-scheme="accent"] {
  color-scheme: dark;
  --color-surface: #ca2722;
  --color-raised: #cd342f;
  --color-ink: #ffffff;
  --color-muted: #fbefef;
  --color-heading: #ffffff;
  --color-accent: #ffffff;
  --color-on-accent: #ca2722;
  --color-line: #d75d59;
  --color-mark: #ffffff;
  --shadow-s: 0 0rem 0rem 0rem color-mix(in oklab, #ffffff 0%, transparent);
  --shadow-m: 0 0rem 0rem 0rem color-mix(in oklab, #ffffff 0%, transparent);
  --shadow-l: 0 0rem 0rem 0rem color-mix(in oklab, #ffffff 0%, transparent);
}
[data-scheme="inverse"] {
  color-scheme: dark;
  --color-surface: #10293b;
  --color-raised: #1e3647;
  --color-ink: #eceeef;
  --color-muted: #b7bfc4;
  --color-heading: #ffffff;
  --color-accent: #ec615d;
  --color-on-accent: #10293b;
  --color-line: #3b505e;
  --color-mark: #ef7a77;
  --shadow-s: 0 0rem 0rem 0rem color-mix(in oklab, #eceeef 0%, transparent);
  --shadow-m: 0 0rem 0rem 0rem color-mix(in oklab, #eceeef 0%, transparent);
  --shadow-l: 0 0rem 0rem 0rem color-mix(in oklab, #eceeef 0%, transparent);
}
}
@layer components {
/* story */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-story {
  /* One pixel at every size: the token set's border width. */
  --c-story-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-story-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-story-mark: var(--color-heading);
  --c-story-gap: var(--space-xs);
  --c-story-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-story-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-story-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-story-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-story-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-story-line) 100%;
  --c-story-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-story-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-story-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-story-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-story[data-scheme='soft'] {
  --c-story-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-story-line) solid var(--c-story-rule);
  background-image:
    linear-gradient(var(--c-story-rule) 0 0), linear-gradient(var(--c-story-rule) 0 0);
  background-position:
    var(--c-story-margin) 0,
    calc(100% - var(--c-story-margin)) 0;
  background-size: var(--c-story-line) 100%;
  background-repeat: no-repeat;
}

.c-story[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-story[data-scheme='inverse'],
.c-story[data-scheme='accent'] {
  --c-story-cell: var(--space-l);
  --c-story-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-story-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-story-line), transparent 0),
    linear-gradient(var(--c-story-fine) var(--c-story-line), transparent 0),
    linear-gradient(90deg, var(--c-story-fine) var(--c-story-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-story-cell) * 4) calc(var(--c-story-cell) * 4),
    calc(var(--c-story-cell) * 4) calc(var(--c-story-cell) * 4),
    var(--c-story-cell) var(--c-story-cell),
    var(--c-story-cell) var(--c-story-cell);
}

.c-story[data-scheme='accent'] {
  --c-story-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-story-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-story-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-story-line), transparent 0);
  background-size: calc(var(--c-story-cell) * 4) calc(var(--c-story-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-story .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-story .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-story .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-story-line);
  background-color: var(--c-story-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-story :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-story :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-story .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-story-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-story .button > svg,
.c-story .t-more > svg {
  display: none;
}

.c-story .button::after,
.c-story .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-story .button:hover::after,
.c-story .t-more:hover::after {
  translate: 0.25em 0;
}

.c-story .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-story-line) var(--color-heading);
}

.c-story .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-story .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-story-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-story :where(picture) {
  position: relative;
}

.c-story :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-story-gap));
  z-index: 1;
  color: var(--c-story-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-story-arm) var(--c-story-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-story-line) var(--c-story-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-story-arm) var(--c-story-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-story-line) var(--c-story-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-story-arm) var(--c-story-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-story-line) var(--c-story-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-story-arm) var(--c-story-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-story-line) var(--c-story-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-story[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-story-print);
}

.c-story[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Erzählung, Familie „Werkplan“. Running text that tells: how it came to be,
 * what changes, why it matters. The photo is a figure with crop marks; the
 * items, the turns of the story, are the cells of a table drawn in one line,
 * each with its number in the monospace. Three variants on the same fields:
 * standard: a tall photo beside the text, the turns as a row of cells below it.
 * statement: the heading as a large statement across the width, the text below
 *   it to the right, the turns as a column on the left, the photo as a panorama.
 * contrast: the turns become a before and after (or three stages) joined by
 *   arrows, the last cell filled in the accent; the photo stands beside the text.
 */

.c-story .c-story__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-story .c-story__text {
  display: grid;
  align-content: start;
  gap: var(--space-l);
}

.c-story .c-story__head {
  display: grid;
  gap: var(--space-s);
}

.c-story .c-story__title {
  max-inline-size: 20ch;
}

.c-story .c-story__lead {
  max-inline-size: 48ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

.c-story .c-story__body {
  display: grid;
  gap: var(--space-s);
  max-inline-size: var(--measure);
}

.c-story .c-story__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/*
 * The turns as a table: each cell drawn with a line all round, neighbours
 * sharing theirs (a cell steps back over the line before it), so the table
 * keeps single lines however its cells wrap.
 */
.c-story .c-story__turns {
  counter-reset: c-story-turn;
  display: grid;
  padding-block-start: var(--c-story-line);
  padding-inline-start: var(--c-story-line);
}

.c-story .c-story__turn {
  counter-increment: c-story-turn;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3xs);
  margin-block-start: calc(-1 * var(--c-story-line));
  margin-inline-start: calc(-1 * var(--c-story-line));
  padding: var(--space-s) var(--space-m) var(--space-m);
  border: var(--c-story-line) solid var(--c-story-rule);
}

.c-story .c-story__turn::before {
  content: counter(c-story-turn, decimal-leading-zero);
  margin-block-end: var(--space-3xs);
  font-family: var(--font-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  color: var(--color-mark, var(--color-accent));
}

.c-story .c-story__turn-title {
  font-weight: var(--weight-body-strong);
  color: var(--color-heading);
}

.c-story .c-story__turn-text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-muted);
}

/* standard: a tall photo beside the text. */

@container (min-width: 40rem) {
  .c-story:not([data-variant]) .c-story__turns {
    grid-template-columns: repeat(auto-fit, minmax(min(16ch, 100%), 1fr));
  }
}

@container (min-width: 56rem) {
  .c-story:not([data-variant]) .c-story__inner:has(.c-story__media) {
    grid-template-columns: minmax(0, var(--c-story-photo, 5fr)) minmax(0, var(--c-story-text, 6fr));
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .c-story:not([data-variant]) .c-story__media {
    position: sticky;
    inset-block-start: var(--space-xl);
  }

  .c-story:not([data-variant]) .c-story__photo {
    aspect-ratio: 4 / 5;
    max-block-size: 86vh;
  }

  .c-story:not([data-variant]) .c-story__text {
    padding-block-start: var(--space-l);
  }

  /* Without a photo the text keeps to a calm column. */
  .c-story:not([data-variant]) .c-story__inner:not(:has(.c-story__media)) .c-story__text {
    max-inline-size: calc(var(--measure) + var(--space-2xl));
  }
}

/* statement: the heading speaks across the width, the photo closes as a panorama. */

.c-story[data-variant='statement'] .c-story__title {
  max-inline-size: 18ch;
  font-size: var(--step-5);
  line-height: 1.04;
}

.c-story[data-variant='statement'] .c-story__lead {
  max-inline-size: 36ch;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
}

.c-story[data-variant='statement'] .c-story__media {
  --c-story-wide: min(100cqi - 2 * var(--gutter), var(--width-wide));
  order: 1;
  margin-inline: calc((100% - var(--c-story-wide)) / 2);
}

.c-story[data-variant='statement'] .c-story__photo {
  aspect-ratio: 16 / 9;
}

@container (min-width: 48rem) {
  .c-story[data-variant='statement'] .c-story__title {
    font-size: var(--step-6);
  }

  .c-story[data-variant='statement'] .c-story__text {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-l);
    row-gap: var(--space-xl);
  }

  .c-story[data-variant='statement'] .c-story__head {
    grid-column: 1 / -1;
    row-gap: var(--space-m);
  }

  .c-story[data-variant='statement'] .c-story__body {
    grid-column: 6 / -1;
    grid-row: 2;
  }

  .c-story[data-variant='statement'] .c-story__turns {
    grid-column: 1 / span 4;
    grid-row: 2 / span 2;
    align-content: start;
  }

  .c-story[data-variant='statement'] .c-story__text:not(:has(.c-story__turns)) .c-story__body {
    grid-column: 5 / -1;
  }

  .c-story[data-variant='statement'] .c-story__more {
    grid-column: 6 / -1;
  }

  .c-story[data-variant='statement'] .c-story__photo {
    aspect-ratio: 21 / 9;
  }
}

/* contrast: before and after; the last turn is where the reader wants to be. */

.c-story[data-variant='contrast'] .c-story__turn {
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-l) var(--space-l);
}

.c-story[data-variant='contrast'] .c-story__turn-title {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.c-story[data-variant='contrast'] .c-story__turn-text {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
}

.c-story[data-variant='contrast'] .c-story__turn:not(:last-child) .c-story__turn-text {
  color: var(--color-muted);
}

.c-story[data-variant='contrast'] .c-story__turn:last-child:not(:first-child) {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.c-story[data-variant='contrast'] .c-story__turn:last-child:not(:first-child)::before,
.c-story[data-variant='contrast'] .c-story__turn:last-child:not(:first-child) .c-story__turn-title,
.c-story[data-variant='contrast'] .c-story__turn:last-child:not(:first-child) .c-story__turn-text {
  color: var(--color-on-accent);
}

.c-story .c-story__arrow {
  display: none;
}

/* The arrow between the turns: a drawn arrow in a square box on the shared line. */
.c-story[data-variant='contrast'] .c-story__turn:not(:last-child) .c-story__arrow {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--space-l);
  inset-block-end: calc(-0.5 * var(--space-xl));
  display: grid;
  place-items: center;
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
  border: var(--c-story-line) solid var(--c-story-rule);
  background-color: var(--color-surface);
  color: var(--color-accent);
  rotate: 90deg;
}

.c-story[data-variant='contrast'] .c-story__arrow > svg {
  display: none;
}

.c-story[data-variant='contrast'] .c-story__arrow::before {
  content: '→';
  font-family: var(--font-accent);
  font-size: var(--step-0);
  line-height: 1;
}

@container (min-width: 56rem) {
  .c-story[data-variant='contrast'] .c-story__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-l);
    row-gap: var(--space-2xl);
  }

  .c-story[data-variant='contrast'] .c-story__text {
    display: contents;
  }

  .c-story[data-variant='contrast'] .c-story__head {
    grid-column: 1 / span 9;
    grid-row: 1;
  }

  .c-story[data-variant='contrast'] .c-story__media {
    grid-column: 1 / span 7;
    grid-row: 2;
  }

  .c-story[data-variant='contrast'] .c-story__photo {
    aspect-ratio: 3 / 2;
  }

  .c-story[data-variant='contrast'] .c-story__body {
    grid-column: 9 / -1;
    grid-row: 2;
    align-content: center;
  }

  .c-story[data-variant='contrast'] .c-story__inner:not(:has(.c-story__media)) .c-story__body {
    grid-column: 1 / span 8;
  }

  .c-story[data-variant='contrast'] .c-story__turns {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .c-story[data-variant='contrast'] .c-story__turn {
    padding: var(--space-l) var(--space-xl) var(--space-xl);
  }

  .c-story[data-variant='contrast'] .c-story__turn-text {
    font-size: var(--step-2);
  }

  .c-story[data-variant='contrast'] .c-story__turn:not(:last-child) .c-story__arrow {
    inset-inline: auto calc(-0.5 * var(--space-xl));
    inset-block: 50% auto;
    translate: 0 -50%;
    rotate: none;
  }

  .c-story[data-variant='contrast'] .c-story__more {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* Mirrored: the photo on the right. */

@container (min-width: 56rem) {
  .c-story:not([data-variant])[data-mirror] .c-story__inner:has(.c-story__media) {
    grid-template-columns: minmax(0, var(--c-story-text, 6fr)) minmax(0, var(--c-story-photo, 5fr));
    grid-auto-flow: dense;
  }

  .c-story:not([data-variant])[data-mirror] .c-story__media {
    grid-column: 2;
  }

  .c-story:not([data-variant])[data-mirror] .c-story__text {
    grid-column: 1;
  }

  .c-story[data-variant='contrast'][data-mirror] .c-story__media {
    grid-column: 6 / -1;
  }

  .c-story[data-variant='contrast'][data-mirror] .c-story__body {
    grid-column: 1 / span 4;
  }
}

/* Control photo: the photo takes less or more of the width beside the text. */

.c-story[data-photo='s'] {
  --c-story-photo: 4fr;
  --c-story-text: 7fr;
}

.c-story[data-photo='l'] {
  --c-story-photo: 7fr;
  --c-story-text: 5fr;
}

/* Control align: the statement centred, the text in a middle column below it. */

.c-story[data-variant='statement'][data-align='centre'] .c-story__head {
  justify-items: center;
  text-align: center;
}

.c-story[data-variant='statement'][data-align='centre'] .c-story__head > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-story[data-variant='statement'][data-align='centre'] .c-story__eyebrow {
  justify-self: center;
}

.c-story[data-variant='statement'][data-align='centre'] .c-story__eyebrow::after {
  content: none;
}

@container (min-width: 48rem) {
  .c-story[data-variant='statement'][data-align='centre'] .c-story__text .c-story__body,
  .c-story[data-variant='statement'][data-align='centre'] .c-story__text .c-story__more {
    grid-column: 3 / span 8;
    grid-row: auto;
  }

  .c-story[data-variant='statement'][data-align='centre'] .c-story__turns {
    grid-column: 3 / span 8;
    grid-row: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/*
 * A screenshot or graphic (data-fit='whole', set by the engine) keeps its own
 * shape instead of the place's, centred, never taller than the engine allows.
 */
.c-story .c-story__photo[data-fit='whole'] {
  inline-size: min(100%, var(--image-whole-inline));
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: var(--image-ratio);
  margin-inline: auto;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-story[data-component][data-section-id] picture[data-cutout],
.c-story[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-story[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-story[data-component][data-section-id] picture[data-cutout]::before,
.c-story[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-story[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* site-header */
/*
 * Kopf „Leiste“, Familie „Werkplan“, in klar's layout (Werkplan's look in header.css): the name on the left, the menu and the
 * contact on the right, in one calm line under a hairline. Short menus stand
 * in the line on wide screens, longer ones open as a sheet from the side.
 */

.c-site-header {
  padding-block: var(--space-m);
  border-block-end: var(--border-width) solid var(--color-line);
}

.c-site-header .c-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.c-site-header .c-site-header__brand {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: var(--weight-heading-strong);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  text-decoration: none;
  text-wrap: balance;
}

.c-site-header .c-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.c-site-header .c-site-header__contact {
  display: none;
}

@media (width >= 36rem) {
  .c-site-header .c-site-header__contact {
    display: inline-flex;
  }
}

.c-site-header .c-site-header__toggle,
.c-site-header .c-site-header__close {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background-color: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

.c-site-header .c-site-header__toggle:hover,
.c-site-header .c-site-header__close:hover {
  background-color: var(--color-raised);
}

/* The menu is a sheet from the side, opened by the popover attribute. */
.c-site-header .c-site-header__menu {
  inset: 0 0 0 auto;
  inline-size: min(100%, 40ch);
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: var(--space-s) var(--gutter) var(--space-xl);
  border: 0;
  background-color: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-l);
  overflow-y: auto;
}

.c-site-header .c-site-header__menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.c-site-header .c-site-header__menu::backdrop {
  background-color: color-mix(in oklab, var(--color-ink) 45%, transparent);
}

.c-site-header .c-site-header__menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-end: var(--space-s);
  border-block-end: var(--border-width) solid var(--color-line);
}

.c-site-header .c-site-header__menu-brand {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-strong);
  color: var(--color-heading);
}

.c-site-header .c-site-header__links {
  display: grid;
}

.c-site-header .c-site-header__link {
  display: block;
  padding-block: var(--space-xs);
  border-block-end: var(--border-width) solid var(--color-line);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.c-site-header .c-site-header__link:hover,
.c-site-header .c-site-header__link[aria-current='page'] {
  color: var(--color-accent);
}

.c-site-header .c-site-header__menu-contact {
  align-self: flex-start;
}

/* Short menus stand in the bar on wide screens. */
@media (width >= 64rem) {
  .c-site-header[data-nav='inline']
    :is(.c-site-header__toggle, .c-site-header__menu-head, .c-site-header__menu-contact) {
    display: none;
  }

  .c-site-header[data-nav='inline'] .c-site-header__actions {
    flex-direction: row-reverse;
    gap: var(--space-l);
  }

  .c-site-header[data-nav='inline'] .c-site-header__menu {
    display: block;
    position: static;
    inset: auto;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .c-site-header[data-nav='inline'] .c-site-header__links {
    display: flex;
    gap: var(--space-l);
  }

  .c-site-header[data-nav='inline'] .c-site-header__link {
    padding-block: var(--space-3xs);
    border: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-body);
    color: var(--color-ink);
    text-decoration: underline transparent var(--border-width);
    text-underline-offset: 0.35em;
    transition: text-decoration-color var(--duration-fast) var(--ease);
  }

  .c-site-header[data-nav='inline'] .c-site-header__link:hover,
  .c-site-header[data-nav='inline'] .c-site-header__link[aria-current='page'] {
    color: var(--color-ink);
    text-decoration-color: var(--color-accent);
  }
}

.c-site-header .c-site-header__logo,
.c-site-header .c-site-header__logo img {
  display: block;
  inline-size: auto;
  block-size: var(--space-xl);
}

/*
 * Kopf, Familie „Werkplan“: what both headers share, laid over klar's
 * layout of each version (header-bar.css, header-rows.css). The header is the
 * top edge of the sheet: one line in the heading's color under it, the menu
 * in the monospace's capitals, each link a cell between fine lines, the
 * contact a drawn rectangle with an arrow. On small screens and with long
 * menus the menu opens as a sheet from the side, edged by one line.
 */

.c-site-header {
  --c-site-header-line: var(--border-width);
  padding-block: var(--space-s);
  border-block-end: var(--c-site-header-line) solid var(--color-heading);
}

.c-site-header .c-site-header__brand {
  font-weight: var(--weight-heading-strong);
}

.c-site-header .c-site-header__contact,
.c-site-header .c-site-header__menu-contact {
  gap: 0.9em;
  border-radius: 0;
  padding: 0.85em 1.1em 0.8em;
  box-shadow: none;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-site-header .c-site-header__contact::after,
.c-site-header .c-site-header__menu-contact::after {
  content: '→';
}

.c-site-header .c-site-header__toggle,
.c-site-header .c-site-header__close {
  border: var(--c-site-header-line) solid var(--color-line);
  border-radius: 0;
}

.c-site-header .c-site-header__menu {
  border-inline-start: var(--c-site-header-line) solid var(--color-heading);
  box-shadow: none;
}

.c-site-header .c-site-header__menu-head {
  border-block-end-color: var(--color-heading);
}

.c-site-header .c-site-header__link {
  font-family: var(--font-accent);
  font-size: var(--step-0);
  font-weight: var(--weight-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*
 * In the line on wide screens each link is a cell of the title block: the
 * header has no padding there, the cells take the full height, a fine line
 * stands before each.
 */
@media (width >= 64rem) {
  .c-site-header[data-nav='inline'] {
    padding-block: 0;
  }

  .c-site-header[data-nav='inline'] .c-site-header__inner {
    align-items: stretch;
  }

  .c-site-header[data-nav='inline'] .c-site-header__brand {
    display: flex;
    align-items: center;
    padding-block: var(--space-s);
  }

  .c-site-header[data-nav='inline'] .c-site-header__actions {
    align-items: stretch;
    gap: var(--space-m);
  }

  .c-site-header[data-nav='inline'] .c-site-header__contact {
    align-self: center;
  }

  .c-site-header[data-nav='inline'] .c-site-header__nav,
  .c-site-header[data-nav='inline'] .c-site-header__menu {
    display: flex;
  }

  .c-site-header[data-nav='inline'] .c-site-header__links {
    gap: 0;
  }

  .c-site-header[data-nav='inline'] .c-site-header__links > li {
    display: flex;
  }

  .c-site-header[data-nav='inline'] .c-site-header__link {
    display: flex;
    align-items: center;
    padding: var(--space-s) var(--space-m);
    border-inline-start: var(--c-site-header-line) solid var(--color-line);
    font-family: var(--font-accent);
    font-size: var(--step--1);
    font-weight: var(--weight-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink);
    text-decoration: none;
    box-shadow: inset 0 calc(-2 * var(--c-site-header-line)) 0 transparent;
    transition: box-shadow var(--duration-fast) var(--ease);
  }

  .c-site-header[data-nav='inline'] .c-site-header__link:hover,
  .c-site-header[data-nav='inline'] .c-site-header__link[aria-current='page'] {
    color: var(--color-heading);
    box-shadow: inset 0 calc(-2 * var(--c-site-header-line)) 0 var(--color-accent);
  }
}

/* site-footer */
/*
 * Fuß „Spalten“, Familie „Werkplan“, in klar's layout (Werkplan's look in footer.css): the name and the contact on the left, the
 * menu in two columns on the right, the legal line below.
 */

.c-site-footer {
  padding-block: var(--space-2xl) var(--space-l);
}

.c-site-footer .c-site-footer__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-site-footer .c-site-footer__brand {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.c-site-footer .c-site-footer__name {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  text-decoration: none;
  text-wrap: balance;
  max-inline-size: 20ch;
}

.c-site-footer .c-site-footer__links {
  display: grid;
  gap: var(--space-2xs);
}

.c-site-footer a:not(.button, .c-site-footer__name) {
  color: var(--color-ink);
  text-decoration-color: color-mix(in oklab, var(--color-ink) 35%, transparent);
}

.c-site-footer a:not(.button, .c-site-footer__name):hover {
  text-decoration-color: var(--color-accent);
}

.c-site-footer .c-site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: var(--border-width) solid var(--color-line);
  font-size: var(--step--1);
  color: var(--color-muted);
}

.c-site-footer .c-site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

@media (width >= 48rem) {
  .c-site-footer .c-site-footer__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }

  .c-site-footer .c-site-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
  }

  .c-site-footer .c-site-footer__base {
    grid-column: 1 / -1;
  }
}

/*
 * Werkplan: the title block's cells. Name and contact in the first, the menu
 * in the second (below it on a phone, beside it on a wide screen), the legal
 * line as the last row across both.
 */
.c-site-footer {
  padding-block: var(--space-2xl);
}

.c-site-footer .c-site-footer__brand,
.c-site-footer .c-site-footer__nav {
  padding: var(--space-l);
}

.c-site-footer .c-site-footer__nav {
  border-block-start: var(--c-site-footer-line) solid var(--c-site-footer-frame);
}

.c-site-footer .c-site-footer__base {
  padding: var(--space-s) var(--space-l);
  border-block-start: var(--c-site-footer-line) solid var(--c-site-footer-frame);
}

@media (width >= 48rem) {
  .c-site-footer .c-site-footer__inner {
    align-items: stretch;
  }

  .c-site-footer .c-site-footer__nav {
    border-block-start: 0;
    border-inline-start: var(--c-site-footer-line) solid var(--c-site-footer-frame);
  }
}

/*
 * Fuß, Familie „Werkplan“: what both footers share, laid over klar's layout
 * of each version (footer-columns.css, footer-sign.css). The footer is the
 * sheet's title block on a blueprint (its default surface is inverse): the
 * grid of the plan in the scheme's line, the menu and the legal line in the
 * monospace's capitals, the contact a drawn rectangle with an arrow, the rules
 * of one line.
 */

.c-site-footer {
  --c-site-footer-line: var(--border-width);
  --c-site-footer-cell: var(--space-l);
}

.c-site-footer[data-scheme='inverse'],
.c-site-footer[data-scheme='accent'] {
  background-image:
    linear-gradient(var(--color-line) var(--c-site-footer-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-site-footer-line), transparent 0),
    linear-gradient(
      color-mix(in oklab, var(--color-line) 55%, transparent) var(--c-site-footer-line),
      transparent 0
    ),
    linear-gradient(
      90deg,
      color-mix(in oklab, var(--color-line) 55%, transparent) var(--c-site-footer-line),
      transparent 0
    );
  background-position: 50% 0;
  background-size:
    calc(var(--c-site-footer-cell) * 4) calc(var(--c-site-footer-cell) * 4),
    calc(var(--c-site-footer-cell) * 4) calc(var(--c-site-footer-cell) * 4),
    var(--c-site-footer-cell) var(--c-site-footer-cell),
    var(--c-site-footer-cell) var(--c-site-footer-cell);
}

.c-site-footer .c-site-footer__name {
  font-weight: var(--weight-heading-strong);
}

.c-site-footer .c-site-footer__contact {
  gap: 0.9em;
  border-radius: 0;
  padding: 0.95em 1.2em 0.9em;
  box-shadow: none;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-site-footer .c-site-footer__contact::after {
  content: '→';
}

.c-site-footer .c-site-footer__links a,
.c-site-footer .c-site-footer__base {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-site-footer .c-site-footer__links a {
  text-underline-offset: 0.3em;
}

.c-site-footer .c-site-footer__base {
  border-block-start-color: var(--color-heading);
}

/*
 * The title block: the footer's content stands in one frame, its parts in
 * cells divided by single lines (each version draws its own dividers).
 */
.c-site-footer {
  --c-site-footer-frame: color-mix(in oklab, var(--color-line) 45%, var(--color-heading));
}

.c-site-footer .c-site-footer__inner {
  gap: 0;
  border: var(--c-site-footer-line) solid var(--c-site-footer-frame);
  background-color: var(--color-surface);
}

/* opening */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-opening {
  /* One pixel at every size: the token set's border width. */
  --c-opening-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-opening-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-opening-mark: var(--color-heading);
  --c-opening-gap: var(--space-xs);
  --c-opening-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-opening-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-opening-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-opening-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-opening-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-opening-line) 100%;
  --c-opening-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-opening-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-opening-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-opening-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-opening[data-scheme='soft'] {
  --c-opening-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-opening-line) solid var(--c-opening-rule);
  background-image:
    linear-gradient(var(--c-opening-rule) 0 0), linear-gradient(var(--c-opening-rule) 0 0);
  background-position:
    var(--c-opening-margin) 0,
    calc(100% - var(--c-opening-margin)) 0;
  background-size: var(--c-opening-line) 100%;
  background-repeat: no-repeat;
}

.c-opening[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-opening[data-scheme='inverse'],
.c-opening[data-scheme='accent'] {
  --c-opening-cell: var(--space-l);
  --c-opening-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-opening-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-opening-line), transparent 0),
    linear-gradient(var(--c-opening-fine) var(--c-opening-line), transparent 0),
    linear-gradient(90deg, var(--c-opening-fine) var(--c-opening-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-opening-cell) * 4) calc(var(--c-opening-cell) * 4),
    calc(var(--c-opening-cell) * 4) calc(var(--c-opening-cell) * 4),
    var(--c-opening-cell) var(--c-opening-cell),
    var(--c-opening-cell) var(--c-opening-cell);
}

.c-opening[data-scheme='accent'] {
  --c-opening-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-opening-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-opening-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-opening-line), transparent 0);
  background-size: calc(var(--c-opening-cell) * 4) calc(var(--c-opening-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-opening .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-opening .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-opening .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-opening-line);
  background-color: var(--c-opening-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-opening :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-opening :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-opening .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-opening-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-opening .button > svg,
.c-opening .t-more > svg {
  display: none;
}

.c-opening .button::after,
.c-opening .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-opening .button:hover::after,
.c-opening .t-more:hover::after {
  translate: 0.25em 0;
}

.c-opening .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-opening-line) var(--color-heading);
}

.c-opening .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-opening .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-opening-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-opening :where(picture) {
  position: relative;
}

.c-opening :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-opening-gap));
  z-index: 1;
  color: var(--c-opening-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-opening-arm) var(--c-opening-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-opening-line) var(--c-opening-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-opening-arm) var(--c-opening-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-opening-line) var(--c-opening-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-opening-arm) var(--c-opening-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-opening-line) var(--c-opening-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-opening-arm) var(--c-opening-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-opening-line) var(--c-opening-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-opening[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-opening-print);
}

.c-opening[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Eröffnung, Familie „Werkplan“. The opening as the first sheet of a plan: the
 * eyebrow is the title block's row with the section's number, the headline
 * stands large and tight, the photo is a figure with crop marks and its
 * number. Screens or details (images) lie on it as insets: in the first style
 * as a detail drawn on paper with a frame of one line, in the second free.
 * The figures are a dimension chain: each value over its span between two end
 * ticks, the label below it in the monospace.
 * standard: the headline across the width, a wide photo below it.
 * split: text beside a photo that runs off the page; crop marks on its inner side.
 * cover: the photo fills the opening, the text lies on a veil of the surface.
 * stage: centred text above a band; the photo is the band, two screens stand on it.
 */

.c-opening {
  --c-opening-overlay: 1;
  position: relative;
  padding-block: var(--space-2xl);
  overflow: clip;
}

.c-opening .c-opening__inner {
  position: relative;
  display: grid;
  gap: var(--space-2xl);
}

.c-opening .c-opening__text {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.c-opening .c-opening__title {
  max-inline-size: min(16ch, 100%);
  margin-block: 0.15em 0.05em;
  font-size: var(--step-5);
  font-weight: var(--weight-heading);
  line-height: 1;
  text-wrap: balance;
}

.c-opening .c-opening__lead {
  max-inline-size: 46ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

.c-opening .c-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}

.c-opening .c-opening__media {
  --c-opening-wide: min(100cqi - 2 * var(--gutter), var(--width-wide));
  position: relative;
}

.c-opening .c-opening__photo {
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

.c-opening .c-opening__overlays {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-s);
}

/*
 * Overlays take their height, their width follows the picture: a phone stays
 * narrow, a screen wide. In the first style each is a detail on the sheet:
 * paper around it and a frame of one line. They carry no crop marks of their
 * own (they would land on the photo below).
 */
.c-opening .c-opening__overlay {
  display: block;
  --c-opening-overlay-block: calc(30cqi * var(--c-opening-overlay));
  flex: 0 0 auto;
  block-size: var(--c-opening-overlay-block);
  padding: var(--space-3xs);
  border: var(--c-opening-line) solid var(--c-opening-mark);
  background-color: var(--color-surface);
}

.c-opening .c-opening__overlay::before {
  content: none;
}

.c-opening .c-opening__overlay img {
  inline-size: auto;
  block-size: 100%;
}

.c-opening .c-opening__overlay:nth-child(2) {
  --c-opening-overlay-block: calc(40cqi * var(--c-opening-overlay));
}

@container (min-width: 48rem) {
  .c-opening .c-opening__overlay {
    --c-opening-overlay-block: calc(11cqi * var(--c-opening-overlay));
  }

  .c-opening .c-opening__overlay:nth-child(2) {
    --c-opening-overlay-block: calc(15cqi * var(--c-opening-overlay));
  }
}

/*
 * The figures as a dimension chain: the value over its span, the chain with
 * arrowheads and end ticks below it, the label under the chain. Neighbouring
 * spans meet at their ticks, so the row reads as one chain.
 */
.c-opening .c-opening__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10em, 100%), 1fr));
  gap: var(--space-l) 0;
}

.c-opening .c-opening__stat {
  display: grid;
  align-content: start;
  justify-items: center;
  min-inline-size: 0;
  text-align: center;
  color: var(--color-mark, var(--c-opening-mark));
}

.c-opening .c-opening__stat::before {
  content: '';
  order: -1;
  inline-size: 100%;
  block-size: 0.9em;
  margin-block: var(--space-2xs) var(--space-xs);
  background: var(--c-opening-chain);
  background-repeat: no-repeat;
}

.c-opening .c-opening__stat-value {
  order: -2;
  max-inline-size: 100%;
  padding-inline: var(--space-s);
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: var(--weight-heading);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  hyphens: auto;
}

.c-opening .c-opening__stat-label {
  max-inline-size: 100%;
  padding-inline: var(--space-s);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* On a phone two spans share a row; an odd last one takes the whole row. */
@container not (min-width: 48rem) {
  .c-opening .c-opening__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-opening .c-opening__stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@container (min-width: 48rem) {
  .c-opening .c-opening__title {
    font-size: var(--step-6);
  }
}

/* standard: the headline takes the width, a wide photo follows, screens lie on its edge. */

.c-opening:not([data-variant]) .c-opening__title {
  max-inline-size: min(18ch, 100%);
}

.c-opening:not([data-variant]) .c-opening__media {
  margin-inline: calc((100% - var(--c-opening-wide)) / 2);
}

.c-opening:not([data-variant]) .c-opening__photo {
  aspect-ratio: 4 / 3;
}

.c-opening:not([data-variant]) .c-opening__overlays {
  margin: calc(-1 * var(--space-3xl)) var(--space-m) 0;
  justify-content: flex-end;
}

@container (min-width: 48rem) {
  .c-opening:not([data-variant]) .c-opening__text {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    column-gap: var(--space-2xl);
  }

  .c-opening:not([data-variant]) .c-opening__eyebrow,
  .c-opening:not([data-variant]) .c-opening__title {
    grid-column: 1 / -1;
  }

  .c-opening:not([data-variant]) .c-opening__lead {
    grid-column: 1;
  }

  .c-opening:not([data-variant]) .c-opening__actions {
    grid-column: 2;
    grid-row: 3;
    justify-self: stretch;
    justify-content: flex-end;
  }

  .c-opening:not([data-variant]) .c-opening__photo {
    aspect-ratio: 21 / 9;
  }

  .c-opening:not([data-variant]) .c-opening__overlays {
    position: absolute;
    inset-inline-end: var(--space-2xl);
    inset-block-end: calc(-1 * var(--space-xl));
    margin: 0;
  }

  .c-opening:not([data-variant]) .c-opening__media:has(.c-opening__overlays) {
    margin-block-end: var(--space-xl);
  }
}

/* split: text and a photo that runs off the page on the right. */

.c-opening[data-variant='split'] .c-opening__media {
  margin-inline: calc(-1 * var(--gutter));
}

.c-opening[data-variant='split'] .c-opening__photo {
  aspect-ratio: 4 / 3;
}

/* Running off both edges of a phone, the photo has no corner to mark. */
.c-opening[data-variant='split'] .c-opening__photo::before {
  content: none;
}

.c-opening[data-variant='split'] .c-opening__overlays {
  margin: calc(-1 * var(--space-2xl)) var(--gutter) 0;
}

@container (min-width: 56rem) {
  .c-opening[data-variant='split'] {
    padding-block: var(--space-xl);
  }

  .c-opening[data-variant='split'] .c-opening__inner {
    grid-template-columns: minmax(0, var(--c-opening-text, 5fr)) minmax(
        0,
        var(--c-opening-photo, 6fr)
      );
    align-items: center;
    column-gap: var(--space-3xl);
  }

  .c-opening[data-variant='split'] .c-opening__text {
    padding-block: var(--space-2xl);
  }

  /* Beside the photo the headline has under half the width: a size that keeps long words whole. */
  .c-opening[data-variant='split'] .c-opening__title {
    --c-opening-title-size: min(var(--step-6), 4.4cqi);
    font-size: var(--c-opening-title-size);
  }

  .c-opening[data-variant='split'] .c-opening__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    margin-inline: 0 calc(-1 * max(var(--gutter), (100cqi - var(--width-content)) / 2));
  }

  .c-opening[data-variant='split'] .c-opening__photo {
    block-size: 100%;
    min-block-size: 72vh;
    aspect-ratio: auto;
  }

  /* The photo runs off the page on its outer side: the marks stand at its inner corners. */
  .c-opening[data-variant='split'] .c-opening__photo::before {
    content: '';
    clip-path: inset(0 50% 0 0);
  }

  .c-opening[data-variant='split'] .c-opening__overlays {
    position: absolute;
    inset-inline-start: calc(-1 * var(--space-2xl));
    inset-block-end: var(--space-xl);
    margin: 0;
  }

  .c-opening[data-variant='split'] .c-opening__stats {
    grid-column: 1;
  }
}

/* cover: the photo fills the opening, a veil of the surface carries the text. */

.c-opening[data-variant='cover'] {
  display: grid;
  align-items: end;
  min-block-size: 88vh;
  padding-block: var(--space-4xl) var(--space-2xl);
}

.c-opening[data-variant='cover'] .c-opening__inner {
  position: static;
}

.c-opening[data-variant='cover'] .c-opening__media {
  position: absolute;
  inset: 0;
}

.c-opening[data-variant='cover'] .c-opening__photo {
  position: absolute;
  inset: 0;
  block-size: 100%;
}

/* The photo is the sheet itself: no marks. */
.c-opening[data-variant='cover'] .c-opening__photo::before {
  content: none;
}

.c-opening[data-variant='cover'] .c-opening__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(
      to top,
      var(--color-surface) 0%,
      color-mix(in oklab, var(--color-surface) 80%, transparent) 26%,
      color-mix(in oklab, var(--color-surface) 0%, transparent) 62%
    ),
    linear-gradient(
      to right,
      color-mix(in oklab, var(--color-surface) 62%, transparent) 0%,
      color-mix(in oklab, var(--color-surface) 0%, transparent) 55%
    );
}

/*
 * On a narrow screen the text runs over most of the photo: it lies on a veil
 * of its own that fades in above it and reaches to the edges and the bottom,
 * so no photo takes its contrast. The overlays stand below the text, on that
 * veil, so the photo above keeps its subject free.
 */
.c-opening[data-variant='cover'] .c-opening__text::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: calc(-1 * var(--space-3xl)) -100vh;
  inset-inline: calc(50% - 50cqi);
  background-image: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--color-surface) 0%, transparent) 0%,
    color-mix(in oklab, var(--color-surface) 86%, transparent) var(--space-3xl)
  );
  pointer-events: none;
}

/* On the veil the label takes the ink: the muted grey loses contrast over a bright photo. */
.c-opening[data-variant='cover'] .c-opening__eyebrow {
  color: var(--color-ink);
}

/* Above the veil of the text (which paints after the media), so no veil dims them. */
.c-opening[data-variant='cover'] .c-opening__overlays {
  position: absolute;
  z-index: 3;
  justify-content: flex-end;
}

/*
 * Side by side at the two edges, two screens would be confetti. There they
 * stand below the text as one group at the end: one alone, or two
 * overlapping, the second in front and lower. They keep their height and their
 * width follows the picture; a screen (data-fit='whole') narrows with its
 * height following its shape when the group is wider than the content. The
 * text's inner box reserves the height of the group below it.
 */
@container not (min-width: 56rem) {
  .c-opening[data-variant='cover']:has(.c-opening__overlays) .c-opening__inner {
    --c-opening-stack: min(56cqi, 0.3 * var(--width-content));
    padding-block: min(30cqi, 0.15 * var(--width-content)) var(--c-opening-stack);
  }

  .c-opening[data-variant='cover']:has(.c-opening__overlay:nth-child(2)) .c-opening__inner {
    --c-opening-stack: max(
      min(40cqi, 0.22 * var(--width-content)),
      min(56cqi, 0.3 * var(--width-content)) + min(14cqi, 0.06 * var(--width-content))
    );
  }

  .c-opening[data-variant='cover'] .c-opening__overlays {
    align-items: flex-start;
    justify-content: flex-end;
    inset-block: auto var(--space-xl);
    inset-inline: var(--gutter);
  }

  .c-opening[data-variant='cover'] .c-opening__overlay {
    --c-opening-overlay-block: min(56cqi, 0.3 * var(--width-content));
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  .c-opening[data-variant='cover'] .c-opening__overlay:only-child {
    max-inline-size: 84%;
  }

  .c-opening[data-variant='cover'] .c-opening__overlay:first-child:not(:last-child) {
    --c-opening-overlay-block: min(40cqi, 0.22 * var(--width-content));
  }

  .c-opening[data-variant='cover'] .c-opening__overlay:nth-child(2) {
    z-index: 1;
    margin-block-start: min(14cqi, 0.06 * var(--width-content));
    margin-inline-start: calc(-1 * var(--space-xl));
  }
}

@container (min-width: 56rem) {
  /* Beside the text the photo stays open: the veil runs from the left, strong where the text is. */
  .c-opening[data-variant='cover'] .c-opening__media::before {
    background-image:
      linear-gradient(
        to top,
        var(--color-surface) 0%,
        color-mix(in oklab, var(--color-surface) 80%, transparent) 26%,
        color-mix(in oklab, var(--color-surface) 0%, transparent) 62%
      ),
      linear-gradient(
        to right,
        color-mix(in oklab, var(--color-surface) 84%, transparent) 0%,
        color-mix(in oklab, var(--color-surface) 72%, transparent) 40%,
        color-mix(in oklab, var(--color-surface) 0%, transparent) 64%
      );
  }

  .c-opening[data-variant='cover'] .c-opening__text::before {
    content: none;
  }

  /*
   * The overlays stand bottom right, low in the opening and mostly on the
   * veil that rises from the bottom, never on the upper half of the photo.
   * They stay clear of the text column (54% of the content width).
   */
  .c-opening[data-variant='cover']:has(.c-opening__overlays) .c-opening__inner {
    min-block-size: calc(46cqi - var(--space-4xl) - var(--space-2xl));
  }

  .c-opening[data-variant='cover'] .c-opening__overlays {
    inset-block: auto var(--space-xl);
    inset-inline-end: max(var(--gutter), (100cqi - var(--width-content)) / 2);
    max-inline-size: calc(0.44 * min(100cqi - 2 * var(--gutter), var(--width-content)));
  }

  .c-opening[data-variant='cover'] .c-opening__text,
  .c-opening[data-variant='cover'] .c-opening__stats {
    max-inline-size: 54%;
  }

  .c-opening[data-variant='cover'] .c-opening__overlay {
    --c-opening-overlay-block: calc(18cqi * var(--c-opening-overlay));
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  .c-opening[data-variant='cover'] .c-opening__overlay:first-child:not(:last-child) {
    --c-opening-overlay-block: calc(14cqi * var(--c-opening-overlay));
  }

  /* Large grows one screen to 1.25 and a pair to 1.1 only: bigger would climb onto the subject or into the text. */
  .c-opening[data-variant='cover'][data-overlay='l'] .c-opening__overlays {
    --c-opening-overlay: 1.25;
  }

  .c-opening[data-variant='cover'][data-overlay='l'] .c-opening__overlays:has(> :nth-child(2)) {
    --c-opening-overlay: 1.1;
  }
}

/* stage: centred text; the photo is the band, two screens stand on it. */

.c-opening[data-variant='stage'] .c-opening__text {
  justify-items: center;
  text-align: center;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-opening[data-variant='stage'] .c-opening__eyebrow {
  justify-self: center;
}

.c-opening[data-variant='stage'] .c-opening__eyebrow::after {
  content: none;
}

.c-opening[data-variant='stage'] .c-opening__title {
  max-inline-size: min(20ch, 100%);
}

.c-opening[data-variant='stage'] .c-opening__lead {
  max-inline-size: 52ch;
}

.c-opening[data-variant='stage'] .c-opening__actions {
  justify-content: center;
}

.c-opening[data-variant='stage'] .c-opening__media {
  margin-inline: calc((100% - var(--c-opening-wide)) / 2);
  background-color: var(--color-raised);
}

/* Without a photo the band is a drawn field of its own. */
.c-opening[data-variant='stage'] .c-opening__media:not(:has(.c-opening__photo)) {
  border: var(--c-opening-line) solid var(--c-opening-rule);
}

.c-opening[data-variant='stage'] .c-opening__photo {
  aspect-ratio: 21 / 9;
}

.c-opening[data-variant='stage'] .c-opening__media:has(.c-opening__overlays) .c-opening__photo {
  position: absolute;
  inset: 0;
  block-size: 100%;
  aspect-ratio: auto;
}

.c-opening[data-variant='stage']
  .c-opening__media:has(.c-opening__photo):has(.c-opening__overlays)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: color-mix(in oklab, var(--color-surface) 22%, transparent);
}

.c-opening[data-variant='stage'] .c-opening__overlays {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: var(--space-xl) var(--space-l);
}

.c-opening[data-variant='stage'] .c-opening__overlay {
  grid-row: 1;
  grid-column: 1 / -1;
  inline-size: 100%;
  block-size: auto;
}

.c-opening[data-variant='stage'] .c-opening__overlay img {
  inline-size: 100%;
  block-size: 100%;
}

.c-opening[data-variant='stage'] .c-opening__overlay:nth-child(2) {
  grid-column: 7 / -1;
  align-self: end;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  padding: var(--space-2xs);
  margin-block-end: calc(-1 * var(--space-m));
  object-fit: contain;
}

.c-opening[data-variant='stage'] .c-opening__stats {
  justify-items: stretch;
}

@container (min-width: 48rem) {
  .c-opening[data-variant='stage'] .c-opening__overlays {
    padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
  }

  .c-opening[data-variant='stage'] .c-opening__overlay:first-child:not(:last-child) {
    grid-column: 1 / span 9;
  }

  .c-opening[data-variant='stage'] .c-opening__overlay:nth-child(2) {
    grid-column: 9 / -1;
    margin-block-end: calc(-1 * var(--space-l));
  }
}

/* split, mirrored: the photo runs off the page on the left, the text stands on the right. */

@container (min-width: 56rem) {
  .c-opening[data-variant='split'][data-mirror] .c-opening__inner {
    grid-template-columns: minmax(0, var(--c-opening-photo, 6fr)) minmax(
        0,
        var(--c-opening-text, 5fr)
      );
    grid-auto-flow: dense;
  }

  .c-opening[data-variant='split'][data-mirror] .c-opening__media {
    grid-column: 1;
    margin-inline: calc(-1 * max(var(--gutter), (100cqi - var(--width-content)) / 2)) 0;
  }

  .c-opening[data-variant='split'][data-mirror] .c-opening__photo::before {
    clip-path: inset(0 0 0 50%);
  }

  .c-opening[data-variant='split'][data-mirror] .c-opening__overlays {
    inset-inline: auto calc(-1 * var(--space-2xl));
  }

  .c-opening[data-variant='split'][data-mirror] .c-opening__text,
  .c-opening[data-variant='split'][data-mirror] .c-opening__stats {
    grid-column: 2;
  }
}

/* Control overlay: the overlays smaller or clearly larger. */

.c-opening[data-overlay='s'] {
  --c-opening-overlay: 0.75;
}

.c-opening[data-overlay='l'] {
  --c-opening-overlay: 1.5;
}

/* Control photo: the photo takes less or more of the width beside the text. */

.c-opening[data-photo='s'] {
  --c-opening-photo: 4fr;
  --c-opening-text: 7fr;
}

.c-opening[data-photo='l'] {
  --c-opening-photo: 7fr;
  --c-opening-text: 5fr;
}

/*
 * A screenshot (data-fit='whole', set by the engine) keeps the height of its
 * place while the row has room. Where it has none, the screens narrow and
 * their height follows their shape, so the opening never cuts one off. On the
 * stage they stand in a grid of their own and are never cut.
 */
.c-opening:not([data-variant='stage']) .c-opening__overlay[data-fit='whole'] {
  flex: 0 1 calc(var(--c-opening-overlay-block) * var(--image-ratio));
  min-inline-size: 0;
  block-size: auto;
  aspect-ratio: var(--image-ratio);
}

.c-opening:not([data-variant='stage']) .c-opening__overlay[data-fit='whole'] img {
  inline-size: 100%;
  block-size: 100%;
}

/*
 * Control overlay-style (Arbeitspaket 47): '1' sets screens and details as
 * insets with paper and a frame (Als Detail), '2' lays them on the photo
 * free, without paper or frame.
 */
.c-opening[data-overlay-style='2'] .c-opening__overlay {
  padding: 0;
  border: 0;
  background-color: transparent;
}

/*
 * Photo style '2' (Lichtpause, shared.css) on a photo among the overlays: the
 * print color lies under the photo only, the paper of the inset stays paper.
 */
.c-opening[data-photo-style='2']:not([data-overlay-style='2'])
  .c-opening__overlay:not([data-fit='whole'], [data-cutout]) {
  background:
    linear-gradient(var(--c-opening-print) 0 0) content-box,
    var(--color-surface);
}

.c-opening[data-photo-style='2'][data-overlay-style='2']
  .c-opening__overlay:not([data-fit='whole'], [data-cutout]) {
  background: var(--c-opening-print);
}

/* The mark of an image made by AI (engine, Arbeitspaket 49) on the screens of the stage. */
.c-opening[data-variant='stage'] .c-opening__overlay:first-child:not(:last-child) > .ai-mark {
  inset-inline: var(--space-2xs) auto;
}

.c-opening[data-variant='stage'] .c-opening__overlay:nth-child(2) > .ai-mark {
  inset-block: auto var(--space-2xs);
}

/* The veil over the band lies over its photo, not over the photo's mark. */
.c-opening[data-variant='stage']
  .c-opening__media:has(.c-opening__overlays)
  .c-opening__photo[data-ai] {
  isolation: auto;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-opening[data-component][data-section-id] picture[data-cutout],
.c-opening[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-opening[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-opening[data-component][data-section-id] picture[data-cutout]::before,
.c-opening[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-opening[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* process */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-process {
  /* One pixel at every size: the token set's border width. */
  --c-process-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-process-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-process-mark: var(--color-heading);
  --c-process-gap: var(--space-xs);
  --c-process-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-process-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-process-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-process-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-process-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-process-line) 100%;
  --c-process-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-process-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-process-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-process-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-process[data-scheme='soft'] {
  --c-process-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-process-line) solid var(--c-process-rule);
  background-image:
    linear-gradient(var(--c-process-rule) 0 0), linear-gradient(var(--c-process-rule) 0 0);
  background-position:
    var(--c-process-margin) 0,
    calc(100% - var(--c-process-margin)) 0;
  background-size: var(--c-process-line) 100%;
  background-repeat: no-repeat;
}

.c-process[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-process[data-scheme='inverse'],
.c-process[data-scheme='accent'] {
  --c-process-cell: var(--space-l);
  --c-process-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-process-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-process-line), transparent 0),
    linear-gradient(var(--c-process-fine) var(--c-process-line), transparent 0),
    linear-gradient(90deg, var(--c-process-fine) var(--c-process-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-process-cell) * 4) calc(var(--c-process-cell) * 4),
    calc(var(--c-process-cell) * 4) calc(var(--c-process-cell) * 4),
    var(--c-process-cell) var(--c-process-cell),
    var(--c-process-cell) var(--c-process-cell);
}

.c-process[data-scheme='accent'] {
  --c-process-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-process-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-process-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-process-line), transparent 0);
  background-size: calc(var(--c-process-cell) * 4) calc(var(--c-process-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-process .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-process .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-process .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-process-line);
  background-color: var(--c-process-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-process :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-process :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-process .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-process-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-process .button > svg,
.c-process .t-more > svg {
  display: none;
}

.c-process .button::after,
.c-process .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-process .button:hover::after,
.c-process .t-more:hover::after {
  translate: 0.25em 0;
}

.c-process .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-process-line) var(--color-heading);
}

.c-process .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-process .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-process-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-process :where(picture) {
  position: relative;
}

.c-process :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-process-gap));
  z-index: 1;
  color: var(--c-process-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-process-arm) var(--c-process-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-process-line) var(--c-process-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-process-arm) var(--c-process-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-process-line) var(--c-process-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-process-arm) var(--c-process-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-process-line) var(--c-process-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-process-arm) var(--c-process-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-process-line) var(--c-process-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-process[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-process-print);
}

.c-process[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Ablauf, Familie „Werkplan“. The order as a dimension chain: every step is a
 * span between two end ticks with an arrowhead at each end, its number in the
 * monospace. Side by side the spans meet at their ticks and read as one chain;
 * where the steps stand one below the other (on a phone, in the timeline and
 * the chapters) the chain runs down a vertical line on their left, each step
 * as high as its span. Four variants on the same fields:
 * standard: the steps side by side on one line, the chain above their titles.
 * timeline: heading and picture stay put on the left, the steps run down the
 *   chain on the right, each number in a drawn square.
 * stairs: the steps rise from left to right, each a drawn field a step higher.
 * chapters: each step a row of a table with a large number, measured by the
 *   chain beside it.
 */

.c-process {
  --c-process-chain-color: var(--color-mark, var(--color-accent));
}

.c-process .c-process__inner {
  display: grid;
  gap: var(--space-2xl);
}

.c-process .c-process__head {
  display: grid;
  align-content: start;
  gap: var(--space-s);
}

.c-process .c-process__title {
  max-inline-size: 22ch;
}

.c-process .c-process__lead {
  max-inline-size: 52ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

.c-process .c-process__image {
  inline-size: 100%;
  margin-block-start: var(--space-m);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.c-process .c-process__steps {
  counter-reset: c-process-step;
  display: grid;
  gap: 0;
}

/*
 * One below the other, each step is a span of the vertical chain on its
 * left: its ticks lie on the boundaries between the steps.
 */
.c-process .c-process__step {
  counter-increment: c-process-step;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-inline-size: 0;
  padding: var(--space-s) 0 var(--space-l) calc(0.8em + var(--space-s));
}

.c-process .c-process__step::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.8em;
  color: var(--c-process-chain-color);
  background: var(--c-process-chain-v);
  background-repeat: no-repeat;
}

/* Two neighbouring spans share a tick: the next one draws it. */
.c-process .c-process__step:not(:last-child)::before {
  inset-block-end: calc(-1 * var(--c-process-line));
}

.c-process .c-process__marker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  color: var(--c-process-chain-color);
}

.c-process .c-process__marker::before {
  content: counter(c-process-step, decimal-leading-zero);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* The horizontal span of the chain, on a line of its own below the number. */
.c-process .c-process__marker::after {
  content: '';
  display: none;
  flex: 1 0 100%;
  block-size: 0.9em;
  background: var(--c-process-chain);
  background-repeat: no-repeat;
}

.c-process .c-process__icon {
  inline-size: 1.2em;
  block-size: 1.2em;
  stroke-width: 1.5;
}

.c-process .c-process__body {
  display: grid;
  gap: var(--space-2xs);
}

.c-process .c-process__step-title {
  font-size: var(--step-1);
  line-height: 1.2;
  /* Step titles stand in narrow columns: a long word breaks with a hyphen at every width. */
  hyphens: auto;
}

.c-process .c-process__step-text {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--color-muted);
}

.c-process .c-process__actions {
  justify-self: start;
}

/*
 * standard: side by side the steps meet at their ticks. Between two and four
 * columns per row where the container is middling, all in one row on a wide
 * one; the body keeps clear of the next span's tick.
 */

@container (min-width: 48rem) {
  .c-process:not([data-variant]) .c-process__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .c-process:not([data-variant]) .c-process__eyebrow {
    grid-column: 1 / -1;
  }

  .c-process:not([data-variant]) .c-process__title {
    grid-column: 1;
  }

  .c-process:not([data-variant]) .c-process__lead {
    grid-column: 2;
    grid-row: 2;
  }

  .c-process:not([data-variant]) .c-process__head:has(.c-process__image) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }

  .c-process:not([data-variant]) .c-process__head:has(.c-process__image) .c-process__eyebrow,
  .c-process:not([data-variant]) .c-process__head:has(.c-process__image) .c-process__lead {
    grid-column: 1;
    grid-row: auto;
  }

  .c-process:not([data-variant]) .c-process__image {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-block-start: 0;
    aspect-ratio: 4 / 3;
  }

  .c-process:not([data-variant]) .c-process__steps {
    grid-template-columns: repeat(auto-fit, minmax(min(15ch, 100%), 1fr));
    row-gap: var(--space-xl);
  }

  .c-process:not([data-variant]) .c-process__step {
    padding: 0;
  }

  .c-process:not([data-variant]) .c-process__step::before {
    content: none;
  }

  .c-process:not([data-variant]) .c-process__marker::after {
    display: block;
  }

  .c-process:not([data-variant]) .c-process__body {
    padding-inline-end: var(--space-m);
  }
}

@container (min-width: 72rem) {
  .c-process:not([data-variant]) .c-process__steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* timeline: the steps run down the chain; each number stands in a drawn square. */

.c-process[data-variant='timeline'] .c-process__step {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-m);
  padding: 0 0 var(--space-xl);
}

.c-process[data-variant='timeline'] .c-process__step:last-child {
  padding-block-end: 0;
}

/* The span runs from the square of one step to the square of the next. */
.c-process[data-variant='timeline'] .c-process__step::before {
  inset-block: 2.75em 0;
  inset-inline-start: calc(1.375em - 0.4em);
}

.c-process[data-variant='timeline'] .c-process__step:last-child::before {
  content: none;
}

.c-process[data-variant='timeline'] .c-process__marker {
  justify-content: center;
  inline-size: 2.75em;
  block-size: 2.75em;
  border: var(--c-process-line) solid var(--c-process-chain-color);
  background-color: var(--color-surface);
}

.c-process[data-variant='timeline'] .c-process__icon {
  display: none;
}

.c-process[data-variant='timeline'] .c-process__body {
  padding-block-start: 0.45em;
}

.c-process[data-variant='timeline'] .c-process__step-text {
  font-size: var(--step-0);
}

@container (min-width: 56rem) {
  .c-process[data-variant='timeline'] .c-process__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .c-process[data-variant='timeline'] .c-process__head {
    position: sticky;
    inset-block-start: var(--space-xl);
  }

  .c-process[data-variant='timeline'] .c-process__actions {
    grid-column: 2;
  }
}

/*
 * stairs: each step a drawn field, a shade deeper and, side by side, a step
 * higher than the one before; the fields share their lines.
 */

.c-process[data-variant='stairs'] .c-process__steps {
  padding-block-start: var(--c-process-line);
  padding-inline-start: var(--c-process-line);
}

.c-process[data-variant='stairs'] .c-process__step {
  --c-process-rise: 0;
  margin-block-start: calc(-1 * var(--c-process-line));
  margin-inline-start: calc(var(--c-process-rise) * var(--space-s) - var(--c-process-line));
  padding: var(--space-m) var(--space-m) var(--space-l) calc(0.8em + var(--space-m));
  border: var(--c-process-line) solid var(--c-process-rule);
  background-color: color-mix(
    in oklab,
    var(--color-accent) calc(var(--c-process-rise) * 2.5%),
    var(--color-surface)
  );
}

/* On the phone the chain runs inside each field, along its left. */
.c-process[data-variant='stairs'] .c-process__step::before {
  inset-block: var(--space-m) var(--space-l);
  inset-inline-start: var(--space-xs);
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(2) {
  --c-process-rise: 1;
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(3) {
  --c-process-rise: 2;
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(4) {
  --c-process-rise: 3;
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(5) {
  --c-process-rise: 4;
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(6) {
  --c-process-rise: 5;
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(7) {
  --c-process-rise: 6;
}

.c-process[data-variant='stairs'] .c-process__step:nth-child(8) {
  --c-process-rise: 7;
}

.c-process[data-variant='stairs'] .c-process__marker {
  justify-content: space-between;
}

@container (min-width: 48rem) {
  .c-process[data-variant='stairs'] .c-process__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .c-process[data-variant='stairs'] .c-process__eyebrow {
    grid-column: 1 / -1;
  }

  .c-process[data-variant='stairs'] .c-process__title {
    grid-column: 1;
  }

  .c-process[data-variant='stairs'] .c-process__lead {
    grid-column: 2;
    grid-row: 2;
  }

  .c-process[data-variant='stairs'] .c-process__head:has(.c-process__image) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }

  .c-process[data-variant='stairs'] .c-process__head:has(.c-process__image) .c-process__eyebrow,
  .c-process[data-variant='stairs'] .c-process__head:has(.c-process__image) .c-process__lead {
    grid-column: 1;
    grid-row: auto;
  }

  .c-process[data-variant='stairs'] .c-process__image {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-block-start: 0;
    aspect-ratio: 4 / 3;
  }

  .c-process[data-variant='stairs'] .c-process__steps {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
  }

  /* Side by side the chain runs across the tops of the fields, below their numbers. */
  .c-process[data-variant='stairs'] .c-process__step {
    margin-inline-start: calc(-1 * var(--c-process-line));
    padding: var(--space-m) var(--space-m)
      calc(var(--space-l) + var(--c-process-rise) * var(--space-l));
  }

  .c-process[data-variant='stairs'] .c-process__step::before {
    content: none;
  }

  .c-process[data-variant='stairs'] .c-process__marker::after {
    display: block;
  }
}

/* chapters: each step a row of a table with a large number, measured by the chain beside it. */

.c-process[data-variant='chapters'] .c-process__steps {
  border-block-start: var(--c-process-line) solid var(--c-process-rule);
}

.c-process[data-variant='chapters'] .c-process__step {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-l);
  align-items: baseline;
  padding-block: var(--space-l);
  border-block-end: var(--c-process-line) solid var(--c-process-rule);
}

/* The span lies on the rules between the rows, so it needs no tick of a neighbour. */
.c-process[data-variant='chapters'] .c-process__step::before,
.c-process[data-variant='chapters'] .c-process__step:not(:last-child)::before {
  inset-block: calc(-1 * var(--c-process-line));
}

.c-process[data-variant='chapters'] .c-process__marker {
  align-self: start;
}

.c-process[data-variant='chapters'] .c-process__marker::before {
  min-inline-size: 2ch;
  font-size: var(--step-5);
  font-weight: var(--weight-accent);
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.c-process[data-variant='chapters'] .c-process__icon {
  display: none;
}

.c-process[data-variant='chapters'] .c-process__step-title {
  font-size: var(--step-2);
}

.c-process[data-variant='chapters'] .c-process__step-text {
  max-inline-size: 54ch;
  font-size: var(--step-0);
}

@container (min-width: 56rem) {
  .c-process[data-variant='chapters'] .c-process__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .c-process[data-variant='chapters'] .c-process__head {
    position: sticky;
    inset-block-start: var(--space-xl);
  }

  .c-process[data-variant='chapters'] .c-process__actions {
    grid-column: 2;
  }

  .c-process[data-variant='chapters'] .c-process__body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--space-l);
    align-items: baseline;
  }
}

/*
 * A screenshot or graphic (data-fit='whole', set by the engine) keeps its own
 * shape instead of the place's, centred, never taller than the engine allows.
 */
.c-process .c-process__image[data-fit='whole'] {
  inline-size: min(100%, var(--image-whole-inline));
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: var(--image-ratio);
  margin-inline: auto;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-process[data-component][data-section-id] picture[data-cutout],
.c-process[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-process[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-process[data-component][data-section-id] picture[data-cutout]::before,
.c-process[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-process[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* proof */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-proof {
  /* One pixel at every size: the token set's border width. */
  --c-proof-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-proof-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-proof-mark: var(--color-heading);
  --c-proof-gap: var(--space-xs);
  --c-proof-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-proof-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-proof-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-proof-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-proof-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-proof-line) 100%;
  --c-proof-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-proof-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-proof-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-proof-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-proof[data-scheme='soft'] {
  --c-proof-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-proof-line) solid var(--c-proof-rule);
  background-image:
    linear-gradient(var(--c-proof-rule) 0 0), linear-gradient(var(--c-proof-rule) 0 0);
  background-position:
    var(--c-proof-margin) 0,
    calc(100% - var(--c-proof-margin)) 0;
  background-size: var(--c-proof-line) 100%;
  background-repeat: no-repeat;
}

.c-proof[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-proof[data-scheme='inverse'],
.c-proof[data-scheme='accent'] {
  --c-proof-cell: var(--space-l);
  --c-proof-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-proof-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-proof-line), transparent 0),
    linear-gradient(var(--c-proof-fine) var(--c-proof-line), transparent 0),
    linear-gradient(90deg, var(--c-proof-fine) var(--c-proof-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-proof-cell) * 4) calc(var(--c-proof-cell) * 4),
    calc(var(--c-proof-cell) * 4) calc(var(--c-proof-cell) * 4),
    var(--c-proof-cell) var(--c-proof-cell),
    var(--c-proof-cell) var(--c-proof-cell);
}

.c-proof[data-scheme='accent'] {
  --c-proof-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-proof-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-proof-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-proof-line), transparent 0);
  background-size: calc(var(--c-proof-cell) * 4) calc(var(--c-proof-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-proof .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-proof .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-proof .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-proof-line);
  background-color: var(--c-proof-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-proof :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-proof :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-proof .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-proof-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-proof .button > svg,
.c-proof .t-more > svg {
  display: none;
}

.c-proof .button::after,
.c-proof .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-proof .button:hover::after,
.c-proof .t-more:hover::after {
  translate: 0.25em 0;
}

.c-proof .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-proof-line) var(--color-heading);
}

.c-proof .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-proof .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-proof-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-proof :where(picture) {
  position: relative;
}

.c-proof :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-proof-gap));
  z-index: 1;
  color: var(--c-proof-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-proof-arm) var(--c-proof-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-proof-line) var(--c-proof-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-proof-arm) var(--c-proof-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-proof-line) var(--c-proof-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-proof-arm) var(--c-proof-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-proof-line) var(--c-proof-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-proof-arm) var(--c-proof-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-proof-line) var(--c-proof-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-proof[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-proof-print);
}

.c-proof[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Belege, Familie „Werkplan“. Figures that hold, and where they come from:
 * work done, partners, clients. Every figure needs its fact. Figures are
 * measures: each value stands over its span of a dimension chain (end ticks,
 * arrowheads), its label below in the monospace; references are the cells of
 * a table drawn in one line. Three variants on the same fields:
 * standard: the figures side by side as one chain; the references as a table below.
 * figure: the first figure very large over a chain of its own, the others as
 *   rows of a data sheet beside it.
 * references: the references with their pictures carry the section, the
 *   figures close it as a short chain.
 */

.c-proof .c-proof__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-proof .c-proof__head {
  display: grid;
  align-content: start;
  gap: var(--space-s);
}

.c-proof .c-proof__head:empty {
  display: none;
}

.c-proof .c-proof__title {
  max-inline-size: 22ch;
}

.c-proof .c-proof__lead {
  max-inline-size: 50ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

/*
 * The figures as a dimension chain: the value over its span, the chain below
 * it, the label under the chain. Neighbouring spans meet at their ticks.
 */
.c-proof .c-proof__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11em, 100%), 1fr));
  gap: var(--space-xl) 0;
}

.c-proof .c-proof__stat {
  display: grid;
  align-content: start;
  justify-items: center;
  min-inline-size: 0;
  text-align: center;
  color: var(--color-mark, var(--c-proof-mark));
}

.c-proof .c-proof__stat::before {
  content: '';
  order: -1;
  inline-size: 100%;
  block-size: 0.9em;
  margin-block: var(--space-xs) var(--space-xs);
  background: var(--c-proof-chain);
  background-repeat: no-repeat;
}

.c-proof .c-proof__stat-value {
  order: -2;
  max-inline-size: 100%;
  padding-inline: var(--space-s);
  font-family: var(--font-heading);
  font-size: var(--step-4);
  font-weight: var(--weight-heading);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  hyphens: auto;
}

.c-proof .c-proof__stat-label {
  max-inline-size: 100%;
  padding-inline: var(--space-s);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/*
 * The references as a table: each cell drawn with a line all round,
 * neighbours sharing theirs (a cell steps back over the line before it).
 */
.c-proof .c-proof__refs {
  display: grid;
  padding-block-start: var(--c-proof-line);
  padding-inline-start: var(--c-proof-line);
}

.c-proof .c-proof__ref {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  min-inline-size: 0;
  margin-block-start: calc(-1 * var(--c-proof-line));
  margin-inline-start: calc(-1 * var(--c-proof-line));
  padding: var(--space-s) var(--space-m) var(--space-m);
  border: var(--c-proof-line) solid var(--c-proof-rule);
}

.c-proof .c-proof__ref-body {
  display: grid;
  gap: var(--space-3xs);
}

.c-proof .c-proof__ref-title {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.c-proof .c-proof__ref-text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-muted);
}

.c-proof .c-proof__ref-photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* The pictures of references stand in their cells: the cell is their frame. */
.c-proof .c-proof__ref-photo::before {
  content: none;
}

/* standard: the figures as one chain, the references as a table below. */

.c-proof:not([data-variant]) .c-proof__refs {
  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
}

.c-proof:not([data-variant]) .c-proof__ref:has(.c-proof__ref-photo) {
  grid-template-columns: 3.5em minmax(0, 1fr);
  align-items: center;
}

.c-proof:not([data-variant]) .c-proof__ref-photo {
  aspect-ratio: 1;
}

/* On a phone two spans share a row; an odd last one takes the whole row. */
@container not (min-width: 48rem) {
  .c-proof:not([data-variant]) .c-proof__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-proof:not([data-variant]) .c-proof__stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .c-proof:not([data-variant]) .c-proof__stat-value {
    font-size: var(--step-3);
  }
}

@container (min-width: 48rem) {
  .c-proof:not([data-variant]) .c-proof__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .c-proof:not([data-variant]) .c-proof__eyebrow {
    grid-column: 1 / -1;
  }

  .c-proof:not([data-variant]) .c-proof__title {
    grid-column: 1;
  }

  .c-proof:not([data-variant]) .c-proof__lead {
    grid-column: 2;
    grid-row: 2;
  }

  .c-proof:not([data-variant]) .c-proof__stats {
    padding-block: var(--space-m);
  }

  .c-proof:not([data-variant]) .c-proof__stat-value {
    font-size: var(--step-5);
  }

  /* Four figures share the line: one step smaller, so none breaks. */
  .c-proof:not([data-variant]) .c-proof__stats:has(> :nth-child(4)) .c-proof__stat-value {
    font-size: var(--step-4);
  }
}

/* figure: the first figure very large over its chain, the others as rows of a data sheet. */

.c-proof[data-variant='figure'] .c-proof__stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.c-proof[data-variant='figure'] .c-proof__stat:first-child {
  --c-proof-big: min(calc(var(--step-6) * 1.6), 17cqi);
  justify-items: start;
  text-align: start;
  padding-block-end: var(--space-m);
}

.c-proof[data-variant='figure'] .c-proof__stat:first-child::before {
  margin-block: calc(var(--c-proof-big) * 0.1 + var(--space-2xs)) var(--space-s);
}

.c-proof[data-variant='figure'] .c-proof__stat:first-child .c-proof__stat-value {
  padding-inline: 0;
  font-size: var(--c-proof-big);
  line-height: 0.95;
  color: var(--color-mark, var(--color-accent));
}

.c-proof[data-variant='figure'] .c-proof__stat:first-child .c-proof__stat-label {
  max-inline-size: 40ch;
  padding-inline: 0;
  font-size: var(--step-0);
  color: var(--color-ink);
}

.c-proof[data-variant='figure'] .c-proof__stat:not(:first-child) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--space-m);
  justify-items: start;
  align-items: baseline;
  text-align: start;
  padding-block: var(--space-s);
  border-block-start: var(--c-proof-line) solid var(--c-proof-rule);
}

.c-proof[data-variant='figure'] .c-proof__stat:last-child:not(:first-child) {
  border-block-end: var(--c-proof-line) solid var(--c-proof-rule);
}

.c-proof[data-variant='figure'] .c-proof__stat:not(:first-child)::before {
  content: none;
}

.c-proof[data-variant='figure'] .c-proof__stat:not(:first-child) .c-proof__stat-value {
  padding-inline: 0;
  font-size: var(--step-2);
}

.c-proof[data-variant='figure'] .c-proof__stat:not(:first-child) .c-proof__stat-label {
  padding-inline: 0;
}

.c-proof[data-variant='figure'] .c-proof__refs {
  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
}

.c-proof[data-variant='figure'] .c-proof__ref:has(.c-proof__ref-photo) {
  grid-template-columns: 3.5em minmax(0, 1fr);
  align-items: center;
}

.c-proof[data-variant='figure'] .c-proof__ref-photo {
  aspect-ratio: 1;
}

@container (min-width: 56rem) {
  /* The small figures follow the heading closely; the space sits around the block. */
  .c-proof[data-variant='figure'] .c-proof__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-3xl);
    row-gap: 0;
  }

  .c-proof[data-variant='figure'] .c-proof__head {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-block-end: var(--space-l);
  }

  .c-proof[data-variant='figure'] .c-proof__stats {
    display: contents;
  }

  .c-proof[data-variant='figure'] .c-proof__stat:first-child {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
    padding-block-end: 0;
  }

  .c-proof[data-variant='figure'] .c-proof__stat:first-child .c-proof__stat-value {
    --c-proof-big: min(calc(var(--step-6) * 1.9), 15cqi);
  }

  .c-proof[data-variant='figure'] .c-proof__stat:not(:first-child) {
    grid-column: 2;
  }

  .c-proof[data-variant='figure'] .c-proof__refs,
  .c-proof[data-variant='figure'] .c-proof__more {
    grid-column: 1 / -1;
  }

  .c-proof[data-variant='figure'] .c-proof__refs {
    margin-block-start: var(--space-2xl);
  }

  .c-proof[data-variant='figure'] .c-proof__more {
    margin-block-start: var(--space-l);
  }
}

/* references: the references carry the section, the figures close it as a short chain. */

.c-proof[data-variant='references'] .c-proof__refs {
  order: 1;
}

.c-proof[data-variant='references'] .c-proof__ref {
  padding: var(--space-s) var(--space-s) var(--space-m);
}

.c-proof[data-variant='references'] .c-proof__ref-body {
  padding-inline: var(--space-3xs);
}

.c-proof[data-variant='references'] .c-proof__ref-title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  text-transform: none;
}

.c-proof[data-variant='references'] .c-proof__ref-text {
  font-size: var(--step-0);
}

.c-proof[data-variant='references'] .c-proof__stats {
  order: 2;
  grid-template-columns: repeat(auto-fit, minmax(min(11em, 100%), 1fr));
}

.c-proof[data-variant='references'] .c-proof__stat-value {
  font-size: var(--step-2);
  color: var(--color-mark, var(--color-accent));
}

.c-proof[data-variant='references'] .c-proof__more {
  order: 3;
}

@container (min-width: 48rem) {
  .c-proof[data-variant='references'] .c-proof__refs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 64rem) {
  .c-proof[data-variant='references'] .c-proof__refs:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-proof[data-variant='references'] .c-proof__refs:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Control head: the head stacked or centred instead of title and lead side by side. */

.c-proof[data-head='centred'] .c-proof__head {
  justify-items: center;
  text-align: center;
}

.c-proof[data-head='centred'] .c-proof__head > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-proof[data-head='centred'] .c-proof__eyebrow {
  justify-self: center;
}

.c-proof[data-head='centred'] .c-proof__eyebrow::after {
  content: none;
}

@container (min-width: 48rem) {
  .c-proof[data-head='stacked'] .c-proof__head,
  .c-proof[data-head='centred'] .c-proof__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-proof[data-head='stacked'] .c-proof__head > *,
  .c-proof[data-head='centred'] .c-proof__head > * {
    grid-column: 1;
    grid-row: auto;
  }
}

/*
 * A screenshot or graphic (data-fit='whole', set by the engine) keeps its own
 * shape instead of the place's, centred, never taller than the engine allows.
 */
.c-proof .c-proof__ref-photo[data-fit='whole'] {
  inline-size: min(100%, var(--image-whole-inline));
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: var(--image-ratio);
  margin-inline: auto;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-proof[data-component][data-section-id] picture[data-cutout],
.c-proof[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-proof[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-proof[data-component][data-section-id] picture[data-cutout]::before,
.c-proof[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-proof[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* services */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-services {
  /* One pixel at every size: the token set's border width. */
  --c-services-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-services-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-services-mark: var(--color-heading);
  --c-services-gap: var(--space-xs);
  --c-services-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-services-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-services-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-services-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-services-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-services-line) 100%;
  --c-services-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-services-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-services-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-services-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-services[data-scheme='soft'] {
  --c-services-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-services-line) solid var(--c-services-rule);
  background-image:
    linear-gradient(var(--c-services-rule) 0 0), linear-gradient(var(--c-services-rule) 0 0);
  background-position:
    var(--c-services-margin) 0,
    calc(100% - var(--c-services-margin)) 0;
  background-size: var(--c-services-line) 100%;
  background-repeat: no-repeat;
}

.c-services[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-services[data-scheme='inverse'],
.c-services[data-scheme='accent'] {
  --c-services-cell: var(--space-l);
  --c-services-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-services-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-services-line), transparent 0),
    linear-gradient(var(--c-services-fine) var(--c-services-line), transparent 0),
    linear-gradient(90deg, var(--c-services-fine) var(--c-services-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-services-cell) * 4) calc(var(--c-services-cell) * 4),
    calc(var(--c-services-cell) * 4) calc(var(--c-services-cell) * 4),
    var(--c-services-cell) var(--c-services-cell),
    var(--c-services-cell) var(--c-services-cell);
}

.c-services[data-scheme='accent'] {
  --c-services-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-services-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-services-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-services-line), transparent 0);
  background-size: calc(var(--c-services-cell) * 4) calc(var(--c-services-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-services .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-services .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-services .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-services-line);
  background-color: var(--c-services-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-services :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-services :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-services .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-services-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-services .button > svg,
.c-services .t-more > svg {
  display: none;
}

.c-services .button::after,
.c-services .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-services .button:hover::after,
.c-services .t-more:hover::after {
  translate: 0.25em 0;
}

.c-services .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-services-line) var(--color-heading);
}

.c-services .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-services .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-services-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-services :where(picture) {
  position: relative;
}

.c-services :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-services-gap));
  z-index: 1;
  color: var(--c-services-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-services-arm) var(--c-services-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-services-line) var(--c-services-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-services-arm) var(--c-services-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-services-line) var(--c-services-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-services-arm) var(--c-services-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-services-line) var(--c-services-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-services-arm) var(--c-services-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-services-line) var(--c-services-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-services[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-services-print);
}

.c-services[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Leistungen, Familie „Werkplan“. What the business offers, each with a short
 * text, numbered in the monospace like the positions of a parts list; an icon
 * where it helps. Three variants on the same fields:
 * standard: the services as the cells of a table drawn in one line, the photo
 *   as a band with crop marks between heading and table; pictures of single
 *   services stand at the top of their cells with their number.
 * list: heading and photo stay on the left, the services run down the rows of
 *   a list, each with its number or icon in a drawn square.
 * points: a large photo runs off the page on the left (crop marks on its
 *   inner side), the services stand beside it as numbered points between rules.
 */

.c-services .c-services__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-services .c-services__head {
  display: grid;
  align-content: start;
  gap: var(--space-s);
}

.c-services .c-services__title {
  max-inline-size: 20ch;
}

.c-services .c-services__lead {
  max-inline-size: 50ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

.c-services .c-services__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.c-services .c-services__items {
  counter-reset: c-services-item;
  display: grid;
  gap: var(--space-xl) var(--space-l);
}

.c-services .c-services__item {
  counter-increment: c-services-item;
  display: grid;
  align-content: start;
  gap: var(--space-s);
  min-inline-size: 0;
}

.c-services .c-services__item-photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The pictures of single services stand inside their cell or row: the cell is their frame. */
.c-services .c-services__item-photo::before {
  content: none;
}

.c-services .c-services__marker {
  display: flex;
  align-items: center;
  color: var(--color-mark, var(--color-accent));
}

.c-services .c-services__marker:empty::before {
  content: counter(c-services-item, decimal-leading-zero);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.c-services .c-services__icon {
  inline-size: 1.5em;
  block-size: 1.5em;
  stroke-width: 1.5;
}

.c-services .c-services__body {
  display: grid;
  gap: var(--space-2xs);
}

.c-services .c-services__item-title {
  font-size: var(--step-1);
  line-height: 1.2;
}

.c-services .c-services__item-text {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--color-muted);
}

.c-services .c-services__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
}

/*
 * standard: the services as a table. Each cell is drawn with a line all
 * round, neighbours share theirs (a cell steps back over the line before it),
 * so the table keeps single lines however many cells a row holds.
 */

.c-services:not([data-variant]) .c-services__media {
  --c-services-wide: min(100cqi - 2 * var(--gutter), var(--width-wide));
  margin-inline: calc((100% - var(--c-services-wide)) / 2);
}

.c-services:not([data-variant]) .c-services__items {
  gap: 0;
  padding-block-start: var(--c-services-line);
  padding-inline-start: var(--c-services-line);
}

.c-services:not([data-variant]) .c-services__item {
  margin-block-start: calc(-1 * var(--c-services-line));
  margin-inline-start: calc(-1 * var(--c-services-line));
  padding: var(--space-m) var(--space-m) var(--space-l);
  border: var(--c-services-line) solid var(--c-services-rule);
}

@container (min-width: 48rem) {
  .c-services:not([data-variant]) .c-services__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .c-services:not([data-variant]) .c-services__eyebrow {
    grid-column: 1 / -1;
  }

  .c-services:not([data-variant]) .c-services__title {
    grid-column: 1;
  }

  .c-services:not([data-variant]) .c-services__lead {
    grid-column: 2;
    grid-row: 2;
  }

  .c-services:not([data-variant]) .c-services__photo {
    aspect-ratio: 21 / 9;
  }

  .c-services:not([data-variant]) .c-services__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-services:not([data-variant]) .c-services__item {
    padding: var(--space-l) var(--space-l) var(--space-xl);
  }
}

/*
 * Three in a row where they fit, four side by side; never three and a lonely
 * one: ten stand in two columns, eleven and twelve in threes like six and nine.
 */
@container (min-width: 64rem) {
  .c-services:not([data-variant]):not([data-columns]) .c-services__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-services:not([data-variant]):not([data-columns])
    .c-services__items:has(> :nth-child(2):last-child),
  .c-services:not([data-variant]):not([data-columns])
    .c-services__items:has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-services:not([data-variant]):not([data-columns])
    .c-services__items:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* list: heading and photo stay put, the services run down the rows of a list. */

.c-services[data-variant='list'] .c-services__items {
  gap: 0;
  border-block-start: var(--c-services-line) solid var(--c-services-rule);
}

.c-services[data-variant='list'] .c-services__item {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-m);
  padding-block: var(--space-m);
  border-block-end: var(--c-services-line) solid var(--c-services-rule);
}

.c-services[data-variant='list'] .c-services__marker {
  justify-content: center;
  inline-size: 2.75em;
  block-size: 2.75em;
  border: var(--c-services-line) solid var(--color-mark, var(--color-accent));
}

.c-services[data-variant='list'] .c-services__icon {
  inline-size: 1.25em;
  block-size: 1.25em;
}

/* A picture of the service takes the place of the icon. */
.c-services[data-variant='list'] .c-services__item-photo {
  grid-row: 1 / span 2;
  inline-size: 4.5em;
  aspect-ratio: 1;
}

.c-services[data-variant='list']
  .c-services__item:has(.c-services__item-photo)
  .c-services__marker {
  display: none;
}

.c-services[data-variant='list'] .c-services__body {
  align-self: center;
}

.c-services[data-variant='list'] .c-services__item-text {
  font-size: var(--step-0);
}

@container (min-width: 56rem) {
  .c-services[data-variant='list'] .c-services__inner {
    grid-template-columns: minmax(0, var(--c-services-photo, 5fr)) minmax(
        0,
        var(--c-services-text, 7fr)
      );
    column-gap: var(--space-3xl);
    align-items: start;
  }

  /* Heading and photo scroll with the page: a sticky heading would slide under the photo. */
  .c-services[data-variant='list'] .c-services__head {
    grid-column: 1;
  }

  .c-services[data-variant='list'] .c-services__media {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .c-services[data-variant='list'] .c-services__photo {
    aspect-ratio: 4 / 5;
  }

  .c-services[data-variant='list'] .c-services__items {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .c-services[data-variant='list'] .c-services__actions {
    grid-column: 1;
    grid-row: 3;
  }

  .c-services[data-variant='list']
    .c-services__inner:not(:has(.c-services__media))
    .c-services__actions {
    grid-row: 2;
  }

  .c-services[data-variant='list'] .c-services__item {
    column-gap: var(--space-l);
    padding-block: var(--space-l);
  }
}

/* points: a large photo runs off the page, the services stand beside it as points. */

.c-services[data-variant='points'] .c-services__media {
  margin-inline: calc(-1 * var(--gutter));
}

/* Running off both edges of a phone, the photo has no corner to mark. */
.c-services[data-variant='points'] .c-services__photo::before {
  content: none;
}

.c-services[data-variant='points'] .c-services__items {
  gap: 0;
  border-block-start: var(--c-services-line) solid var(--c-services-rule);
}

.c-services[data-variant='points'] .c-services__item {
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-s);
  padding-block: var(--space-s) var(--space-m);
  border-block-end: var(--c-services-line) solid var(--c-services-rule);
}

.c-services[data-variant='points'] .c-services__marker {
  align-self: start;
  padding-block-start: 0.35em;
}

.c-services[data-variant='points'] .c-services__icon {
  inline-size: 1.25em;
  block-size: 1.25em;
}

/* A picture of the service takes the place of the number, small. */
.c-services[data-variant='points'] .c-services__item:has(.c-services__item-photo) {
  grid-template-columns: 4.5em minmax(0, 1fr);
  align-items: center;
}

.c-services[data-variant='points'] .c-services__item-photo {
  inline-size: 100%;
  aspect-ratio: 1;
}

.c-services[data-variant='points']
  .c-services__item:has(.c-services__item-photo)
  .c-services__marker {
  display: none;
}

.c-services[data-variant='points'] .c-services__item-title {
  font-size: var(--step-0);
  font-family: var(--font-body);
  font-weight: var(--weight-body-strong);
  letter-spacing: 0;
}

@container (min-width: 40rem) {
  .c-services[data-variant='points']
    .c-services__inner:not(:has(.c-services__media))
    .c-services__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

@container (min-width: 56rem) {
  /* The photo sets the height; the text keeps together at the top. */
  .c-services[data-variant='points'] .c-services__inner:has(.c-services__media) {
    grid-template-rows: auto auto 1fr;
    grid-template-columns: minmax(0, var(--c-services-photo, 6fr)) minmax(
        0,
        var(--c-services-text, 5fr)
      );
    column-gap: var(--space-3xl);
    row-gap: var(--space-l);
    align-items: start;
  }

  .c-services[data-variant='points'] .c-services__media {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin-inline: calc(-1 * max(var(--gutter), (100cqi - var(--width-content)) / 2)) 0;
  }

  .c-services[data-variant='points'] .c-services__photo {
    position: sticky;
    inset-block-start: 0;
    block-size: 100%;
    min-block-size: 80vh;
    aspect-ratio: auto;
  }

  /* The photo runs off the page on its outer side: the marks stand at its inner corners. */
  .c-services[data-variant='points'] .c-services__photo::before {
    content: '';
    clip-path: inset(0 0 0 50%);
  }

  .c-services[data-variant='points'] .c-services__inner:has(.c-services__media) .c-services__head,
  .c-services[data-variant='points'] .c-services__inner:has(.c-services__media) .c-services__items,
  .c-services[data-variant='points']
    .c-services__inner:has(.c-services__media)
    .c-services__actions {
    grid-column: 2;
  }

  .c-services[data-variant='points'] .c-services__inner:has(.c-services__media) .c-services__head {
    padding-block-start: var(--space-2xl);
  }

  .c-services[data-variant='points']
    .c-services__inner:has(.c-services__media)
    .c-services__actions {
    padding-block-end: var(--space-2xl);
  }
}

/* Mirrored: list and points with heading and photo on the right. */

@container (min-width: 56rem) {
  .c-services[data-variant='list'][data-mirror] .c-services__inner {
    grid-template-columns: minmax(0, var(--c-services-text, 7fr)) minmax(
        0,
        var(--c-services-photo, 5fr)
      );
    grid-auto-flow: dense;
  }

  .c-services[data-variant='list'][data-mirror] .c-services__head,
  .c-services[data-variant='list'][data-mirror] .c-services__media,
  .c-services[data-variant='list'][data-mirror] .c-services__actions {
    grid-column: 2;
  }

  .c-services[data-variant='list'][data-mirror] .c-services__items {
    grid-column: 1;
  }

  .c-services[data-variant='points'][data-mirror] .c-services__inner:has(.c-services__media) {
    grid-template-columns: minmax(0, var(--c-services-text, 5fr)) minmax(
        0,
        var(--c-services-photo, 6fr)
      );
    grid-auto-flow: dense;
  }

  .c-services[data-variant='points'][data-mirror] .c-services__media {
    grid-column: 2;
    margin-inline: 0 calc(-1 * max(var(--gutter), (100cqi - var(--width-content)) / 2));
  }

  .c-services[data-variant='points'][data-mirror] .c-services__photo::before {
    clip-path: inset(0 50% 0 0);
  }

  .c-services[data-variant='points'][data-mirror]
    .c-services__inner:has(.c-services__media)
    :is(.c-services__head, .c-services__items, .c-services__actions) {
    grid-column: 1;
  }
}

/* Control photo: the photo takes less or more of the width beside the text. */

.c-services[data-photo='s'] {
  --c-services-photo: 4fr;
  --c-services-text: 7fr;
}

.c-services[data-photo='l'] {
  --c-services-photo: 7fr;
  --c-services-text: 5fr;
}

/* Control head: the head stacked or centred instead of title and lead side by side. */

.c-services[data-head='centred'] .c-services__head {
  justify-items: center;
  text-align: center;
}

.c-services[data-head='centred'] .c-services__head > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-services[data-head='centred'] .c-services__eyebrow {
  justify-self: center;
}

.c-services[data-head='centred'] .c-services__eyebrow::after {
  content: none;
}

@container (min-width: 48rem) {
  .c-services[data-head='stacked'] .c-services__head,
  .c-services[data-head='centred'] .c-services__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-services[data-head='stacked'] .c-services__head > *,
  .c-services[data-head='centred'] .c-services__head > * {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Control columns: the table in two, three or four columns instead of by count. */

@container (min-width: 48rem) {
  .c-services:not([data-variant])[data-columns='2'] .c-services__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 64rem) {
  .c-services:not([data-variant])[data-columns='3'] .c-services__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-services:not([data-variant])[data-columns='4'] .c-services__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
 * A screenshot or graphic (data-fit='whole', set by the engine) keeps its own
 * shape instead of the place's, centred, never taller than the engine allows.
 */
.c-services .c-services__photo[data-fit='whole'],
.c-services:not([data-variant='list']) .c-services__item-photo[data-fit='whole'] {
  inline-size: min(100%, var(--image-whole-inline));
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: var(--image-ratio);
  margin-inline: auto;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-services[data-component][data-section-id] picture[data-cutout],
.c-services[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-services[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-services[data-component][data-section-id] picture[data-cutout]::before,
.c-services[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-services[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* faq */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-faq {
  /* One pixel at every size: the token set's border width. */
  --c-faq-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-faq-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-faq-mark: var(--color-heading);
  --c-faq-gap: var(--space-xs);
  --c-faq-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-faq-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-faq-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-faq-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-faq-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-faq-line) 100%;
  --c-faq-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-faq-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-faq-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-faq-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-faq[data-scheme='soft'] {
  --c-faq-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-faq-line) solid var(--c-faq-rule);
  background-image:
    linear-gradient(var(--c-faq-rule) 0 0), linear-gradient(var(--c-faq-rule) 0 0);
  background-position:
    var(--c-faq-margin) 0,
    calc(100% - var(--c-faq-margin)) 0;
  background-size: var(--c-faq-line) 100%;
  background-repeat: no-repeat;
}

.c-faq[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-faq[data-scheme='inverse'],
.c-faq[data-scheme='accent'] {
  --c-faq-cell: var(--space-l);
  --c-faq-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-faq-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-faq-line), transparent 0),
    linear-gradient(var(--c-faq-fine) var(--c-faq-line), transparent 0),
    linear-gradient(90deg, var(--c-faq-fine) var(--c-faq-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-faq-cell) * 4) calc(var(--c-faq-cell) * 4),
    calc(var(--c-faq-cell) * 4) calc(var(--c-faq-cell) * 4),
    var(--c-faq-cell) var(--c-faq-cell),
    var(--c-faq-cell) var(--c-faq-cell);
}

.c-faq[data-scheme='accent'] {
  --c-faq-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-faq-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-faq-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-faq-line), transparent 0);
  background-size: calc(var(--c-faq-cell) * 4) calc(var(--c-faq-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-faq .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-faq .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-faq .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-faq-line);
  background-color: var(--c-faq-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-faq :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-faq :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-faq .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-faq-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-faq .button > svg,
.c-faq .t-more > svg {
  display: none;
}

.c-faq .button::after,
.c-faq .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-faq .button:hover::after,
.c-faq .t-more:hover::after {
  translate: 0.25em 0;
}

.c-faq .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-faq-line) var(--color-heading);
}

.c-faq .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-faq .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-faq-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-faq :where(picture) {
  position: relative;
}

.c-faq :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-faq-gap));
  z-index: 1;
  color: var(--c-faq-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-faq-arm) var(--c-faq-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-faq-line) var(--c-faq-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-faq-arm) var(--c-faq-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-faq-line) var(--c-faq-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-faq-arm) var(--c-faq-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-faq-line) var(--c-faq-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-faq-arm) var(--c-faq-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-faq-line) var(--c-faq-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-faq[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-faq-print);
}

.c-faq[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Fragen, Familie „Werkplan“. The questions a reader has before the next step,
 * answered in a few sentences, numbered in the monospace like the notes on a
 * plan. Two variants on the same fields:
 * standard: heading on the left, the questions on the right as the rows of a
 *   list between rules; each opens without a script, one at a time, by a
 *   drawn square with a plus.
 * open: every answer visible, as the cells of a table drawn in one line in two
 *   columns; for few, short answers.
 */

.c-faq .c-faq__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-faq .c-faq__head {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-s);
}

.c-faq .c-faq__title {
  max-inline-size: 18ch;
}

.c-faq .c-faq__lead {
  max-inline-size: 44ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

.c-faq .c-faq__actions {
  margin-block-start: var(--space-s);
}

.c-faq .c-faq__list {
  counter-reset: c-faq-item;
}

.c-faq .c-faq__item {
  counter-increment: c-faq-item;
}

.c-faq .c-faq__question {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
}

/* The number of the note, in the monospace before the question. */
.c-faq .c-faq__question::before {
  content: counter(c-faq-item, decimal-leading-zero);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  color: var(--color-mark, var(--color-accent));
}

.c-faq .c-faq__answer {
  margin: 0;
  line-height: var(--leading-body);
  color: var(--color-muted);
}

/* standard: the questions open one at a time. */

.c-faq:not([data-variant]) .c-faq__item {
  border-block-end: var(--c-faq-line) solid var(--c-faq-rule);
}

.c-faq:not([data-variant]) .c-faq__item:first-child {
  border-block-start: var(--c-faq-line) solid var(--c-faq-rule);
}

.c-faq:not([data-variant]) .c-faq__question {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
}

.c-faq:not([data-variant]) .c-faq__question::-webkit-details-marker {
  display: none;
}

.c-faq:not([data-variant]) .c-faq__question:hover {
  color: var(--color-accent);
}

.c-faq:not([data-variant]) .c-faq__toggle {
  display: grid;
  place-items: center;
  align-self: center;
  inline-size: 2.25em;
  block-size: 2.25em;
  border: var(--c-faq-line) solid var(--c-faq-rule);
  color: var(--color-accent);
  font-size: var(--step--1);
  transition:
    rotate var(--duration-base) var(--ease),
    background-color var(--duration-base) var(--ease);
}

.c-faq:not([data-variant]) .c-faq__toggle svg {
  stroke-width: 1.5;
}

.c-faq:not([data-variant]) .c-faq__item[open] .c-faq__toggle {
  rotate: 45deg;
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.c-faq:not([data-variant]) .c-faq__answer {
  max-inline-size: 60ch;
  padding-block-end: var(--space-l);
  padding-inline: calc(3ch + var(--space-s)) var(--space-2xl);
}

@container (min-width: 56rem) {
  .c-faq:not([data-variant]) .c-faq__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }
}

/*
 * open: every answer visible, as a table: each cell drawn with a line all
 * round, neighbours sharing theirs (a cell steps back over the line before it).
 */

.c-faq[data-variant='open'] .c-faq__list {
  display: grid;
  margin: 0;
  padding-block-start: var(--c-faq-line);
  padding-inline-start: var(--c-faq-line);
}

.c-faq[data-variant='open'] .c-faq__item {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  margin-block-start: calc(-1 * var(--c-faq-line));
  margin-inline-start: calc(-1 * var(--c-faq-line));
  padding: var(--space-m) var(--space-l) var(--space-l);
  border: var(--c-faq-line) solid var(--c-faq-rule);
}

.c-faq[data-variant='open'] .c-faq__question {
  display: grid;
  gap: var(--space-2xs);
}

@container (min-width: 48rem) {
  .c-faq[data-variant='open'] .c-faq__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .c-faq[data-variant='open'] .c-faq__eyebrow {
    grid-column: 1 / -1;
  }

  .c-faq[data-variant='open'] .c-faq__title {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .c-faq[data-variant='open'] .c-faq__lead,
  .c-faq[data-variant='open'] .c-faq__actions {
    grid-column: 2;
  }

  .c-faq[data-variant='open'] .c-faq__lead {
    grid-row: 2;
  }

  .c-faq[data-variant='open'] .c-faq__actions {
    grid-row: 3;
    margin-block-start: 0;
  }

  .c-faq[data-variant='open'] .c-faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Control head: the head stacked or centred instead of title and lead side by side. */

.c-faq[data-head='centred'] .c-faq__head {
  justify-items: center;
  text-align: center;
}

.c-faq[data-head='centred'] .c-faq__head > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-faq[data-head='centred'] .c-faq__eyebrow {
  justify-self: center;
}

.c-faq[data-head='centred'] .c-faq__eyebrow::after {
  content: none;
}

@container (min-width: 48rem) {
  .c-faq[data-head='stacked'] .c-faq__head,
  .c-faq[data-head='centred'] .c-faq__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-faq[data-head='stacked'] .c-faq__head > *,
  .c-faq[data-head='centred'] .c-faq__head > * {
    grid-column: 1;
    grid-row: auto;
  }
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-faq[data-component][data-section-id] picture[data-cutout],
.c-faq[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-faq[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-faq[data-component][data-section-id] picture[data-cutout]::before,
.c-faq[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-faq[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* invite */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-invite {
  /* One pixel at every size: the token set's border width. */
  --c-invite-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-invite-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-invite-mark: var(--color-heading);
  --c-invite-gap: var(--space-xs);
  --c-invite-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-invite-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-invite-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-invite-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-invite-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-invite-line) 100%;
  --c-invite-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-invite-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-invite-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-invite-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-invite[data-scheme='soft'] {
  --c-invite-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-invite-line) solid var(--c-invite-rule);
  background-image:
    linear-gradient(var(--c-invite-rule) 0 0), linear-gradient(var(--c-invite-rule) 0 0);
  background-position:
    var(--c-invite-margin) 0,
    calc(100% - var(--c-invite-margin)) 0;
  background-size: var(--c-invite-line) 100%;
  background-repeat: no-repeat;
}

.c-invite[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-invite[data-scheme='inverse'],
.c-invite[data-scheme='accent'] {
  --c-invite-cell: var(--space-l);
  --c-invite-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-invite-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-invite-line), transparent 0),
    linear-gradient(var(--c-invite-fine) var(--c-invite-line), transparent 0),
    linear-gradient(90deg, var(--c-invite-fine) var(--c-invite-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-invite-cell) * 4) calc(var(--c-invite-cell) * 4),
    calc(var(--c-invite-cell) * 4) calc(var(--c-invite-cell) * 4),
    var(--c-invite-cell) var(--c-invite-cell),
    var(--c-invite-cell) var(--c-invite-cell);
}

.c-invite[data-scheme='accent'] {
  --c-invite-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-invite-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-invite-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-invite-line), transparent 0);
  background-size: calc(var(--c-invite-cell) * 4) calc(var(--c-invite-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-invite .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-invite .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-invite .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-invite-line);
  background-color: var(--c-invite-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-invite :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-invite :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-invite .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-invite-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-invite .button > svg,
.c-invite .t-more > svg {
  display: none;
}

.c-invite .button::after,
.c-invite .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-invite .button:hover::after,
.c-invite .t-more:hover::after {
  translate: 0.25em 0;
}

.c-invite .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-invite-line) var(--color-heading);
}

.c-invite .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-invite .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-invite-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-invite :where(picture) {
  position: relative;
}

.c-invite :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-invite-gap));
  z-index: 1;
  color: var(--c-invite-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-invite-arm) var(--c-invite-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-invite-line) var(--c-invite-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-invite-arm) var(--c-invite-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-invite-line) var(--c-invite-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-invite-arm) var(--c-invite-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-invite-line) var(--c-invite-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-invite-arm) var(--c-invite-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-invite-line) var(--c-invite-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-invite[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-invite-print);
}

.c-invite[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Einladung, Familie „Werkplan“. The step the page leads to: ask, call, book.
 * The call to action is the main way, a second link the other way; items say
 * when and where (opening hours, address) as the cells of a small table with
 * labels in the monospace. Two variants on the same fields:
 * standard: a full surface (the accent with its light grid by default), a
 *   large heading, the ways as drawn buttons; a photo with crop marks beside it.
 * ways: the ways themselves very large, one row each between rules, like the
 *   lines of a sign, an arrow at the end of each.
 */

.c-invite .c-invite__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-invite .c-invite__text {
  display: grid;
  gap: var(--space-s);
}

.c-invite .c-invite__title {
  max-inline-size: 16ch;
  font-size: var(--step-5);
  line-height: 1.04;
}

.c-invite .c-invite__lead {
  max-inline-size: 46ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

.c-invite .c-invite__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.c-invite .c-invite__ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.c-invite .c-invite__way {
  padding: 1.15em 1.4em 1.1em;
}

/*
 * The details as a table: each cell drawn with a line all round, neighbours
 * sharing theirs (a cell steps back over the line before it).
 */
.c-invite .c-invite__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
  padding-block-start: var(--c-invite-line);
  padding-inline-start: var(--c-invite-line);
}

.c-invite .c-invite__detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  margin-block-start: calc(-1 * var(--c-invite-line));
  margin-inline-start: calc(-1 * var(--c-invite-line));
  padding: var(--space-s) var(--space-m) var(--space-m);
  border: var(--c-invite-line) solid var(--c-invite-rule);
}

.c-invite .c-invite__icon {
  translate: 0 0.15em;
  color: var(--color-accent);
  stroke-width: 1.5;
}

.c-invite .c-invite__detail-body {
  display: grid;
  gap: var(--space-3xs);
}

.c-invite .c-invite__detail-title {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.c-invite .c-invite__detail-text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-ink);
}

@container (min-width: 48rem) {
  .c-invite .c-invite__title {
    font-size: var(--step-6);
  }
}

/* standard: a full surface, the photo beside the text. */

.c-invite:not([data-variant]) {
  padding-block: var(--space-4xl);
}

@container (min-width: 56rem) {
  .c-invite:not([data-variant]) .c-invite__inner:has(.c-invite__media) {
    grid-template-columns: minmax(0, var(--c-invite-text, 7fr)) minmax(
        0,
        var(--c-invite-photo, 5fr)
      );
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .c-invite:not([data-variant]) .c-invite__media {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
  }

  .c-invite:not([data-variant]) .c-invite__photo {
    block-size: 100%;
    aspect-ratio: auto;
    min-block-size: 36cqi;
  }

  .c-invite:not([data-variant]) .c-invite__inner:has(.c-invite__media) > :not(.c-invite__media) {
    grid-column: 1;
  }
}

/* ways: the ways very large, one row each. */

.c-invite[data-variant='ways'] .c-invite__title {
  font-size: var(--step-4);
}

.c-invite[data-variant='ways'] .c-invite__ways {
  display: grid;
  gap: 0;
  border-block-start: var(--c-invite-line) solid var(--c-invite-rule);
}

.c-invite[data-variant='ways'] .c-invite__way {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-block-end: var(--c-invite-line) solid var(--c-invite-rule);
  background-color: transparent;
  box-shadow: none;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
  text-transform: none;
}

.c-invite[data-variant='ways'] .c-invite__way--main {
  color: var(--color-accent);
}

.c-invite[data-variant='ways'] .c-invite__way:hover {
  background-color: transparent;
}

.c-invite[data-variant='ways'] .c-invite__way-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* The arrow at the end of a way: the monospace's, at the size of the way. */
.c-invite[data-variant='ways'] .c-invite__way::after {
  font-weight: var(--weight-accent);
}

.c-invite[data-variant='ways'] .c-invite__details {
  margin-block-start: var(--space-s);
}

@container (min-width: 48rem) {
  .c-invite[data-variant='ways'] .c-invite__way {
    padding-block: var(--space-l);
    font-size: var(--step-5);
  }
}

@container (min-width: 56rem) {
  .c-invite[data-variant='ways'] .c-invite__inner:has(.c-invite__media) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-3xl);
  }

  .c-invite[data-variant='ways'] .c-invite__media {
    grid-column: 2;
  }

  .c-invite[data-variant='ways'] .c-invite__photo {
    aspect-ratio: 3 / 2;
  }

  .c-invite[data-variant='ways'] .c-invite__text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .c-invite[data-variant='ways'] .c-invite__ways,
  .c-invite[data-variant='ways'] .c-invite__details {
    grid-column: 1 / -1;
  }
}

/* standard, mirrored: the photo on the left. */

@container (min-width: 56rem) {
  .c-invite:not([data-variant])[data-mirror] .c-invite__inner:has(.c-invite__media) {
    grid-template-columns: minmax(0, var(--c-invite-photo, 5fr)) minmax(
        0,
        var(--c-invite-text, 7fr)
      );
    grid-auto-flow: dense;
  }

  .c-invite:not([data-variant])[data-mirror] .c-invite__media {
    grid-column: 1;
  }

  .c-invite:not([data-variant])[data-mirror]
    .c-invite__inner:has(.c-invite__media)
    > :not(.c-invite__media) {
    grid-column: 2;
  }
}

/* Control photo: the photo takes less or more of the width beside the text. */

.c-invite[data-photo='s'] {
  --c-invite-photo: 4fr;
  --c-invite-text: 7fr;
}

.c-invite[data-photo='l'] {
  --c-invite-photo: 7fr;
  --c-invite-text: 5fr;
}

/* Control align: text, ways and details centred. */

.c-invite[data-align='centre'] .c-invite__text {
  justify-items: center;
  text-align: center;
}

.c-invite[data-align='centre'] .c-invite__text > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-invite[data-align='centre'] .c-invite__eyebrow {
  justify-self: center;
}

.c-invite[data-align='centre'] .c-invite__eyebrow::after {
  content: none;
}

.c-invite[data-align='centre'] .c-invite__ways {
  justify-content: center;
}

.c-invite[data-align='centre'][data-variant='ways'] .c-invite__way {
  justify-content: center;
}

.c-invite[data-align='centre'] .c-invite__details {
  justify-items: stretch;
  text-align: start;
}

.c-invite[data-align='centre'] .c-invite__detail {
  justify-content: center;
}

/*
 * A screenshot or graphic (data-fit='whole', set by the engine) keeps its own
 * shape instead of the place's, centred, never taller than the engine allows.
 */
.c-invite .c-invite__photo[data-fit='whole'] {
  inline-size: min(100%, var(--image-whole-inline));
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: var(--image-ratio);
  margin-inline: auto;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-invite[data-component][data-section-id] picture[data-cutout],
.c-invite[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-invite[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-invite[data-component][data-section-id] picture[data-cutout]::before,
.c-invite[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-invite[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* inquiry */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-inquiry {
  /* One pixel at every size: the token set's border width. */
  --c-inquiry-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-inquiry-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-inquiry-mark: var(--color-heading);
  --c-inquiry-gap: var(--space-xs);
  --c-inquiry-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-inquiry-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-inquiry-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-inquiry-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-inquiry-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-inquiry-line) 100%;
  --c-inquiry-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-inquiry-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-inquiry-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-inquiry-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-inquiry[data-scheme='soft'] {
  --c-inquiry-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-inquiry-line) solid var(--c-inquiry-rule);
  background-image:
    linear-gradient(var(--c-inquiry-rule) 0 0), linear-gradient(var(--c-inquiry-rule) 0 0);
  background-position:
    var(--c-inquiry-margin) 0,
    calc(100% - var(--c-inquiry-margin)) 0;
  background-size: var(--c-inquiry-line) 100%;
  background-repeat: no-repeat;
}

.c-inquiry[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-inquiry[data-scheme='inverse'],
.c-inquiry[data-scheme='accent'] {
  --c-inquiry-cell: var(--space-l);
  --c-inquiry-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-inquiry-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-inquiry-line), transparent 0),
    linear-gradient(var(--c-inquiry-fine) var(--c-inquiry-line), transparent 0),
    linear-gradient(90deg, var(--c-inquiry-fine) var(--c-inquiry-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-inquiry-cell) * 4) calc(var(--c-inquiry-cell) * 4),
    calc(var(--c-inquiry-cell) * 4) calc(var(--c-inquiry-cell) * 4),
    var(--c-inquiry-cell) var(--c-inquiry-cell),
    var(--c-inquiry-cell) var(--c-inquiry-cell);
}

.c-inquiry[data-scheme='accent'] {
  --c-inquiry-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-inquiry-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-inquiry-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-inquiry-line), transparent 0);
  background-size: calc(var(--c-inquiry-cell) * 4) calc(var(--c-inquiry-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-inquiry .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-inquiry .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-inquiry .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-inquiry-line);
  background-color: var(--c-inquiry-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-inquiry :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-inquiry :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-inquiry .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-inquiry-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-inquiry .button > svg,
.c-inquiry .t-more > svg {
  display: none;
}

.c-inquiry .button::after,
.c-inquiry .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-inquiry .button:hover::after,
.c-inquiry .t-more:hover::after {
  translate: 0.25em 0;
}

.c-inquiry .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-inquiry-line) var(--color-heading);
}

.c-inquiry .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-inquiry .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-inquiry-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-inquiry :where(picture) {
  position: relative;
}

.c-inquiry :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-inquiry-gap));
  z-index: 1;
  color: var(--c-inquiry-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-inquiry-arm) var(--c-inquiry-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-inquiry-line) var(--c-inquiry-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-inquiry-arm) var(--c-inquiry-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-inquiry-line) var(--c-inquiry-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-inquiry-arm) var(--c-inquiry-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-inquiry-line) var(--c-inquiry-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-inquiry-arm) var(--c-inquiry-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-inquiry-line) var(--c-inquiry-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-inquiry[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-inquiry-print);
}

.c-inquiry[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Anfrage, Familie „Werkplan“. The guided inquiry (concept: Formulare und
 * Anfragen): questions to click, then the way back. The engine writes the
 * form (classes f-inquiry__…); this styles it for the family: the dialog on a
 * drawn sheet edged by one line, answers as square fields, the way to send a
 * drawn button with an arrow. Phone and mail stand beside it as quiet
 * buttons, the only ways where the form is missing: without a script, or on a
 * target without the satellite. Items say what happens after sending, as the
 * numbered rows of a list. Two variants on the same fields:
 * standard: the intro on the left, the dialog on its sheet beside it.
 * focus: one column, centred; the dialog is the page's main thing.
 */

.c-inquiry .c-inquiry__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-inquiry .c-inquiry__intro {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.c-inquiry .c-inquiry__title {
  max-inline-size: 18ch;
  font-size: var(--step-4);
  line-height: 1.08;
}

.c-inquiry .c-inquiry__lead {
  max-inline-size: 46ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

/* What happens after sending: the numbered rows of a list between rules. */
.c-inquiry .c-inquiry__next {
  display: grid;
  margin-block-start: var(--space-s);
  padding: 0;
  border-block-start: var(--c-inquiry-line) solid var(--c-inquiry-rule);
  counter-reset: c-inquiry-step;
}

.c-inquiry .c-inquiry__step {
  counter-increment: c-inquiry-step;
  display: grid;
  grid-template-columns: 3ch auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  max-inline-size: none;
  padding-block: var(--space-s);
  border-block-end: var(--c-inquiry-line) solid var(--c-inquiry-rule);
}

.c-inquiry .c-inquiry__step::before {
  content: counter(c-inquiry-step, decimal-leading-zero);
  padding-block-start: 0.2em;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  color: var(--color-mark, var(--color-accent));
}

.c-inquiry .c-inquiry__icon {
  translate: 0 0.15em;
  stroke-width: 1.5;
  color: var(--color-accent);
}

.c-inquiry .c-inquiry__step-body {
  display: grid;
  gap: var(--space-3xs);
  grid-column: 3;
}

.c-inquiry .c-inquiry__step-title {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.c-inquiry .c-inquiry__step-text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-muted);
}

.c-inquiry .c-inquiry__ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-s);
}

/*
 * The dialog on a card of its own, so it reads as one thing to do. On the
 * accent the card takes a scheme that stands apart from it, mostly the page's
 * own (the engine picks it, the template sets it): a shade of the accent left
 * answers and card in one muddy tone.
 */

/* The card may stand in a scheme of its own: its rules are drawn in that scheme's colors. */
.c-inquiry .c-inquiry__dialog {
  --c-inquiry-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
}

.c-inquiry .c-inquiry__dialog:has(.f-inquiry) {
  padding: var(--space-l);
  border: var(--c-inquiry-line) solid var(--c-inquiry-rule);
  background-color: var(--color-raised);
}

/*
 * In the card's own accent the chosen answer and the way to send would melt
 * into the accent around the card, or read as a faded copy of it; the card
 * marks them in its heading color instead.
 */
.c-inquiry[data-scheme='accent'] .f-inquiry__choice:checked + .f-inquiry__label,
.c-inquiry[data-scheme='accent'] .f-inquiry__send {
  background-color: var(--color-heading);
  color: var(--color-surface);
}

.c-inquiry[data-scheme='accent'] .f-inquiry__send:hover {
  background-color: color-mix(in oklab, var(--color-heading) 86%, var(--color-surface));
}

.c-inquiry[data-scheme='accent'] .f-inquiry__choice:focus-visible + .f-inquiry__label {
  outline-color: var(--color-heading);
}

.c-inquiry[data-scheme='accent'] .f-inquiry__check {
  accent-color: var(--color-heading);
}

.c-inquiry .c-inquiry__dialog:not(:has(.f-inquiry)) {
  display: none;
}

.c-inquiry .f-inquiry__form {
  gap: var(--space-xl);
}

.c-inquiry .f-inquiry__step:not([hidden]),
.c-inquiry .f-inquiry__contact:not([hidden]) {
  animation: c-inquiry-open var(--duration-base) var(--ease);
}

.c-inquiry .f-inquiry__question {
  font-size: var(--step-2);
}

.c-inquiry .f-inquiry__hint,
.c-inquiry .f-inquiry__name {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-inquiry .f-inquiry__label {
  padding-inline: var(--space-m);
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 var(--c-inquiry-line) var(--c-inquiry-rule);
  font-weight: var(--weight-body-strong);
}

.c-inquiry .f-inquiry__choice:hover + .f-inquiry__label {
  box-shadow: inset 0 0 0 var(--c-inquiry-line) var(--color-heading);
}

.c-inquiry .f-inquiry__choice:checked + .f-inquiry__label {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: none;
}

.c-inquiry .f-inquiry__input {
  padding: var(--space-xs) var(--space-s);
  border-color: var(--c-inquiry-rule);
  border-radius: 0;
}

.c-inquiry .f-inquiry__send {
  padding: 1.05em 1.3em 1em;
}

.c-inquiry .f-inquiry__done {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  color: var(--color-heading);
}

@keyframes c-inquiry-open {
  from {
    opacity: 0;
    translate: 0 var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-inquiry .f-inquiry__step:not([hidden]),
  .c-inquiry .f-inquiry__contact:not([hidden]) {
    animation: none;
  }
}

/* side: the intro beside the dialog. */

@container (min-width: 56rem) {
  .c-inquiry:not([data-variant]) .c-inquiry__inner:has(.f-inquiry) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .c-inquiry:not([data-variant]) .c-inquiry__intro {
    position: sticky;
    inset-block-start: var(--space-l);
  }
}

/*
 * focus: one column, the intro centred above the dialog, which takes the
 * whole width of the content, so the section keeps the page's edge.
 */

.c-inquiry[data-variant='focus'] .c-inquiry__intro {
  justify-items: center;
  text-align: center;
}

.c-inquiry[data-variant='focus'] .c-inquiry__intro > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-inquiry[data-variant='focus'] .c-inquiry__eyebrow {
  justify-self: center;
}

.c-inquiry[data-variant='focus'] .c-inquiry__eyebrow::after {
  content: none;
}

.c-inquiry[data-variant='focus'] .c-inquiry__title {
  font-size: var(--step-5);
}

.c-inquiry[data-variant='focus'] .c-inquiry__next {
  grid-template-columns: repeat(auto-fit, minmax(min(18ch, 100%), 1fr));
  column-gap: var(--space-m);
  inline-size: min(100%, 70ch);
  text-align: start;
}

@container (min-width: 56rem) {
  .c-inquiry[data-variant='focus'] .c-inquiry__dialog:has(.f-inquiry) {
    padding: var(--space-xl) var(--space-2xl);
  }
}

.c-inquiry[data-variant='focus'] .c-inquiry__ways {
  justify-content: center;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-inquiry[data-component][data-section-id] picture[data-cutout],
.c-inquiry[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-inquiry[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-inquiry[data-component][data-section-id] picture[data-cutout]::before,
.c-inquiry[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-inquiry[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* question */
/*
 * What every section of „Werkplan“ shares, written once for the placeholder
 * key „werkplan“ and scoped to each component's own key when the family is
 * built (index.ts), as the gate demands.
 *
 * The website as a technical drawing: square corners, lines of one pixel, no
 * shadows; labels in the monospace of the token set (--font-accent); figures
 * and steps as dimension chains; photos with crop marks and a running number.
 * Screenshots, graphics and logos (data-fit='whole') and cut-outs
 * (data-cutout) keep their colors and are never cropped or toned.
 */

.c-question {
  /* One pixel at every size: the token set's border width. */
  --c-question-line: var(--border-width);
  /* Structural rules (tables, title blocks): firmer than the scheme's fine line. */
  --c-question-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
  /* Crop marks: their distance from the picture and the length of their arms. */
  --c-question-mark: var(--color-heading);
  --c-question-gap: var(--space-xs);
  --c-question-arm: var(--space-m);
  /* The color a photo is printed in (photo style 2): the brand's accent, a little dulled like a copy. */
  --c-question-print: color-mix(in oklab, var(--color-accent) 72%, var(--color-muted));
  /*
   * A dimension chain, as background layers of one element: a line between two
   * end ticks with an arrowhead at each end (conic triangles 0.7em by 0.4em).
   * Horizontal for an element as wide as the measured span, vertical for one as
   * high. The layers take currentcolor, so the element's color draws them.
   */
  --c-question-chain:
    conic-gradient(from 74.05deg at 0 50%, currentcolor 0 31.9deg, transparent 0) 0 50% / 0.7em
      0.4em,
    conic-gradient(from 254.05deg at 100% 50%, currentcolor 0 31.9deg, transparent 0) 100% 50% /
      0.7em 0.4em,
    linear-gradient(currentcolor 0 0) 0 50% / 100% var(--c-question-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-question-line) 100%,
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-question-line) 100%;
  --c-question-chain-v:
    conic-gradient(from 164.05deg at 50% 0, currentcolor 0 31.9deg, transparent 0) 50% 0 / 0.4em
      0.7em,
    conic-gradient(from 344.05deg at 50% 100%, currentcolor 0 31.9deg, transparent 0) 50% 100% /
      0.4em 0.7em,
    linear-gradient(currentcolor 0 0) 50% 0 / var(--c-question-line) 100%,
    linear-gradient(currentcolor 0 0) 0 0 / 100% var(--c-question-line),
    linear-gradient(currentcolor 0 0) 0 100% / 100% var(--c-question-line);
  /*
   * Section numbers in page order: every section of the family counts itself,
   * and the counter, opened by the first, runs on over its siblings in <main>.
   */
  counter-increment: werkplan-section;
}

/*
 * The four surfaces. base: drawing paper, nothing but the lines of the
 * drawing. soft: a sheet in a frame, two fine rules down the margins and one
 * across at each end, the entries in a table. inverse: a blueprint, a grid in
 * the scheme's line, every fourth line drawn firmer. accent: the brand's color
 * with light lines, the firm grid only.
 */
.c-question[data-scheme='soft'] {
  --c-question-margin: calc((100% - min(100% - 2 * var(--gutter), var(--width-content))) / 4);
  border-block: var(--c-question-line) solid var(--c-question-rule);
  background-image:
    linear-gradient(var(--c-question-rule) 0 0), linear-gradient(var(--c-question-rule) 0 0);
  background-position:
    var(--c-question-margin) 0,
    calc(100% - var(--c-question-margin)) 0;
  background-size: var(--c-question-line) 100%;
  background-repeat: no-repeat;
}

.c-question[data-scheme='soft'][data-flow='continue'] {
  border-block-start: 0;
}

.c-question[data-scheme='inverse'],
.c-question[data-scheme='accent'] {
  --c-question-cell: var(--space-l);
  --c-question-fine: color-mix(in oklab, var(--color-line) 55%, transparent);
  background-image:
    linear-gradient(var(--color-line) var(--c-question-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-question-line), transparent 0),
    linear-gradient(var(--c-question-fine) var(--c-question-line), transparent 0),
    linear-gradient(90deg, var(--c-question-fine) var(--c-question-line), transparent 0);
  background-position: 50% 0;
  background-size:
    calc(var(--c-question-cell) * 4) calc(var(--c-question-cell) * 4),
    calc(var(--c-question-cell) * 4) calc(var(--c-question-cell) * 4),
    var(--c-question-cell) var(--c-question-cell),
    var(--c-question-cell) var(--c-question-cell);
}

.c-question[data-scheme='accent'] {
  --c-question-rule: color-mix(in oklab, var(--color-line) 40%, var(--color-heading));
  --c-question-print: color-mix(in oklab, var(--color-surface) 72%, var(--color-muted));
  background-image:
    linear-gradient(var(--color-line) var(--c-question-line), transparent 0),
    linear-gradient(90deg, var(--color-line) var(--c-question-line), transparent 0);
  background-size: calc(var(--c-question-cell) * 4) calc(var(--c-question-cell) * 4);
}

/*
 * The eyebrow is the row of a title block: the section's number in the pen,
 * the label in the monospace, a rule to the end of the column.
 */
.c-question .t-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  justify-self: stretch;
  max-inline-size: none;
  font-weight: var(--weight-accent);
  line-height: 1.35;
  color: var(--color-muted);
}

.c-question .t-eyebrow::before {
  content: counter(werkplan-section, decimal-leading-zero);
  flex: none;
  font-weight: var(--weight-accent-strong);
  color: var(--color-mark, var(--color-accent));
}

.c-question .t-eyebrow::after {
  content: '';
  flex: 1 0 var(--space-l);
  align-self: center;
  block-size: var(--c-question-line);
  background-color: var(--c-question-rule);
}

/*
 * Long German words in large type: on a phone broken with a hyphen, never
 * cut. Where the columns are wide enough, a headline keeps its words whole.
 */
.c-question :where(h1, h2, h3, h4) {
  hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  overflow-wrap: break-word;
}

@container (min-width: 48rem) {
  .c-question :where(h1, h2) {
    hyphens: manual;
  }
}

/* Buttons are drawn rectangles: a label in the monospace, an arrow after it. */
.c-question .button {
  gap: 0.9em;
  border-radius: 0;
  padding: 1.05em 1.3em 1em;
  box-shadow: inset 0 0 0 var(--c-question-line) var(--color-accent);
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-question .button > svg,
.c-question .t-more > svg {
  display: none;
}

.c-question .button::after,
.c-question .t-more::after {
  content: '→';
  flex: none;
  font-family: var(--font-accent);
  transition: translate var(--duration-fast) var(--ease);
}

.c-question .button:hover::after,
.c-question .t-more:hover::after {
  translate: 0.25em 0;
}

.c-question .button--quiet {
  background-color: transparent;
  color: var(--color-heading);
  box-shadow: inset 0 0 0 var(--c-question-line) var(--color-heading);
}

.c-question .button--quiet:hover {
  background-color: color-mix(in oklab, var(--color-heading) 8%, transparent);
}

.c-question .t-more {
  gap: 0.7em;
  padding-block-end: 0.3em;
  border-block-end: var(--c-question-line) solid currentcolor;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Pictures are figures of the plan: crop marks at the four corners, just
 * outside the picture. A cut-out has none (cutout.css). Places that bleed off
 * the page or fill a section take the marks off (in their kind). No figure
 * numbers: on most websites a number on a photo means nothing (Alexander,
 * 2026-10-21).
 */
.c-question :where(picture) {
  position: relative;
}

.c-question :where(picture)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--c-question-gap));
  z-index: 1;
  color: var(--c-question-mark);
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-question-arm) var(--c-question-line),
    linear-gradient(currentcolor 0 0) 0 0 / var(--c-question-line) var(--c-question-arm),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-question-arm) var(--c-question-line),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--c-question-line) var(--c-question-arm),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-question-arm) var(--c-question-line),
    linear-gradient(currentcolor 0 0) 0 100% / var(--c-question-line) var(--c-question-arm),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-question-arm) var(--c-question-line),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--c-question-line) var(--c-question-arm);
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Photo style '2', Lichtpause: the photo printed in one color, the brand's
 * accent, as a plan comes off the copier. The grey photo lends its lightness,
 * the accent below it hue and saturation (luminosity), so darks run deep and
 * lights stay paper. The engine's curve (--image-tone) repairs a dark or flat
 * photo first; the print is tuned on well-exposed ones. '1' keeps the colors.
 */
.c-question[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) {
  isolation: isolate;
  background-color: var(--c-question-print);
}

.c-question[data-photo-style='2'] :where(picture:not([data-fit='whole'], [data-cutout])) > img {
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.08);
  mix-blend-mode: luminosity;
}

/*
 * Anfrage, Familie „Werkplan“. The guided inquiry (concept: Formulare und
 * Anfragen): questions to click, then the way back. The engine writes the
 * form (classes f-inquiry__…); this styles it for the family: the dialog on a
 * drawn sheet edged by one line, answers as square fields, the way to send a
 * drawn button with an arrow. Phone and mail stand beside it as quiet
 * buttons, the only ways where the form is missing: without a script, or on a
 * target without the satellite. Items say what happens after sending, as the
 * numbered rows of a list. Two variants on the same fields:
 * standard: the intro on the left, the dialog on its sheet beside it.
 * focus: one column, centred; the dialog is the page's main thing.
 */

.c-question .c-inquiry__inner {
  display: grid;
  gap: var(--space-xl);
}

.c-question .c-inquiry__intro {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.c-question .c-inquiry__title {
  max-inline-size: 18ch;
  font-size: var(--step-4);
  line-height: 1.08;
}

.c-question .c-inquiry__lead {
  max-inline-size: 46ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--color-ink);
}

/* What happens after sending: the numbered rows of a list between rules. */
.c-question .c-inquiry__next {
  display: grid;
  margin-block-start: var(--space-s);
  padding: 0;
  border-block-start: var(--c-question-line) solid var(--c-question-rule);
  counter-reset: c-inquiry-step;
}

.c-question .c-inquiry__step {
  counter-increment: c-inquiry-step;
  display: grid;
  grid-template-columns: 3ch auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  max-inline-size: none;
  padding-block: var(--space-s);
  border-block-end: var(--c-question-line) solid var(--c-question-rule);
}

.c-question .c-inquiry__step::before {
  content: counter(c-inquiry-step, decimal-leading-zero);
  padding-block-start: 0.2em;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  color: var(--color-mark, var(--color-accent));
}

.c-question .c-inquiry__icon {
  translate: 0 0.15em;
  stroke-width: 1.5;
  color: var(--color-accent);
}

.c-question .c-inquiry__step-body {
  display: grid;
  gap: var(--space-3xs);
  grid-column: 3;
}

.c-question .c-inquiry__step-title {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.c-question .c-inquiry__step-text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-muted);
}

.c-question .c-inquiry__ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-s);
}

/*
 * The dialog on a card of its own, so it reads as one thing to do. On the
 * accent the card takes a scheme that stands apart from it, mostly the page's
 * own (the engine picks it, the template sets it): a shade of the accent left
 * answers and card in one muddy tone.
 */

/* The card may stand in a scheme of its own: its rules are drawn in that scheme's colors. */
.c-question .c-inquiry__dialog {
  --c-question-rule: color-mix(in oklab, var(--color-line) 55%, var(--color-heading));
}

.c-question .c-inquiry__dialog:has(.f-inquiry) {
  padding: var(--space-l);
  border: var(--c-question-line) solid var(--c-question-rule);
  background-color: var(--color-raised);
}

/*
 * In the card's own accent the chosen answer and the way to send would melt
 * into the accent around the card, or read as a faded copy of it; the card
 * marks them in its heading color instead.
 */
.c-question[data-scheme='accent'] .f-inquiry__choice:checked + .f-inquiry__label,
.c-question[data-scheme='accent'] .f-inquiry__send {
  background-color: var(--color-heading);
  color: var(--color-surface);
}

.c-question[data-scheme='accent'] .f-inquiry__send:hover {
  background-color: color-mix(in oklab, var(--color-heading) 86%, var(--color-surface));
}

.c-question[data-scheme='accent'] .f-inquiry__choice:focus-visible + .f-inquiry__label {
  outline-color: var(--color-heading);
}

.c-question[data-scheme='accent'] .f-inquiry__check {
  accent-color: var(--color-heading);
}

.c-question .c-inquiry__dialog:not(:has(.f-inquiry)) {
  display: none;
}

.c-question .f-inquiry__form {
  gap: var(--space-xl);
}

.c-question .f-inquiry__step:not([hidden]),
.c-question .f-inquiry__contact:not([hidden]) {
  animation: c-question-open var(--duration-base) var(--ease);
}

.c-question .f-inquiry__question {
  font-size: var(--step-2);
}

.c-question .f-inquiry__hint,
.c-question .f-inquiry__name {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-question .f-inquiry__label {
  padding-inline: var(--space-m);
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 var(--c-question-line) var(--c-question-rule);
  font-weight: var(--weight-body-strong);
}

.c-question .f-inquiry__choice:hover + .f-inquiry__label {
  box-shadow: inset 0 0 0 var(--c-question-line) var(--color-heading);
}

.c-question .f-inquiry__choice:checked + .f-inquiry__label {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: none;
}

.c-question .f-inquiry__input {
  padding: var(--space-xs) var(--space-s);
  border-color: var(--c-question-rule);
  border-radius: 0;
}

.c-question .f-inquiry__send {
  padding: 1.05em 1.3em 1em;
}

.c-question .f-inquiry__done {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  color: var(--color-heading);
}

@keyframes c-question-open {
  from {
    opacity: 0;
    translate: 0 var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-question .f-inquiry__step:not([hidden]),
  .c-question .f-inquiry__contact:not([hidden]) {
    animation: none;
  }
}

/* side: the intro beside the dialog. */

@container (min-width: 56rem) {
  .c-question:not([data-variant]) .c-inquiry__inner:has(.f-inquiry) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .c-question:not([data-variant]) .c-inquiry__intro {
    position: sticky;
    inset-block-start: var(--space-l);
  }
}

/*
 * focus: one column, the intro centred above the dialog, which takes the
 * whole width of the content, so the section keeps the page's edge.
 */

.c-question[data-variant='focus'] .c-inquiry__intro {
  justify-items: center;
  text-align: center;
}

.c-question[data-variant='focus'] .c-inquiry__intro > * {
  margin-inline: auto;
}

/* Centred, the title block's row keeps its number and drops the rule to the end. */
.c-question[data-variant='focus'] .c-inquiry__eyebrow {
  justify-self: center;
}

.c-question[data-variant='focus'] .c-inquiry__eyebrow::after {
  content: none;
}

.c-question[data-variant='focus'] .c-inquiry__title {
  font-size: var(--step-5);
}

.c-question[data-variant='focus'] .c-inquiry__next {
  grid-template-columns: repeat(auto-fit, minmax(min(18ch, 100%), 1fr));
  column-gap: var(--space-m);
  inline-size: min(100%, 70ch);
  text-align: start;
}

@container (min-width: 56rem) {
  .c-question[data-variant='focus'] .c-inquiry__dialog:has(.f-inquiry) {
    padding: var(--space-xl) var(--space-2xl);
  }
}

.c-question[data-variant='focus'] .c-inquiry__ways {
  justify-content: center;
}

/*
 * Cut-out images (engine rule, Arbeitspaket 47): an image with transparent
 * parts, such as a phone cut out of its background, carries data-cutout. No
 * family frames it: no edge, no box behind it, no box shadow, no tone; the
 * rectangle its transparency hides would show. A family may give it a shadow
 * that follows its outline (filter: drop-shadow). Written once for the
 * placeholder key "cutout" and scoped to each component's key; every family
 * adds it to every component, like the rule for whole images.
 */

.c-question[data-component][data-section-id] picture[data-cutout],
.c-question[data-component][data-section-id] picture[data-cutout] > img {
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.c-question[data-component][data-section-id] picture[data-cutout] > img {
  filter: none;
  mix-blend-mode: normal;
}

.c-question[data-component][data-section-id] picture[data-cutout]::before,
.c-question[data-component][data-section-id] picture[data-cutout]::after {
  content: none;
}

/* A frame that holds nothing but the cut-out draws no line or shadow around it either. */
.c-question[data-component][data-section-id] :has(> picture[data-cutout]:only-child) {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* hero */
.c-hero {
  padding-block: var(--space-3xl) var(--space-2xl);
}

.c-hero .c-hero__inner {
  display: grid;
  gap: var(--space-s);
}

.c-hero .c-hero__title {
  max-inline-size: 22ch;
}

.c-hero h1.c-hero__title {
  font-size: var(--step-5);
}

.c-hero .c-hero__body {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  margin-block-start: var(--space-xs);
}

.c-hero .c-hero__lead {
  max-inline-size: 48ch;
}

.c-hero .c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Figures below the text: the value large, its label below. */
.c-hero .c-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14ch, 100%), 1fr));
  gap: var(--space-m) var(--space-xl);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: var(--border-width) solid var(--color-line);
}

.c-hero .c-hero__stat {
  display: grid;
  align-content: start;
  gap: var(--space-3xs);
}

.c-hero .c-hero__stat-value {
  order: -1;
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-heading);
  font-variant-numeric: lining-nums tabular-nums;
}

.c-hero .c-hero__stat-label {
  font-size: var(--step--1);
  color: var(--color-muted);
}

@container (width < 30rem) {
  .c-hero h1.c-hero__title {
    font-size: var(--step-4);
  }
}

.c-hero .c-hero__image img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
}

@container (width >= 52rem) {
  .c-hero .c-hero__inner:has(.c-hero__image) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-2xl);
    align-items: center;
  }

  .c-hero .c-hero__inner:has(.c-hero__image) > :not(.c-hero__image) {
    grid-column: 1;
  }

  .c-hero .c-hero__image {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

}
@layer base {
picture.m-7da92049093f { --image-ratio: 1; --image-whole-inline: calc(var(--image-whole-block) * 1); }
.m-beb5d6b303c6 { object-position: 50% 50%; --image-tone: url(#tone-m-beb5d6b303c6); }
picture.m-cb09a7c74be5 { --image-ratio: 0.4914; --image-whole-inline: calc(var(--image-whole-block) * 0.4914); }
picture.m-c05bde98b51e { --image-ratio: 1.5596; --image-whole-inline: calc(var(--image-whole-block) * 1.5596); }
picture.m-fb803c6c71f0 { --image-ratio: 0.4914; --image-whole-inline: calc(var(--image-whole-block) * 0.4914); }
picture.m-daf3ac98bd7b { --image-ratio: 0.4914; --image-whole-inline: calc(var(--image-whole-block) * 0.4914); }
picture.m-c466a7cb544f { --image-ratio: 0.4914; --image-whole-inline: calc(var(--image-whole-block) * 0.4914); }
picture.m-dc1359a85938 { --image-ratio: 0.4914; --image-whole-inline: calc(var(--image-whole-block) * 0.4914); }
picture.m-13e65b9ddace { --image-ratio: 1.44; --image-whole-inline: calc(var(--image-whole-block) * 1.44); }
picture.m-a5dd56b9bd0e { --image-ratio: 1.6426; --image-whole-inline: calc(var(--image-whole-block) * 1.6426); }
picture.m-babb715710e9 { --image-ratio: 1.44; --image-whole-inline: calc(var(--image-whole-block) * 1.44); }
picture.m-f260e5348602 { --image-ratio: 1.7976; --image-whole-inline: calc(var(--image-whole-block) * 1.7976); }
picture.m-61f5995546a7 { --image-ratio: 1.5596; --image-whole-inline: calc(var(--image-whole-block) * 1.5596); }
picture.m-5f5bc4afbdb6 { --image-ratio: 1.44; --image-whole-inline: calc(var(--image-whole-block) * 1.44); }
picture.m-2deffab8881a { --image-ratio: 1.44; --image-whole-inline: calc(var(--image-whole-block) * 1.44); }
.m-010768bd8f42 { object-position: 45% 25%; --image-tone: url(#tone-m-010768bd8f42); }
.m-3caddb6bdf53 { object-position: 50% 50%; --image-tone: url(#tone-m-3caddb6bdf53); }
.m-48ba337f1111 { object-position: 35% 23%; --image-tone: url(#tone-m-48ba337f1111); }
}