/*
 * 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: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-ext-standard-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: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-standard-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: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-ext-standard-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: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-standard-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: "Source Serif 4 Fallback";
  src: local('Georgia');
  ascent-override: 96.4195%;
  descent-override: 31.1781%;
  size-adjust: 107.4471%;
}
:root {
  --font-body: "Public Sans", "Public Sans Fallback", Arial, sans-serif;
  --font-heading: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --font-accent: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --weight-body: 400;
  --weight-body-strong: 600;
  --weight-heading: 600;
  --weight-heading-strong: 700;
  --weight-accent: 600;
  --weight-accent-strong: 700;
  --step--2: clamp(0.6485rem, 0.7098rem + -0.0681vw, 0.6944rem);
  --step--1: clamp(0.8301rem, 0.8344rem + -0.0048vw, 0.8333rem);
  --step-0: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1467rem + 0.237vw, 1.36rem);
  --step-2: clamp(1.44rem, 1.3397rem + 0.4456vw, 1.7408rem);
  --step-3: clamp(1.728rem, 1.5613rem + 0.7411vw, 2.2282rem);
  --step-4: clamp(2.0736rem, 1.8141rem + 1.1534vw, 2.8521rem);
  --step-5: clamp(2.4883rem, 2.1009rem + 1.7221vw, 3.6507rem);
  --step-6: clamp(2.986rem, 2.4237rem + 2.4992vw, 4.6729rem);
  --leading-body: 1.6;
  --leading-heading: 1.1;
  --tracking-heading: -0.015em;
  --case-heading: none;
  --eyebrow-font: var(--font-body);
  --eyebrow-case: uppercase;
  --eyebrow-tracking: 0.1em;
  --measure: 66ch;
  --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(1.25rem, 0.6667rem + 2.5926vw, 3rem);
  --radius-s: 0.125rem;
  --radius-m: 0.25rem;
  --radius-l: 0.375rem;
  --radius-round: 999rem;
  --border-width: 0.0625rem;
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 600ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
:root,
[data-scheme="base"] {
  color-scheme: light;
  --color-surface: #ffffff;
  --color-raised: #f6f6f6;
  --color-ink: #161a21;
  --color-muted: #616368;
  --color-heading: #161a21;
  --color-accent: #1f3a66;
  --color-on-accent: #ffffff;
  --color-line: #e1e1e2;
  --shadow-s: 0 0.0625rem 0.125rem 0rem color-mix(in oklab, #161a21 5%, transparent);
  --shadow-m: 0 0.25rem 0.75rem -0.25rem color-mix(in oklab, #161a21 8%, transparent);
  --shadow-l: 0 0.75rem 2rem -0.5rem color-mix(in oklab, #161a21 12%, transparent);
}
[data-scheme="soft"] {
  color-scheme: light;
  --color-surface: #e8ebee;
  --color-raised: #ffffff;
  --color-ink: #161a21;
  --color-muted: #55595f;
  --color-heading: #161a21;
  --color-accent: #1f3a66;
  --color-on-accent: #ffffff;
  --color-line: #cbced1;
  --shadow-s: 0 0.0625rem 0.125rem 0rem color-mix(in oklab, #161a21 5%, transparent);
  --shadow-m: 0 0.25rem 0.75rem -0.25rem color-mix(in oklab, #161a21 8%, transparent);
  --shadow-l: 0 0.75rem 2rem -0.5rem color-mix(in oklab, #161a21 12%, transparent);
}
[data-scheme="accent"] {
  color-scheme: dark;
  --color-surface: #1f3a66;
  --color-raised: #2c466f;
  --color-ink: #ffffff;
  --color-muted: #e4e7ed;
  --color-heading: #ffffff;
  --color-accent: #ffffff;
  --color-on-accent: #1f3a66;
  --color-line: #576b8c;
  --shadow-s: 0 0.0625rem 0.125rem 0rem color-mix(in oklab, #ffffff 13%, transparent);
  --shadow-m: 0 0.25rem 0.75rem -0.25rem color-mix(in oklab, #ffffff 20%, transparent);
  --shadow-l: 0 0.75rem 2rem -0.5rem color-mix(in oklab, #ffffff 30%, transparent);
}
[data-scheme="inverse"] {
  color-scheme: dark;
  --color-surface: #121a2b;
  --color-raised: #202838;
  --color-ink: #ecedee;
  --color-muted: #b8babf;
  --color-heading: #ffffff;
  --color-accent: #72839e;
  --color-on-accent: #121a2b;
  --color-line: #3d4351;
  --shadow-s: 0 0.0625rem 0.125rem 0rem color-mix(in oklab, #ecedee 13%, transparent);
  --shadow-m: 0 0.25rem 0.75rem -0.25rem color-mix(in oklab, #ecedee 20%, transparent);
  --shadow-l: 0 0.75rem 2rem -0.5rem color-mix(in oklab, #ecedee 30%, transparent);
}
}
@layer components {
/* opening */
/*
 * Eröffnung, Familie „klar“. The main picture (image) is a photo that carries
 * a feeling: a place, a person, the work. Screens or details (images) only lie
 * on it as overlays, never as the main motif. Four variants on the same fields:
 * type (default): the headline carries the page, a wide photo below it.
 * split: text beside a photo that runs off the page.
 * cover: the photo fills the opening, the text lies on a veil.
 * 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-3xl) 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: 16ch;
  font-size: var(--step-5);
  line-height: 1.02;
  text-wrap: balance;
}

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

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

.c-opening .c-opening__button,
.c-opening .c-opening__quiet {
  padding: var(--space-s) var(--space-l);
}

.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%;
  overflow: clip;
  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, and nothing needs a frame around it.
 */
