/* Block «Leistungen» — what the shared .cards/.card (site.css) does not carry:
   the card image, the whole card as its link, and the sideways scroller for a
   narrow container (services.js adds its dots and arrows). */
.block-services .services-intro { margin: 0 0 var(--size-6); color: var(--muted); max-width: 48rem; }

/* The image runs to the card's edges; the card keeps its padding for the text. */
.block-services .card.has-media { display: flex; flex-direction: column; }
.block-services .card-media { margin: calc(-1 * var(--size-4)) calc(-1 * var(--size-4)) var(--size-4); overflow: hidden; }
.block-services .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }

/* Whole card as the link: the one link's hit area is stretched over the card.
 * Still one tab stop and one name («Mehr erfahren: …»); the focus ring moves to
 * the card so it frames what answers the click. */
.block-services.services--linked .card-link::after { content: ""; position: absolute; inset: 0; }
.block-services.services--linked .card:has(.card-link):hover { border-color: var(--accent-fg); }
.block-services.services--linked .card:has(.card-link:focus-visible) { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
.block-services.services--linked .card-link:focus-visible { outline: none; text-decoration: underline; }
.block-services.services--linked .card.has-media .card-link { margin-top: auto; padding-top: .7rem; }

/* Sideways on a narrow container: a snap row where the next card peeks in. The
 * controls exist only while the row really overflows (services.js).
 * The row runs out to the edge of the ground it stands on and pads back in, so a
 * card slides off at that edge instead of being cut short inside it. How far is
 * `--bleed`: the page's gutter at the top level, a band's own inset where a
 * section pads its content (section.css, a theme's band) — a fixed gutter
 * stopped 8px inside a coloured section and 16px short of «Klar»'s edge-to-edge
 * band. The top padding keeps a card's focus ring inside the row, which clips
 * both axes once it scrolls one. */
@container (max-width: 760px) {
    .block-services.services--scroll .cards {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--bleed, var(--gutter)));
        padding: var(--size-1) var(--bleed, var(--gutter)) var(--size-2);
        scroll-padding-inline: var(--bleed, var(--gutter)); scrollbar-width: none; }
    .block-services.services--scroll .cards::-webkit-scrollbar { display: none; }
    .block-services.services--scroll .cards > * { scroll-snap-align: start; }
    /* The row reaches the screen's edges: its own ring goes inside them. */
    .block-services.services--scroll .cards:focus-visible { outline-offset: -3px; }
}
@media (prefers-reduced-motion: no-preference) {
    .block-services.services--scroll .cards { scroll-behavior: smooth; }
}
.block-services .cards:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 3px; }

.block-services .cs-controls { display: flex; align-items: center; justify-content: space-between;
    gap: var(--size-4); margin-top: var(--size-3); }
.block-services .cs-controls[hidden] { display: none; }
.block-services .cs-dots { display: flex; align-items: center; }
/* An 8px dot inside a 24px hit area (WCAG 2.5.8). */
.block-services .cs-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: pointer; }
.block-services .cs-dot::before { content: ""; width: 8px; height: 8px; background: var(--border); }
.block-services .cs-dot.is-active::before { background: var(--accent-fg); transform: scale(1.35); }
.block-services .cs-nav { display: flex; gap: var(--size-2); }
.block-services .cs-arrow { display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    color: var(--accent-fg); background: transparent; border: 1px solid var(--border); }
.block-services .cs-arrow svg { width: 20px; height: 20px; }
.block-services .cs-arrow:hover:not(:disabled) { border-color: var(--accent-fg); }
.block-services .cs-arrow:disabled { opacity: .35; cursor: default; }