/* /leistungen — the services hub. Built on the homepage's vocabulary: the
   shared photographic opener, service names at display size as rows rather
   than cards, and a dark band in the middle so the page is not one continuous
   cream field. */

/* ---------- The four services ---------- */

.wr-work-list {
  padding-block: clamp(var(--space-8), 12vh, 8rem);
}

.wr-work-list__list {
  margin-block-start: var(--space-6);
}

/* Scroll target for the four retired URLs: without this the sticky header
   covers the heading a redirect has just landed on. */
/* .wr-row carries the rule and the padding; these four rows want a little
   less of it, and they need a scroll target because static/.htaccess sends the
   retired /wartung, /reparatur, /rueckbau and /handel here by anchor. */
.wr-work-item {
  scroll-margin-block-start: 6rem;
  padding-block: clamp(var(--space-5), 3.5vh, var(--space-7));
}

.wr-work-item__title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.75rem);
  font-weight: var(--weight-semibold);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.wr-work-item__line {
  margin-block-start: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

/* The two-column grid comes from .wr-row, which the markup also carries. Only
   the margin the shared row does not know about is set here. */
@media (min-width: 48rem) {
  .wr-work-item__line {
    margin-block-start: 0;
  }
}

/* ---------- The three in-house areas ---------- */

/* The shared .wr-label sets the type; this adds only the space under it that
   the other uses of that label do not want. */
.wr-areas__heading {
  margin-block-end: var(--space-7);
}

.wr-areas {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(var(--space-9), 15vh, 10rem);
  background: var(--color-invert-bg);
  color: var(--color-invert-ink);
}

/* Scroll target for the retired URLs: without this the sticky header covers
   the heading a redirect just landed on. */
.wr-area {
  scroll-margin-block-start: 6rem;
}

.wr-area + .wr-area {
  margin-block-start: clamp(var(--space-8), 9vh, var(--space-9));
  padding-block-start: clamp(var(--space-7), 6vh, var(--space-8));
  border-block-start: 1px solid rgb(255 255 255 / 0.14);
}

.wr-area__title {
  /* Capped where the longest heading still fits the intro column below.
     "Sicherheitsprüfung" is eighteen characters with no break opportunity, and
     a compound that does not fit does not wrap -- it breaks mid-word and
     orphans a letter. Size and column width are one decision, not two. */
  font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.wr-area__line {
  margin-block-start: var(--space-4);
  max-inline-size: 34ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-invert-ink-body);
}

/* Plain ruled lines, not chips: sixteen bordered pills is a shape, not a list,
   and the reader is scanning for one word. */
.wr-area__list {
  margin-block-start: var(--space-6);
}

.wr-area__entry {
  padding-block: var(--space-3);
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--text-sm);
  color: var(--color-invert-ink-body);
}

@media (min-width: 48rem) {
  .wr-area {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: clamp(var(--space-6), 5vw, var(--space-9));
    align-items: start;
  }

  .wr-area__list {
    margin-block-start: 0;
    /* Two columns so sixteen entries read as a short list rather than a
       column the length of the viewport. */
    columns: 2;
    column-gap: var(--space-7);
  }

  .wr-area__entry {
    break-inside: avoid;
  }
}