.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);
  overflow: clip;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
}

.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));
  }
}

.c-opening .c-opening__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14ch, 100%), 1fr));
  gap: var(--space-m) var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--border-width) solid var(--color-line);
}

.c-opening .c-opening__stat {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
}

.c-opening .c-opening__stat-value {
  order: -1;
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.c-opening .c-opening__stat-label {
  max-inline-size: 24ch;
  font-size: var(--step--1);
  color: var(--color-muted);
}

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

/* type: 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: 18ch;
}

.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;
  border-radius: var(--radius-l);
}

.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'] {
  padding-block: var(--space-2xl);
}

.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;
}

.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;
    border-start-start-radius: var(--radius-l);
    border-end-start-radius: var(--radius-l);
  }

  .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%;
}

.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;
}

/* 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, large enough to read as the
 * product: one alone, or two overlapping, the second in front and lower, the
 * first peeking out to its left. 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, so none is cut off. The
 * text stays at the foot of the opening; its inner box reserves the height of
 * the group below it as bottom padding (a container query cannot style the
 * opening itself), with some photo above the text so its subject stays in
 * view, and the group stands at the bottom of the media, which covers the
 * whole opening. The control counts from 56rem.
 */
@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));
  }
}

.c-opening[data-variant='cover'] .c-opening__lead {
  color: var(--color-ink);
}

/*
 * The eyebrow is small text where the veil is thinnest: a light accent (such
 * as Heynote's cyan) is drawn a little towards the heading so it holds there.
 */
.c-opening[data-variant='cover'] .c-opening__eyebrow {
  color: color-mix(in oklab, var(--color-accent) 70%, var(--color-heading));
}

@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 (the
   * inner box keeps the opening at least 46cqi high, so even the large control
   * leaves the upper 55% free). 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;
}

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

.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);
  overflow: clip;
  border-radius: var(--radius-l);
  background-color: var(--color-raised);
}

.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));
  background-color: var(--color-surface);
  object-fit: contain;
}

.c-opening[data-variant='stage'] .c-opening__stats {
  justify-items: center;
  text-align: center;
  border-block-start: 0;
}

@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 {
    border-radius: 0 var(--radius-l) var(--radius-l) 0;
  }

  .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' floats the screens with soft
 * corners and a shadow (as before), '2' sets them flat on the photo, with a
 * fine line instead of the shadow and no card on the stage.
 */
.c-opening[data-overlay-style='2'] .c-opening__overlay {
  box-shadow: none;
  outline: var(--border-width) solid color-mix(in oklab, var(--color-ink) 18%, transparent);
  outline-offset: 0;
}

.c-opening[data-variant='stage'][data-overlay-style='2'] .c-opening__overlay:nth-child(2) {
  padding: 0;
  background-color: transparent;
}

/* A cut-out stands free (engine rule); floating, its shadow follows its outline. */
.c-opening:not([data-overlay-style='2']) .c-opening__overlay[data-cutout] {
  filter: drop-shadow(0 0.6em 0.9em color-mix(in oklab, var(--color-ink) 24%, transparent));
}

