/* Block «section» — loaded only when the block is on the page. A group band with a
   curated background plus a spacing step. On dark backgrounds the semantic tokens
   are remapped (the same pattern as the contrast theme) → all child blocks follow
   automatically, without style=. */

.block-section { padding-block: var(--size-7); }
/* A query container like a column (columns.css, same ⚠️ about `position: fixed`):
   a band with a background has inline padding, and a child block measures what
   is left inside it. */
.section-inner { container-type: inline-size; }
.section-inner > .block:last-child { margin-bottom: 0; }

/* Background variants: padding only exists once there is a surface. `--bleed`
   is that inset, so a child that runs out to the ground's edge (the services
   scroller) stops at the band's, not a gutter inside or outside it. */
.sec--soft, .sec--tint, .sec--accent, .sec--dark { --bleed: var(--size-6); padding-inline: var(--bleed); }

.sec--soft { background: var(--surface); border-block: 1px solid var(--border); }
/* «Akzent hell»: a breath of the accent over the page ground — a light
 * ground, so the palette stays the light one (DarkVariantContrastTest measures
 * --ink, --muted and --accent-fg on it). */
.sec--tint { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }

/* «Zentriert»: the heads of the blocks in the band — heading, kicker, intro. */
.sec--center .section-inner > .block > :is(h1, h2, .lead, .faq-kicker) { text-align: center; margin-inline: auto; }

/* A dark ground remaps the whole palette: --ink / --muted / --border /
 * --surface carry the text and the boxes; --err-fg the error text a form puts
 * on the ground; --accent-fg carries everything that
 * is coloured to stand out — an icon, a checkmark, a list marker, a focus ring,
 * a hairline under a link. It is a token of its own precisely so it can be
 * remapped here: --accent itself must stay the light-ground value, because
 * .btn-primary paints its FILL with it and a white fill under white text is a
 * button nobody can see (site.css).
 *
 * Every pair is measured for every accent by `DarkVariantContrastTest`. Two values
 * that used to stand here and do not any more:
 *  - --border was --gray-9 = **1.32:1** — an edge that is in the markup and not
 *    on the screen. The hero had already replaced it with translucent white and
 *    the two disagreed; they do not now.
 *  - --accent-fg did not exist, so under the «Graphit» accent every icon and
 *    marker inside a dark section was --gray-9 on --gray-12, the same 1.32:1.
 *    Nothing looked broken: a colour that is too dark renders perfectly. */
.sec--accent, .sec--dark { color: var(--ink); }
.sec--accent {
    background: var(--accent-deep);
    --ink: #fff;
    --muted: color-mix(in srgb, #fff 78%, transparent);
    --border: color-mix(in srgb, #fff 30%, transparent);
    --surface: color-mix(in srgb, #fff 8%, transparent);
    --accent-fg: #fff;
    --err-fg: var(--red-1);
}
.sec--dark {
    background: var(--gray-12);
    --ink: #fff;
    --muted: var(--gray-5);
    --border: rgba(255, 255, 255, .55);
    --surface: var(--gray-11);
    --accent-fg: #fff;
    --err-fg: var(--red-1);
}
.sec--accent a, .sec--dark a { color: #fff; }

/* The children that read --accent as a FILL and put #fff on top. On a
 * dark ground that fill is the site's light-background accent — «Graphit» is
 * --gray-9, so a white counter circle at 1.32:1 against the band around it —
 * and the white text on it fares no better. Inverting them is the same answer
 * .btn-primary gets: a white plate with the ground's own colour on it, 20.42:1
 * both ways.
 *
 * ⚠️ These name children, which the convention above forbids, and they are the
 * enumerated exception: --accent-fg covers every element that COLOURS with the
 * accent, and the fill role cannot ride on it — the two need opposite values on
 * the same background. `SectionDarkPaletteTest` counts them, so a fourth block
 * painting with `background: var(--accent)` fails there instead of shipping an
 * unreadable badge. */
.sec--accent .btn-primary, .sec--dark .btn-primary,
.sec--accent .pricing-badge, .sec--dark .pricing-badge,
.sec--accent .block-steps .steps-item::before, .sec--dark .block-steps .steps-item::before,
.sec--accent .block-video .video-play svg, .sec--dark .block-video .video-play svg,
.sec--accent .block-service-area .area-chips li.is-home, .sec--dark .block-service-area .area-chips li.is-home {
    background: #fff;
    color: var(--gray-12);
    border-color: #fff;
}
.sec--accent .btn-primary:hover, .sec--dark .btn-primary:hover,
.sec--accent .block-video .video-play:hover svg, .sec--dark .block-video .video-play:hover svg,
.sec--accent .block-video .video-play:focus-visible svg, .sec--dark .block-video .video-play:focus-visible svg {
    background: var(--gray-4);
    color: var(--gray-12);
}

/* Abstands-Stufen */
.sec-sp--compact { padding-block: var(--size-3); }
.sec-sp--roomy   { padding-block: var(--size-11); }