/*
 * The mark of an image made by AI (engine, Arbeitspaket 49) on the screens of
 * the stage: the card of the second lies over the end of the first, so the
 * first carries its mark at the start, the second in its lower corner.
 */
.c-opening[data-variant='stage'] .c-opening__overlay:first-child:not(:last-child) > .ai-mark {
  inset-inline: max(var(--space-2xs), var(--radius-l) * 0.35) auto;
}

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

/* 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;
}

/*
 * A screen or graphic as the opening's own picture (data-fit='whole', set by
 * the engine) keeps its shape instead of the place's, centred, no taller than
 * the engine allows: below the text and beside it. In a band of the page's
 * width a phone's screen stood lost; running off the page beside the text it
 * grew past the window. On the stage a screen alone stands the same way.
 */
.c-opening:not([data-variant='cover'])
  .c-opening__media:has(> .c-opening__photo[data-fit='whole']) {
  margin-inline: 0;
}

.c-opening:not([data-variant='cover']) .c-opening__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;
}

.c-opening[data-variant='stage'] .c-opening__overlay[data-fit='whole'] {
  inline-size: min(100%, var(--image-whole-inline));
  aspect-ratio: var(--image-ratio);
}

.c-opening[data-variant='stage'] .c-opening__overlay[data-fit='whole']:only-child {
  justify-self: center;
}

@container (min-width: 56rem) {
  .c-opening[data-variant='split'] .c-opening__media:has(> .c-opening__photo[data-fit='whole']) {
    align-self: 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-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;
}

/*
 * Photo style '2' of the family „klar“ (Arbeitspaket 47): the site's photos
 * in black and white; '1', the family's own look, keeps their colors.
 * Screenshots, graphics and cut-outs keep theirs always. Written once for the
 * placeholder key "klar" and scoped to each component's key.
 */

.c-opening[data-photo-style='2'] picture:not([data-fit='whole'], [data-cutout]) > img {
  /* A dark or flat photo is repaired first (--image-tone, Arbeitspaket 48). */
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.06);
}

/* story */
/*
 * Erzählung, Familie „klar“. Running text that tells: how it came to be, what
 * changes, why it matters. The items are the turns of the story, short.
 * Three variants on the same fields:
 * picture (default): a tall photo beside the text, the turns as notes below it.
 * statement: the heading as a large statement across the width, the text below
 *   it to the right, the photo as a panorama at the end.
 * contrast: the turns become a before and after (or three stages), the last one
 *   set off 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-muted);
}

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

.c-story .c-story__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-l);
  object-fit: cover;
}

.c-story .c-story__turns {
  display: grid;
  gap: var(--space-m);
}

.c-story .c-story__turn {
  display: grid;
  gap: var(--space-3xs);
  padding-block-start: var(--space-s);
  border-block-start: calc(var(--border-width) * 2) solid var(--color-line);
}

.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);
}

/* picture: 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(18ch, 100%), 1fr));
    column-gap: var(--space-l);
  }
}

@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-xl);
  }

  /* 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;
}

.c-story[data-variant='statement'] .c-story__turn {
  border-block-start-width: var(--border-width);
}

@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__turns {
  counter-reset: c-story-turn;
  gap: var(--space-2xs);
}

.c-story[data-variant='contrast'] .c-story__turn {
  position: relative;
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-l) var(--space-l);
  border: 0;
  border-radius: var(--radius-m);
  background-color: var(--color-raised);
}

.c-story[data-variant='contrast'] .c-story__turn-title {
  font-family: var(--eyebrow-font);
  font-size: var(--step--1);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-case);
  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-ink);
}

.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) {
  background-color: var(--color-accent);
}

.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. */
.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(-1 * var(--space-m));
  display: grid;
  place-items: center;
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
  border-radius: var(--radius-round);
  background-color: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-s);
  rotate: 90deg;
}

@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);
    gap: var(--space-xs);
  }

  .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(-1 * var(--space-m) - var(--space-3xs));
    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;
}

@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);
    column-gap: var(--space-l);
  }
}

/*
 * 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;
}

/*
 * Photo style '2' of the family „klar“ (Arbeitspaket 47): the site's photos
 * in black and white; '1', the family's own look, keeps their colors.
 * Screenshots, graphics and cut-outs keep theirs always. Written once for the
 * placeholder key "klar" and scoped to each component's key.
 */

.c-story[data-photo-style='2'] picture:not([data-fit='whole'], [data-cutout]) > img {
  /* A dark or flat photo is repaired first (--image-tone, Arbeitspaket 48). */
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.06);
}

/* services */
/*
 * Leistungen, Familie „klar“. What the business offers, each with a short
 * text; an icon where it helps, otherwise a number. Three variants on the
 * same fields:
 * grid (default): the services in columns under a rule, the photo as a band
 *   between heading and services; pictures of single services stand above them.
 * list: heading and photo stay on the left, the services run down a list with
 *   icons on the right.
 * points: a large photo runs off the page on the left, the services stand
 *   beside it as short points.
 */

.c-services {
  counter-reset: c-services-item;
}

.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-muted);
}

.c-services .c-services__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-l);
  object-fit: cover;
}

.c-services .c-services__items {
  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);
}

.c-services .c-services__item-photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.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-heading);
  font-weight: var(--weight-heading-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

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

.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);
}

.c-services .c-services__button {
  padding: var(--space-s) var(--space-l);
}

/* grid: the services in columns under a rule. */

.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__item {
  padding-block-start: var(--space-m);
  border-block-start: calc(var(--border-width) * 2) solid var(--color-heading);
}

.c-services:not([data-variant]) .c-services__item:has(.c-services__item-photo) {
  padding-block-start: 0;
  border-block-start: 0;
}

.c-services:not([data-variant]) .c-services__marker:empty::before {
  font-size: var(--step-0);
}

@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,
  .c-services:not([data-variant]) .c-services__title {
    grid-column: 1;
  }

  .c-services:not([data-variant]) .c-services__lead {
    grid-column: 2;
    grid-row: 1 / span 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));
    row-gap: var(--space-2xl);
  }
}

/*
 * 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 a list with icons. */

.c-services[data-variant='list'] .c-services__items {
  gap: 0;
}

.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-start: var(--border-width) solid var(--color-line);
}

.c-services[data-variant='list'] .c-services__item:last-child {
  border-block-end: var(--border-width) solid var(--color-line);
}

.c-services[data-variant='list'] .c-services__marker {
  justify-content: center;
  inline-size: 2.75em;
  block-size: 2.75em;
  border-radius: var(--radius-round);
  background-color: color-mix(
    in oklab,
    var(--color-mark, var(--color-accent)) 12%,
    var(--color-surface)
  );
}

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

.c-services[data-variant='list'] .c-services__marker:empty::before {
  font-size: var(--step--1);
}

/* 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;
  border-radius: var(--radius-s);
}

.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));
}

.c-services[data-variant='points'] .c-services__photo {
  border-radius: 0;
}

.c-services[data-variant='points'] .c-services__items {
  gap: var(--space-l);
}

.c-services[data-variant='points'] .c-services__item {
  grid-template-columns: 2.5ch minmax(0, 1fr);
  column-gap: var(--space-s);
  gap: var(--space-3xs) var(--space-s);
}

.c-services[data-variant='points'] .c-services__marker {
  align-self: start;
  padding-block-start: 0.2em;
}

.c-services[data-variant='points'] .c-services__marker:empty::before {
  font-size: var(--step--1);
}

.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;
  border-radius: var(--radius-s);
}

.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;
    border-start-end-radius: var(--radius-l);
    border-end-end-radius: var(--radius-l);
  }

  .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 {
    border-radius: var(--radius-l) 0 0 var(--radius-l);
  }

  .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;
}

@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 grid 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;
}

/*
 * Photo style '2' of the family „klar“ (Arbeitspaket 47): the site's photos
 * in black and white; '1', the family's own look, keeps their colors.
 * Screenshots, graphics and cut-outs keep theirs always. Written once for the
 * placeholder key "klar" and scoped to each component's key.
 */

.c-services[data-photo-style='2'] picture:not([data-fit='whole'], [data-cutout]) > img {
  /* A dark or flat photo is repaired first (--image-tone, Arbeitspaket 48). */
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.06);
}

/* faq */
/*
 * Fragen, Familie „klar“. The questions a reader has before the next step,
 * answered in a few sentences. Two variants on the same fields:
 * accordion (default): heading on the left, the questions on the right; each
 *   opens without a script, one at a time.
 * open: every answer visible, 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-muted);
}

.c-faq .c-faq__actions {
  margin-block-start: var(--space-s);
}

.c-faq .c-faq__button {
  padding: var(--space-s) var(--space-l);
}

.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);
}

.c-faq .c-faq__answer {
  margin: 0;
  line-height: var(--leading-body);
  color: var(--color-muted);
}

/* accordion: the questions open one at a time. */

.c-faq:not([data-variant]) .c-faq__item {
  border-block-end: var(--border-width) solid var(--color-line);
}

.c-faq:not([data-variant]) .c-faq__item:first-child {
  border-block-start: var(--border-width) solid var(--color-line);
}

.c-faq:not([data-variant]) .c-faq__question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-m);
  align-items: center;
  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;
  inline-size: 2.25em;
  block-size: 2.25em;
  border-radius: var(--radius-round);
  background-color: var(--color-raised);
  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__item[open] .c-faq__toggle {
  rotate: 45deg;
  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-end: 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, in two columns. */

.c-faq[data-variant='open'] .c-faq__list {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  margin: 0;
}

.c-faq[data-variant='open'] .c-faq__item {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-block-start: var(--space-m);
  border-block-start: calc(var(--border-width) * 2) solid var(--color-heading);
}

@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,
  .c-faq[data-variant='open'] .c-faq__title {
    grid-column: 1;
  }

  .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: 1 / span 2;
  }

  .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;
}

@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;
}

/*
 * Photo style '2' of the family „klar“ (Arbeitspaket 47): the site's photos
 * in black and white; '1', the family's own look, keeps their colors.
 * Screenshots, graphics and cut-outs keep theirs always. Written once for the
 * placeholder key "klar" and scoped to each component's key.
 */

.c-faq[data-photo-style='2'] picture:not([data-fit='whole'], [data-cutout]) > img {
  /* A dark or flat photo is repaired first (--image-tone, Arbeitspaket 48). */
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.06);
}

/* process */
/*
 * Ablauf, Familie „klar“. Four variants on the same fields:
 * rail (default): the steps side by side on one line, numbered.
 * timeline: heading and picture stay put on the left, the steps run down a line on the right.
 * stairs: the steps rise from left to right, each a step higher.
 * chapters: each step a chapter with a large numeral, like the contents of a magazine.
 */

.c-process {
  counter-reset: c-process-step;
}

.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-muted);
}

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

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

.c-process .c-process__step {
  counter-increment: c-process-step;
  display: grid;
  align-content: start;
  gap: var(--space-s);
}

.c-process .c-process__marker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-mark, var(--color-accent));
}

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

.c-process .c-process__marker::after {
  content: '';
  flex: 1;
  block-size: calc(var(--border-width) * 2);
  background-color: var(--color-line);
}

.c-process .c-process__icon {
  inline-size: 1.1em;
  block-size: 1.1em;
}

.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;
}

.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;
}

/* rail */

@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,
  .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__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));
  }
}

@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);
    column-gap: var(--space-m);
  }
}

/* timeline */

.c-process[data-variant='timeline'] .c-process__steps {
  gap: 0;
}

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

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

.c-process[data-variant='timeline'] .c-process__step::before {
  content: '';
  position: absolute;
  inset-block: 3em 0;
  inset-inline-start: 1.375em;
  inline-size: calc(var(--border-width) * 2);
  background-color: var(--color-line);
}

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

.c-process[data-variant='timeline'] .c-process__marker {
  position: relative;
  justify-content: center;
  inline-size: 2.75em;
  block-size: 2.75em;
  border: calc(var(--border-width) * 2) solid var(--color-mark, var(--color-accent));
  border-radius: var(--radius-round);
  background-color: var(--color-surface);
}

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

.c-process[data-variant='timeline'] .c-process__marker::after,
.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: the steps rise from left to right, each a step higher and a shade deeper. */

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

.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__steps {
  gap: var(--space-3xs);
}

.c-process[data-variant='stairs'] .c-process__marker::before {
  font-size: var(--step-3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
}

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

.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,
  .c-process[data-variant='stairs'] .c-process__title {
    grid-column: 1;
  }

  .c-process[data-variant='stairs'] .c-process__lead {
    grid-column: 2;
    grid-row: 1 / span 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__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;
  }

  .c-process[data-variant='stairs'] .c-process__step {
    margin-inline-start: 0;
    padding-block-end: calc(var(--space-l) + var(--c-process-rise) * var(--space-l));
  }
}

/* chapters: each step a chapter with a large numeral, like the contents of a magazine. */

.c-process[data-variant='chapters'] .c-process__steps {
  gap: 0;
}

.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-start: var(--border-width) solid var(--color-line);
}

.c-process[data-variant='chapters'] .c-process__step:last-child {
  border-block-end: var(--border-width) solid var(--color-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-heading);
  line-height: 0.85;
  letter-spacing: var(--tracking-heading);
  color: color-mix(in oklab, var(--color-mark, var(--color-accent)) 70%, var(--color-surface));
}

.c-process[data-variant='chapters'] .c-process__marker::after,
.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;
}

/*
 * Photo style '2' of the family „klar“ (Arbeitspaket 47): the site's photos
 * in black and white; '1', the family's own look, keeps their colors.
 * Screenshots, graphics and cut-outs keep theirs always. Written once for the
 * placeholder key "klar" and scoped to each component's key.
 */

.c-process[data-photo-style='2'] picture:not([data-fit='whole'], [data-cutout]) > img {
  /* A dark or flat photo is repaired first (--image-tone, Arbeitspaket 48). */
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.06);
}

/* invite */
/*
 * Einladung, Familie „klar“. 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). Two variants on the same fields:
 * field (default): a full surface, a large heading, the ways as buttons; a
 *   photo beside it if there is one.
 * ways: the ways themselves very large, one line each, like a sign.
 */

.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-muted);
}

.c-invite .c-invite__photo {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-l);
  object-fit: cover;
}

.c-invite .c-invite__ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.c-invite .c-invite__way {
  padding: var(--space-m) var(--space-l);
  font-size: var(--step-1);
}

.c-invite .c-invite__arrow {
  transition: translate var(--duration-fast) var(--ease);
}

.c-invite .c-invite__way:hover .c-invite__arrow {
  translate: var(--space-3xs) 0;
}

.c-invite .c-invite__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
  gap: var(--space-m) var(--space-l);
  padding-block-start: var(--space-l);
  border-block-start: var(--border-width) solid var(--color-line);
}

.c-invite .c-invite__detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
}

.c-invite .c-invite__icon {
  translate: 0 0.15em;
  color: var(--color-accent);
}

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

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

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

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

/* field: 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 line 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;
}

.c-invite[data-variant='ways'] .c-invite__way {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-block-start: var(--border-width) solid var(--color-line);
  border-radius: 0;
  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;
}

.c-invite[data-variant='ways'] .c-invite__way:last-child {
  border-block-end: var(--border-width) solid var(--color-line);
}

.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 {
  overflow-wrap: anywhere;
}

.c-invite[data-variant='ways'] .c-invite__arrow {
  inline-size: 0.8em;
  block-size: 0.8em;
}

.c-invite[data-variant='ways'] .c-invite__details {
  border-block-start: 0;
  padding-block-start: 0;
}

@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;
  }
}

/* field, 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;
}

.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: center;
  text-align: 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;
}

/*
 * Photo style '2' of the family „klar“ (Arbeitspaket 47): the site's photos
 * in black and white; '1', the family's own look, keeps their colors.
 * Screenshots, graphics and cut-outs keep theirs always. Written once for the
 * placeholder key "klar" and scoped to each component's key.
 */

.c-invite[data-photo-style='2'] picture:not([data-fit='whole'], [data-cutout]) > img {
  /* A dark or flat photo is repaired first (--image-tone, Arbeitspaket 48). */
  filter: grayscale(1) var(--image-tone, contrast(1)) contrast(1.06);
}

/* site-header */
/*
 * Kopf „Leiste“, Familie „klar“: 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);
}

/* site-footer */
/*
 * Fuß „Spalten“, Familie „klar“: 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;
  }
}

/* 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-90d943a6b32b { --image-ratio: 1.8444; --image-whole-inline: calc(var(--image-whole-block) * 1.8444); }
picture.m-9380e6cde19b { --image-ratio: 3.5714; --image-whole-inline: calc(var(--image-whole-block) * 3.5714); }
picture.m-ece8b5ead11e { --image-ratio: 3.5714; --image-whole-inline: calc(var(--image-whole-block) * 3.5714); }
}